From 96efbcbb28a1c2fe63542cfb18f052a5ca232a3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 19 May 2021 09:50:43 -0300
Subject: [PATCH 1/3] Display block anchor in List View when set.

---
 .../block-navigation/block-select-button.js          |  5 +++++
 .../src/components/block-navigation/style.scss       | 12 ++++++++++++
 .../use-block-display-information/index.js           |  6 ++++--
 3 files changed, 21 insertions(+), 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
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(
 				<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
index 3d40f63dfeb190..7c58de57433b6e 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -243,6 +243,18 @@
 			color: $white;
 		}
 	}
+
+	.block-editor-block-navigation-block-select-button__anchor {
+		background: rgba(30, 30, 30, 0.1);
+		border-radius: 2px;
+		display: inline-block;
+		padding: 2px 6px;
+		margin: 0 8px;
+	}
+
+	&.is-selected .block-editor-block-navigation-block-select-button__anchor {
+		background: rgba(30, 30, 30, 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,

From 802ae2e757d81bf283e685a12fe2cde8bea517a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 19 May 2021 10:07:55 -0300
Subject: [PATCH 2/3] Use variables for standard values

---
 .../block-editor/src/components/block-navigation/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 7c58de57433b6e..9b7967d20d0399 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -246,14 +246,14 @@
 
 	.block-editor-block-navigation-block-select-button__anchor {
 		background: rgba(30, 30, 30, 0.1);
-		border-radius: 2px;
+		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		margin: 0 8px;
+		margin: 0 $grid-unit-10;
 	}
 
 	&.is-selected .block-editor-block-navigation-block-select-button__anchor {
-		background: rgba(30, 30, 30, 0.3);
+		background: rgba($black, 0.3);
 	}
 }
 

From 39945efb36f5cb0da2a11ec171f11808737fef8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= <mv@matiasventura.com>
Date: Wed, 19 May 2021 10:35:39 -0300
Subject: [PATCH 3/3] Truncate long anchor names

---
 .../block-editor/src/components/block-navigation/style.scss  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 9b7967d20d0399..44d689fbdfc9ab 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -245,11 +245,14 @@
 	}
 
 	.block-editor-block-navigation-block-select-button__anchor {
-		background: rgba(30, 30, 30, 0.1);
+		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 {