Outline editable blocks when in a pattern that has locked children (#…

…57991)

Use :has() to outline editable blocks that are within a pattern that has
locked children but are themselves not locked. For example a pattern
that has multiple paragraphs, not in a container, and some of those
paragraphs allows an override.

packages/block-editor/src/components/block-list/content.scss

@@ -303,27 +303,34 @@ _::-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.
+// Indicate which blocks are editable within a locked context.
+// 1. User must be hovering an editor with renderingMode = 'template-lock'; or...
 .is-template-locked:hover,
+// ...a container block.
 .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;
-		}
+	// 2. Look for locked blocks; or...
+	.block-editor-block-list__block.is-editing-disabled,
+	// ...container blocks that have locked children.
+	&:has(> .block-editor-block-list__block.is-editing-disabled) {
+		// 3. Highlight any unlocked children of that locked block.
+		& > .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;
+			&.is-hovered::after {
+				background: rgba(var(--wp-admin-theme-color--rgb), 0.1);
+				border: none;
+			}
 		}
 	}
 }