From c38fdeda2fbedd6b9ff6c2176bea7cd2c9a0cf6d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 23 Nov 2021 13:21:14 +0100 Subject: [PATCH 1/3] Navigation: Try inheriting orientation in setup state. --- 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 910f4010ef9c69..09b264eaf19e17 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -216,6 +216,15 @@ $color-control-label-height: 20px; background: none; min-height: 0; + // Inherit orientation. + &, + .components-placeholder__fieldset, + .wp-block-navigation-placeholder__controls, + .wp-block-navigation-placeholder__preview, + .wp-block-navigation-placeholder__actions { + flex-direction: inherit; + } + // Needed for the preview menu items to match actual menu items. .components-placeholder__fieldset { font-size: inherit; @@ -284,6 +293,8 @@ $color-control-label-height: 20px; border-radius: $radius-block-ui; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; + flex-direction: row; + align-items: flex-start; display: none; position: relative; z-index: 1; From 028a387fb5c27920d5300eb80cda388c200c7294 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 Jan 2022 12:34:50 +0100 Subject: [PATCH 2/3] Refactor to use is-vertical class for code simplicity. --- .../block-library/src/navigation/editor.scss | 30 ++++++------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 09b264eaf19e17..052ce7b5f473eb 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -216,15 +216,6 @@ $color-control-label-height: 20px; background: none; min-height: 0; - // Inherit orientation. - &, - .components-placeholder__fieldset, - .wp-block-navigation-placeholder__controls, - .wp-block-navigation-placeholder__preview, - .wp-block-navigation-placeholder__actions { - flex-direction: inherit; - } - // Needed for the preview menu items to match actual menu items. .components-placeholder__fieldset { font-size: inherit; @@ -293,8 +284,6 @@ $color-control-label-height: 20px; border-radius: $radius-block-ui; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; - flex-direction: row; - align-items: flex-start; display: none; position: relative; z-index: 1; @@ -310,26 +299,25 @@ $color-control-label-height: 20px; float: left; width: 100%; - // Show stacked for the vertical navigation, or small placeholders. + // Hide the navigation indicator when in small contexts. .is-small &, .is-medium & { .wp-block-navigation-placeholder__actions__indicator, - .wp-block-navigation-placeholder__actions__indicator + hr, - .wp-block-navigation-placeholder__actions > :nth-last-child(3), // Add all pages. - .wp-block-navigation-placeholder__actions > :nth-last-child(2) { // hr separator after it. + .wp-block-navigation-placeholder__actions__indicator + hr { display: none; } } - // Show stacked for the vertical navigation, or small placeholders. - .is-small & { + // Vertical orientation or small context. + .is-small &, + .wp-block-navigation.is-vertical & { .wp-block-navigation-placeholder__actions { flex-direction: column; - } + align-items: flex-start; - // Hide the separators in the vertical version. - .wp-block-navigation-placeholder__actions hr { - display: none; + hr { + display: none; + } } } From d7367f55d64ef5045919acf0f95f14fc4f98f748 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 31 Jan 2022 13:59:59 +0100 Subject: [PATCH 3/3] Add min-height. --- .../block-library/src/navigation/editor.scss | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 052ce7b5f473eb..a6067cd4ff052d 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -272,12 +272,28 @@ $color-control-label-height: 20px; } } +// Prevent layout shift for vertical variant. +.wp-block-navigation.is-vertical .is-small, +.wp-block-navigation.is-vertical .is-medium { + .components-placeholder__fieldset { + // The size of two buttons, with top and bottom padding, and gap. + min-height: ($button-size * 2) + $grid-unit-15 + ($grid-unit-15 * 0.5); + } +} + +.wp-block-navigation.is-vertical .is-large { + .components-placeholder__fieldset { + // The size of three buttons, with top and bottom padding, and gap. + min-height: ($button-size * 3) + $grid-unit-15 + $grid-unit-15; + } +} + // Selected state. .wp-block-navigation-placeholder__preview, .wp-block-navigation-placeholder__controls { padding: ($grid-unit-15 * 0.5) $grid-unit-10; flex-direction: row; - align-items: center; + align-items: flex-start; } .wp-block-navigation-placeholder__controls { @@ -334,7 +350,7 @@ $color-control-label-height: 20px; align-items: center; justify-content: flex-start; line-height: 0; - min-height: $button-size; + height: $button-size; // Line up with the icon in the toolbar. margin-left: $grid-unit-05;