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 index 3b21fd4a04e6d0..3afbf3f5b5bc16 100644 --- 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( { blockInformation?.anchor && ( - + { blockInformation.anchor } - + ) } { isSticky && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index b010fbf8e73dea..138029262cd7f5 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -408,15 +408,11 @@ position: absolute; right: 0; transform: translateY(-50%); - background: rgba($black, 0.1); - border-radius: $radius-x-small; - padding: 2px 6px; - max-width: 100%; - box-sizing: border-box; } &.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,