diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
index d676bf5dac6a5..90352123f1e45 100644
--- a/packages/block-editor/src/components/block-inspector/index.js
+++ b/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 (
@@ -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 (
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index 696b097757d33..4239001218e14 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/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={
<>
- { ( isReusable || isTemplate ) && (
+ { ( isReusable || isTemplate || isNavigation ) && (
{ blockTitle }
@@ -183,7 +185,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
className="block-editor-block-switcher__toggle"
showColors
/>
- { ( isReusable || isTemplate ) && (
+ { ( isReusable ||
+ isTemplate ||
+ isNavigation ) && (
{ blockTitle }
diff --git a/packages/block-library/src/navigation/index.js b/packages/block-library/src/navigation/index.js
index c581d5d0bd03a..fb36e9aaeef3e 100644
--- a/packages/block-library/src/navigation/index.js
+++ b/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,