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