From 596b51edbf131fdfca01a3cb8493806d48606d91 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 16 Dec 2024 11:22:35 +0000
Subject: [PATCH] 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 c8a12a3be5ef6..31dce4880703e 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 } ) {
 			<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
index 42cf77aa4b0a8..9b90c9b292109 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);
 }
+