Use custom name in block sidebar if available (retaining block type i…

…nformation) (#65641) * Use Badge for the block type * Wrap when custom name is long enough * Fix calc Co-authored-by: getdave <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: mikachan <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Dec 17, 2024 · ca298ed · ca298ed · github-actions · Dec 17, 2024
1 parent 0fdd0a6
commit ca298ed
Show file tree

Hide file tree

Showing 2 changed files with 26 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,22 @@ 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(
+										'<span>%1$s</span> <badge>%2$s</badge>',
+										'block label'
+									),
+									name,
+									title
+								),
+								{
+									span: (
+										<span className="block-editor-block-card__name" />
+									),
+									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,10 @@
 
 .block-editor-block-card__title {
 	font-weight: 500;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: calc($grid-unit-10 / 2) $grid-unit-10;
 
 	&.block-editor-block-card__title {
 		font-size: $default-font-size;
@@ -27,3 +31,4 @@
 .block-editor-block-card.is-synced .block-editor-block-icon {
 	color: var(--wp-block-synced-color);
 }
+