From f093a0bd369df808ede9636d047338af0c457b81 Mon Sep 17 00:00:00 2001 From: Andy Peatling Date: Thu, 2 Mar 2023 16:00:54 -0800 Subject: [PATCH] Navigation Block: Fix big spinner (#48332) * Navigation Block: Fix big spinner WIP * Add padding container * Fix github.dev liniting issues. * Add padding to container of page list block. --- .../src/navigation/edit/index.js | 4 +- .../block-library/src/navigation/editor.scss | 43 ++++++++++--------- packages/block-library/src/page-list/edit.js | 4 +- .../block-library/src/page-list/editor.scss | 6 +++ 4 files changed, 35 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 7e07b0d6cde415..e2c56da7797b9e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -898,7 +898,9 @@ function Navigation( { { isLoading && ( - +
+ +
) } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index e22a0f152c5ea9..ac1db543d22100 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -39,8 +39,7 @@ } // Only show the flyout on hover if the parent menu item is selected. -.wp-block-navigation:not(.is-selected):not(.has-child-selected) -.has-child:hover { +.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover { > .wp-block-navigation__submenu-container { opacity: 0; visibility: hidden; @@ -49,6 +48,7 @@ // Styles for submenu flyout. .has-child { + &.is-selected, &.has-child-selected { > .wp-block-navigation__submenu-container { @@ -76,8 +76,7 @@ flex-direction: column; } -.is-dragging-components-draggable -.wp-block-navigation-link > .wp-block-navigation__container { +.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container { // Set opacity to 1 to still be able to show the draggable chip. opacity: 1; visibility: hidden; @@ -117,6 +116,7 @@ */ $colors-selector-size: 22px; + .block-library-colors-selector { width: auto; @@ -151,7 +151,7 @@ $colors-selector-size: 22px; min-width: $colors-selector-size; height: $colors-selector-size; min-height: $colors-selector-size; - line-height: ( $colors-selector-size - 2 ); + line-height: ($colors-selector-size - 2); padding: 2px; > svg { @@ -161,6 +161,7 @@ $colors-selector-size: 22px; // Styling icon color. &.has-text-color { + > svg, > svg path { color: inherit; @@ -171,6 +172,7 @@ $colors-selector-size: 22px; // Colors Selector Popover. $color-control-label-height: 20px; + .block-library-colors-selector__popover { .color-palette-controller-container { padding: 16px; @@ -222,13 +224,16 @@ $color-control-label-height: 20px; 0% { opacity: 1; } + 50% { opacity: 0.5; } + 100% { opacity: 1; } } + // Unstyle some inherited placeholder component styles. .components-placeholder.wp-block-navigation-placeholder { outline: none; @@ -271,6 +276,7 @@ $color-control-label-height: 20px; // against any background color. color: currentColor; background: transparent; + &::before { content: ""; display: block; @@ -338,6 +344,7 @@ $color-control-label-height: 20px; // 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 { display: none; @@ -427,15 +434,14 @@ $color-control-label-height: 20px; } } } + // Emulate the fullscreen editing inside the editor. // Most of this can be removed when the iframe lands. // When not fullscreen. .wp-block-navigation__responsive-container.is-menu-open { position: fixed; - top: - $admin-bar-height-big + $header-height + $block-toolbar-height + - $border-width; + top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width; @include break-medium() { top: $admin-bar-height + $header-height + $border-width; @@ -445,6 +451,7 @@ $color-control-label-height: 20px; @include break-medium() { left: $admin-sidebar-width-collapsed; } + @include break-large() { left: $admin-sidebar-width; } @@ -452,17 +459,13 @@ $color-control-label-height: 20px; .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open { @include break-medium() { - top: - $admin-bar-height + $header-height + $block-toolbar-height + - $border-width; + top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width; } } .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open, .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open { - top: - $admin-bar-height + $header-height + $block-toolbar-height + - $border-width; + top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width; } .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open { @@ -473,9 +476,7 @@ $color-control-label-height: 20px; .is-fullscreen-mode { .wp-block-navigation__responsive-container.is-menu-open { left: 0; // Unset the value from non fullscreen mode. - top: - $admin-bar-height-big + $header-height + $block-toolbar-height + - $border-width; + top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width; @include break-medium() { top: $header-height + $border-width; @@ -495,8 +496,7 @@ $color-control-label-height: 20px; } // The iframe makes these rules a lot simpler. -body.editor-styles-wrapper -.wp-block-navigation__responsive-container.is-menu-open { +body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open { top: 0; right: 0; bottom: 0; @@ -536,6 +536,7 @@ body.editor-styles-wrapper .components-heading.wp-block-navigation-off-canvas-editor__title { margin: 0; } + .wp-block-navigation-off-canvas-editor__header { margin-bottom: $grid-unit-10; } @@ -552,6 +553,7 @@ body.editor-styles-wrapper 0% { opacity: 0; } + 100% { opacity: 1; } @@ -559,7 +561,7 @@ body.editor-styles-wrapper // Space spinner to give it breathing // room when block is selected and has focus outline. -.wp-block-navigation .components-spinner { +.wp-block-navigation__loading-indicator-container { padding: $grid-unit-10 $grid-unit-15; } @@ -571,6 +573,7 @@ body.editor-styles-wrapper 0% { opacity: 1; } + 100% { opacity: 0.5; } diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 876496686929a3..0bbfb8ba5c7e43 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -53,7 +53,9 @@ function BlockContent( { if ( ! hasResolvedPages ) { return (
- +
+ +
); } diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss index 4cda6018220d32..18ecf904e3919a 100644 --- a/packages/block-library/src/page-list/editor.scss +++ b/packages/block-library/src/page-list/editor.scss @@ -61,3 +61,9 @@ .wp-block-page-list .components-notice { margin-left: 0; } + +// Space spinner to give it breathing +// room when block is selected and has focus outline. +.wp-block-page-list__loading-indicator-container { + padding: $grid-unit-10 $grid-unit-15; +}