Improve the navigation block setup state / placeholder. (#31371)

* Initial refactor.

- Bring back Placeholder component for responsiveness.
- Unstyle some things.
- Tweak placeholder skeleton to inherit styles and match height of actual menu items.

* Fix onselect jump.

* Improve responsiveness.

* Final polish.

* Update test.

* Don't wrap.

* Remove transition.

* Fix for navigation screen empty state.

* Fix display.

Author: jasmussen

packages/block-library/src/navigation/editor.scss

@@ -165,11 +165,22 @@ $color-control-label-height: 20px;
  * Setup state
  */
 
-// Ensure that an empty block has space around the appender.
-.wp-block-navigation-placeholder,
-.wp-block-navigation-placeholder__preview,
-.is-selected .wp-block-navigation__container {
-	min-height: $grid-unit-05 + $grid-unit-05 + $button-size;
+// Unstyle some inherited placeholder component styles.
+.components-placeholder.wp-block-navigation-placeholder {
+	outline: none;
+	padding: 0;
+	box-shadow: none;
+	background: none;
+	min-height: 0;
+
+	// Needed for the preview menu items to match actual menu items.
+	.components-placeholder__fieldset {
+		font-size: inherit;
+	}
+
+	.components-placeholder__fieldset .components-button {
+		margin-bottom: 0;
+	}
 }
 
 // Spinner.
@@ -185,17 +196,24 @@ $color-control-label-height: 20px;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	transition: all 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	flex-wrap: nowrap;
+	width: 100%;
+	overflow: hidden;
 
-	// Style skeleton elements.
+	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
 	.wp-block-navigation-link.wp-block-navigation-link {
-		border-radius: $radius-block-ui;
-		background: currentColor;
+		position: relative;
 		min-width: 72px;
-		height: $grid-unit-20;
-		margin: $grid-unit-15 $grid-unit-30 $grid-unit-15 0;
+
+		&::before {
+			display: block;
+			content: "";
+			border-radius: $radius-block-ui;
+			background: currentColor;
+			height: $grid-unit-20;
+			width: 100%;
+		}
 	}
 
 	svg {
@@ -207,22 +225,25 @@ $color-control-label-height: 20px;
 		opacity: 0.3;
 	}
 
-	.is-selected & {
-		// Don't show the preview boxes for an empty nav block.
-		opacity: 0;
+	// Don't show the preview boxes for an empty nav block.
+	// Needs specificity to work for the navigation screen.
+	.wp-block-navigation.is-selected &.wp-block-navigation-placeholder__preview {
+		display: none;
+	}
 
-		// Need to show the placeholder box above the preview boxes.
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
+	// ... but be present in larger contexts to size it correctly.
+	.wp-block-navigation.is-selected .is-large & {
+		display: flex;
+		opacity: 0;
+		width: 0;
+		overflow: hidden;
+		flex-wrap: nowrap;
 	}
 }
 
 // Selected state.
 .wp-block-navigation-placeholder__controls {
-	padding: $grid-unit-05 $grid-unit-10;
+	padding: $grid-unit-10;
 	border-radius: $radius-block-ui;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
@@ -232,18 +253,25 @@ $color-control-label-height: 20px;
 	position: relative;
 	z-index: 1;
 
+	// Adjust padding for when shown horizontally.
+	.is-large & {
+		padding: $grid-unit-05 $grid-unit-10;
+	}
+
 	// If an ancestor has a text-decoration property applied, it is inherited regardless of
 	// the specificity of a child element. Only pulling the child out of the flow fixes it.
 	// See also https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration.
 	float: left;
 	width: 100%;
 
 	// Show when selected.
-	.is-selected & {
+	.wp-block-navigation.is-selected & {
 		display: flex;
 	}
 
-	// Vertical navigation.
+	// Show stacked for the vertical navigation, or small placeholders.
+	.is-small &,
+	.is-medium &,
 	.is-vertical & {
 		.wp-block-navigation-placeholder__actions {
 			flex-direction: column;
@@ -263,13 +291,12 @@ $color-control-label-height: 20px;
 	// Block title
 	.wp-block-navigation-placeholder__actions__indicator {
 		margin-right: $grid-unit-15;
-		padding: ($grid-unit-15 / 2) 0;
+		padding: 0;
 		align-items: center;
 		justify-content: flex-start;
-		display: none;
 		line-height: 0;
 
-		// line up with the icon in the toolbar.
+		// Line up with the icon in the toolbar.
 		margin-left: $grid-unit-05 + $border-width;
 
 		svg {
@@ -281,7 +308,9 @@ $color-control-label-height: 20px;
 			margin-left: 0;
 		}
 
-		@include break-small {
+		// Show only in big placeholders.
+		display: none;
+		.is-large & {
 			display: inline-flex;
 		}
 	}

packages/block-library/src/navigation/placeholder-preview.js

@@ -5,12 +5,12 @@ 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>
+		<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
+			<li className="wp-block-navigation-link">&#8203;</li>
+			<li className="wp-block-navigation-link">&#8203;</li>
+			<li className="wp-block-navigation-link">&#8203;</li>
 			<Icon icon={ search } />
-		</div>
+		</ul>
 	);
 };
 

packages/block-library/src/navigation/placeholder.js

@@ -3,6 +3,7 @@
  */
 import { createBlock } from '@wordpress/blocks';
 import {
+	Placeholder,
 	Button,
 	DropdownMenu,
 	MenuGroup,
@@ -162,7 +163,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
 	return (
-		<div className="wp-block-navigation-placeholder">
+		<Placeholder className="wp-block-navigation-placeholder">
 			<PlaceholderPreview />
 
 			<div className="wp-block-navigation-placeholder__controls">
@@ -181,7 +182,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 						</div>
 						{ hasMenus ? (
 							<DropdownMenu
-								text={ __( 'Existing menu' ) }
+								text={ __( 'Add existing menu' ) }
 								icon={ chevronDown }
 								toggleProps={ toggleProps }
 							>
@@ -222,7 +223,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 					</div>
 				) }
 			</div>
-		</div>
+		</Placeholder>
 	);
 }
 

packages/components/src/placeholder/index.js

@@ -46,8 +46,8 @@ function Placeholder( {
 	let modifierClassNames;
 	if ( typeof width === 'number' ) {
 		modifierClassNames = {
-			'is-large': width >= 320,
-			'is-medium': width >= 160 && width < 320,
+			'is-large': width >= 480,
+			'is-medium': width >= 160 && width < 480,
 			'is-small': width < 160,
 		};
 	}

packages/components/src/placeholder/test/index.js

@@ -113,7 +113,7 @@ describe( 'Placeholder', () => {
 		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
 			useResizeObserver.mockReturnValue( [
 				<div key="1" />,
-				{ width: 320 },
+				{ width: 480 },
 			] );
 
 			const placeholder = shallow( <Placeholder /> );