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