@wordpress/block-editor 11.7.0 → 12.0.0

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,11 +2,13 @@
  * WordPress dependencies
  */
 import {
+	useInstanceId,
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import {
 	useCallback,
 	useEffect,
@@ -56,11 +58,13 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}         props                   Components props.
  * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @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 {Ref}            ref                     Forwarded ref
  */
 function ListViewComponent(
@@ -71,11 +75,25 @@ function ListViewComponent(
 		isExpanded = false,
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
+		rootClientId,
+		description,
 	},
 	ref
 ) {
+	// This can be removed once we no longer need to support the blocks prop.
+	if ( blocks ) {
+		deprecated(
+			'`blocks` property in `wp.blockEditor.__experimentalListView`',
+			{
+				since: '6.3',
+				alternative: '`rootClientId` property',
+			}
+		);
+	}
+
+	const instanceId = useInstanceId( ListViewComponent );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
+		useListViewClientIds( { blocks, rootClientId } );
 
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
@@ -184,14 +202,15 @@ function ListViewComponent(
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			listViewInstanceId: instanceId,
 		} ),
 		[
-			isMounted.current,
 			draggedClientIds,
 			expandedState,
 			expand,
 			collapse,
 			BlockSettingsMenu,
+			instanceId,
 		]
 	);
 
@@ -215,10 +234,13 @@ 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
 						blocks={ clientIdsTree }
+						parentId={ rootClientId }
 						selectBlock={ selectEditorBlock }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
