Use badge component for anchors in list view

WordPress · Jan 9, 2025 · cf53870 · cf53870
1 parent e746a95
commit cf53870
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import {
 	__experimentalHStack as HStack,
 	__experimentalTruncate as Truncate,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
@@ -25,6 +26,8 @@ import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 import useListViewImages from './use-list-view-images';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 function ListViewBlockSelectButton(
 	{
@@ -117,12 +120,9 @@ function ListViewBlockSelectButton(
 				</span>
 				{ blockInformation?.anchor && (
 					<span className="block-editor-list-view-block-select-button__anchor-wrapper">
-						<Truncate
-							className="block-editor-list-view-block-select-button__anchor"
-							ellipsizeMode="auto"
-						>
+						<Badge className="block-editor-list-view-block-select-button__anchor">
 							{ blockInformation.anchor }
-						</Truncate>
+						</Badge>
 					</span>
 				) }
 				{ isSticky && (

diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss
@@ -417,6 +417,7 @@
 
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.3);
+		color: $white;
 	}
 
 	.block-editor-list-view-block-select-button__lock,