Render first navigation menu if no menu is selected

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.

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 (
-		<ListView
-			blocks={ blocks }
-			showNestedBlocks
-			__experimentalFeatures
-			__experimentalPersistentListViewFeatures
-		/>
+		<>
+			<Heading
+				level={ 2 }
+				className={ 'edit-site-navigation-inspector__title' }
+			>
+				{ label }
+			</Heading>
+			<ListView
+				blocks={ blocks }
+				showNestedBlocks
+				__experimentalFeatures
+				__experimentalPersistentListViewFeatures
+			/>
+		</>
 	);
 }

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;
+}

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