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,