List View: Add multi-select behaviour for blocks when shift key is selected

docs/reference-guides/data/data-core-block-editor.md

@@ -1261,6 +1261,7 @@ _Parameters_
 
 -   _start_ `string`: First block of the multi selection.
 -   _end_ `string`: Last block of the multiselection.
+-   _\_\_experimentalInitialPosition_ `number|null`: Optional initial position. Pass as null to skip focus within editor canvas.
 
 ### receiveBlocks
 

packages/block-editor/CHANGELOG.md

@@ -12,6 +12,10 @@
 
 -   Removed unused `@wordpress/block-serialization-default-parser`, `css-mediaquery`, `memize` and `redux-multi` dependencies ([#38388](https://github.com/WordPress/gutenberg/pull/38388)).
 
+### New Features
+
+-   List View now supports selecting and dragging multiple blocks via `SHIFT` clicking items in the list [#38314](https://github.com/WordPress/gutenberg/pull/38314).
+
 ## 8.1.0 (2022-01-27)
 
 ## 8.0.0 (2021-11-07)

packages/block-editor/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

packages/block-editor/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 }

packages/block-editor/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 );
 		}
 	}

packages/block-editor/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 );
@@ -154,6 +163,14 @@ function ListViewBlock( {
 		  )
 		: __( '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
 			className={ classes }
@@ -188,6 +205,7 @@ function ListViewBlock( {
 							tabIndex={ tabIndex }
 							onFocus={ onFocus }
 							isExpanded={ isExpanded }
+							selectedClientIds={ selectedClientIds }
 						/>
 					</div>
 				) }
@@ -228,7 +246,7 @@ function ListViewBlock( {
 				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
-							clientIds={ [ clientId ] }
+							clientIds={ dropdownClientIds }
 							icon={ moreVertical }
 							label={ settingsAriaLabel }
 							toggleProps={ {
@@ -238,7 +256,7 @@ function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ selectBlock }
+							__experimentalSelectBlock={ selectDuplicatedBlock }
 						/>
 					) }
 				</TreeGridCell>

packages/block-editor/src/components/list-view/branch.js

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

packages/block-editor/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,11 +23,11 @@ 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 { store as blockEditorStore } from '../../store';
 
-const noop = () => {};
 const expanded = ( state, action ) => {
 	switch ( action.type ) {
 		case 'expand':
@@ -44,20 +44,18 @@ const expanded = ( state, action ) => {
  * 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 +70,7 @@ function ListView(
 		draggedClientIds,
 		selectedClientIds,
 	} = useListViewClientIds( blocks );
-	const { selectBlock } = useDispatch( blockEditorStore );
+
 	const { visibleBlockCount } = useSelect(
 		( select ) => {
 			const { getGlobalBlockCount, getClientIdsOfDescendants } = select(
@@ -88,13 +86,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();
@@ -149,6 +143,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,11 +191,12 @@ function ListView(
 				ref={ treeGridRef }
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
+				onFocusRow={ focusRow }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
 						blocks={ clientIdsTree }
-						selectBlock={ selectEditorBlock }
+						selectBlock={ updateBlockSelection }
 						showNestedBlocks={ showNestedBlocks }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }

packages/block-editor/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' } );
+	} );
+} );