Fix: Make navigation page list load its items on navigation sidebar.

WordPress · Feb 17, 2023 · 5811537 · 5811537
1 parent 0b5ca22
commit 5811537
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 12 deletions.
diff --git a/packages/edit-site/src/components/navigation-inspector/index.js b/packages/edit-site/src/components/navigation-inspector/index.js
@@ -174,10 +174,7 @@ export default function NavigationInspector( { onSelect } ) {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu
-						innerBlocks={ publishedInnerBlocks }
-						onSelect={ onSelect }
-					/>
+					<NavigationMenu onSelect={ onSelect } />
 				</BlockEditorProvider>
 			) }
 

diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
@@ -4,9 +4,11 @@
 import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
+	BlockList,
+	BlockTools,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -34,9 +36,18 @@ const ALLOWED_BLOCKS = {
 		'core/navigation-link',
 		'core/navigation-submenu',
 	],
+	'core/page-list': [ 'core/page-list-item' ],
 };
 
-export default function NavigationMenu( { innerBlocks, onSelect } ) {
+export default function NavigationMenu( { onSelect } ) {
+	const { clientIdsTree, innerBlocks } = useSelect( ( select ) => {
+		const { __unstableGetClientIdsTree, getBlocks } =
+			select( blockEditorStore );
+		return {
+			clientIdsTree: __unstableGetClientIdsTree(),
+			innerBlocks: getBlocks(),
+		};
+	} );
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
@@ -56,11 +67,20 @@ export default function NavigationMenu( { innerBlocks, onSelect } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
+	// The hidden block is needed because it makes block edit side effects trigger.
+	// For example a navigation page list load its items has an effect on edit to load its items.
 	return (
-		<OffCanvasEditor
-			blocks={ innerBlocks }
-			onSelect={ onSelect }
-			LeafMoreMenu={ LeafMoreMenu }
-		/>
+		<>
+			<OffCanvasEditor
+				blocks={ clientIdsTree }
+				onSelect={ onSelect }
+				LeafMoreMenu={ LeafMoreMenu }
+			/>
+			<div style={ { display: 'none' } }>
+				<BlockTools>
+					<BlockList />
+				</BlockTools>
+			</div>
+		</>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -15,7 +15,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 	const history = useHistory();
 	const onSelect = useCallback(
 		( selectedBlock ) => {
-			const { attributes } = selectedBlock;
+			const { attributes, name } = selectedBlock;
 			if (
 				attributes.kind === 'post-type' &&
 				attributes.id &&
@@ -27,6 +27,13 @@ export default function SidebarNavigationScreenNavigationMenus() {
 					postId: attributes.id,
 				} );
 			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					path: '/navigation/single',
+				} );
+			}
 		},
 		[ history ]
 	);