Update Nav OffCanvas Editor to use clientids tree (#46541)

* Navigation: Pass a tree of client ids instead of an array of blocks.

Co-authored-by: Daniel Richards <[email protected]>

* Explain passing custom clientIDs

Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>
Co-authored-by: Dave Smith <[email protected]>

Author: 4 people

packages/block-editor/src/components/off-canvas-editor/block.js

@@ -145,7 +145,7 @@ function ListViewBlock( {
 
 	const { isTreeGridMounted, expand, collapse } = useListViewContext();
 
-	const isEditable = block.name !== 'core/page-list-item';
+	const isEditable = blockName !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(

packages/block-library/src/navigation/edit/index.js

@@ -717,13 +717,13 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -759,12 +759,12 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }
@@ -832,13 +832,13 @@ function Navigation( {
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
 				<MenuInspectorControls
+					clientId={ clientId }
 					createNavigationMenuIsSuccess={
 						createNavigationMenuIsSuccess
 					}
 					createNavigationMenuIsError={ createNavigationMenuIsError }
 					currentMenuId={ ref }
 					isNavigationMenuMissing={ isNavigationMenuMissing }
-					innerBlocks={ innerBlocks }
 					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
 					onCreateNew={ createUntitledEmptyNavigationMenu }
 					onSelectClassicMenu={ onSelectClassicMenu }

packages/block-library/src/navigation/edit/menu-inspector-controls.js

@@ -4,8 +4,10 @@
 import {
 	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PanelBody, VisuallyHidden } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -15,10 +17,10 @@ import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
 
 const MenuInspectorControls = ( {
+	clientId,
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
 	currentMenuId = null,
-	innerBlocks,
 	isManageMenusButtonDisabled,
 	onCreateNew,
 	onSelectClassicMenu,
@@ -32,6 +34,16 @@ const MenuInspectorControls = ( {
 	/* translators: %s: The name of a menu. */
 	const actionLabel = __( "Switch to '%s'" );
 
+	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
+	// This is required else the list view will display the entire block tree.
+	const clientIdsTree = useSelect(
+		( select ) => {
+			const { __unstableGetClientIdsTree } = select( blockEditorStore );
+			return __unstableGetClientIdsTree( clientId );
+		},
+		[ clientId ]
+	);
+
 	return (
 		<InspectorControls __experimentalGroup={ menuControlsSlot }>
 			<PanelBody
@@ -60,7 +72,7 @@ const MenuInspectorControls = ( {
 					/>
 					{ isOffCanvasNavigationEditorEnabled ? (
 						<OffCanvasEditor
-							blocks={ innerBlocks }
+							blocks={ clientIdsTree }
 							isExpanded={ true }
 							selectBlockInCanvas={ false }
 						/>