From 25337678e760bfc50eff441177f5836dc9c584af Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Thu, 12 Dec 2019 09:31:31 +0100
Subject: [PATCH] Multi-select: Polish further, move closer to previous
 selection style.

The new native selection style is much faster and an important step on the path to various writing-flow improvements. However until we can get closer to those improvements, in the mean time selecting multiple blocks is currently slightly less clear than it was prior to the native selection change.

In https://github.com/WordPress/gutenberg/pull/18867 I tried to mitigate this, and it includes some mockups for how to improve the style longer term, with more thoughts being discussed in #18667.

But until that gets hashed out more clearly, perhaps we should rewind the visual style slightly, to be closer to what was, while still keeping the technical benefits of the native selection PR. This PR keeps those changes, but tweaks the visual style.

What it does is remove the left border style, and re-paints a cross-block background. But this time with a color that is closer to the default selection color on Windows and MacOS. Specifically, both those defaults are eye-dropped and averaged to create a new color that looks at home on both.

It is possible users can customize this select color, meaning the color of the selection marker inside text will diverge from that of multi-block selections. But this is unfortunately not something we can address. But the averaged color feels like a pretty good interim step towards a selection model that is perhaps closer to that of Figma, painting borders around each block instead of re-coloring the background.
---
 .../src/components/block-list/style.scss      | 33 +++----------------
 1 file changed, 5 insertions(+), 28 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 270bb10a285f4b..e7c057ac71537a 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -176,38 +176,15 @@
  */
 
 .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.
+	// Inside a text block, the primary indicator of selection is the native selection marker.
+	// To indicate multiple blocks, we paint a similar background.
 	.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;
-
-			.is-dark-theme & {
-				border-left-color: $light-opacity-light-800;
-				box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
-			}
-
-			// Switch to outset borders on larger screens.
-			@include break-small() {
-				box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
-
-				.is-dark-theme & {
-					box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
-				}
-			}
+			background: rgba(#157af1, 0.4); // This color is averaged between Windows and MacOS default selection colors to feel "at home" on both.
+			mix-blend-mode: multiply;
 		}
-	}
-
-	// 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;
-	}
 
-	// Provide exceptions for placeholders.
-	.components-placeholder {
+		// When multiple blocks are selected, hide the native selection marker.
 		::selection {
 			background: transparent;
 		}