Display block anchor in List View when set. (#31992)

WordPress · May 20, 2021 · 96134ef · 96134ef
1 parent 635ffee
commit 96134ef
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
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
@@ -65,6 +65,11 @@ function BlockNavigationBlockSelectButton(
 				<Indentation level={ level } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
 				<BlockTitle clientId={ clientId } />
+				{ blockInformation?.anchor && (
+					<span className="block-editor-block-navigation-block-select-button__anchor">
+						{ blockInformation.anchor }
+					</span>
+				) }
 				{ isSelected && (
 					<VisuallyHidden>
 						{ __( '(selected block)' ) }

diff --git 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
@@ -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,