From 4b26914c94caba6369635570b62016d0c6154f4f Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Mon, 2 Dec 2019 12:19:12 +0100
Subject: [PATCH] Limit additional selection marker to top level blocks.

Addresses https://github.com/WordPress/gutenberg/pull/16835#issuecomment-559908451.
---
 .../src/components/block-list/style.scss      | 60 ++++++++++++-------
 1 file changed, 37 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 22a53cd34de81..453eebe95fa73 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -157,28 +157,6 @@
 		}
 	}
 
-	// Selected style.
-	&.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;
-				}
-			}
-		}
-	}
-
 	// 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;
@@ -201,10 +179,46 @@
 	}
 }
 
+
 /**
- * Cross-block selection
+ * 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;
+
+			.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;
+				}
+			}
+		}
+	}
+
+	// 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;
+	}
+}
+
 
 /**
  * Block styles and alignments