From b345f3119dfa202c540b99c5c71a084c19a01313 Mon Sep 17 00:00:00 2001 From: brookewp Date: Mon, 24 Mar 2025 16:38:54 -0700 Subject: [PATCH 1/3] =?UTF-8?q?Fix=20issue=20where=20patterns=20aren?= =?UTF-8?q?=E2=80=99t=20available=20in=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: brookewp --- .../hooks/usePatterns.ts | 35 ++++++++++++++----- 1 file changed, 27 insertions(+), 8 deletions(-) diff --git a/src/blocks/remote-data-container/hooks/usePatterns.ts b/src/blocks/remote-data-container/hooks/usePatterns.ts index 683c07643..1a7c8c2c9 100644 --- a/src/blocks/remote-data-container/hooks/usePatterns.ts +++ b/src/blocks/remote-data-container/hooks/usePatterns.ts @@ -35,13 +35,27 @@ export function cloneBlockWithAttributes( export function usePatterns( remoteDataBlockName: string, rootClientId: string = '' ) { const { patterns } = getBlockConfig( remoteDataBlockName ) ?? {}; const { replaceInnerBlocks } = useDispatch< BlockEditorStoreActions >( blockEditorStore ); - const { getBlocks, getPatternsByBlockTypes, __experimentalGetAllowedPatterns } = - useSelect< BlockEditorStoreSelectors >( blockEditorStore, [ - remoteDataBlockName, - [ remoteDataBlockName, rootClientId ], - ] ); - // Extract patterns with defined roles. + // Use `useSelect` and correctly type its return value + const { getBlocks, getPatternsByBlockTypes, allowedPatterns } = useSelect( + ( + select + ): { + getBlocks: BlockEditorStoreSelectors[ 'getBlocks' ]; + getPatternsByBlockTypes: BlockEditorStoreSelectors[ 'getPatternsByBlockTypes' ]; + allowedPatterns: BlockPattern[]; + } => { + const store = select( blockEditorStore ) as BlockEditorStoreSelectors; + return { + getBlocks: store.getBlocks, + getPatternsByBlockTypes: store.getPatternsByBlockTypes, + allowedPatterns: store.__experimentalGetAllowedPatterns( rootClientId ) ?? [], + }; + }, + [ remoteDataBlockName, rootClientId ] + ); + + // Extract patterns with defined roles const patternsByBlockTypes = getPatternsByBlockTypes( remoteDataBlockName ); const defaultPattern = patternsByBlockTypes.find( ( { name } ) => name === patterns?.default ); const innerBlocksPattern = patternsByBlockTypes.find( @@ -58,12 +72,17 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = ); }, getSupportedPatterns: ( result?: RemoteDataApiResult ): BlockPattern[] => { - const supportedPatterns = __experimentalGetAllowedPatterns( rootClientId ).filter( + const supportedPatterns = allowedPatterns.filter( pattern => pattern?.blockTypes?.includes( remoteDataBlockName ) || pattern.blocks.some( block => hasBlockBinding( block, remoteDataBlockName ) ) ); + // Return early if there are no supported patterns + if ( ! supportedPatterns.length ) { + return []; + } + // If no result is provided, return the supported patterns as is. if ( ! result ) { return supportedPatterns; @@ -93,7 +112,7 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = // of the collection. const patternBlocks = pattern.blocks.map( block => { - const boundAttributes = getBoundAttributeEntries( block.attributes, remoteDataBlockName ); + const boundAttributes = getBoundAttributeEntries( block.attributes, remoteDataBlockName ); if ( ! boundAttributes.length ) { return block; From 364095f435d51ec829c8acdcf161207074805200 Mon Sep 17 00:00:00 2001 From: brookewp Date: Tue, 25 Mar 2025 16:12:26 -0700 Subject: [PATCH 2/3] Cursor! Signed-off-by: brookewp --- src/blocks/remote-data-container/hooks/usePatterns.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/blocks/remote-data-container/hooks/usePatterns.ts b/src/blocks/remote-data-container/hooks/usePatterns.ts index 1a7c8c2c9..bd978a49e 100644 --- a/src/blocks/remote-data-container/hooks/usePatterns.ts +++ b/src/blocks/remote-data-container/hooks/usePatterns.ts @@ -36,7 +36,6 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = const { patterns } = getBlockConfig( remoteDataBlockName ) ?? {}; const { replaceInnerBlocks } = useDispatch< BlockEditorStoreActions >( blockEditorStore ); - // Use `useSelect` and correctly type its return value const { getBlocks, getPatternsByBlockTypes, allowedPatterns } = useSelect( ( select @@ -78,11 +77,6 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = pattern.blocks.some( block => hasBlockBinding( block, remoteDataBlockName ) ) ); - // Return early if there are no supported patterns - if ( ! supportedPatterns.length ) { - return []; - } - // If no result is provided, return the supported patterns as is. if ( ! result ) { return supportedPatterns; @@ -112,7 +106,7 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = // of the collection. const patternBlocks = pattern.blocks.map( block => { - const boundAttributes = getBoundAttributeEntries( block.attributes, remoteDataBlockName ); + const boundAttributes = getBoundAttributeEntries( block.attributes, remoteDataBlockName ); if ( ! boundAttributes.length ) { return block; From ad920afd274727a938c9d359abdf2f7bbc1c9e55 Mon Sep 17 00:00:00 2001 From: chriszarate Date: Wed, 26 Mar 2025 11:51:04 -0100 Subject: [PATCH 3/3] Improve types --- .../remote-data-container/hooks/usePatterns.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/blocks/remote-data-container/hooks/usePatterns.ts b/src/blocks/remote-data-container/hooks/usePatterns.ts index bd978a49e..4e43b6dfe 100644 --- a/src/blocks/remote-data-container/hooks/usePatterns.ts +++ b/src/blocks/remote-data-container/hooks/usePatterns.ts @@ -36,15 +36,14 @@ export function usePatterns( remoteDataBlockName: string, rootClientId: string = const { patterns } = getBlockConfig( remoteDataBlockName ) ?? {}; const { replaceInnerBlocks } = useDispatch< BlockEditorStoreActions >( blockEditorStore ); - const { getBlocks, getPatternsByBlockTypes, allowedPatterns } = useSelect( - ( - select - ): { - getBlocks: BlockEditorStoreSelectors[ 'getBlocks' ]; - getPatternsByBlockTypes: BlockEditorStoreSelectors[ 'getPatternsByBlockTypes' ]; + const { getBlocks, getPatternsByBlockTypes, allowedPatterns } = useSelect< + BlockEditorStoreSelectors, + Pick< BlockEditorStoreSelectors, 'getBlocks' | 'getPatternsByBlockTypes' > & { allowedPatterns: BlockPattern[]; - } => { - const store = select( blockEditorStore ) as BlockEditorStoreSelectors; + } + >( + select => { + const store = select( blockEditorStore ); return { getBlocks: store.getBlocks, getPatternsByBlockTypes: store.getPatternsByBlockTypes,