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,