Visual improvements to the block navigator (#22796)

* Adjust movers size

* Solve conflicts

* Restore the generic icon

* Consistently apply whitespace and highlighting throughout all the navigators

* Skip the top-level navigation block for navigation block specific block navigator (this naming is so confusing!)

* Use a variable for mover button size

* Remove hover from this PR

* Apply correct alignment to navigator items

* Use pseudo elements for focus targets while preserving the large tap target

* Fix the vertical line alignment

* Fix alignment of the descender lines

* Fix paddings on the menu management screen

* Use separate TreeGridItem for mover arrows

* Improve alignment

* Update alignment of descender lines

packages/block-editor/src/components/block-navigation/block.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
+import {
+	__experimentalTreeGridCell as TreeGridCell,
+	__experimentalTreeGridItem as TreeGridItem,
+} from '@wordpress/components';
+
 import { moreVertical } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
 
@@ -71,7 +75,7 @@ export default function BlockNavigationBlock( {
 		>
 			<TreeGridCell
 				className="block-editor-block-navigation-block__contents-cell"
-				colSpan={ hasRenderedMovers ? undefined : 3 }
+				colSpan={ hasRenderedMovers ? undefined : 2 }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-block__contents-container">
@@ -96,32 +100,37 @@ export default function BlockNavigationBlock( {
 			</TreeGridCell>
 			{ hasRenderedMovers && (
 				<>
-					<TreeGridCell className={ moverCellClassName }>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockMoverUpButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								ref={ ref }
-								tabIndex={ tabIndex }
-								onFocus={ onFocus }
-							/>
-						) }
-					</TreeGridCell>
-					<TreeGridCell className={ moverCellClassName }>
-						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockMoverDownButton
-								__experimentalOrientation="vertical"
-								clientIds={ [ clientId ] }
-								ref={ ref }
-								tabIndex={ tabIndex }
-								onFocus={ onFocus }
-							/>
-						) }
+					<TreeGridCell
+						className={ moverCellClassName }
+						withoutGridItem
+					>
+						<TreeGridItem>
+							{ ( { ref, tabIndex, onFocus } ) => (
+								<BlockMoverUpButton
+									__experimentalOrientation="vertical"
+									clientIds={ [ clientId ] }
+									ref={ ref }
+									tabIndex={ tabIndex }
+									onFocus={ onFocus }
+								/>
+							) }
+						</TreeGridItem>
+						<TreeGridItem>
+							{ ( { ref, tabIndex, onFocus } ) => (
+								<BlockMoverDownButton
+									__experimentalOrientation="vertical"
+									clientIds={ [ clientId ] }
+									ref={ ref }
+									tabIndex={ tabIndex }
+									onFocus={ onFocus }
+								/>
+							) }
+						</TreeGridItem>
 					</TreeGridCell>
 				</>
 			) }
 
-			{ withBlockNavigationBlockSettings && level > 1 && (
+			{ withBlockNavigationBlockSettings && (
 				<TreeGridCell
 					className={ blockNavigationBlockSettingsClassName }
 				>

packages/block-editor/src/components/block-navigation/style.scss

@@ -30,10 +30,17 @@ $tree-item-height: 36px;
 		align-items: center;
 		width: calc(100% - 0.8em);
 		height: auto;
-		padding: 6px;
+		padding: $grid-unit-15 6px;
+		margin-top: auto;
+		margin-bottom: auto;
 		text-align: left;
 		color: $dark-gray-600;
 		border-radius: 2px;
+
+		.components-modal__content & {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 
 	&.is-visible .block-editor-block-navigation-block-contents {
@@ -54,6 +61,13 @@ $tree-item-height: 36px;
 		border-radius: $border-width;
 	}
 
+	.block-editor-block-navigation-block__menu-cell,
+	.block-editor-block-navigation-block__mover-cell,
+	.block-editor-block-navigation-block__contents-cell {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+
 	.block-editor-block-navigation-block__menu-cell,
 	.block-editor-block-navigation-block__mover-cell {
 		width: $button-size;
@@ -74,16 +88,84 @@ $tree-item-height: 36px;
 		}
 	}
 
+	.block-editor-block-navigation-block__menu-cell {
+		padding-top: $grid-unit-10;
+	}
+
+	.block-editor-block-navigation-block__mover-cell-alignment-wrapper {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	// Keep the tap target large but the focus target small
 	.block-editor-block-mover-button {
+		position: relative;
 		width: $button-size;
-		height: $button-size;
+		height: $button-size-small;
+
+		// Position the icon
+		svg {
+			position: relative;
+			height: $button-size-small;
+		}
+
+		&.is-up-button {
+			align-items: flex-end;
+			svg {
+				bottom: -4px;
+			}
+		}
+
+		&.is-down-button {
+			align-items: flex-start;
+			svg {
+				top: -4px;
+			}
+		}
+
+		// Don't show the focus inherited by the Button component.
+		&:focus:enabled {
+			box-shadow: none;
+			outline: none;
+		}
+
+		// Focus style.
+		&:focus {
+			box-shadow: none;
+			outline: none;
+		}
+
+		&:focus::before {
+			@include block-toolbar-button-style__focus();
+		}
+
+		// Focus and toggle pseudo elements.
+		&::before {
+			content: "";
+			position: absolute;
+			display: block;
+			border-radius: $radius-block-ui;
+			height: 16px;
+			min-width: 100%;
+
+			// Position the focus rectangle.
+			left: 0;
+			right: 0;
+
+			// Animate in.
+			animation: components-button__appear-animation 0.1s ease;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
+		}
 	}
 
 	.block-editor-inserter__toggle {
 		background: $dark-gray-primary;
 		color: $white;
 		height: $grid-unit-30;
-		margin: 6px 6px 6px 0.8em;
+		margin: 6px 6px 6px 1px;
 		min-width: $grid-unit-30;
 
 		&:active {
@@ -105,6 +187,10 @@ $tree-item-height: 36px;
 		display: flex;
 	}
 
+	.block-editor-block-navigation-block__contents-container {
+		min-height: 56px;
+	}
+
 	.block-editor-block-navigator-descender-line {
 		position: relative;
 		flex-shrink: 0;
@@ -123,9 +209,9 @@ $tree-item-height: 36px;
 			content: "";
 			display: block;
 			position: absolute;
-			top: -1px;
+			top: 1px;
 			bottom: -2px;
-			right: 0;
+			right: -1px;
 			border-right: 2px solid $light-gray-900;
 		}
 
@@ -136,18 +222,28 @@ $tree-item-height: 36px;
 
 		// Make the last vertical line half-height.
 		&.has-item.is-last-row {
-			height: $grid-unit-20;
+			height: 26px;
 		}
 
 		// Draw a horizontal line using border-bottom.
 		&.has-item::after {
 			content: "";
 			display: block;
 			position: absolute;
-			top: $grid-unit-20;
+			top: 26px;
 			left: 100%;
 			width: 5px;
 			border-bottom: 2px solid $light-gray-900;
 		}
 	}
 }
+
+// Position the horizontal line in the middle of appender's height
+.block-editor-block-navigation-appender__cell .block-editor-block-navigator-descender-line {
+	&.has-item.is-last-row {
+		height: $grid-unit-20;
+		&::after {
+			top: 100%;
+		}
+	}
+}

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

@@ -26,7 +26,7 @@ export default function BlockNavigationList( {
 
 	return (
 		<__experimentalBlockNavigationTree
-			blocks={ [ block ] }
+			blocks={ block.innerBlocks }
 			selectedBlockClientId={ selectedBlockClientId }
 			selectBlock={ selectBlock }
 			__experimentalFeatures={ __experimentalFeatures }

packages/components/src/index.js

@@ -105,6 +105,7 @@ export {
 	default as __experimentalTreeGrid,
 	TreeGridRow as __experimentalTreeGridRow,
 	TreeGridCell as __experimentalTreeGridCell,
+	TreeGridItem as __experimentalTreeGridItem,
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
 export { default as __experimentalUnitControl } from './unit-control';

packages/components/src/tree-grid/cell.js

@@ -1,12 +1,20 @@
 /**
  * Internal dependencies
  */
-import RovingTabIndexItem from './roving-tab-index-item';
+import TreeGridItem from './item';
 
-export default function TreeGridCell( { children, ...props } ) {
+export default function TreeGridCell( {
+	children,
+	withoutGridItem = false,
+	...props
+} ) {
 	return (
 		<td { ...props } role="gridcell">
-			<RovingTabIndexItem>{ children }</RovingTabIndexItem>
+			{ withoutGridItem ? (
+				children
+			) : (
+				<TreeGridItem>{ children }</TreeGridItem>
+			) }
 		</td>
 	);
 }

packages/components/src/tree-grid/index.js

@@ -160,3 +160,4 @@ export default function TreeGrid( { children, ...props } ) {
 
 export { default as TreeGridRow } from './row';
 export { default as TreeGridCell } from './cell';
+export { default as TreeGridItem } from './item';

packages/components/src/tree-grid/item.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import RovingTabIndexItem from './roving-tab-index-item';
+
+export default function TreeGridItem( { children, ...props } ) {
+	return <RovingTabIndexItem { ...props }>{ children }</RovingTabIndexItem>;
+}

packages/edit-navigation/src/components/menu-editor/index.js

@@ -57,7 +57,7 @@ export default function MenuEditor( {
 				<BlockEditorKeyboardShortcuts />
 				<MenuEditorShortcuts saveBlocks={ saveMenuItems } />
 				<NavigationStructureArea
-					blocks={ blocks }
+					blocks={ blocks[ 0 ]?.innerBlocks || [] }
 					initialOpen={ isLargeViewport }
 				/>
 				<BlockEditorArea

packages/edit-navigation/src/components/menu-editor/style.scss

@@ -49,13 +49,28 @@
 	}
 }
 
-.edit-navigation-menu-editor__navigation-structure-card,
+.block-editor-block-navigation-leaf {
+	> :first-child {
+		padding-left: 0;
+	}
+	> :first-child button {
+		padding-left: 0;
+	}
+}
+
 .edit-navigation-menu-editor__navigation-structure-panel {
 	// IE11 requires the column to be explicitly declared.
 	grid-column: 1;
 
 	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
 	-ms-grid-row-align: start;
+
+	.components-card__header {
+		font-weight: bold;
+		border-bottom: 0;
+		padding-top: $grid-unit-30 !important;
+		padding-bottom: $grid-unit-30 !important;
+	}
 }
 
 .edit-navigation-menu-editor__navigation-structure-header {