Outline editable blocks that are within a content-locked container (#…

…57901) * Outline editable blocks that are within a content-locked container Show an outline and pencil icon on blocks that are within a content-locked container (.is-editing-disabled). This allows users to more easily see which content can be modified when editing content-locked patterns, patterns with overrides, and pages. * Hide outline and pencil icon from previews * Make outlines look more like the mockup * remove icon * only show block outline when hovering * Only show outlines when hovering over the page editor or locked pattern * Remove unnecessary css * Remove unnecessary z-index --------- Co-authored-by: Saxon Fletcher <[email protected]>
WordPress · Jan 19, 2024 · 60a9413 · 60a9413
1 parent 653832d
commit 60a9413
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -26,7 +26,7 @@
 /* stylelint-disable */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
 _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
-	background-color: transparent; 
+	background-color: transparent;
 }
 /* stylelint-enable */
 
@@ -303,6 +303,31 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
+// 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);
+			border: none;
+		}
+	}
+}
+
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
 	opacity: 0.2;

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={