From 4496ec8e4093ad7acdc620fe01d55c2b7508c749 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 13 Dec 2019 11:58:40 +0100
Subject: [PATCH] Multi-select: Polish further, try new style. (#19094)

This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.
---
 .../src/components/block-list/style.scss      | 42 +++++++------------
 1 file changed, 15 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 270bb10a285f4..8d903e888fef7 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -177,37 +177,25 @@
 
 .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.
+	// The primary indicator of selection in text is the native selection marker.
+	// When selecting multiple blocks, we provide an additional selection indicator.
 	.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;
+			border-radius: 1px;
 
-		> .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;
-				}
-			}
+			// Windows High Contrast mode will show this outline.
+			outline: 2px solid transparent;
+		}
+		.block-editor-block-toolbar {
+			left: $border-width + $border-width + $block-padding;
+		}
+		.block-editor-block-mover {
+			margin-left: $block-padding;
 		}
-	}
-
-	// 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 {
+		// Hide the native selection marker once we select multiple blocks.
 		::selection {
 			background: transparent;
 		}