Update empty placeholder state with preview

WordPress · Dec 8, 2020 · 16e56fd · 16e56fd
1 parent 5549a63
commit 16e56fd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 26 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -26,6 +26,7 @@ import { __ } from '@wordpress/i18n';
 import useBlockNavigator from './use-block-navigator';
 import * as navIcons from './icons';
 import NavigationPlaceholder from './placeholder';
+import PlaceholderPreview from './placeholder-preview';
 
 function Navigation( {
 	selectedBlockHasDescendants,
@@ -58,19 +59,6 @@ function Navigation( {
 		clientId
 	);
 
-	const emptyStatePlaceholder = (
-		<div
-			style={ {
-				fontSize: '13px',
-				backgroundColor: 'purple',
-				color: 'white',
-				padding: '4px',
-			} }
-		>
-			Click [+] to add links
-		</div>
-	);
-
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-navigation__container',
@@ -94,7 +82,7 @@ function Navigation( {
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.
 			templateLock: false,
-			placeholder: emptyStatePlaceholder,
+			placeholder: <PlaceholderPreview />,
 		}
 	);
 

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -225,11 +225,6 @@ $color-control-label-height: 20px;
 	flex-direction: row;
 	align-items: center;
 
-	// Hide when selected.
-	.is-selected & {
-		display: none;
-	}
-
 	// Style skeleton elements.
 	// Needs specificity.
 	.wp-block-navigation-link.wp-block-navigation-link {
@@ -246,6 +241,13 @@ $color-control-label-height: 20px;
 	}
 }
 
+.wp-block-navigation-placeholder__preview_select_hide {
+	// Hide when selected.
+	.is-selected & {
+		display: none;
+	}
+}
+
 // Selected state.
 .wp-block-navigation-placeholder__controls {
 	padding: $grid-unit-10;

diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon, search } from '@wordpress/icons';
+
+const PlaceholderPreview = ( { hideSelected } ) => {
+	const classes = classNames( 'wp-block-navigation-placeholder__preview', {
+		'wp-block-navigation-placeholder__preview_select_hide': hideSelected,
+	} );
+
+	return (
+		<div className={ classes }>
+			<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 hideSelected={ true } />
 
 			<div className="wp-block-navigation-placeholder__controls">
 				{ isLoading && (