Fix nav placeholder colors and height. (#31875)

WordPress · May 17, 2021 · 7fcd57c · 7fcd57c
1 parent 269f31a
commit 7fcd57c
Showing 1 changed file with 19 additions and 8 deletions.
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -181,6 +181,13 @@ $color-control-label-height: 20px;
 	.components-placeholder__fieldset .components-button {
 		margin-bottom: 0;
 	}
+
+	// For the placeholder indicators to colorize correctly, colors need to be inherited unless selected.
+	color: inherit;
+
+	.is-selected & {
+		color: $gray-900;
+	}
 }
 
 // Spinner.
@@ -225,20 +232,24 @@ $color-control-label-height: 20px;
 		opacity: 0.3;
 	}
 
-	// Don't show the preview boxes for an empty nav block.
-	// Needs specificity to work for the navigation screen.
-	.wp-block-navigation.is-selected &.wp-block-navigation-placeholder__preview {
-		display: none;
-	}
-
-	// ... but be present in larger contexts to size it correctly.
-	.wp-block-navigation.is-selected .is-large & {
+	// Don't show the preview boxes for an empty nav block,
+	// but be technically present to help size the empty state.
+	.wp-block-navigation.is-selected & {
 		display: flex;
 		opacity: 0;
 		width: 0;
 		overflow: hidden;
 		flex-wrap: nowrap;
 	}
+
+	// .. but hide entirely when the placeholder can still be toggled.
+	.wp-block-navigation.is-selected .is-small & {
+		display: none;
+	}
+
+	.wp-block-navigation.is-selected .is-medium & {
+		display: none;
+	}
 }
 
 // Selected state.