From 821161fc14cb178f306859c551f5a7870b67d151 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 2 Feb 2022 09:21:06 +0100 Subject: [PATCH 1/3] Navigation: Fix issue where block collapses to zero height when empty. --- packages/block-library/src/navigation/editor.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 29523183bef10..4a9195b77899a 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -317,6 +317,17 @@ $color-control-label-height: 20px; } } +// Selected "Start empty" state. +// In this state, the block is entirely empty and will collapse to zero height unless there's +// content inside. The below rule lets the placeholder staty in an invisible state to avoid +// collapse and layout shift. +// @todo: This fix could be augmented with showing the generic appender when there are no +// innerblocks, a la how the Row block does it. +.wp-block-navigation.is-selected .wp-block-navigation__container .wp-block-navigation-placeholder__preview:first-of-type { + visibility: hidden; + display: flex; +} + // Selected state. .wp-block-navigation-placeholder__preview, .wp-block-navigation-placeholder__controls { From 7678be63be207989e8c2f120e0ae821785ce536b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 3 Feb 2022 12:15:31 +0100 Subject: [PATCH 2/3] Fix typo. --- packages/block-library/src/navigation/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 4a9195b77899a..e40015f181912 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -319,8 +319,8 @@ $color-control-label-height: 20px; // Selected "Start empty" state. // In this state, the block is entirely empty and will collapse to zero height unless there's -// content inside. The below rule lets the placeholder staty in an invisible state to avoid -// collapse and layout shift. +// content inside. The below rule lets the placeholder stay in an invisible state to avoid +// collapsing and shifting the layout. // @todo: This fix could be augmented with showing the generic appender when there are no // innerblocks, a la how the Row block does it. .wp-block-navigation.is-selected .wp-block-navigation__container .wp-block-navigation-placeholder__preview:first-of-type { From 1dac9ad4aa153cfe9a4bb9b2bf4a757fc33bd00e Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 4 Feb 2022 11:39:30 +0100 Subject: [PATCH 3/3] Clarify comment. --- packages/block-library/src/navigation/editor.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index e40015f181912..f1b58cbdf93da 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -321,8 +321,9 @@ $color-control-label-height: 20px; // In this state, the block is entirely empty and will collapse to zero height unless there's // content inside. The below rule lets the placeholder stay in an invisible state to avoid // collapsing and shifting the layout. -// @todo: This fix could be augmented with showing the generic appender when there are no -// innerblocks, a la how the Row block does it. +// @todo: Other container blocks show a white/bordered add block button when empty. +// If we implement the same for Navigation, that button would also prevent the collapse +// so this fix could be removed. .wp-block-navigation.is-selected .wp-block-navigation__container .wp-block-navigation-placeholder__preview:first-of-type { visibility: hidden; display: flex;