From 74799210472a9f2e94cdb2b76b26b149e632a9f2 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Tue, 10 Aug 2021 13:42:25 +0800
Subject: [PATCH] Fix navigation block placeholder preview markup (#33963)

* Fix nav block placeholder preview invalid markup

* Ensure the not visible placeholder preview will not take up height when a vertical block is selected
---
 .../block-library/src/navigation/editor.scss    | 17 +++++++++++++----
 .../src/navigation/placeholder-preview.js       |  4 +++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index e4a8194e035297..fff28e42151ab9 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;
 	}
 
@@ -248,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;
 	}
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>
 	);
 };