@wordpress/block-editor 8.1.2-next.f435e9e01b.0 → 8.2.1-next.a55ed9455a.0

package/src/components/link-control/use-rich-url-data.js

@@ -80,7 +80,7 @@ function useRemoteUrlData( url ) {
 						} );
 					}
 				} );
-			// Cleanup: when the URL changes the abort the current request
+			// Cleanup: when the URL changes the abort the current request.
 			return () => {
 				controller.abort();
 			};

package/src/components/link-control/use-search-handler.js

@@ -115,8 +115,8 @@ const handleEntitySearch = async (
 				// the `id` prop is intentionally ommitted here because it
 				// is never exposed as part of the component's public API.
 				// see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316.
-				title: val, // must match the existing `<input>`s text value
-				url: val, // must match the existing `<input>`s text value
+				title: val, // Must match the existing `<input>`s text value.
+				url: val, // Must match the existing `<input>`s text value.
 				type: CREATE_TYPE,
 		  } );
 };

package/src/components/list-view/README.md

@@ -4,7 +4,7 @@ The ListView component provides an overview of the hierarchical structure of all
 
 Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below.
 
-In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree.
+In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree. Multiple blocks at the same level of nesting can be selected by holding down the `SHIFT` key and clicking blocks within the list.
 
 ![List view](https://make.wordpress.org/core/files/2020/08/block-navigation.png)
 ![View of a group list view](https://make.wordpress.org/core/files/2020/08/view-of-group-block-navigation.png)
@@ -23,7 +23,7 @@ Renders a list view with default syles.
 ```jsx
 import { ListView } from '@wordpress/block-editor';
 
-const MyNavigation = () => <ListView onSelect={ onClose } />;
+const MyNavigation = () => <ListView />;
 ```
 
 ## Related components

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

@@ -27,6 +27,7 @@ const ListViewBlockContents = forwardRef(
 			siblingBlockCount,
 			level,
 			isExpanded,
+			selectedClientIds,
 			...props
 		},
 		ref
@@ -36,12 +37,10 @@ const ListViewBlockContents = forwardRef(
 		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
 			( select ) => {
 				const {
-					getBlockRootClientId,
 					hasBlockMovingClientId,
 					getSelectedBlockClientId,
 				} = select( blockEditorStore );
 				return {
-					rootClientId: getBlockRootClientId( clientId ) || '',
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
 				};
@@ -56,8 +55,16 @@ const ListViewBlockContents = forwardRef(
 			'is-dropping-before': isBlockMoveTarget,
 		} );
 
+		// Only include all selected blocks if the currently clicked on block
+		// is one of the selected blocks. This ensures that if a user attempts
+		// to drag a block that isn't part of the selection, they're still able
+		// to drag it and rearrange its position.
+		const draggableClientIds = selectedClientIds.includes( clientId )
+			? selectedClientIds
+			: [ clientId ];
+
 		return (
-			<BlockDraggable clientIds={ [ block.clientId ] }>
+			<BlockDraggable clientIds={ draggableClientIds }>
 				{ ( { draggable, onDragStart, onDragEnd } ) => (
 					<ListViewBlockSelectButton
 						ref={ ref }

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

@@ -60,7 +60,6 @@ function ListViewBlockSelectButton(
 
 	function onKeyDownHandler( event ) {
 		if ( event.keyCode === ENTER || event.keyCode === SPACE ) {
-			event.preventDefault();
 			onClick( event );
 		}
 	}
@@ -86,7 +85,7 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<BlockTitle clientId={ clientId } />
+				<BlockTitle clientId={ clientId } maximumLength={ 35 } />
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor">
 						{ blockInformation.anchor }

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

@@ -48,6 +48,7 @@ function ListViewBlock( {
 	showBlockMovers,
 	path,
 	isExpanded,
+	selectedClientIds,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -104,14 +105,22 @@ function ListViewBlock( {
 
 	const selectEditorBlock = useCallback(
 		( event ) => {
-			event.stopPropagation();
-			selectBlock( clientId );
+			selectBlock( event, clientId );
 		},
 		[ clientId, selectBlock ]
 	);
 
+	const selectDuplicatedBlock = useCallback(
+		( newClientId ) => {
+			selectBlock( undefined, newClientId );
+		},
+		[ selectBlock ]
+	);
+
 	const toggleExpanded = useCallback(
 		( event ) => {
+			// Prevent shift+click from opening link in a new window when toggling.
+			event.preventDefault();
 			event.stopPropagation();
 			if ( isExpanded === true ) {
 				collapse( clientId );
@@ -124,7 +133,7 @@ function ListViewBlock( {
 
 	const showBlockActions =
 		withExperimentalFeatures &&
-		//hide actions for blocks like core/widget-areas
+		// hide actions for blocks like core/widget-areas
 		( ! hideContainerBlockActions ||
 			( hideContainerBlockActions && level > 1 ) );
 
@@ -146,11 +155,21 @@ function ListViewBlock( {
 	} );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const settingsAriaLabel = sprintf(
-		// translators: %s: The title of the block.
-		__( 'Options for %s block' ),
-		blockInformation.title
-	);
+	const settingsAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Options for %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Options' );
+
+	// Only include all selected blocks if the currently clicked on block
+	// is one of the selected blocks. This ensures that if a user attempts
+	// to alter a block that isn't part of the selection, they're still able
+	// to do so.
+	const dropdownClientIds = selectedClientIds.includes( clientId )
+		? selectedClientIds
+		: [ clientId ];
 
 	return (
 		<ListViewLeaf
@@ -186,6 +205,7 @@ function ListViewBlock( {
 							tabIndex={ tabIndex }
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
+							selectedClientIds={ selectedClientIds }
 						/>
 					</div>
 				) }
@@ -226,7 +246,7 @@ function ListViewBlock( {
 				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
-							clientIds={ [ clientId ] }
+							clientIds={ dropdownClientIds }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							toggleProps={ {
@@ -236,7 +256,7 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ selectEditorBlock }
+							__experimentalSelectBlock={ selectDuplicatedBlock }
 						/>
 					) }
 				</TreeGridCell>

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

@@ -145,6 +145,7 @@ function ListViewBranch( props ) {
 								path={ updatedPath }
 								isExpanded={ isExpanded }
 								listPosition={ nextPosition }
+								selectedClientIds={ selectedClientIds }
 							/>
 						) }
 						{ ! showBlock && (

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

@@ -6,7 +6,7 @@ import {
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
+import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import {
 	useCallback,
 	useEffect,
@@ -23,41 +23,47 @@ import { __ } from '@wordpress/i18n';
 import ListViewBranch from './branch';
 import { ListViewContext } from './context';
 import ListViewDropIndicator from './drop-indicator';
+import useBlockSelection from './use-block-selection';
 import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
+import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
 
-const noop = () => {};
 const expanded = ( state, action ) => {
-	switch ( action.type ) {
-		case 'expand':
-			return { ...state, ...{ [ action.clientId ]: true } };
-		case 'collapse':
-			return { ...state, ...{ [ action.clientId ]: false } };
-		default:
-			return state;
+	if ( Array.isArray( action.clientIds ) ) {
+		return {
+			...state,
+			...action.clientIds.reduce(
+				( newState, id ) => ( {
+					...newState,
+					[ id ]: action.type === 'expand',
+				} ),
+				{}
+			),
+		};
 	}
+	return state;
 };
 
+export const BLOCK_LIST_ITEM_HEIGHT = 36;
+
 /**
  * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
  * recursive component (it renders itself), so this ensures TreeGrid is only
  * present at the very top of the navigation grid.
  *
- * @param {Object}   props                                          Components props.
- * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {Function} props.onSelect                                 Block selection callback.
- * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.
- * @param {boolean}  props.showBlockMovers                          Flag to enable block movers
- * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
- * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
- * @param {boolean}  props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
- * @param {Object}   ref                                            Forwarded ref
+ * @param {Object}  props                                          Components props.
+ * @param {Array}   props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showNestedBlocks                         Flag to enable displaying nested blocks.
+ * @param {boolean} props.showBlockMovers                          Flag to enable block movers
+ * @param {boolean} props.__experimentalFeatures                   Flag to enable experimental features.
+ * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
+ * @param {boolean} props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
+ * @param {Object}  ref                                            Forwarded ref
  */
 function ListView(
 	{
 		blocks,
-		onSelect = noop,
 		__experimentalFeatures,
 		__experimentalPersistentListViewFeatures,
 		__experimentalHideContainerBlockActions,
@@ -72,7 +78,7 @@ function ListView(
 		draggedClientIds,
 		selectedClientIds,
 	} = useListViewClientIds( blocks );
-	const { selectBlock } = useDispatch( blockEditorStore );
+
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
@@ -88,13 +94,9 @@ function ListView(
 		},
 		[ draggedClientIds ]
 	);
-	const selectEditorBlock = useCallback(
-		( clientId ) => {
-			selectBlock( clientId );
-			onSelect( clientId );
-		},
-		[ selectBlock, onSelect ]
-	);
+
+	const { updateBlockSelection } = useBlockSelection();
+
 	const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
 	const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
@@ -102,6 +104,17 @@ function ListView(
 	const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );
 
 	const isMounted = useRef( false );
+	const { setSelectedTreeId } = useListViewExpandSelectedItem( {
+		firstSelectedBlockClientId: selectedClientIds[ 0 ],
+		setExpandedState,
+	} );
+	const selectEditorBlock = useCallback(
+		( event, clientId ) => {
+			updateBlockSelection( event, clientId );
+			setSelectedTreeId( clientId );
+		},
+		[ setSelectedTreeId, updateBlockSelection ]
+	);
 	useEffect( () => {
 		isMounted.current = true;
 	}, [] );
@@ -111,7 +124,7 @@ function ListView(
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	const [ fixedListWindow ] = useFixedWindowList(
 		elementRef,
-		36,
+		BLOCK_LIST_ITEM_HEIGHT,
 		visibleBlockCount,
 		{
 			useWindowing: __experimentalPersistentListViewFeatures,
@@ -124,7 +137,7 @@ function ListView(
 			if ( ! clientId ) {
 				return;
 			}
-			setExpandedState( { type: 'expand', clientId } );
+			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
 		},
 		[ setExpandedState ]
 	);
@@ -133,7 +146,7 @@ function ListView(
 			if ( ! clientId ) {
 				return;
 			}
-			setExpandedState( { type: 'collapse', clientId } );
+			setExpandedState( { type: 'collapse', clientIds: [ clientId ] } );
 		},
 		[ setExpandedState ]
 	);
@@ -149,6 +162,18 @@ function ListView(
 		},
 		[ collapse ]
 	);
+	const focusRow = useCallback(
+		( event, startRow, endRow ) => {
+			if ( event.shiftKey ) {
+				updateBlockSelection(
+					event,
+					startRow?.dataset?.block,
+					endRow?.dataset?.block
+				);
+			}
+		},
+		[ updateBlockSelection ]
+	);
 
 	const contextValue = useMemo(
 		() => ( {
@@ -185,6 +210,7 @@ function ListView(
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
+				onFocusRow={ focusRow }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/list-view/test/utils.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import { getCommonDepthClientIds } from '../utils';
+
+describe( 'getCommonDepthClientIds', () => {
+	it( 'should return start and end when no depth is provided', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[],
+			[]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
+	} );
+
+	it( 'should return deepest start and end when depths match', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1', 'start-2', 'start-3' ],
+			[ 'end-1', 'end-2', 'end-3' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'clicked-id' } );
+	} );
+
+	it( 'should return shallower ids when start is shallower', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1' ],
+			[ 'end-1', 'end-2', 'end-3' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-id', end: 'end-2' } );
+	} );
+
+	it( 'should return shallower ids when end is shallower', () => {
+		const result = getCommonDepthClientIds(
+			'start-id',
+			'clicked-id',
+			[ 'start-1', 'start-2', 'start-3' ],
+			[ 'end-1', 'end-2' ]
+		);
+
+		expect( result ).toEqual( { start: 'start-3', end: 'clicked-id' } );
+	} );
+} );

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

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { difference } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { speak } from '@wordpress/a11y';
+import { __, sprintf } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import { UP, DOWN } from '@wordpress/keycodes';
+import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getCommonDepthClientIds } from './utils';
+
+export default function useBlockSelection() {
+	const { clearSelectedBlock, multiSelect, selectBlock } = useDispatch(
+		blockEditorStore
+	);
+	const {
+		getBlockName,
+		getBlockParents,
+		getBlockSelectionStart,
+		getBlockSelectionEnd,
+		getSelectedBlockClientIds,
+		hasMultiSelection,
+		hasSelectedBlock,
+	} = useSelect( blockEditorStore );
+
+	const { getBlockType } = useSelect( blocksStore );
+
+	const updateBlockSelection = useCallback(
+		async ( event, clientId, destinationClientId ) => {
+			if ( ! event?.shiftKey ) {
+				await clearSelectedBlock();
+				selectBlock( clientId );
+				return;
+			}
+
+			// To handle multiple block selection via the `SHIFT` key, prevent
+			// the browser default behavior of opening the link in a new window.
+			event.preventDefault();
+
+			const isKeyPress =
+				event.type === 'keydown' &&
+				( event.keyCode === UP || event.keyCode === DOWN );
+
+			// Handle clicking on a block when no blocks are selected, and return early.
+			if (
+				! isKeyPress &&
+				! hasSelectedBlock() &&
+				! hasMultiSelection()
+			) {
+				selectBlock( clientId, null );
+				return;
+			}
+
+			const selectedBlocks = getSelectedBlockClientIds();
+			const clientIdWithParents = [
+				...getBlockParents( clientId ),
+				clientId,
+			];
+
+			if (
+				isKeyPress &&
+				! selectedBlocks.some( ( blockId ) =>
+					clientIdWithParents.includes( blockId )
+				)
+			) {
+				// Ensure that shift-selecting blocks via the keyboard only
+				// expands the current selection if focusing over already
+				// selected blocks. Otherwise, clear the selection so that
+				// a user can create a new selection entirely by keyboard.
+				await clearSelectedBlock();
+			}
+
+			let startTarget = getBlockSelectionStart();
+			let endTarget = clientId;
+
+			// Handle keyboard behavior for selecting multiple blocks.
+			if ( isKeyPress ) {
+				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
+					// Set the starting point of the selection to the currently
+					// focused block, if there are no blocks currently selected.
+					// This ensures that as the selection is expanded or contracted,
+					// the starting point of the selection is anchored to that block.
+					startTarget = clientId;
+				}
+				if ( destinationClientId ) {
+					// If the user presses UP or DOWN, we want to ensure that the block they're
+					// moving to is the target for selection, and not the currently focused one.
+					endTarget = destinationClientId;
+				}
+			}
+
+			const startParents = getBlockParents( startTarget );
+			const endParents = getBlockParents( endTarget );
+
+			const { start, end } = getCommonDepthClientIds(
+				startTarget,
+				endTarget,
+				startParents,
+				endParents
+			);
+			await multiSelect( start, end, null );
+
+			// Announce deselected block, or number of deselected blocks if
+			// the total number of blocks deselected is greater than one.
+			const updatedSelectedBlocks = getSelectedBlockClientIds();
+
+			const selectionDiff = difference(
+				selectedBlocks,
+				updatedSelectedBlocks
+			);
+
+			let label;
+			if ( selectionDiff.length === 1 ) {
+				const title = getBlockType( getBlockName( selectionDiff[ 0 ] ) )
+					?.title;
+				if ( title ) {
+					label = sprintf(
+						/* translators: %s: block name */
+						__( '%s deselected.' ),
+						title
+					);
+				}
+			} else if ( selectionDiff.length > 1 ) {
+				label = sprintf(
+					/* translators: %s: number of deselected blocks */
+					__( '%s blocks deselected.' ),
+					selectionDiff.length
+				);
+			}
+
+			if ( label ) {
+				speak( label );
+			}
+		},
+		[
+			clearSelectedBlock,
+			getBlockName,
+			getBlockType,
+			getBlockParents,
+			getBlockSelectionStart,
+			getBlockSelectionEnd,
+			getSelectedBlockClientIds,
+			hasMultiSelection,
+			hasSelectedBlock,
+			multiSelect,
+			selectBlock,
+		]
+	);
+
+	return {
+		updateBlockSelection,
+	};
+}

package/src/components/list-view/use-list-view-expand-selected-item.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useListViewExpandSelectedItem( {
+	firstSelectedBlockClientId,
+	setExpandedState,
+} ) {
+	const [ selectedTreeId, setSelectedTreeId ] = useState( null );
+	const { selectedBlockParentClientIds } = useSelect(
+		( select ) => {
+			const { getBlockParents } = select( blockEditorStore );
+			return {
+				selectedBlockParentClientIds: getBlockParents(
+					firstSelectedBlockClientId,
+					false
+				),
+			};
+		},
+		[ firstSelectedBlockClientId ]
+	);
+
+	const parentClientIds =
+		Array.isArray( selectedBlockParentClientIds ) &&
+		selectedBlockParentClientIds.length
+			? selectedBlockParentClientIds
+			: null;
+
+	// Expand tree when a block is selected.
+	useEffect( () => {
+		// If the selectedTreeId is the same as the selected block,
+		// it means that the block was selected using the block list tree.
+		if ( selectedTreeId === firstSelectedBlockClientId ) {
+			return;
+		}
+
+		// If the selected block has parents, get the top-level parent.
+		if ( parentClientIds ) {
+			// If the selected block has parents,
+			// expand the tree branch.
+			setExpandedState( {
+				type: 'expand',
+				clientIds: selectedBlockParentClientIds,
+			} );
+		}
+	}, [ firstSelectedBlockClientId ] );
+
+	return {
+		setSelectedTreeId,
+	};
+}

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

@@ -30,3 +30,34 @@ export const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>
 	isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
 		? selectedBlockClientIds.indexOf( clientId ) !== -1
 		: selectedBlockClientIds === clientId;
+
+/**
+ * From a start and end clientId of potentially different nesting levels,
+ * return the nearest-depth ids that have a common level of depth in the
+ * nesting hierarchy. For multiple block selection, this ensure that the
+ * selection is always at the same nesting level, and not split across
+ * separate levels.
+ *
+ * @param {string}   startId      The first id of a selection.
+ * @param {string}   endId        The end id of a selection, usually one that has been clicked on.
+ * @param {string[]} startParents An array of ancestor ids for the start id, in descending order.
+ * @param {string[]} endParents   An array of ancestor ids for the end id, in descending order.
+ * @return {Object} An object containing the start and end ids.
+ */
+export function getCommonDepthClientIds(
+	startId,
+	endId,
+	startParents,
+	endParents
+) {
+	const startPath = [ ...startParents, startId ];
+	const endPath = [ ...endParents, endId ];
+	const depth = Math.min( startPath.length, endPath.length ) - 1;
+	const start = startPath[ depth ];
+	const end = endPath[ depth ];
+
+	return {
+		start,
+		end,
+	};
+}