From 3f065f177081208e1dec1a475e9d4f91abe833fe Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 18 Jan 2021 02:53:53 -0800 Subject: [PATCH] Navigation Block: Placeholder empty state (#26947) * Test placeholder in empty state * Update empty placeholder state with preview * Simplify * Make it more like social links. * Improve things. * Height fixes. Co-authored-by: jasmussen --- packages/block-library/src/navigation/edit.js | 2 + .../block-library/src/navigation/editor.scss | 46 +++++++++++-------- .../src/navigation/placeholder-preview.js | 17 +++++++ .../src/navigation/placeholder.js | 10 ++-- 4 files changed, 49 insertions(+), 26 deletions(-) create mode 100644 packages/block-library/src/navigation/placeholder-preview.js diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index c62d48908518a9..859fec8ee3ee51 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -30,6 +30,7 @@ import { justifySpaceBetween, } from '@wordpress/icons'; import NavigationPlaceholder from './placeholder'; +import PlaceholderPreview from './placeholder-preview'; function Navigation( { selectedBlockHasDescendants, @@ -92,6 +93,7 @@ function Navigation( { // Block on the experimental menus screen does not // inherit templateLock={ 'all' }. templateLock: false, + placeholder: , } ); diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index cc439d16f0325b..70144275489116 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -1,6 +1,3 @@ -$navigation-height: 60px; -$navigation-item-height: 46px; - // Undo default editor styles. .editor-styles-wrapper .wp-block-navigation ul, .editor-styles-wrapper .wp-block-navigation ol { @@ -30,7 +27,7 @@ $navigation-item-height: 46px; // Ensure that an empty block has space around the appender. .wp-block-navigation__container { - min-height: $navigation-item-height; + min-height: $grid-unit-05 + $grid-unit-05 + $button-size; } // Ensure sub-menus stay open and visible when a nested block is selected. @@ -161,6 +158,8 @@ $color-control-label-height: 20px; } .wp-block-navigation-placeholder { + min-height: $grid-unit-05 + $grid-unit-05 + $button-size; + .components-spinner { margin-top: -4px; margin-left: 4px; @@ -220,15 +219,16 @@ $color-control-label-height: 20px; // Unselected state. .wp-block-navigation-placeholder__preview { - min-height: $grid-unit-10 + $grid-unit-10 + $button-size; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; display: flex; flex-direction: row; align-items: center; - - // Hide when selected. - .is-selected & { - display: none; - } + transition: all 0.1s ease-in-out; + @include reduce-motion("transition"); // Style skeleton elements. // Needs specificity. @@ -244,17 +244,23 @@ $color-control-label-height: 20px; svg { opacity: 0.3; } + + .is-selected & { + opacity: 0.2; + } } // 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; flex-direction: row; align-items: center; display: none; + position: relative; + z-index: 1; // Show when selected. .is-selected & { @@ -279,16 +285,18 @@ $color-control-label-height: 20px; } } -// Both, when block is vertical. -.wp-block-navigation-placeholder__preview, -.wp-block-navigation-placeholder__controls { - .is-vertical & { - flex-direction: column; - align-items: flex-start; - min-height: $icon-size + ($grid-unit-20 + $grid-unit-15 + $grid-unit-15) * 3; - } +// When block is vertical. +.is-vertical .wp-block-navigation-placeholder, +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + min-height: $icon-size + ($grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15) * 3; } +.is-vertical .wp-block-navigation-placeholder__preview, +.is-vertical .wp-block-navigation-placeholder__controls { + flex-direction: column; + align-items: flex-start; +} .wp-block-navigation-placeholder__actions { display: flex; diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js new file mode 100644 index 00000000000000..e895443914381c --- /dev/null +++ b/packages/block-library/src/navigation/placeholder-preview.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { Icon, search } from '@wordpress/icons'; + +const PlaceholderPreview = () => { + return ( +
+ + + + +
+ ); +}; + +export default PlaceholderPreview; diff --git a/packages/block-library/src/navigation/placeholder.js b/packages/block-library/src/navigation/placeholder.js index 5a3bb3bff98c6b..28dc39fe0142c0 100644 --- a/packages/block-library/src/navigation/placeholder.js +++ b/packages/block-library/src/navigation/placeholder.js @@ -22,12 +22,13 @@ import { useEffect, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Icon, chevronDown, search } from '@wordpress/icons'; +import { chevronDown } from '@wordpress/icons'; /** * Internal dependencies */ import createDataTree from './create-data-tree'; +import PlaceholderPreview from './placeholder-preview'; /** * A recursive function that maps menu item nodes to blocks. @@ -235,12 +236,7 @@ function NavigationPlaceholder( { onCreate }, ref ) { return (
-
- - - - -
+
{ isLoading && (