use CreateSelector and declare WPBlockDisplayInformation typedef

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

@@ -3,12 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 
-/**
- * @typedef {Object} BlockDisplayInformation Contains block's information for display reasons.
- * @property {string} title Block's title or block variation match's title, if found.
- * @property {JSX.Element} icon Block's icon or block variation match's icon, if found.
- * @property {string} description Block's description or block variation match's description, if found.
- */
+/** @typedef {import('@wordpress/blocks').WPBlockDisplayInformation} WPBlockDisplayInformation */
 
 /**
  * Hook used to try to find a matching block variation and return
@@ -21,7 +16,7 @@ import { useSelect } from '@wordpress/data';
  * the returned information come from the Block Type.
  *
  * @param {string} clientId Block's client id.
- * @return {BlockDisplayInformation} Block's display information.
+ * @return {WPBlockDisplayInformation} Block's display information.
  *
  */
 

packages/blocks/src/api/registration.js

@@ -126,6 +126,16 @@ import { store as blocksStore } from '../store';
  *                                              then no preview is shown.
  */
 
+/**
+ * A subset of `WPBlock` type. Contains basic block's information for display reasons.
+ *
+ * @typedef {Object} WPBlockDisplayInformation
+ *
+ * @property {string}      title       Human-readable block type label.
+ * @property {JSX.Element} icon        Block type icon.
+ * @property {string}      description A detailed block type description.
+ */
+
 /**
  * Mapping of legacy category slugs to their latest normal values, used to
  * accommodate updates of the default set of block categories.

packages/blocks/src/store/selectors.js

@@ -16,6 +16,7 @@ import {
 
 /** @typedef {import('../api/registration').WPBlockVariation} WPBlockVariation */
 /** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */
+/** @typedef {import('../api/registration').WPBlockDisplayInformation} WPBlockDisplayInformation */
 /** @typedef {import('./reducer').WPBlockCategory} WPBlockCategory */
 
 /**
@@ -95,29 +96,40 @@ export function getBlockVariations( state, blockName, scope ) {
 	} );
 }
 
-// TODO check createSelector
-// TODOjsdoc
+/**
+ * Returns an array with the child blocks of a given block.
+ *
+ * @param {Object} state Data state.
+ * @param {string} name Block type name.
+ * @param {Object} attributes Block's attributes
+ *
+ * @return {WPBlockDisplayInformation} Block's display information.
+ */
 // TODO tests
 // TODO check performance
-export const getBlockDisplayInformation = ( state, name, attributes ) => {
-	const variations = state.blockVariations[ name ];
-	const blockType = getBlockType( state, name );
-	const blockTypeInfo = {
-		title: blockType.title,
-		icon: blockType.icon,
-		description: blockType.description,
-	};
-	if ( ! variations || ! blockType?.variationMatcher ) return blockTypeInfo;
-	const match = variations.find( ( variation ) =>
-		blockType.variationMatcher( attributes, variation )
-	);
-	if ( ! match ) return blockTypeInfo;
-	return {
-		title: match.title || blockType.title,
-		icon: match.icon || blockType.icon,
-		description: match.description || blockType.description,
-	};
-};
+export const getBlockDisplayInformation = createSelector(
+	( state, name, attributes ) => {
+		const variations = state.blockVariations[ name ];
+		const blockType = getBlockType( state, name );
+		const blockTypeInfo = {
+			title: blockType.title,
+			icon: blockType.icon,
+			description: blockType.description,
+		};
+		if ( ! variations || ! blockType?.variationMatcher )
+			return blockTypeInfo;
+		const match = variations.find( ( variation ) =>
+			blockType.variationMatcher( attributes, variation )
+		);
+		if ( ! match ) return blockTypeInfo;
+		return {
+			title: match.title || blockType.title,
+			icon: match.icon || blockType.icon,
+			description: match.description || blockType.description,
+		};
+	},
+	( state ) => [ state.blockTypes, state.blockVariations ]
+);
 
 /**
  * Returns the default block variation for the given block type.