diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 9aaccabf47320..3157eaaea9faa 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -157,8 +157,39 @@ } } - // Selected style. - &.is-multi-selected { + // Hover style. + &.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before { + box-shadow: -$block-left-border-width 0 0 0 $dark-opacity-light-500; + + .is-dark-theme & { + box-shadow: -$block-left-border-width 0 0 0 $light-opacity-light-400; + } + } + + // Spotlight mode. + &.is-focus-mode:not(.is-multi-selected) { + opacity: 0.5; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + + &:not(.is-focused) .block-editor-block-list__block, + &.is-focused { + opacity: 1; + } + } +} + + +/** + * Cross-Block Selection + */ + +.block-editor-block-list__layout { + + // The primary indicator of selection is the native selection marker. + // To indicate multiple blocks, we provide an additional selection indicator. + .block-editor-block-list__block.is-multi-selected { + > .block-editor-block-list__block-edit::before { border-left-color: $dark-opacity-light-800; box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500; @@ -179,23 +210,19 @@ } } - // Spotlight mode. - &.is-focus-mode:not(.is-multi-selected) { - opacity: 0.5; - transition: opacity 0.1s linear; - @include reduce-motion("transition"); + // The additional marker, we limit only to top level blocks. + .block-editor-block-list__block.is-multi-selected .block-editor-block-list__block.is-multi-selected > .block-editor-block-list__block-edit::before { + box-shadow: none; + } - &:not(.is-focused) .block-editor-block-list__block, - &.is-focused { - opacity: 1; + // Provide exceptions for placeholders. + .components-placeholder { + ::selection { + background: transparent; } } } -/** - * Cross-block selection - */ - /** * Block styles and alignments