diff --git a/packages/block-editor/src/components/use-matching-variation-information/index.js b/packages/block-editor/src/components/use-matching-variation-information/index.js index c24b2c35f3055..067a7fa935180 100644 --- a/packages/block-editor/src/components/use-matching-variation-information/index.js +++ b/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. * */ diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js index d628cdfae0306..9e64ebb2a01c5 100644 --- a/packages/blocks/src/api/registration.js +++ b/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. diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js index 0af96d91b2cb8..cce26e1104561 100644 --- a/packages/blocks/src/store/selectors.js +++ b/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.