Try show navigation menu name in the block inspector, toolbar, list view and breadcrumbs

packages/block-editor/src/components/block-inspector/index.js

@@ -6,6 +6,8 @@ import {
 	getBlockType,
 	getUnregisteredTypeHandlerName,
 	hasBlockSupport,
+	isReusableBlock,
+	isTemplatePart,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import {
@@ -26,6 +28,7 @@ import BlockCard from '../block-card';
 import MultiSelectionInspector from '../multi-selection-inspector';
 import BlockVariationTransforms from '../block-variation-transforms';
 import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { store as blockEditorStore } from '../../store';
 import BlockIcon from '../block-icon';
 import BlockStyles from '../block-styles';
@@ -103,12 +106,23 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 		},
 		[ topLevelLockedBlock ]
 	);
-	const blockInformation = useBlockDisplayInformation( topLevelLockedBlock );
+	const { title, ...blockInformation } =
+		useBlockDisplayInformation( topLevelLockedBlock );
+	const displayTitle = useBlockDisplayTitle( {
+		clientId: topLevelLockedBlock,
+	} );
+	const isReusable = isReusableBlock( block );
+	const isTemplate = isTemplatePart( block );
+	const isNavigation = block.name === 'core/navigation';
+	const cardTitle =
+		isReusable || isTemplate || isNavigation ? displayTitle : title;
+
 	const contentBlocks = useContentBlocks( blockTypes, block );
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
 				{ ...blockInformation }
+				title={ cardTitle }
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
@@ -243,20 +257,34 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 	const availableTabs = useInspectorControlsTabs( blockName );
 	const showTabs = availableTabs?.length > 1;
 
-	const hasBlockStyles = useSelect(
+	const { block, hasBlockStyles } = useSelect(
 		( select ) => {
 			const { getBlockStyles } = select( blocksStore );
+			const { getBlock } = select( blockEditorStore );
 			const blockStyles = getBlockStyles( blockName );
-			return blockStyles && blockStyles.length > 0;
+			return {
+				block: getBlock( clientId ),
+				hasBlockStyles: !! blockStyles && blockStyles.length > 0,
+			};
 		},
-		[ blockName ]
+		[ blockName, clientId ]
 	);
-	const blockInformation = useBlockDisplayInformation( clientId );
+	const { title, ...blockInformation } =
+		useBlockDisplayInformation( clientId );
+	const displayTitle = useBlockDisplayTitle( {
+		clientId,
+	} );
+	const isReusable = isReusableBlock( block );
+	const isTemplate = isTemplatePart( block );
+	const isNavigation = block.name === 'core/navigation';
+	const cardTitle =
+		isReusable || isTemplate || isNavigation ? displayTitle : title;
 
 	return (
 		<div className="block-editor-block-inspector">
 			<BlockCard
 				{ ...blockInformation }
+				title={ cardTitle }
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />

packages/block-editor/src/components/block-switcher/index.js

@@ -88,6 +88,8 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+	const isNavigation =
+		blocks.length === 1 && blocks[ 0 ].name === 'core/navigation';
 
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
@@ -129,7 +131,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					icon={
 						<>
 							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
+							{ ( isReusable || isTemplate || isNavigation ) && (
 								<span className="block-editor-block-switcher__toggle-text">
 									{ blockTitle }
 								</span>
@@ -183,7 +185,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 									className="block-editor-block-switcher__toggle"
 									showColors
 								/>
-								{ ( isReusable || isTemplate ) && (
+								{ ( isReusable ||
+									isTemplate ||
+									isNavigation ) && (
 									<span className="block-editor-block-switcher__toggle-text">
 										{ blockTitle }
 									</span>

packages/block-library/src/navigation/index.js

@@ -1,8 +1,16 @@
+/**
+ * External dependencies
+ */
+import { capitalCase } from 'change-case';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { navigation as icon } from '@wordpress/icons';
+import { store as coreDataStore } from '@wordpress/core-data';
+import { select } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -47,6 +55,27 @@ export const settings = {
 			},
 		],
 	},
+	__experimentalLabel: ( { ref } ) => {
+		// Attempt to find entity title if block is a template part.
+		// Require slug to request, otherwise entity is uncreated and will throw 404.
+		if ( ! ref ) {
+			return;
+		}
+
+		const entity = select( coreDataStore ).getEntityRecord(
+			'postType',
+			'wp_navigation',
+			ref
+		);
+		if ( ! entity ) {
+			return;
+		}
+
+		return (
+			decodeEntities( entity.title?.rendered ) ||
+			capitalCase( entity.slug )
+		);
+	},
 	edit,
 	save,
 	deprecated,