From 4cf72ccede024872cb90cd48ae70a095873a1481 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 10 Aug 2021 12:51:20 +0800
Subject: [PATCH 1/2] Fix nav block placeholder preview invalid markup

---
 packages/block-library/src/navigation/editor.scss      | 10 +++++++---
 .../src/navigation/placeholder-preview.js              |  4 +++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index e4a8194e035297..887714cd2a40e4 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -229,12 +229,16 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	svg {
-		fill: currentColor;
+	.wp-block-navigation-placeholder__preview-search-icon {
+		height: $icon-size;
+		svg {
+			fill: currentColor;
+		}
 	}
 
+
 	.wp-block-navigation-link.wp-block-navigation-link,
-	svg {
+	.wp-block-navigation-placeholder__preview-search-icon {
 		opacity: 0.3;
 	}
 
diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js
index 4dced9ebe40663..fff5f80b39f069 100644
--- a/packages/block-library/src/navigation/placeholder-preview.js
+++ b/packages/block-library/src/navigation/placeholder-preview.js
@@ -9,7 +9,9 @@ const PlaceholderPreview = () => {
 			<li className="wp-block-navigation-link">&#8203;</li>
 			<li className="wp-block-navigation-link">&#8203;</li>
 			<li className="wp-block-navigation-link">&#8203;</li>
-			<Icon icon={ search } />
+			<li className="wp-block-navigation-placeholder__preview-search-icon">
+				<Icon icon={ search } />
+			</li>
 		</ul>
 	);
 };

From bbbff47ede9dfe39374d1c16bbe50503d6d32869 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 10 Aug 2021 12:57:08 +0800
Subject: [PATCH 2/2] Ensure the not visible placeholder preview will not take
 up height when a vertical block is selected

---
 packages/block-library/src/navigation/editor.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 887714cd2a40e4..fff28e42151ab9 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -252,7 +252,12 @@ $color-control-label-height: 20px;
 		flex-wrap: nowrap;
 	}
 
-	// .. but hide entirely when the placeholder can still be toggled.
+	// Hide entirely when vertical.
+	.is-vertical.is-selected & {
+		display: none;
+	}
+
+	// Hide entirely when the placeholder can still be toggled.
 	.wp-block-navigation.is-selected .is-small & {
 		display: none;
 	}