Patterns: avoid fetching on load (#57999)

packages/block-editor/src/store/index.js

@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as privateActions from './private-actions';
 import * as privateSelectors from './private-selectors';
+import * as resolvers from './resolvers';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
@@ -22,6 +23,7 @@ import { unlock } from '../lock-unlock';
 export const storeConfig = {
 	reducer,
 	selectors,
+	resolvers,
 	actions,
 };
 

packages/block-editor/src/store/private-selectors.js

@@ -3,6 +3,11 @@
  */
 import createSelector from 'rememo';
 
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -11,11 +16,12 @@ import {
 	getBlockParents,
 	getBlockEditingMode,
 	getSettings,
-	__experimentalGetParsedPattern,
 	canInsertBlockType,
-	__experimentalGetAllowedPatterns,
 } from './selectors';
-import { getAllPatterns, checkAllowListRecursive } from './utils';
+import { checkAllowListRecursive, getAllPatternsDependants } from './utils';
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+import { store } from './';
+import { unlock } from '../lock-unlock';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -242,6 +248,10 @@ export const getInserterMediaCategories = createSelector(
 	]
 );
 
+export function getFetchedPatterns( state ) {
+	return state.blockPatterns;
+}
+
 /**
  * Returns whether there is at least one allowed pattern for inner blocks children.
  * This is useful for deferring the parsing of all patterns until needed.
@@ -251,29 +261,74 @@ export const getInserterMediaCategories = createSelector(
  *
  * @return {boolean} If there is at least one allowed pattern.
  */
-export const hasAllowedPatterns = createSelector(
-	( state, rootClientId = null ) => {
-		const patterns = getAllPatterns( state );
-		const { allowedBlockTypes } = getSettings( state );
-		return patterns.some( ( { name, inserter = true } ) => {
-			if ( ! inserter ) {
-				return false;
-			}
-			const { blocks } = __experimentalGetParsedPattern( state, name );
-			return (
-				checkAllowListRecursive( blocks, allowedBlockTypes ) &&
-				blocks.every( ( { name: blockName } ) =>
-					canInsertBlockType( state, blockName, rootClientId )
-				)
+export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null ) => {
+			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
+				select( store )
 			);
-		} );
-	},
-	( state, rootClientId ) => [
-		...__experimentalGetAllowedPatterns.getDependants(
-			state,
-			rootClientId
-		),
-	]
+			const patterns = getAllPatterns();
+			const { allowedBlockTypes } = getSettings( state );
+			return patterns.some( ( { name, inserter = true } ) => {
+				if ( ! inserter ) {
+					return false;
+				}
+				const { blocks } = __experimentalGetParsedPattern( name );
+				return (
+					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
+					blocks.every( ( { name: blockName } ) =>
+						canInsertBlockType( state, blockName, rootClientId )
+					)
+				);
+			} );
+		},
+		( state, rootClientId ) => [
+			getAllPatternsDependants( state ),
+			state.settings.allowedBlockTypes,
+			state.settings.templateLock,
+			state.blockListSettings[ rootClientId ],
+			state.blocks.byClientId.get( rootClientId ),
+		]
+	)
+);
+
+export const getAllPatterns = createRegistrySelector( ( select ) =>
+	createSelector( ( state ) => {
+		// This setting is left for back compat.
+		const {
+			__experimentalBlockPatterns = [],
+			__experimentalUserPatternCategories = [],
+			__experimentalReusableBlocks = [],
+		} = state.settings;
+		const userPatterns = ( __experimentalReusableBlocks ?? [] ).map(
+			( userPattern ) => {
+				return {
+					name: `core/block/${ userPattern.id }`,
+					id: userPattern.id,
+					type: INSERTER_PATTERN_TYPES.user,
+					title: userPattern.title.raw,
+					categories: userPattern.wp_pattern_category.map(
+						( catId ) => {
+							const category = (
+								__experimentalUserPatternCategories ?? []
+							).find( ( { id } ) => id === catId );
+							return category ? category.slug : catId;
+						}
+					),
+					content: userPattern.content.raw,
+					syncStatus: userPattern.wp_pattern_sync_status,
+				};
+			}
+		);
+		return [
+			...userPatterns,
+			...__experimentalBlockPatterns,
+			...unlock( select( store ) ).getFetchedPatterns(),
+		].filter(
+			( x, index, arr ) =>
+				index === arr.findIndex( ( y ) => x.name === y.name )
+		);
+	}, getAllPatternsDependants )
 );
 
 /**

packages/block-editor/src/store/reducer.js

@@ -2023,6 +2023,15 @@ export function lastFocus( state = false, action ) {
 	return state;
 }
 
+function blockPatterns( state = [], action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_BLOCK_PATTERNS':
+			return action.patterns;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
@@ -2053,6 +2062,7 @@ const combinedReducers = combineReducers( {
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
+	blockPatterns,
 } );
 
 function withAutomaticChangeReset( reducer ) {

packages/block-editor/src/store/resolvers.js

@@ -0,0 +1,17 @@
+export const getFetchedPatterns =
+	() =>
+	async ( { dispatch, select } ) => {
+		const { __experimentalFetchBlockPatterns } = select.getSettings();
+		if ( ! __experimentalFetchBlockPatterns ) {
+			return [];
+		}
+		const patterns = await __experimentalFetchBlockPatterns();
+		dispatch( { type: 'RECEIVE_BLOCK_PATTERNS', patterns } );
+	};
+
+getFetchedPatterns.shouldInvalidate = ( action ) => {
+	return (
+		action.type === 'UPDATE_SETTINGS' &&
+		!! action.settings.__experimentalFetchBlockPatterns
+	);
+};