Navigation: Try removing gray blobs.

WordPress · Nov 24, 2021 · 58b5be5 · 58b5be5
1 parent 42f8b03
commit 58b5be5
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 118 deletions.
diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js
@@ -21,7 +21,6 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 
 import useNavigationEntities from '../../use-navigation-entities';
-import PlaceholderPreview from './placeholder-preview';
 import menuItemsToBlocks from '../../menu-items-to-blocks';
 import NavigationMenuNameModal from '../navigation-menu-name-modal';
 import useNavigationMenu from '../../use-navigation-menu';
@@ -193,13 +192,17 @@ export default function NavigationPlaceholder( {
 
 	return (
 		<>
-			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
-				<PlaceholderPreview isLoading />
-			) }
-			{ hasResolvedNavigationMenus && ! isStillLoading && (
-				<Placeholder className="wp-block-navigation-placeholder">
-					<PlaceholderPreview />
-					<div className="wp-block-navigation-placeholder__controls">
+			<Placeholder className="wp-block-navigation-placeholder">
+				<div className="wp-block-navigation-placeholder__controls">
+					{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
+						<div className="wp-block-navigation-placeholder__actions is-loading">
+							<div className="wp-block-navigation-placeholder__actions__indicator">
+								<Icon icon={ navigation } />{ ' ' }
+								{ __( 'Navigation' ) }
+							</div>
+						</div>
+					) }
+					{ hasResolvedNavigationMenus && ! isStillLoading && (
 						<div className="wp-block-navigation-placeholder__actions">
 							<div className="wp-block-navigation-placeholder__actions__indicator">
 								<Icon icon={ navigation } />{ ' ' }
@@ -245,9 +248,9 @@ export default function NavigationPlaceholder( {
 								{ __( 'Start empty' ) }
 							</Button>
 						</div>
-					</div>
-				</Placeholder>
-			) }
+					) }
+				</div>
+			</Placeholder>
 			{ isNewMenuModalVisible && (
 				<NavigationMenuNameModal
 					title={ __( 'Create your new navigation menu' ) }

diff --git a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
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,29 @@ $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;
+	}
+}
+
+.wp-block-navigation-placeholder__actions.is-loading {
+	animation: loadingpulse 1s linear infinite;
+	animation-delay: 0.5s; // avoid animating for fast network responses
+}
+
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -206,87 +226,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 +250,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;