BlockCard: Fix title alignment (WordPress#68115)

Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: getdave <[email protected]>
MaxMood96 · Dec 19, 2024 · 319cab0 · 319cab0
1 parent 5e362f5
commit 319cab0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js
@@ -14,9 +14,8 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
+import { __, isRTL } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -71,25 +70,10 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">
-					{ name?.length
-						? 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 }
+					<span className="block-editor-block-card__name">
+						{ !! name?.length ? name : title }
+					</span>
+					{ !! name?.length && <Badge>{ title }</Badge> }
 				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">

diff --git a/packages/block-editor/src/components/block-card/style.scss b/packages/block-editor/src/components/block-card/style.scss
@@ -16,10 +16,13 @@
 		font-size: $default-font-size;
 		line-height: $default-line-height;
 		margin: 0;
-		padding: 3px 0; // This makes the title as high as the icon.
 	}
 }
 
+.block-editor-block-card__name {
+	padding: 3px 0; // This makes the title as high as the icon.
+}
+
 .block-editor-block-card .block-editor-block-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;