From 4d0b505ca01ae3f1dafccda05f792288d214b56a Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 12:19:12 +0100 Subject: [PATCH 1/2] Limit additional selection marker to top level blocks. Addresses https://github.com/WordPress/gutenberg/pull/16835#issuecomment-559908451. --- .../src/components/block-list/style.scss | 55 +++++++++++++------ 1 file changed, 39 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 9aaccabf47320f..198812d6a03e62 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -157,9 +157,43 @@ } } - // 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 { + // Todo: start by limiting it to not nest + // Then hide selection in placeholders and do something else + // Then make a mockup for multi block selection for the new UI — this includes an exception for contiguous paragraphs border-left-color: $dark-opacity-light-800; box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500; @@ -179,23 +213,12 @@ } } - // 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; - } + // 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; } } -/** - * Cross-block selection - */ - /** * Block styles and alignments From b6ff923d177e9090b4baf02ead201edafbf3b984 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 2 Dec 2019 12:25:51 +0100 Subject: [PATCH 2/2] Provide exception for placeholderes. --- .../block-editor/src/components/block-list/style.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 198812d6a03e62..3157eaaea9faa9 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -191,9 +191,6 @@ .block-editor-block-list__block.is-multi-selected { > .block-editor-block-list__block-edit::before { - // Todo: start by limiting it to not nest - // Then hide selection in placeholders and do something else - // Then make a mockup for multi block selection for the new UI — this includes an exception for contiguous paragraphs border-left-color: $dark-opacity-light-800; box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500; @@ -217,6 +214,13 @@ .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; } + + // Provide exceptions for placeholders. + .components-placeholder { + ::selection { + background: transparent; + } + } }