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">​</li> <li className="wp-block-navigation-link">​</li> <li className="wp-block-navigation-link">​</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; }