From 596b51edbf131fdfca01a3cb8493806d48606d91 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 Dec 2024 11:22:35 +0000 Subject: [PATCH 1/3] Use Badge for the block type --- .../src/components/block-card/index.js | 23 +++++++++++++++---- .../src/components/block-card/style.scss | 4 ++++ 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index c8a12a3be5ef6a..31dce4880703ec 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -11,16 +11,21 @@ import { Button, __experimentalText as Text, __experimentalVStack as VStack, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { chevronLeft, chevronRight } from '@wordpress/icons'; import { __, _x, isRTL, sprintf } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; +import { createInterpolateElement } from '@wordpress/element'; /** * Internal dependencies */ import BlockIcon from '../block-icon'; import { store as blockEditorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; + +const { Badge } = unlock( componentsPrivateApis ); function BlockCard( { title, icon, description, blockType, className, name } ) { if ( blockType ) { @@ -67,11 +72,19 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {

{ name?.length - ? sprintf( - // translators: 1: Custom block name. 2: Block title. - _x( '%1$s (%2$s)', 'block label' ), - name, - title + ? createInterpolateElement( + sprintf( + // translators: 1: Custom block name. 2: Block title. + _x( + '%1$s %2$s', + 'block label' + ), + name, + title + ), + { + badge: , + } ) : title }

diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 42cf77aa4b0a84..9b90c9b2921091 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -7,6 +7,9 @@ .block-editor-block-card__title { font-weight: 500; + display: flex; + align-items: center; + gap: 0 $grid-unit-10; &.block-editor-block-card__title { font-size: $default-font-size; @@ -27,3 +30,4 @@ .block-editor-block-card.is-synced .block-editor-block-icon { color: var(--wp-block-synced-color); } + From bb99a71359b37f8dccb55c6ee147857e0131ce36 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 Dec 2024 15:59:01 +0000 Subject: [PATCH 2/3] Wrap when custom name is long enough --- packages/block-editor/src/components/block-card/index.js | 5 ++++- packages/block-editor/src/components/block-card/style.scss | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 31dce4880703ec..cdf52ee7df0311 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -76,13 +76,16 @@ function BlockCard( { title, icon, description, blockType, className, name } ) { sprintf( // translators: 1: Custom block name. 2: Block title. _x( - '%1$s %2$s', + '%1$s %2$s', 'block label' ), name, title ), { + span: ( + + ), badge: , } ) diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 9b90c9b2921091..3964858a6c820e 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -9,7 +9,8 @@ font-weight: 500; display: flex; align-items: center; - gap: 0 $grid-unit-10; + flex-wrap: wrap; + gap: #{$grid-unit-10 / 2} $grid-unit-10; &.block-editor-block-card__title { font-size: $default-font-size; From 7eded97c372ed4562c47023174c06ed5b3286419 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 16 Dec 2024 16:00:17 +0000 Subject: [PATCH 3/3] Fix calc --- packages/block-editor/src/components/block-card/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss index 3964858a6c820e..b02310fb630f4f 100644 --- a/packages/block-editor/src/components/block-card/style.scss +++ b/packages/block-editor/src/components/block-card/style.scss @@ -10,7 +10,7 @@ display: flex; align-items: center; flex-wrap: wrap; - gap: #{$grid-unit-10 / 2} $grid-unit-10; + gap: calc($grid-unit-10 / 2) $grid-unit-10; &.block-editor-block-card__title { font-size: $default-font-size;