Only show outlines when hovering over the page editor or locked pattern

WordPress · Jan 18, 2024 · 7a0018c · 7a0018c
1 parent e2dbe63
commit 7a0018c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -303,22 +303,28 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.edit-site-editor-canvas__block-list:hover .block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
-	&::after {
-		content: "";
-		border-style: dotted;
-		position: absolute;
-		pointer-events: none;
-		top: $border-width;
-		left: $border-width;
-		right: $border-width;
-		bottom: $border-width;
-		border: 1px dotted var(--wp-admin-theme-color);
-		border-radius: $radius-block-ui - $border-width;
-	}
+// Indicate which blocks are editable within a page editor or a content-locked
+// pattern. Only show when user hovers over the page editor or pattern.
+.is-template-locked:hover,
+.block-editor-block-list__block:hover {
+	.block-editor-block-list__block.is-editing-disabled > .block-editor-block-list__block:not(.is-editing-disabled):not(.is-selected):not(.has-child-selected) {
+		&::after {
+			content: "";
+			border-style: dotted;
+			position: absolute;
+			pointer-events: none;
+			top: $border-width;
+			left: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			border: 1px dotted var(--wp-admin-theme-color);
+			border-radius: $radius-block-ui - $border-width;
+		}
 
-	&.is-hovered::after {
-		background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+		&.is-hovered::after {
+			background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+			border: none;
+		}
 	}
 }
 

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -364,7 +364,8 @@ function EditorCanvas( {
 						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only'
 							? 'wp-site-blocks'
-							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
+							: `${ blockListLayoutClass } wp-block-post-content`, // Ensure root level blocks receive default/flow blockGap styling rules.
+						renderingMode !== 'all' && 'is-' + renderingMode
 					) }
 					layout={ blockListLayout }
 					dropZoneElement={