From 7fcd57c9a62c232899e287f6d96416477d810d5e Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 17 May 2021 15:33:10 +0200
Subject: [PATCH] Fix nav placeholder colors and height. (#31875)

---
 .../block-library/src/navigation/editor.scss  | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index c761af9f0cc04c..81f312ce7adc02 100644
--- 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.