From 60a9413a1f438b424254ec0d88f74745b9a60bf4 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Fri, 19 Jan 2024 14:59:29 +1100
Subject: [PATCH] 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 <saxonafletcher@gmail.com>
---
 .../src/components/block-list/content.scss    | 27 ++++++++++++++++++-
 .../src/components/editor-canvas/index.js     |  3 ++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index d907ffd81d9dd0..8cd75f6855b626 100644
--- 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
index e5e663f821a649..d6084ef922805e 100644
--- 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={