diff --git a/packages/block-editor/src/components/block-navigation/block-select-button.js b/packages/block-editor/src/components/block-navigation/block-select-button.js index 05eefa6c7a7076..a85efa58d99f37 100644 --- a/packages/block-editor/src/components/block-navigation/block-select-button.js +++ b/packages/block-editor/src/components/block-navigation/block-select-button.js @@ -65,6 +65,11 @@ function BlockNavigationBlockSelectButton( + { blockInformation?.anchor && ( + + { blockInformation.anchor } + + ) } { isSelected && ( { __( '(selected block)' ) } diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss index 3d40f63dfeb190..44d689fbdfc9ab 100644 --- a/packages/block-editor/src/components/block-navigation/style.scss +++ b/packages/block-editor/src/components/block-navigation/style.scss @@ -243,6 +243,21 @@ color: $white; } } + + .block-editor-block-navigation-block-select-button__anchor { + background: rgba($black, 0.1); + border-radius: $radius-block-ui; + display: inline-block; + padding: 2px 6px; + margin: 0 $grid-unit-10; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + } + + &.is-selected .block-editor-block-navigation-block-select-button__anchor { + background: rgba($black, 0.3); + } } .block-editor-block-navigation-block-slot__description, diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js index a06a397caac1ff..ea81142000ef7f 100644 --- a/packages/block-editor/src/components/use-block-display-information/index.js +++ b/packages/block-editor/src/components/use-block-display-information/index.js @@ -49,14 +49,16 @@ export default function useBlockDisplayInformation( clientId ) { const blockName = getBlockName( clientId ); const blockType = getBlockType( blockName ); if ( ! blockType ) return null; + const attributes = getBlockAttributes( clientId ); + const match = getActiveBlockVariation( blockName, attributes ); const blockTypeInfo = { title: blockType.title, icon: blockType.icon, description: blockType.description, + anchor: attributes?.anchor, }; - const attributes = getBlockAttributes( clientId ); - const match = getActiveBlockVariation( blockName, attributes ); if ( ! match ) return blockTypeInfo; + return { title: match.title || blockType.title, icon: match.icon || blockType.icon,