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";