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

WordPress · Feb 16, 2023 · 5320c77 · 5320c77
1 parent 11525f7
commit 5320c77
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 ]
  );