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
WordPress · Aug 10, 2021 · 7479921 · 7479921
1 parent 8439bd8
commit 7479921
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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>
 	);
 };