diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 542bafc747c30..2971b99770139 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -305,7 +305,6 @@ $color-control-label-height: 20px; // Selected state. .wp-block-navigation-placeholder__controls { - padding: $grid-unit-10; border-radius: $radius-block-ui; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; @@ -314,11 +313,7 @@ $color-control-label-height: 20px; display: none; position: relative; z-index: 1; - - // Adjust padding for when shown horizontally. - .is-large & { - padding: $grid-unit-05 $grid-unit-10; - } + padding: $grid-unit-05 $grid-unit-10; // If an ancestor has a text-decoration property applied, it is inherited regardless of // the specificity of a child element. Only pulling the child out of the flow fixes it. @@ -331,9 +326,19 @@ $color-control-label-height: 20px; display: flex; } - // Show stacked for the vertical navigation, or small placeholders. - .is-small &, + // Hide a few elements in medium size placeholders. + // @todo: part of the code here will be irrelevant if https://github.com/WordPress/gutenberg/pull/36775 lands. .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. + display: none; + } + } + + // Show stacked for the vertical navigation, or small placeholders. + .is-small & { .wp-block-navigation-placeholder__actions { flex-direction: column; } @@ -367,6 +372,11 @@ $color-control-label-height: 20px; } } +// Keep as row for medium. +.wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset { + flex-direction: row !important; +} + .wp-block-navigation-placeholder__actions { display: flex; font-size: $default-font-size;