@wordpress/block-editor 11.8.0 → 12.1.0

package/src/components/link-control/test/index.js

@@ -2235,6 +2235,48 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state on value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
 
 async function toggleSettingsDrawer( user ) {

package/src/components/link-control/use-internal-input-value.js

@@ -8,14 +8,15 @@ export default function useInternalInputValue( value ) {
 		value || ''
 	);
 
+	// If the value prop changes, update the internal state.
 	useEffect( () => {
-		/**
-		 * If the value changes then sync this
-		 * back up with state.
-		 */
-		if ( value && value !== internalInputValue ) {
-			setInternalInputValue( value );
-		}
+		setInternalInputValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
 	}, [ value ] );
 
 	return [ internalInputValue, setInternalInputValue ];

package/src/components/list-view/block-contents.js

@@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -46,6 +47,8 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +65,29 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
-					/>
-				) }
-			</BlockDraggable>
+			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );

package/src/components/list-view/block-select-button.js

@@ -35,6 +35,9 @@ function ListViewBlockSelectButton(
 		onDragStart,
 		onDragEnd,
 		draggable,
+		isExpanded,
+		ariaLabel,
+		ariaDescribedBy,
 	},
 	ref
 ) {
@@ -76,10 +79,16 @@ function ListViewBlockSelectButton(
 				onDragEnd={ onDragEnd }
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
-				aria-hidden={ true }
+				aria-label={ ariaLabel }
+				aria-describedby={ ariaDescribedBy }
+				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"

package/src/components/list-view/block.js

@@ -40,7 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -53,13 +53,11 @@ function ListViewBlock( {
 	path,
 	isExpanded,
 	selectedClientIds,
-	preventAnnouncement,
 	isSyncedBranch,
 } ) {
 	const cellRef = useRef( null );
 	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
 
 	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -90,6 +88,11 @@ function ListViewBlock( {
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = blockInformation?.title || __( 'Untitled' );
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]
@@ -111,31 +114,27 @@ function ListViewBlock( {
 		level
 	);
 
-	let blockAriaLabel = __( 'Link' );
-	if ( blockInformation ) {
-		blockAriaLabel = isLocked
-			? sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the locked block.
-					__( '%s link (locked)' ),
-					blockInformation.title
-			  )
-			: sprintf(
-					// translators: %s: The title of the block. This string indicates a link to select the block.
-					__( '%s link' ),
-					blockInformation.title
-			  );
-	}
-
-	const settingsAriaLabel = blockInformation
+	const blockAriaLabel = isLocked
 		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Options for %s block' ),
-				blockInformation.title
+				// translators: %s: The title of the block. This string indicates a link to select the locked block.
+				__( '%s (locked)' ),
+				blockTitle
 		  )
-		: __( 'Options' );
+		: blockTitle;
+
+	const settingsAriaLabel = sprintf(
+		// translators: %s: The title of the block.
+		__( 'Options for %s' ),
+		blockTitle
+	);
 
-	const { isTreeGridMounted, expand, collapse, BlockSettingsMenu } =
-		useListViewContext();
+	const {
+		isTreeGridMounted,
+		expand,
+		collapse,
+		BlockSettingsMenu,
+		listViewInstanceId,
+	} = useListViewContext();
 
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
@@ -246,21 +245,16 @@ function ListViewBlock( {
 			position={ position }
 			rowCount={ rowCount }
 			path={ path }
-			id={ `list-view-block-${ clientId }` }
+			id={ `list-view-${ listViewInstanceId }-block-${ clientId }` }
 			data-block={ clientId }
 			data-expanded={ canExpand ? isExpanded : undefined }
-			isExpanded={ canExpand ? isExpanded : undefined }
-			aria-selected={ !! isSelected || forceSelectionContentLock }
 			ref={ rowRef }
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
 				colSpan={ colSpan }
 				ref={ cellRef }
-				aria-label={ blockAriaLabel }
 				aria-selected={ !! isSelected || forceSelectionContentLock }
-				aria-expanded={ canExpand ? isExpanded : undefined }
-				aria-describedby={ descriptionId }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
@@ -277,9 +271,10 @@ function ListViewBlock( {
 								currentlyEditingBlockInCanvas ? 0 : tabIndex
 							}
 							onFocus={ onFocus }
-							isExpanded={ isExpanded }
+							isExpanded={ canExpand ? isExpanded : undefined }
 							selectedClientIds={ selectedClientIds }
-							preventAnnouncement={ preventAnnouncement }
+							ariaLabel={ blockAriaLabel }
+							ariaDescribedBy={ descriptionId }
 						/>
 						<div
 							className="block-editor-list-view-block-select-button__description"

package/src/components/list-view/drop-indicator.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
+import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 
 export default function ListViewDropIndicator( {
@@ -40,33 +41,74 @@ export default function ListViewDropIndicator( {
 	// is undefined, so the indicator will appear after the rootBlockElement.
 	const targetElement = blockElement || rootBlockElement;
 
-	const getDropIndicatorIndent = useCallback( () => {
-		if ( ! rootBlockElement ) {
-			return 0;
-		}
+	const getDropIndicatorIndent = useCallback(
+		( targetElementRect ) => {
+			if ( ! rootBlockElement ) {
+				return 0;
+			}
+
+			// Calculate the indent using the block icon of the root block.
+			// Using a classname selector here might be flaky and could be
+			// improved.
+			const rootBlockIconElement = rootBlockElement.querySelector(
+				'.block-editor-block-icon'
+			);
+			const rootBlockIconRect =
+				rootBlockIconElement.getBoundingClientRect();
+			return rootBlockIconRect.right - targetElementRect.left;
+		},
+		[ rootBlockElement ]
+	);
 
-		// Calculate the indent using the block icon of the root block.
-		// Using a classname selector here might be flaky and could be
-		// improved.
-		const targetElementRect = targetElement.getBoundingClientRect();
-		const rootBlockIconElement = rootBlockElement.querySelector(
-			'.block-editor-block-icon'
-		);
-		const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-		return rootBlockIconRect.right - targetElementRect.left;
-	}, [ rootBlockElement, targetElement ] );
+	const getDropIndicatorWidth = useCallback(
+		( targetElementRect, indent ) => {
+			if ( ! targetElement ) {
+				return 0;
+			}
+
+			// Default to assuming that the width of the drop indicator
+			// should be the same as the target element.
+			let width = targetElement.offsetWidth;
+
+			// In deeply nested lists, where a scrollbar is present,
+			// the width of the drop indicator should be the width of
+			// the scroll container, minus the distance from the left
+			// edge of the scroll container to the left edge of the
+			// target element.
+			const scrollContainer = getScrollContainer(
+				targetElement,
+				'horizontal'
+			);
+
+			if ( scrollContainer ) {
+				const scrollContainerRect =
+					scrollContainer.getBoundingClientRect();
+
+				if ( scrollContainer.clientWidth < width ) {
+					width =
+						scrollContainer.clientWidth -
+						( targetElementRect.left - scrollContainerRect.left );
+				}
+			}
+
+			// Subtract the indent from the final width of the indicator.
+			return width - indent;
+		},
+		[ targetElement ]
+	);
 
 	const style = useMemo( () => {
 		if ( ! targetElement ) {
 			return {};
 		}
 
-		const indent = getDropIndicatorIndent();
+		const targetElementRect = targetElement.getBoundingClientRect();
+		const indent = getDropIndicatorIndent( targetElementRect );
 
 		return {
-			width: targetElement.offsetWidth - indent,
+			width: getDropIndicatorWidth( targetElementRect, indent ),
 		};
-	}, [ getDropIndicatorIndent, targetElement ] );
+	}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );
 
 	const popoverAnchor = useMemo( () => {
 		const isValidDropPosition =
@@ -81,10 +123,8 @@ export default function ListViewDropIndicator( {
 			ownerDocument: targetElement.ownerDocument,
 			getBoundingClientRect() {
 				const rect = targetElement.getBoundingClientRect();
-				const indent = getDropIndicatorIndent();
-
+				const indent = getDropIndicatorIndent( rect );
 				const left = rect.left + indent;
-				const right = rect.right;
 				let top = 0;
 				let bottom = 0;
 
@@ -97,13 +137,18 @@ export default function ListViewDropIndicator( {
 					bottom = rect.bottom;
 				}
 
-				const width = right - left;
+				const width = getDropIndicatorWidth( rect, indent );
 				const height = bottom - top;
 
 				return new window.DOMRect( left, top, width, height );
 			},
 		};
-	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
+	}, [
+		targetElement,
+		dropPosition,
+		getDropIndicatorIndent,
+		getDropIndicatorWidth,
+	] );
 
 	if ( ! targetElement ) {
 		return null;

package/src/components/list-view/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	useInstanceId,
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
@@ -55,15 +56,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}         props                   Components props.
- * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {?boolean}       props.showBlockMovers   Flag to enable block movers. Defaults to `false`.
- * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
- * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
- * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
- * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
- * @param {Ref}            ref                     Forwarded ref
+ * @param {Object}         props                         Components props.
+ * @param {string}         props.id                      An HTML element id for the root element of ListView.
+ * @param {Array}          props.blocks                  _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {?boolean}       props.showBlockMovers         Flag to enable block movers. Defaults to `false`.
+ * @param {?boolean}       props.isExpanded              Flag to determine whether nested levels are expanded by default. Defaults to `false`.
+ * @param {?boolean}       props.showAppender            Flag to show or hide the block appender. Defaults to `false`.
+ * @param {?ComponentType} props.blockSettingsMenu       Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId            The client id of the root block from which we determine the blocks to show in the list.
+ * @param {string}         props.description             Optional accessible description for the tree grid component.
+ * @param {?Function}      props.onSelect                Optional callback to be invoked when a block is selected. Receives the block object that was selected.
+ * @param {Function}       props.renderAdditionalBlockUI Function that renders additional block content UI.
+ * @param {Ref}            ref                           Forwarded ref
  */
 function ListViewComponent(
 	{
@@ -74,6 +78,9 @@ function ListViewComponent(
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
 		rootClientId,
+		description,
+		onSelect,
+		renderAdditionalBlockUI,
 	},
 	ref
 ) {
@@ -88,9 +95,11 @@ function ListViewComponent(
 		);
 	}
 
+	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( { blocks, rootClientId } );
 
+	const { getBlock } = useSelect( blockEditorStore );
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
 			const {
@@ -124,11 +133,14 @@ function ListViewComponent(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -198,14 +210,17 @@ function ListViewComponent(
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			listViewInstanceId: instanceId,
+			renderAdditionalBlockUI,
 		} ),
 		[
-			isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			instanceId,
+			renderAdditionalBlockUI,
 		]
 	);
 
@@ -229,6 +244,8 @@ function ListViewComponent(
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
 				applicationAriaLabel={ __( 'Block navigation structure' ) }
+				// eslint-disable-next-line jsx-a11y/aria-props
+				aria-description={ description }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
@@ -257,6 +274,8 @@ export default forwardRef( ( props, ref ) => {
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
 			rootClientId={ null }
+			onSelect={ null }
+			renderAdditionalBlockUICallback={ null }
 		/>
 	);
 } );

package/src/components/list-view/leaf.js

@@ -51,6 +51,7 @@ const ListViewLeaf = forwardRef(
 				level={ level }
 				positionInSet={ position }
 				setSize={ rowCount }
+				isExpanded={ undefined }
 				{ ...props }
 			>
 				{ children }

package/src/components/list-view/style.scss

@@ -15,6 +15,18 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	.block-editor-list-view-block-select-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: inherit;
+		}
+
+		// Ensure that on hover, the admin color is still used.
+		&:hover {
+			color: var(--wp-admin-theme-color);
+		}
+	}
+
 	// The background has to be applied to the td, not tr, or border-radius won't work.
 	&.is-selected td {
 		background: var(--wp-admin-theme-color);
@@ -93,7 +105,7 @@
 	&.is-branch-selected.is-first-selected td:last-child {
 		border-top-right-radius: $radius-block-ui;
 	}
-	&[aria-expanded="false"] {
+	&[data-expanded="false"] {
 		&.is-branch-selected.is-first-selected td:first-child {
 			border-top-left-radius: $radius-block-ui;
 		}
@@ -364,6 +376,9 @@ $block-navigation-max-indent: 8;
 	}
 }
 
+// When updating the margin for each indentation level, the corresponding
+// indentation in `use-list-view-drop-zone.js` must be updated as well
+// to ensure the drop zone is aligned with the indentation.
 @for $i from 0 to $block-navigation-max-indent {
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
@@ -380,7 +395,7 @@ $block-navigation-max-indent: 8;
 }
 
 // Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="true"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transition: transform 0.2s ease;
 	transform: rotate(90deg);
@@ -388,7 +403,7 @@ $block-navigation-max-indent: 8;
 }
 
 // Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded="false"] .block-editor-list-view__expander svg {
 	visibility: visible;
 	transform: rotate(0deg);
 	transition: transform 0.2s ease;