Add movers for block navigator (#18014)

Fix doc examples

Make components experimental

Simplify creation of RovingTabIndex provider value

Add storybook snapshots

Add tests for RovingTabIndex, RovingTabIndexItem

Add tests for TreeGrid components

minor variable name change

Format JS

Import TreeGrid components from @wordpress/components

Update styling for block navigator

Try adding descender line styles

Add some further finesse to styling

Extract animated row to fix animation and use change detection that includes a full path so that all children animate

Patch up code after rebase

Use colSpan instead of colspan

Fix row animation when moving a row quickly multiple times

Remove descender lines from the accessibility tree

Use useCallback for callback

Use aria-hidden on purely presentational descender indicator in tree grid

Update example

Fix arrow key navigation when using Voiceover

Only handle arrow key navigation when no modifiers are pressed

Fix regressions in BlockMoverButton caused by rebase. Rename file to just button

Name buttons in a consistent way

Add screenreader description for focused block in navigator

Add aria-describedby for appender button

Fix selected block movers appearing with darker background

Remove writing flow hack

Fix typo

Allow aria-setsize and aria-posinset on role=row in axe e2e tests

Fix translator comment and use Add as the verb instead of Insert

Add aria-label for navigation structure tree grid

Fix typos

Try to fix tests

More typo fixes

Update snapshot to reflect renaming of test description

Update more e2e test classnames

Rename components to more closely reflect `master`

docs/manifest.json

@@ -971,6 +971,12 @@
 		"markdown_source": "../packages/components/src/responsive-wrapper/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "RovingTabIndex",
+		"slug": "roving-tab-index",
+		"markdown_source": "../packages/components/src/roving-tab-index/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Sandbox",
 		"slug": "sandbox",
@@ -1055,6 +1061,12 @@
 		"markdown_source": "../packages/components/src/tooltip/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "TreeGrid",
+		"slug": "tree-grid",
+		"markdown_source": "../packages/components/src/tree-grid/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "TreeSelect",
 		"slug": "tree-select",

packages/block-editor/src/components/block-list/block-wrapper.js

@@ -18,7 +18,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  * Internal dependencies
  */
 import { isInsideRootBlock } from '../../utils/dom';
-import useMovingAnimation from './moving-animation';
+import useMovingAnimation from '../use-moving-animation';
 import { Context, SetBlockNodes } from './root-container';
 import { BlockListBlockContext } from './block';
 import ELEMENTS from './block-elements';

packages/block-editor/src/components/block-mobile-toolbar/style.scss

@@ -3,7 +3,7 @@
 	flex-direction: row;
 	border-right: $border-width solid $light-gray-500;
 
-	.block-editor-block-mover__control {
+	.block-editor-block-mover-button {
 		width: $button-size;
 		height: $button-size;
 		border-radius: $radius-round-rectangle;
@@ -22,7 +22,7 @@
 		display: flex;
 		margin-right: auto;
 
-		.block-editor-block-mover__control {
+		.block-editor-block-mover-button {
 			float: left;
 		}
 	}

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

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockNavigationLeaf from './leaf';
+import ButtonBlockAppender from '../button-block-appender';
+import DescenderLines from './descender-lines';
+
+export default function BlockNavigationAppender( {
+	parentBlockClientId,
+	position,
+	level,
+	rowCount,
+	terminatedLevels,
+	path,
+} ) {
+	const instanceId = useInstanceId( BlockNavigationAppender );
+	const descriptionId = `block-navigation-appender-row__description_${ instanceId }`;
+
+	const appenderPositionDescription = sprintf(
+		/* translators: 1: The numerical position of the block that will be inserted. 2: The level of nesting for the block that will be inserted. */
+		__( 'Add block at position %1$d, Level %2$d' ),
+		position,
+		level
+	);
+
+	return (
+		<BlockNavigationLeaf
+			level={ level }
+			position={ position }
+			rowCount={ rowCount }
+			path={ path }
+		>
+			<TreeGridCell
+				className="block-editor-block-navigation-appender__cell"
+				colSpan="3"
+			>
+				{ ( props ) => (
+					<div className="block-editor-block-navigation-appender__container">
+						<DescenderLines
+							level={ level }
+							isLastRow={ position === rowCount }
+							terminatedLevels={ terminatedLevels }
+						/>
+						<ButtonBlockAppender
+							rootClientId={ parentBlockClientId }
+							__experimentalSelectBlockOnInsert={ false }
+							aria-describedby={ descriptionId }
+							{ ...props }
+						/>
+						<div
+							className="block-editor-block-navigation-appender__description"
+							id={ descriptionId }
+						>
+							{ appenderPositionDescription }
+						</div>
+					</div>
+				) }
+			</TreeGridCell>
+		</BlockNavigationLeaf>
+	);
+}

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

@@ -0,0 +1,185 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGetBlockLabel as getBlockLabel,
+	getBlockType,
+} from '@wordpress/blocks';
+import { Button, Fill, Slot, VisuallyHidden } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import {
+	Children,
+	cloneElement,
+	forwardRef,
+	useContext,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { BlockListBlockContext } from '../block-list/block';
+import { useBlockNavigationContext } from './context';
+
+export const BlockNavigationBlockContentWrapper = forwardRef( function(
+	{
+		as: WrapperComponent,
+		className,
+		block,
+		isSelected,
+		onClick,
+		position,
+		siblingCount,
+		level,
+		children,
+		...props
+	},
+	ref
+) {
+	const { name, attributes } = block;
+	const instanceId = useInstanceId( BlockNavigationBlockContentWrapper );
+	const descriptionId = `block-navigation-block-select-button_${ instanceId }`;
+	const blockType = getBlockType( name );
+	const blockDisplayName = getBlockLabel( blockType, attributes );
+	const blockPositionDescription = sprintf(
+		/* translators: 1: The numerical position of the block. 2: The total number of blocks. 3. The level of nesting for the block. */
+		__( 'Block %1$d of %2$d, Level %3$d' ),
+		position,
+		siblingCount,
+		level
+	);
+
+	return (
+		<>
+			<WrapperComponent
+				className={ classnames(
+					'block-editor-block-navigation-block-content-wrapper',
+					className
+				) }
+				onClick={ onClick }
+				aria-describedby={ descriptionId }
+				ref={ ref }
+				{ ...props }
+			>
+				<BlockIcon icon={ blockType.icon } showColors />
+				{ children ? children : blockDisplayName }
+				{ isSelected && (
+					<VisuallyHidden>
+						{ __( '(selected block)' ) }
+					</VisuallyHidden>
+				) }
+			</WrapperComponent>
+			<div
+				className="block-editor-block-navigation-block-content-wrapper__description"
+				id={ descriptionId }
+			>
+				{ blockPositionDescription }
+			</div>
+		</>
+	);
+} );
+
+const BlockNavigationBlockSelectButton = forwardRef( ( props, ref ) => (
+	<BlockNavigationBlockContentWrapper
+		ref={ ref }
+		as={ Button }
+		className="block-editor-block-navigation-block-select-button"
+		{ ...props }
+	/>
+) );
+
+const getSlotName = ( clientId ) => `BlockNavigationBlock-${ clientId }`;
+
+const BlockNavigationBlockSlot = forwardRef(
+	(
+		{ block, isSelected, onClick, position, siblingCount, level, ...props },
+		ref
+	) => {
+		const { clientId } = block;
+
+		return (
+			<Slot name={ getSlotName( clientId ) }>
+				{ ( fills ) => {
+					if ( ! fills.length ) {
+						return (
+							<BlockNavigationBlockSelectButton
+								ref={ ref }
+								block={ block }
+								onClick={ onClick }
+								isSelected={ isSelected }
+								position={ position }
+								siblingCount={ siblingCount }
+								level={ level }
+								{ ...props }
+							/>
+						);
+					}
+
+					return (
+						<BlockNavigationBlockContentWrapper as="div">
+							{ Children.map( fills, ( fill ) =>
+								cloneElement( fill, {
+									...{
+										block,
+										isSelected,
+										onClick,
+										...props,
+									},
+									...fill.props,
+								} )
+							) }
+						</BlockNavigationBlockContentWrapper>
+					);
+				} }
+			</Slot>
+		);
+	}
+);
+
+export const BlockNavigationBlockFill = ( props ) => {
+	const { clientId } = useContext( BlockListBlockContext );
+	return <Fill { ...props } name={ getSlotName( clientId ) } />;
+};
+
+const BlockNavigationBlockContents = forwardRef(
+	(
+		{ onClick, block, isSelected, position, siblingCount, level, ...props },
+		ref
+	) => {
+		const {
+			__experimentalWithBlockNavigationSlots: withBlockNavigationSlots,
+		} = useBlockNavigationContext();
+
+		return withBlockNavigationSlots ? (
+			<BlockNavigationBlockSlot
+				ref={ ref }
+				block={ block }
+				onClick={ onClick }
+				isSelected={ isSelected }
+				position={ position }
+				siblingCount={ siblingCount }
+				level={ level }
+				{ ...props }
+			/>
+		) : (
+			<BlockNavigationBlockSelectButton
+				ref={ ref }
+				block={ block }
+				onClick={ onClick }
+				isSelected={ isSelected }
+				position={ position }
+				siblingCount={ siblingCount }
+				level={ level }
+				{ ...props }
+			/>
+		);
+	}
+);
+
+export default BlockNavigationBlockContents;