Patterns: avoid fetching on load

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

@@ -0,0 +1,126 @@
+/**
+ * External dependencies
+ */
+import createSelector from 'rememo';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createReduxStore,
+	registerStore,
+	combineReducers,
+	createRegistrySelector,
+} from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from './';
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+
+const STORE_NAME = 'core/block-editor/patterns';
+
+const getAllPatterns = createRegistrySelector( ( select ) =>
+	createSelector(
+		() => {
+			const settings = select( blockEditorStore ).getSettings();
+			// This setting is left for back compat.
+			const {
+				__experimentalBlockPatterns,
+				__experimentalFetchBlockPatterns,
+				__experimentalUserPatternCategories = [],
+				__experimentalReusableBlocks = [],
+			} = 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,
+				...select( store ).getFetchedPatterns(
+					__experimentalFetchBlockPatterns
+				),
+			];
+		},
+		( state ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return [
+				settings.__experimentalBlockPatterns,
+				settings.__experimentalUserPatternCategories,
+				settings.__experimentalReusableBlocks,
+				settings.__experimentalFetchBlockPatterns,
+				state.blockPatterns,
+			];
+		}
+	)
+);
+
+function getFetchedPatterns( state ) {
+	return state.blockPatterns;
+}
+
+/**
+ * Block editor data store configuration.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#registerStore
+ */
+export const storeConfig = {
+	reducer: combineReducers( {
+		blockPatterns( state = [], action ) {
+			switch ( action.type ) {
+				case 'RECEIVE_BLOCK_PATTERNS':
+					return action.patterns;
+			}
+
+			return state;
+		},
+	} ),
+	selectors: {
+		getAllPatterns,
+		getFetchedPatterns,
+	},
+	resolvers: {
+		getFetchedPatterns:
+			( fetch ) =>
+			async ( { dispatch } ) => {
+				const patterns = await fetch();
+				dispatch( { type: 'RECEIVE_BLOCK_PATTERNS', patterns } );
+			},
+	},
+};
+
+/**
+ * Store definition for the block editor namespace.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/data/README.md#createReduxStore
+ */
+export const store = createReduxStore( STORE_NAME, {
+	...storeConfig,
+	persist: [ 'preferences' ],
+} );
+
+// We will be able to use the `register` function once we switch
+// the "preferences" persistence to use the new preferences package.
+registerStore( STORE_NAME, {
+	...storeConfig,
+	persist: [ 'preferences' ],
+} );

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
  */
@@ -13,9 +18,9 @@ import {
 	getSettings,
 	__experimentalGetParsedPattern,
 	canInsertBlockType,
-	__experimentalGetAllowedPatterns,
 } from './selectors';
-import { getAllPatterns, checkAllowListRecursive } from './utils';
+import { checkAllowListRecursive } from './utils';
+import { store as patternsStore } from './patterns-store';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -251,29 +256,35 @@ 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 )
-				)
-			);
-		} );
-	},
-	( state, rootClientId ) => [
-		...__experimentalGetAllowedPatterns.getDependants(
-			state,
-			rootClientId
-		),
-	]
+export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null ) => {
+			const patterns = select( patternsStore ).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 )
+					)
+				);
+			} );
+		},
+		( state, rootClientId ) => [
+			select( patternsStore ).getAllPatterns( state ),
+			state.settings.allowedBlockTypes,
+			state.settings.templateLock,
+			state.blockListSettings[ rootClientId ],
+			state.blocks.byClientId.get( rootClientId ),
+		]
+	)
 );
 
 /**