Navigation: Try removing gray blobs, round 2

WordPress · Nov 26, 2021 · e6788ab · e6788ab
1 parent c9e32e0
commit e6788ab
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 92 deletions.
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -169,7 +169,6 @@ export default function NavigationPlaceholder( {
 			) }
 			{ hasResolvedNavigationMenus && ! isStillLoading && (
 				<Placeholder className="wp-block-navigation-placeholder">
-					<PlaceholderPreview />
 					<div className="wp-block-navigation-placeholder__controls">
 						<div className="wp-block-navigation-placeholder__actions">
 							<div className="wp-block-navigation-placeholder__actions__indicator">

diff --git 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,25 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Icon, search } from '@wordpress/icons';
+import { Icon, navigation } from '@wordpress/icons';
+import { Placeholder } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 const PlaceholderPreview = ( { isLoading } ) => {
 	return (
-		<ul
-			className={ classnames(
-				'wp-block-navigation-placeholder__preview',
-				'wp-block-navigation__container',
-				{ 'is-loading': isLoading }
-			) }
+		<Placeholder
+			className={ classnames( 'wp-block-navigation-placeholder', {
+				'is-loading': isLoading,
+			} ) }
 		>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-placeholder__preview-search-icon">
-				<Icon icon={ search } />
-			</li>
-		</ul>
+			<div className="wp-block-navigation-placeholder__controls">
+				<div className="wp-block-navigation-placeholder__actions">
+					<div className="wp-block-navigation-placeholder__actions__indicator">
+						<Icon icon={ navigation } /> { __( 'Navigation' ) }
+					</div>
+				</div>
+			</div>
+		</Placeholder>
 	);
 };
 

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -96,6 +96,7 @@
 	}
 }
 
+
 /**
  * Colors Selector component
  */
@@ -179,10 +180,24 @@ $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;
@@ -206,87 +221,19 @@ $color-control-label-height: 20px;
 	.is-selected & {
 		color: $gray-900;
 	}
-}
-
-// 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;
-
-	&.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%;
-		}
-	}
-
-	.wp-block-navigation-placeholder__preview-search-icon {
-		height: $icon-size;
-		svg {
-			fill: currentColor;
-		}
-	}
-
-	.wp-block-navigation-item.wp-block-navigation-item,
-	.wp-block-navigation-placeholder__preview-search-icon {
-		opacity: 0.3;
-	}
+	// Hide most placeholder content until selected.
+	.wp-block-navigation-placeholder__actions > * {
+		display: none;
 
-	&: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 & {
+		.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;
-		}
+	// Always show the block logo.
+	.wp-block-navigation-placeholder__actions__indicator {
+		display: flex;
 	}
 }
 
@@ -298,10 +245,14 @@ $color-control-label-height: 20px;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
 	flex-direction: row;
 	align-items: center;
-	display: none;
 	position: relative;
 	z-index: 1;
 
+	// Unhide actions when selected.
+	.wp-block-navigation-placeholder__actions > * {
+		display: flex;
+	}
+
 	// Adjust padding for when shown horizontally.
 	.is-large & {
 		padding: $grid-unit-05 $grid-unit-10;