From cf5387053dbe5f52e6b36b9d4872b3e26ac46c5e Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 9 Jan 2025 13:06:33 +0100 Subject: [PATCH 1/3] Use badge component for anchors in list view --- .../src/components/list-view/block-select-button.js | 10 +++++----- .../block-editor/src/components/list-view/style.scss | 1 + 2 files changed, 6 insertions(+), 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 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..79f2ec300cbb46 100644 --- 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, From 9ddd0af72e24aeb7d1a05d5291df3ff3837d41fa Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 9 Jan 2025 13:11:07 +0100 Subject: [PATCH 2/3] Remove styles in favor of the badge component. --- .../block-editor/src/components/list-view/style.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 79f2ec300cbb46..49a8f226c60789 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -404,17 +404,6 @@ width: 100%; } - .block-editor-list-view-block-select-button__anchor { - 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; From 424297e67ac27f05b8c159f15b690e8410499e4d Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Fri, 10 Jan 2025 10:23:45 +0100 Subject: [PATCH 3/3] Keep styles to contain the long anchors. --- packages/block-editor/src/components/list-view/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 49a8f226c60789..138029262cd7f5 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -404,6 +404,12 @@ width: 100%; } + .block-editor-list-view-block-select-button__anchor { + position: absolute; + right: 0; + transform: translateY(-50%); + } + &.is-selected .block-editor-list-view-block-select-button__anchor { background: rgba($black, 0.3); color: $white;