diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
index 3ad6ce359ad552..3ae1ef3fcc5f1c 100644
--- a/packages/block-editor/src/store/selectors.js
+++ b/packages/block-editor/src/store/selectors.js
@@ -278,6 +278,21 @@ export const getGlobalBlockCount = createSelector(
( state ) => [ state.blocks.order, state.blocks.byClientId ]
);
+export const __unstableGetGlobalBlocksByName = createSelector(
+ ( state, blockName ) => {
+ if ( ! blockName ) {
+ return EMPTY_ARRAY;
+ }
+ const clientIds = getClientIdsWithDescendants( state );
+ const foundBlocks = clientIds.filter( ( clientId ) => {
+ const block = state.blocks.byClientId[ clientId ];
+ return block.name === blockName;
+ } );
+ return foundBlocks.length > 0 ? foundBlocks : EMPTY_ARRAY;
+ },
+ ( state ) => [ state.blocks.order, state.blocks.byClientId ]
+);
+
/**
* Given an array of block client IDs, returns the corresponding array of block
* objects.
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js
index 39a31ecc9df7b5..b4c1fe9306433f 100644
--- a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js
+++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js
@@ -6,12 +6,15 @@ import {
store as blockEditorStore,
__experimentalListView as ListView,
} from '@wordpress/block-editor';
+import { useEntityProp } from '@wordpress/core-data';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
const EMPTY_BLOCKS = [];
+
export default function NavigationInspector() {
- const { blocks } = useSelect( ( select ) => {
+ const { selectedNavigationId } = useSelect( ( select ) => {
const {
- __unstableGetClientIdsTree,
getSelectedBlockClientId,
getBlockParentsByBlockName,
getBlockName,
@@ -31,23 +34,61 @@ export default function NavigationInspector() {
}
}
return {
- blocks: clientId
- ? __unstableGetClientIdsTree( clientId )
- : EMPTY_BLOCKS,
+ selectedNavigationId: clientId,
+ };
+ }, [] );
+
+ const { firstNavigationId } = useSelect( ( select ) => {
+ const { __unstableGetGlobalBlocksByName } = select( blockEditorStore );
+ const _navigationIds = __unstableGetGlobalBlocksByName(
+ 'core/navigation'
+ );
+ return {
+ firstNavigationId: _navigationIds?.[ 0 ] ?? null,
+ navigationIds: _navigationIds,
};
}, [] );
- // No navigation blocks are not selected, render the first navigation menu available on the post or page.
- if ( blocks === EMPTY_BLOCKS ) {
- return 'todo: render first available navigation menu';
- }
+ const { blocks, navRef } = useSelect(
+ ( select ) => {
+ const { __unstableGetClientIdsTree, getBlock } = select(
+ blockEditorStore
+ );
+ const clientId = selectedNavigationId ?? firstNavigationId;
+ return {
+ blocks: clientId
+ ? __unstableGetClientIdsTree( clientId )
+ : EMPTY_BLOCKS,
+ navRef: getBlock( clientId )?.attributes?.ref ?? null,
+ };
+ },
+ [ selectedNavigationId, firstNavigationId ]
+ );
+
+ // eslint-disable-next-line no-unused-vars
+ const [ property, setter, title ] = useEntityProp(
+ 'postType',
+ 'wp_navigation',
+ 'title',
+ navRef
+ );
+
+ const label = decodeEntities( title?.rendered );
return (
-
+ <>
+
+ { label }
+
+
+ >
);
}
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss
new file mode 100644
index 00000000000000..c3a11cb5f888af
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/style.scss
@@ -0,0 +1,4 @@
+.edit-site-navigation-menu-sidebar__panel .edit-site-navigation-inspector__title {
+ padding: $grid-unit-20;
+ margin: 0;
+}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 569a443034c886..64918285f9a1c2 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -13,6 +13,7 @@
@import "./components/sidebar/style.scss";
@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/template-card/style.scss";
+@import "./components/sidebar/navigation-menu-sidebar/style.scss";
@import "./components/editor/style.scss";
@import "./components/template-details/style.scss";
@import "./components/create-template-part-modal/style.scss";