From f2c5c23843d415197fedb4b60dad05bdced1164b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Dec 2019 12:18:51 +0100 Subject: [PATCH 1/2] Refine multiselect. This restores the native selection in addition to the borders. Additionally, it changes the cross-block selection border to also have a white outline. --- packages/base-styles/_colors.scss | 3 +++ .../block-editor/src/components/block-list/style.scss | 10 ++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index cafa84fba44cac..7c0be5922a924f 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -84,6 +84,9 @@ $blue-medium-100: #e5f5fa; $blue-medium-highlight: #b3e7fe; $blue-medium-focus: #007cba; +$blue-blueberry: #5f7efd; + + // Alert colors. $alert-yellow: #f0b849; $alert-red: #d94f4f; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 8d903e888fef73..426d8687a50663 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -182,7 +182,7 @@ .block-editor-block-list__block.is-multi-selected { // Show selection borders around every non-nested block's actual footprint. > .block-editor-block-list__block-edit > [data-block] { - box-shadow: 0 0 0 2px #057cba; + box-shadow: 0 0 0 2px $blue-blueberry, 0 0 0 4px $white; border-radius: 1px; // Windows High Contrast mode will show this outline. @@ -195,9 +195,11 @@ margin-left: $block-padding; } - // Hide the native selection marker once we select multiple blocks. - ::selection { - background: transparent; + // Provide exceptions for placeholders. + .components-placeholder { + ::selection { + background: transparent; + } } } } From 7bb39bcb1f9a0dfed1de492bdbf1550654124a5b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Dec 2019 16:38:14 +0100 Subject: [PATCH 2/2] Refine colors, add dark theme exception. --- packages/base-styles/_colors.scss | 4 +--- packages/block-editor/src/components/block-list/style.scss | 7 ++++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index 7c0be5922a924f..2a8b07f79364cf 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -83,9 +83,7 @@ $blue-medium-200: #bfe7f3; $blue-medium-100: #e5f5fa; $blue-medium-highlight: #b3e7fe; $blue-medium-focus: #007cba; - -$blue-blueberry: #5f7efd; - +$blue-medium-focus-dark: #fff; // Alert colors. $alert-yellow: #f0b849; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 426d8687a50663..621ceeccd1ea84 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -182,11 +182,16 @@ .block-editor-block-list__block.is-multi-selected { // Show selection borders around every non-nested block's actual footprint. > .block-editor-block-list__block-edit > [data-block] { - box-shadow: 0 0 0 2px $blue-blueberry, 0 0 0 4px $white; + box-shadow: 0 0 0 2px $blue-medium-focus; border-radius: 1px; // Windows High Contrast mode will show this outline. outline: 2px solid transparent; + + // Show a lighter blue for dark themes. + .is-dark-theme & { + box-shadow: 0 0 0 2px $blue-medium-focus-dark; + } } .block-editor-block-toolbar { left: $border-width + $border-width + $block-padding;