From d436a8fea8cb8d7b1585bb69cb6a96fb68a87867 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 3 Dec 2021 14:16:11 +0100 Subject: [PATCH 1/4] Navigation: Remove blogs that look like a loading state --- .../edit/placeholder/placeholder-preview.js | 14 +- .../block-library/src/navigation/editor.scss | 122 ++++++------------ 2 files changed, 47 insertions(+), 89 deletions(-) diff --git a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js index a844cb6109c0d3..ea320fd68353b1 100644 --- a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js +++ b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js @@ -6,24 +6,18 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Icon, search } from '@wordpress/icons'; +import { Icon, navigation } from '@wordpress/icons'; const PlaceholderPreview = ( { isLoading } ) => { return ( - + + ); }; diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 5b3d7f4c8671c9..b76aa4929b0210 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -191,10 +191,23 @@ $color-control-label-height: 20px; justify-content: flex-start; } + /** * Setup state */ +// Loading state. +@keyframes loadingpulse { + 0% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + 100% { + opacity: 1; + } +} // Unstyle some inherited placeholder component styles. .components-placeholder.wp-block-navigation-placeholder { outline: none; @@ -220,116 +233,67 @@ $color-control-label-height: 20px; } } -// Spinner. -.wp-block-navigation-placeholder .components-spinner { - margin-top: -4px; - margin-left: 4px; - vertical-align: middle; - margin-right: 7px; -} - -@keyframes loadingpulse { - 0% { - opacity: 1; - } - 50% { - opacity: 0.5; - } - 100% { - opacity: 1; - } -} - // Unselected state. .wp-block-navigation-placeholder__preview { display: flex; - flex-direction: row; align-items: center; - flex-wrap: nowrap; - width: 100%; - overflow: hidden; + min-height: $button-size + $grid-unit-05 + $grid-unit-05; + padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-15; - &.is-loading { - animation: loadingpulse 1s linear infinite; - animation-delay: 0.5s; // avoid animating for fast network responses - } - - // Style skeleton elements to mostly match the metrics of actual menu items. - // Needs specificity. - .wp-block-navigation-item.wp-block-navigation-item { - position: relative; - min-width: 72px; - - &::before { - display: block; - content: ""; - border-radius: $radius-block-ui; - background: currentColor; - height: $grid-unit-20; - width: 100%; - } + .is-selected & { + display: none; } - .wp-block-navigation-placeholder__preview-search-icon { - height: $icon-size; - svg { - fill: currentColor; - } - } + // Draw the dashed outline. + // By setting the dashed border to currentColor, we ensure it's visible + // against any background color. + color: currentColor; + background: transparent; + &::before { + content: ""; + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: $border-width dashed currentColor; + opacity: 0.4; + pointer-events: none; - .wp-block-navigation-item.wp-block-navigation-item, - .wp-block-navigation-placeholder__preview-search-icon { - opacity: 0.3; + // Inherit border radius from style variations. + border-radius: inherit; } - &:not(.is-loading) { - // Don't show the preview boxes for an empty nav block, - // but be technically present to help size the empty state. - .wp-block-navigation.is-selected & { - display: flex; - opacity: 0; - width: 0; - overflow: hidden; - flex-wrap: nowrap; - flex: 0; - } - - // Hide entirely when vertical. - .wp-block-navigation.is-selected .is-small &, - .wp-block-navigation.is-selected .is-medium & { - display: none; - } + > svg { + opacity: 0.4; } } // Selected state. .wp-block-navigation-placeholder__controls { - padding: $grid-unit-10; + padding: $grid-unit-05 $grid-unit-10; border-radius: $radius-block-ui; background-color: $white; box-shadow: inset 0 0 0 $border-width $gray-900; + display: none; flex-direction: row; align-items: center; - display: none; position: relative; z-index: 1; - // Adjust padding for when shown horizontally. - .is-large & { - padding: $grid-unit-05 $grid-unit-10; + // Show when selected. + .wp-block-navigation.is-selected & { + display: flex; } + // 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. // See also https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration. float: left; width: 100%; - // Show when selected. - .wp-block-navigation.is-selected & { - display: flex; - } - // Show stacked for the vertical navigation, or small placeholders. .is-small &, .is-medium & { From 59343bf408eb0f0acead4089be26e04b297b3e97 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 3 Dec 2021 14:47:14 +0100 Subject: [PATCH 2/4] Fix icon color. --- packages/block-library/src/navigation/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index b76aa4929b0210..09a2299a92e87e 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -266,6 +266,7 @@ $color-control-label-height: 20px; } > svg { + fill: currentColor; opacity: 0.4; } } From cd2061e0dea977688562819f7bc15778a21058db Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 3 Dec 2021 14:51:30 +0100 Subject: [PATCH 3/4] Fix visibility issue. --- packages/block-library/src/navigation/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 09a2299a92e87e..321fce790f9d02 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -239,8 +239,9 @@ $color-control-label-height: 20px; align-items: center; min-height: $button-size + $grid-unit-05 + $grid-unit-05; padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-15; + min-width: $grid-unit-10 * 12; - .is-selected & { + .wp-block-navigation.is-selected & { display: none; } From e9bd36ff24c40412ffcd29f9cba6e12ad5979447 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 6 Dec 2021 11:45:09 +0100 Subject: [PATCH 4/4] Restore ghosts. --- .../edit/placeholder/placeholder-preview.js | 15 ++++++------ .../block-library/src/navigation/editor.scss | 23 ++++++++++++++----- .../src/post-featured-image/editor.scss | 4 ++-- .../block-library/src/site-logo/editor.scss | 4 ++-- 4 files changed, 28 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js index ea320fd68353b1..613446726683bd 100644 --- a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js +++ b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js @@ -3,21 +3,20 @@ */ import classnames from 'classnames'; -/** - * WordPress dependencies - */ -import { Icon, navigation } from '@wordpress/icons'; - const PlaceholderPreview = ( { isLoading } ) => { return ( -
- -
+
  • ​
    • +
  • ​
    • +
  • ​
    • +
  • ​
    • +
  • ​
    • + ); }; diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 321fce790f9d02..540f6a3bf012ea 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -217,8 +217,10 @@ $color-control-label-height: 20px; min-height: 0; // Needed for the preview menu items to match actual menu items. + gap: inherit; .components-placeholder__fieldset { font-size: inherit; + gap: inherit; } .components-placeholder__fieldset .components-button { @@ -237,15 +239,18 @@ $color-control-label-height: 20px; .wp-block-navigation-placeholder__preview { display: flex; align-items: center; - min-height: $button-size + $grid-unit-05 + $grid-unit-05; padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-15; min-width: $grid-unit-10 * 12; + // Make it at least as high as the smallest placeholder. + min-height: $button-size + $grid-unit-05 + $grid-unit-05; + + // Hide when selected. .wp-block-navigation.is-selected & { display: none; } - // Draw the dashed outline. + /*// Draw the dashed outline. // By setting the dashed border to currentColor, we ensure it's visible // against any background color. color: currentColor; @@ -264,11 +269,17 @@ $color-control-label-height: 20px; // Inherit border radius from style variations. border-radius: inherit; - } + }*/ - > svg { - fill: currentColor; - opacity: 0.4; + // Draw navigation placeholder indicators. + gap: inherit; + + li { + border: $border-width dashed currentColor; + opacity: 0.45; + height: 1em; + width: 4em; + border-radius: $radius-block-ui; } } diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss index 31a77623c335cd..7b158f59040f78 100644 --- a/packages/block-library/src/post-featured-image/editor.scss +++ b/packages/block-library/src/post-featured-image/editor.scss @@ -48,7 +48,7 @@ bottom: 0; left: 0; border: $border-width dashed currentColor; - opacity: 0.4; + opacity: 0.45; pointer-events: none; // Inherit border radius from style variations. @@ -93,7 +93,7 @@ height: 100%; stroke: currentColor; stroke-dasharray: 3; - opacity: 0.4; + opacity: 0.45; } // Show default placeholder height when not resized. diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index af1a9fe59f2bd2..d09c45bea4e02c 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -110,7 +110,7 @@ bottom: 0; left: 0; border: $border-width dashed currentColor; - opacity: 0.4; + opacity: 0.45; pointer-events: none; // Inherit border radius from style variations. @@ -155,7 +155,7 @@ height: 100%; stroke: currentColor; stroke-dasharray: 3; - opacity: 0.4; + opacity: 0.45; } }