@@ -241,6 +263,7 @@ export default forwardRef( ( props, ref ) => {
 			{ ...props }
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
+			rootClientId={ 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;
 
+	.components-button {
+		// When a row is expanded, retain the dark color.
+		&[aria-expanded="true"] {
+			color: $gray-900;
+		}
+
+		// 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;
 		}
@@ -380,7 +392,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 +400,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;
@@ -400,7 +412,9 @@ $block-navigation-max-indent: 8;
 
 	.block-editor-list-view-drop-indicator__line {
 		background: var(--wp-admin-theme-color);
-		height: $border-width;
+		height: 6px;
+		border: 1px solid $white;
+		border-radius: 4px;
 	}
 }
 

package/src/components/list-view/test/use-list-view-drop-zone.js

@@ -0,0 +1,188 @@
+/**
+ * Internal dependencies
+ */
+import { getListViewDropTarget } from '../use-list-view-drop-zone';
+
+describe( 'getListViewDropTarget', () => {
+	const blocksData = [
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-1',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 50,
+					bottom: 100,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 50,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 1,
+			isDraggedBlock: false,
+			isExpanded: true,
+			rootClientId: '',
+		},
+		{
+			blockIndex: 0,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-2',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 100,
+					bottom: 150,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 100,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: false,
+			rootClientId: 'block-1',
+		},
+		{
+			blockIndex: 1,
+			canInsertDraggedBlocksAsChild: true,
+			canInsertDraggedBlocksAsSibling: true,
+			clientId: 'block-3',
+			element: {
+				getBoundingClientRect: () => ( {
+					top: 150,
+					bottom: 150,
+					left: 10,
+					right: 100,
+					x: 10,
+					y: 150,
+					width: 90,
+					height: 50,
+				} ),
+			},
+			innerBlockCount: 0,
+			isDraggedBlock: false,
+			isExpanded: false,
+			rootClientId: '',
+		},
+	];
+
+	it( 'should return the correct target when dragging a block over the top half of the first block', () => {
+		const position = { x: 50, y: 70 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			clientId: 'block-1',
+			dropPosition: 'top',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the bottom half of an expanded block', () => {
+		const position = { x: 50, y: 90 };
+		const target = getListViewDropTarget( blocksData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should nest when dragging a block over the right side and bottom half of a collapsed block with children', () => {
+		const position = { x: 70, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 0,
+			dropPosition: 'inside',
+			rootClientId: 'block-1',
+		} );
+	} );
+
+	it( 'should drag below when dragging a block over the left side and bottom half of a collapsed block with children', () => {
+		const position = { x: 30, y: 90 };
+
+		const collapsedBlockData = [ ...blocksData ];
+
+		// Set the first block to be collapsed.
+		collapsedBlockData[ 0 ] = {
+			...collapsedBlockData[ 0 ],
+			isExpanded: false,
+		};
+
+		// Hide the first block's children.
+		collapsedBlockData.splice( 1, 1 );
+
+		const target = getListViewDropTarget( collapsedBlockData, position );
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-1',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should drag below when attempting to nest but the dragged block is not allowed as a child', () => {
+		const position = { x: 70, y: 90 };
+
+		const childNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a child.
+		childNotAllowedBlockData[ 0 ] = {
+			...childNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsChild: false,
+		};
+
+		const target = getListViewDropTarget(
+			childNotAllowedBlockData,
+			position
+		);
+
+		expect( target ).toEqual( {
+			blockIndex: 1,
+			clientId: 'block-1',
+			dropPosition: 'bottom',
+			rootClientId: '',
+		} );
+	} );
+
+	it( 'should return undefined when the dragged block cannot be inserted as a sibling', () => {
+		const position = { x: 50, y: 70 };
+
+		const siblingNotAllowedBlockData = [ ...blocksData ];
+
+		// Set the first block to not be allowed as a sibling.
+		siblingNotAllowedBlockData[ 0 ] = {
+			...siblingNotAllowedBlockData[ 0 ],
+			canInsertDraggedBlocksAsSibling: false,
+		};
+
+		const target = getListViewDropTarget(
+			siblingNotAllowedBlockData,
+			position
+		);
+
+		expect( target ).toBeUndefined();
+	} );
+} );

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

@@ -144,7 +144,7 @@ export default function useBlockSelection() {
 			}
 
 			if ( label ) {
-				speak( label );
+				speak( label, 'assertive' );
 			}
 		},
 		[

package/src/components/list-view/use-list-view-client-ids.js

@@ -9,7 +9,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 
-export default function useListViewClientIds( blocks ) {
+export default function useListViewClientIds( { blocks, rootClientId } ) {
 	return useSelect(
 		( select ) => {
 			const {
@@ -21,9 +21,11 @@ export default function useListViewClientIds( blocks ) {
 			return {
 				selectedClientIds: getSelectedBlockClientIds(),
 				draggedClientIds: getDraggedBlockClientIds(),
-				clientIdsTree: blocks ? blocks : __unstableGetClientIdsTree(),
+				clientIdsTree: blocks
+					? blocks
+					: __unstableGetClientIdsTree( rootClientId ),
 			};
 		},
-		[ blocks ]
+		[ blocks, rootClientId ]
 	);
 }

package/src/components/list-view/use-list-view-drop-zone.js

@@ -36,6 +36,7 @@ import { store as blockEditorStore } from '../../store';
  * @property {Element} element                         The DOM element representing the block.
  * @property {number}  innerBlockCount                 The number of inner blocks the block has.
  * @property {boolean} isDraggedBlock                  Whether the block is currently being dragged.
+ * @property {boolean} isExpanded                      Whether the block is expanded in the UI.
  * @property {boolean} canInsertDraggedBlocksAsSibling Whether the dragged block can be a sibling of this block.
  * @property {boolean} canInsertDraggedBlocksAsChild   Whether the dragged block can be a child of this block.
  */
@@ -78,7 +79,7 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  *
  * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
-function getListViewDropTarget( blocksData, position ) {
+export function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;
 	let candidateBlockData;
 	let candidateDistance;
@@ -146,12 +147,15 @@ function getListViewDropTarget( blocksData, position ) {
 
 	// If the user is dragging towards the bottom of the block check whether
 	// they might be trying to nest the block as a child.
-	// If the block already has inner blocks, this should always be treated
+	// If the block already has inner blocks, and is expanded, this should be treated
 	// as nesting since the next block in the tree will be the first child.
+	// However, if the block is collapsed, dragging beneath the block should
+	// still be allowed, as the next visible block in the tree will be a sibling.
 	if (
 		isDraggingBelow &&
 		candidateBlockData.canInsertDraggedBlocksAsChild &&
-		( candidateBlockData.innerBlockCount > 0 ||
+		( ( candidateBlockData.innerBlockCount > 0 &&
+			candidateBlockData.isExpanded ) ||
 			isNestingGesture( position, candidateRect ) )
 	) {
 		return {
@@ -208,10 +212,12 @@ export default function useListViewDropZone() {
 
 				const blocksData = blockElements.map( ( blockElement ) => {
 					const clientId = blockElement.dataset.block;
+					const isExpanded = blockElement.dataset.expanded === 'true';
 					const rootClientId = getBlockRootClientId( clientId );
 
 					return {
 						clientId,
+						isExpanded,
 						rootClientId,
 						blockIndex: getBlockIndex( clientId ),
 						element: blockElement,

package/src/components/media-replace-flow/README.md

@@ -65,10 +65,11 @@ Callback called when an upload error happens and receives an error message as an
 
 ### name
 
-The label of the replace button.
+A `string` value will be used as the label of the replace button. It can also accept `Phrasing content` elements(ex. `span`).
 
--   Type: `string`
+-   Type: `string|Element`
 -   Required: No
+-   Default: `Replace`
 
 ### createNotice
 

package/src/components/media-replace-flow/index.js

@@ -59,6 +59,9 @@ const MediaReplaceFlow = ( {
 	multiple = false,
 	addToGallery,
 	handleUpload = true,
+	popoverProps = {
+		variant: 'toolbar',
+	},
 } ) => {
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
@@ -136,13 +139,9 @@ const MediaReplaceFlow = ( {
 
 	const gallery = multiple && onlyAllowsImages();
 
-	const POPOVER_PROPS = {
-		variant: 'toolbar',
-	};
-
 	return (
 		<Dropdown
-			popoverProps={ POPOVER_PROPS }
+			popoverProps={ popoverProps }
 			contentClassName="block-editor-media-replace-flow__options"
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarButton

package/src/components/navigable-toolbar/index.js

@@ -93,7 +93,8 @@ function useToolbarFocus(
 	focusOnMount,
 	isAccessibleToolbar,
 	defaultIndex,
-	onIndexChange
+	onIndexChange,
+	shouldUseKeyboardFocusShortcut
 ) {
 	// Make sure we don't use modified versions of this prop.
 	const [ initialFocusOnMount ] = useState( focusOnMount );
@@ -103,8 +104,14 @@ function useToolbarFocus(
 		focusFirstTabbableIn( ref.current );
 	}, [] );
 
+	const focusToolbarViaShortcut = () => {
+		if ( shouldUseKeyboardFocusShortcut ) {
+			focusToolbar();
+		}
+	};
+
 	// Focus on toolbar when pressing alt+F10 when the toolbar is visible.
-	useShortcut( 'core/block-editor/focus-toolbar', focusToolbar );
+	useShortcut( 'core/block-editor/focus-toolbar', focusToolbarViaShortcut );
 
 	useEffect( () => {
 		if ( initialFocusOnMount ) {
@@ -147,6 +154,7 @@ function useToolbarFocus(
 function NavigableToolbar( {
 	children,
 	focusOnMount,
+	shouldUseKeyboardFocusShortcut = true,
 	__experimentalInitialIndex: initialIndex,
 	__experimentalOnIndexChange: onIndexChange,
 	...props
@@ -159,7 +167,8 @@ function NavigableToolbar( {
 		focusOnMount,
 		isAccessibleToolbar,
 		initialIndex,
-		onIndexChange
+		onIndexChange,
+		shouldUseKeyboardFocusShortcut
 	);
 
 	if ( isAccessibleToolbar ) {

package/src/components/off-canvas-editor/appender.js

@@ -17,9 +17,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
-
-import { unlock } from '../../lock-unlock';
-import { privateApis as blockEditorPrivateApis } from '../../private-apis';
+import { ComposedPrivateInserter as PrivateInserter } from '../inserter';
 
 const prioritizedInserterBlocks = [
 	'core/navigation-link/page',
@@ -86,7 +84,6 @@ export const Appender = forwardRef(
 		if ( hideInserter ) {
 			return null;
 		}
-		const { PrivateInserter } = unlock( blockEditorPrivateApis );
 		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
 		const description = sprintf(
 			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */

package/src/components/off-canvas-editor/block-contents.js

@@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store';
 import { updateAttributes } from './update-attributes';
 import { LinkUI } from './link-ui';
 import { useInsertedBlock } from './use-inserted-block';
+import { useListViewContext } from './context';
 
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
@@ -90,6 +91,8 @@ const ListViewBlockContents = forwardRef(
 			hasExistingLinkValue,
 		] );
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -107,6 +110,7 @@ const ListViewBlockContents = forwardRef(
 
 		return (
 			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
 				{ isLinkUIOpen && (
 					<LinkUI
 						clientId={ lastInsertedBlockClientId }