Try making the hover state of nested blocks more visible (#16820)

* Try using a solid border for the hover state of nested blocks. * Try using slightly lighter dashed borders. This allows for us to match the existing hover color on hover. * Add dark mode styles. * Expand hover styles to cover all children of a parent block. This ensures that they apply correctly in a 3+ level deep scenario.
WordPress · Aug 29, 2019 · 4198cfa · 4198cfa
1 parent 2a91a84
commit 4198cfa
Showing 1 changed file with 50 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -110,7 +110,7 @@
 			border-left: none;
 			box-shadow: none;
 			pointer-events: none;
-			transition: border-color 0.1s linear, box-shadow 0.1s linear;
+			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
 			@include reduce-motion("transition");
 
 			// Include a transparent outline for Windows High Contrast mode.
@@ -182,21 +182,64 @@
 	&.has-child-selected {
 
 		> .block-editor-block-list__block-edit::before {
-			border: $border-width dashed $dark-opacity-light-800;
+			border: $border-width dashed $dark-opacity-light-600;
+
+			.is-dark-theme & {
+				border-color: $light-opacity-light-500;
+			}
 		}
 
 		> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
 		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
 		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
-			border: $border-width dashed $dark-opacity-light-800;
+			border: $border-width dashed $dark-opacity-light-600;
+
+			.is-dark-theme & {
+				border-color: $light-opacity-light-500;
+			}
+		}
+
+		&.is-hovered > .block-editor-block-list__block-edit::before,
+		> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before {
+			border-style: solid;
+			border-color: $dark-opacity-light-500;
+			border-left-color: transparent;
+
+			.is-dark-theme & {
+				border-color: $light-opacity-light-400;
+				border-left-color: transparent;
+			}
 		}
 	}
 
 	// Add extra border to child blocks when they are selected.
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
-	&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
-		border: $border-width dashed $dark-opacity-light-800;
+	&.is-selected {
+
+		> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
+		> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) {
+
+			> .block-editor-block-list__block-edit::before {
+				border: $border-width dashed $dark-opacity-light-600;
+
+				.is-dark-theme & {
+					border-color: $light-opacity-light-500;
+				}
+			}
+
+			&.is-hovered > .block-editor-block-list__block-edit::before {
+				border-style: solid;
+				border-color: $dark-opacity-light-500;
+				border-left-color: transparent;
+
+				.is-dark-theme & {
+					border-color: $light-opacity-light-400;
+					border-left-color: transparent;
+				}
+			}
+		}
 	}
 }