Use custom block name in inspector controls when available (#65398)

* Output name when available

* i18n improvement

packages/block-editor/src/components/block-card/index.js

@@ -13,7 +13,7 @@ import {
  __experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL } from '@wordpress/i18n';
+import { __, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -22,7 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
-function BlockCard( { title, icon, description, blockType, className } ) {
+function BlockCard( { title, icon, description, blockType, className, name } ) {
  if ( blockType ) {
  deprecated( '`blockType` property in `BlockCard component`', {
  since: '5.7',
@@ -65,7 +65,16 @@ function BlockCard( { title, icon, description, blockType, className } ) {
  ) }
  <BlockIcon icon={ icon } showColors />
  <VStack spacing={ 1 }>
- <h2 className="block-editor-block-card__title">{ title }</h2>
+ <h2 className="block-editor-block-card__title">
+ { name?.length
+ ? sprintf(
+ // translators: %1$s: Custom block name. %2$s: Block title.
+ __( '%1$s (%2$s)' ),
+ name,
+ title
+ )
+ : title }
+ </h2>
  { description && (
  <Text className="block-editor-block-card__description">
  { description }