Limit additional selection marker to top level blocks.

Addresses #16835 (comment).
WordPress · Dec 2, 2019 · 4b26914 · 4b26914
1 parent 0671aa6
commit 4b26914
Showing 1 changed file with 37 additions and 23 deletions.
diff --git 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