diff --git a/src/blocks/remote-data-container/hooks/usePatterns.ts b/src/blocks/remote-data-container/hooks/usePatterns.ts index 683c07643..4e43b6dfe 100644 --- a/src/blocks/remote-data-container/hooks/usePatterns.ts +++ b/src/blocks/remote-data-container/hooks/usePatterns.ts @@ -35,13 +35,25 @@ 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. + const { getBlocks, getPatternsByBlockTypes, allowedPatterns } = useSelect< + BlockEditorStoreSelectors, + Pick< BlockEditorStoreSelectors, 'getBlocks' | 'getPatternsByBlockTypes' > & { + allowedPatterns: BlockPattern[]; + } + >( + select => { + const store = select( blockEditorStore ); + 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,7 +70,7 @@ 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 ) )