Incorporate getBlockLabel into useBlockDisplayInformation

packages/block-editor/README.md

@@ -574,15 +574,18 @@ _Related_
 
 <a name="useBlockDisplayInformation" href="#useBlockDisplayInformation">#</a> **useBlockDisplayInformation**
 
-Hook used to try to find a matching block variation and return
-the appropriate information for display reasons. In order to
-to try to find a match we need to things:
-1\. Block's client id to extract it's current attributes.
+Hook used to return appropriate information for display reasons.
+It takes variations and custom `label` function into account.
+
+In order to try to find a variation match we need two things:
+1\. Block's client id to extract its current attributes.
 2\. A block variation should have set `isActive` prop to a proper function.
 
-If for any reason a block variaton match cannot be found,
-the returned information come from the Block Type.
-If no blockType is found with the provided clientId, returns null.
+Value from custom `label` function is prioritized, if that's not found
+then the block variation' information is returned. If both are missing
+then the information is returned from the Block Type.
+
+If no `blockType` is found with the provided `clientId`, returns `null`.
 
 _Parameters_
 

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

@@ -7,11 +7,7 @@ import { truncate } from 'lodash';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import {
-	getBlockType,
-	__experimentalGetBlockLabel as getBlockLabel,
-	isReusableBlock,
-} from '@wordpress/blocks';
+import { getBlockType, isReusableBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -35,7 +31,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {?string} Block title.
  */
 export default function BlockTitle( { clientId } ) {
-	const { attributes, name, reusableBlockTitle } = useSelect(
+	const { name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
 				return {};
@@ -51,7 +47,6 @@ export default function BlockTitle( { clientId } ) {
 			}
 			const isReusable = isReusableBlock( getBlockType( blockName ) );
 			return {
-				attributes: getBlockAttributes( clientId ),
 				name: blockName,
 				reusableBlockTitle:
 					isReusable &&
@@ -65,13 +60,7 @@ export default function BlockTitle( { clientId } ) {
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	if ( ! name || ! blockInformation ) return null;
-	const blockType = getBlockType( name );
-	const label = reusableBlockTitle || getBlockLabel( blockType, attributes );
-	// Label will fallback to the title if no label is defined for the current
-	// label context. If the label is defined we prioritize it over possible
-	// possible block variation title match.
-	if ( label !== blockType.title ) {
-		return truncate( label, { length: 35 } );
-	}
-	return blockInformation.title;
+
+	const label = reusableBlockTitle || blockInformation.title;
+	return truncate( label, { length: 35 } );
 }

packages/block-editor/src/components/block-title/test/index.js

@@ -30,26 +30,16 @@ jest.mock( '@wordpress/blocks', () => {
 					return { title: 'Block With Long Label' };
 			}
 		},
-		__experimentalGetBlockLabel( { title } ) {
-			switch ( title ) {
-				case 'Block With Label':
-					return 'Test Label';
-
-				case 'Block With Long Label':
-					return 'This is a longer label than typical for blocks to have.';
-
-				default:
-					return title;
-			}
-		},
 	};
 } );
 
 jest.mock( '../../use-block-display-information', () => {
 	const resultsMap = {
 		'id-name-exists': { title: 'Block Title' },
-		'id-name-with-label': { title: 'Block With Label' },
-		'id-name-with-long-label': { title: 'Block With Long Label' },
+		'id-name-with-label': { title: 'Test Label' },
+		'id-name-with-long-label': {
+			title: 'This is a longer label than typical for blocks to have.',
+		},
 	};
 	return jest.fn( ( clientId ) => resultsMap[ clientId ] );
 } );

packages/block-editor/src/components/use-block-display-information/README.md

@@ -1,11 +1,17 @@
 # useBlockDisplayInformation
 
-A React Hook that tries to find a matching block variation and returns the appropriate information for display reasons. In order to try to find a match we need two things:
+Hook used to return appropriate information for display reasons.
+It takes variations and custom `label` function into account.
 
-1. Block's client id to extract its current attributes.
-2. A block variation has `isActive` prop defined with a matcher function.
+In order to try to find a variation match we need two things:
+1\. Block's client id to extract its current attributes.
+2\. A block variation should have set `isActive` prop to a proper function.
 
-If for any reason a block variaton match cannot be found, the returned information come from the Block Type.
+Value from custom `label` function is prioritized, if that's not found
+then the block variation' information is returned. If both are missing
+then the information is returned from the Block Type.
+
+If no `blockType` is found with the provided `clientId`, returns `null`.
 
 ### Usage
 

packages/block-editor/src/components/use-block-display-information/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore } from '@wordpress/blocks';
+import {
+	store as blocksStore,
+	__experimentalGetBlockLabel as getBlockLabel,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -22,49 +25,68 @@ import { store as blockEditorStore } from '../../store';
  */
 
 /**
- * Hook used to try to find a matching block variation and return
- * the appropriate information for display reasons. In order to
- * to try to find a match we need to things:
- * 1. Block's client id to extract it's current attributes.
+ * Hook used to return appropriate information for display reasons.
+ * It takes variations and custom `label` function into account.
+ *
+ * In order to try to find a variation match we need two things:
+ * 1. Block's client id to extract its current attributes.
  * 2. A block variation should have set `isActive` prop to a proper function.
  *
- * If for any reason a block variaton match cannot be found,
- * the returned information come from the Block Type.
- * If no blockType is found with the provided clientId, returns null.
+ * Value from custom `label` function is prioritized, if that's not found
+ * then the block variation' information is returned. If both are missing
+ * then the information is returned from the Block Type.
+ *
+ * If no `blockType` is found with the provided `clientId`, returns `null`.
  *
  * @param {string} clientId Block's client id.
  * @return {?WPBlockDisplayInformation} Block's display information, or `null` when the block or its type not found.
  */
-
 export default function useBlockDisplayInformation( clientId ) {
 	return useSelect(
 		( select ) => {
 			if ( ! clientId ) return null;
+
 			const { getBlockName, getBlockAttributes } = select(
 				blockEditorStore
 			);
 			const { getBlockType, getBlockVariations } = select( blocksStore );
+
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
 			if ( ! blockType ) return null;
+
 			const variations = getBlockVariations( blockName );
-			const blockTypeInfo = {
-				title: blockType.title,
-				icon: blockType.icon,
-				description: blockType.description,
-			};
-			if ( ! variations?.length ) return blockTypeInfo;
 			const attributes = getBlockAttributes( clientId );
-			const match = variations.find( ( variation ) =>
-				variation.isActive?.( attributes, variation.attributes )
-			);
-			if ( ! match ) return blockTypeInfo;
+
+			const dynamicTitle = getBlockLabel( blockType, attributes );
+			const variationInfo = getVariationInfo( variations, attributes );
+
+			const title =
+				dynamicTitle && dynamicTitle !== blockType.title
+					? dynamicTitle
+					: variationInfo.title || blockType.title;
+			const icon = variationInfo.icon || blockType.icon;
+			const description =
+				variationInfo.description || blockType.description;
+
 			return {
-				title: match.title || blockType.title,
-				icon: match.icon || blockType.icon,
-				description: match.description || blockType.description,
+				title,
+				icon,
+				description,
 			};
 		},
 		[ clientId ]
 	);
 }
+
+function getVariationInfo( variations, attributes ) {
+	const emptyInfo = { title: null, icon: null, description: null };
+	if ( ! variations?.length ) {
+		return emptyInfo;
+	}
+
+	const match = variations.find( ( variation ) =>
+		variation.isActive?.( attributes, variation.attributes )
+	);
+	return match || emptyInfo;
+}

packages/e2e-tests/specs/experiments/settings-sidebar.test.js

@@ -39,6 +39,19 @@ async function getTemplateCard() {
 	};
 }
 
+async function getBlockCard() {
+	return {
+		title: await page.$eval(
+			'.block-editor-block-card__title',
+			( element ) => element.innerText
+		),
+		description: await page.$eval(
+			'.block-editor-block-card__description',
+			( element ) => element.innerText
+		),
+	};
+}
+
 describe( 'Settings sidebar', () => {
 	beforeAll( async () => {
 		await activateTheme( 'tt1-blocks' );
@@ -95,5 +108,19 @@ describe( 'Settings sidebar', () => {
 
 			expect( await getActiveTabLabel() ).toEqual( 'Block (selected)' );
 		} );
+
+		it( `should show template part's name in the block card if a template part block is selected`, async () => {
+			const allBlocks = await getAllBlocks();
+			const headerTemplatePart = allBlocks.find(
+				( { name, attributes } ) =>
+					name === 'core/template-part' &&
+					attributes?.slug === 'header'
+			);
+			await selectBlockByClientId( headerTemplatePart.clientId );
+
+			await toggleSidebar();
+
+			expect( ( await getBlockCard() ).title ).toEqual( 'Header' );
+		} );
 	} );
 } );