List View: Add a rootClientId prop

packages/block-editor/src/components/list-view/README.md

@@ -2,6 +2,8 @@
 
 The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
 
+By providing the `rootClientId` prop you can restrict the blocks that are shown to only children of the block with that client id.
+
 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. Multiple blocks at the same level of nesting can be selected by holding down the `SHIFT` key and clicking blocks within the list.

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

@@ -7,6 +7,7 @@ import {
 } 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 +57,12 @@ 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 {Ref}            ref                     Forwarded ref
  */
 function ListViewComponent(
@@ -71,11 +73,23 @@ function ListViewComponent(
 		isExpanded = false,
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
+		rootClientId,
 	},
 	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 { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
+		useListViewClientIds( { blocks, rootClientId } );
 
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
@@ -219,6 +233,7 @@ function ListViewComponent(
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
 						blocks={ clientIdsTree }
+						parentId={ rootClientId }
 						selectBlock={ selectEditorBlock }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
@@ -241,6 +256,7 @@ export default forwardRef( ( props, ref ) => {
 			{ ...props }
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
+			rootClientId={ null }
 		/>
 	);
 } );

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

packages/edit-site/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
 	useFocusReturn,
 	useInstanceId,
 	useMergeRefs,
 } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -35,6 +38,10 @@ export default function ListViewSidebar() {
 	const instanceId = useInstanceId( ListViewSidebar );
 	const labelId = `edit-site-editor__list-view-panel-label-${ instanceId }`;
 	const { PrivateListView } = unlock( blockEditorPrivateApis );
+	const clientIdsTree = useSelect( ( select ) => {
+		const { __unstableGetClientIdsTree } = select( blockEditorStore );
+		return __unstableGetClientIdsTree();
+	} );
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -60,7 +67,11 @@ export default function ListViewSidebar() {
 					focusOnMountRef,
 				] ) }
 			>
-				<PrivateListView />
+				<PrivateListView
+					rootClientId={
+						clientIdsTree[ 0 ].innerBlocks[ 0 ].clientId
+					}
+				/>
 			</div>
 		</div>
 	);