Use Badge for the block type

WordPress · Dec 16, 2024 · 596b51e · 596b51e
1 parent 2cdd37d
commit 596b51e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git 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 } ) {
 			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">
 					{ 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 <badge>%2$s</badge>',
+										'block label'
+									),
+									name,
+									title
+								),
+								{
+									badge: <Badge />,
+								}
 						  )
 						: title }
 				</h2>

diff --git 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);
 }
+