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 <[email protected]>
WordPress · Jan 18, 2021 · 3f065f1 · 3f065f1
1 parent e65d5cf
commit 3f065f1
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 26 deletions.
diff --git 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: <PlaceholderPreview />,
 		}
 	);
 

diff --git 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
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, search } from '@wordpress/icons';
+
+const PlaceholderPreview = () => {
+	return (
+		<div className="wp-block-navigation-placeholder__preview">
+			<span className="wp-block-navigation-link"></span>
+			<span className="wp-block-navigation-link"></span>
+			<span className="wp-block-navigation-link"></span>
+			<Icon icon={ search } />
+		</div>
+	);
+};
+
+export default PlaceholderPreview;
diff --git 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 (
 		<div className="wp-block-navigation-placeholder">
-			<div className="wp-block-navigation-placeholder__preview">
-				<span className="wp-block-navigation-link"></span>
-				<span className="wp-block-navigation-link"></span>
-				<span className="wp-block-navigation-link"></span>
-				<Icon icon={ search } />
-			</div>
+			<PlaceholderPreview />
 
 			<div className="wp-block-navigation-placeholder__controls">
 				{ isLoading && (