From 1cfbeacb9004413ad87175e2faeecb51ff9ae08a Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 4 Dec 2019 15:16:55 +0100
Subject: [PATCH] Polish the new multi-select style (#18867)

* Limit additional selection marker to top level blocks.

Addresses https://github.com/WordPress/gutenberg/pull/16835#issuecomment-559908451.

* Provide exception for placeholderes.
---
 .../src/components/block-list/style.scss      | 55 ++++++++++++++-----
 1 file changed, 41 insertions(+), 14 deletions(-)

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