Wait until all patterns are parsed

WordPress · Jul 7, 2023 · ec38016 · ec38016
1 parent 2d5c467
commit ec38016
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 144 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -62,20 +62,19 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 	);
 
 	const filteredBlockPatterns = useMemo( () => {
-		if ( ! filterValue ) {
-			return allPatterns.filter( ( pattern ) =>
-				selectedCategory === 'uncategorized'
-					? ! pattern.categories?.length ||
-					  pattern.categories.every(
-							( category ) =>
-								! registeredPatternCategories.includes(
-									category
-								)
-					  )
-					: pattern.categories?.includes( selectedCategory )
-			);
+		if ( filterValue ) {
+			return searchItems( allPatterns, filterValue );
 		}
-		return searchItems( allPatterns, filterValue );
+
+		return allPatterns.filter( ( pattern ) =>
+			selectedCategory === 'uncategorized'
+				? ! pattern.categories?.length ||
+				  pattern.categories.every(
+						( category ) =>
+							! registeredPatternCategories.includes( category )
+				  )
+				: pattern.categories?.includes( selectedCategory )
+		);
 	}, [
 		filterValue,
 		allPatterns,

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -44,27 +44,19 @@ const patternCategoriesOrder = [
 	'footer',
 ];
 
-function usePatternsCategories( rootClientId ) {
-	const [ allPatterns, allCategories ] = usePatternsState(
-		undefined,
-		rootClientId
-	);
-
-	const hasRegisteredCategory = useCallback(
-		( pattern ) => {
-			if ( ! pattern.categories || ! pattern.categories.length ) {
-				return false;
-			}
+function hasRegisteredCategory( pattern, categories ) {
+	if ( ! pattern.categories || ! pattern.categories.length ) {
+		return false;
+	}
 
-			return pattern.categories.some( ( cat ) =>
-				allCategories.some( ( category ) => category.name === cat )
-			);
-		},
-		[ allCategories ]
+	return pattern.categories.some( ( cat ) =>
+		categories.some( ( category ) => category.name === cat )
 	);
+}
 
+function usePopulatedCategories( allPatterns, allCategories ) {
 	// Remove any empty categories.
-	const populatedCategories = useMemo( () => {
+	return useMemo( () => {
 		const categories = allCategories
 			.filter( ( category ) =>
 				allPatterns.some( ( pattern ) =>
@@ -83,7 +75,7 @@ function usePatternsCategories( rootClientId ) {
 
 		if (
 			allPatterns.some(
-				( pattern ) => ! hasRegisteredCategory( pattern )
+				( pattern ) => ! hasRegisteredCategory( pattern, allCategories )
 			) &&
 			! categories.find(
 				( category ) => category.name === 'uncategorized'
@@ -96,9 +88,7 @@ function usePatternsCategories( rootClientId ) {
 		}
 
 		return categories;
-	}, [ allCategories, allPatterns, hasRegisteredCategory ] );
-
-	return populatedCategories;
+	}, [ allPatterns, allCategories ] );
 }
 
 export function BlockPatternsCategoryDialog( {
@@ -141,12 +131,16 @@ export function BlockPatternsCategoryPanel( {
 	category,
 	showTitlesAsTooltip,
 } ) {
-	const [ allPatterns, , onClick ] = usePatternsState(
+	const [ allPatterns, allCategories, onClick ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
 
-	const availableCategories = usePatternsCategories( rootClientId );
+	const availableCategories = usePopulatedCategories(
+		allPatterns,
+		allCategories
+	);
+
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
@@ -156,15 +150,15 @@ export function BlockPatternsCategoryPanel( {
 
 				// The uncategorized category should show all the patterns without any category
 				// or with no available category.
-				const availablePatternCategories =
-					pattern.categories?.filter( ( cat ) =>
-						availableCategories.find(
-							( availableCategory ) =>
-								availableCategory.name === cat
-						)
-					) ?? [];
+				if ( ! pattern.categories ) {
+					return true;
+				}
 
-				return availablePatternCategories.length === 0;
+				return (
+					! pattern.categories.some( ( cat ) =>
+						availableCategories.find( ( { name } ) => name === cat )
+					) ?? []
+				);
 			} ),
 		[ allPatterns, availableCategories, category.name ]
 	);
@@ -206,7 +200,11 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories( rootClientId );
+	const [ allPatterns, allCategories ] = usePatternsState(
+		null,
+		rootClientId
+	);
+	const categories = usePopulatedCategories( allPatterns, allCategories );
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -71,10 +71,11 @@ function InserterMenu(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getInserterItems } =
 				select( blockEditorStore );
+			const patterns = __experimentalGetAllowedPatterns(
+				destinationRootClientId
+			);
 			return {
-				showPatterns:
-					__experimentalGetAllowedPatterns( destinationRootClientId )
-						.length > 0,
+				showPatterns: patterns ? patterns.length > 0 : null,
 				hasReusableBlocks: getInserterItems(
 					destinationRootClientId
 				).some( ( item ) => item.category === 'reusable' ),
@@ -84,7 +85,7 @@ function InserterMenu(
 	);
 
 	const mediaCategories = useMediaCategories( destinationRootClientId );
-	const showMedia = !! mediaCategories.length;
+	const showMedia = mediaCategories.length > 0;
 
 	const onInsert = useCallback(
 		( blocks, meta, shouldForceFocusBlock ) => {
@@ -221,17 +222,22 @@ function InserterMenu(
 		},
 	} ) );
 
+	const readyToShow = showPatterns !== null;
+
 	const showPatternPanel =
 		selectedTab === 'patterns' &&
 		! delayedFilterValue &&
 		selectedPatternCategory;
+
 	const showAsTabs =
 		! delayedFilterValue &&
 		( showPatterns || hasReusableBlocks || showMedia );
+
 	const showMediaPanel =
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
 		selectedMediaCategory;
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div
@@ -251,7 +257,7 @@ function InserterMenu(
 					placeholder={ __( 'Search' ) }
 					ref={ searchRef }
 				/>
-				{ !! delayedFilterValue && (
+				{ readyToShow && delayedFilterValue && (
 					<div className="block-editor-inserter__no-tab-container">
 						<InserterSearchResults
 							filterValue={ delayedFilterValue }
@@ -268,7 +274,7 @@ function InserterMenu(
 						/>
 					</div>
 				) }
-				{ showAsTabs && (
+				{ readyToShow && showAsTabs && (
 					<InserterTabs
 						showPatterns={ showPatterns }
 						showReusableBlocks={ hasReusableBlocks }
@@ -279,7 +285,7 @@ function InserterMenu(
 						{ getCurrentTab }
 					</InserterTabs>
 				) }
-				{ ! delayedFilterValue && ! showAsTabs && (
+				{ readyToShow && ! delayedFilterValue && ! showAsTabs && (
 					<div className="block-editor-inserter__no-tab-container">
 						{ blocksTab }
 					</div>

diff --git a/packages/block-editor/src/components/inserter/tabs.js b/packages/block-editor/src/components/inserter/tabs.js
@@ -34,24 +34,16 @@ function InserterTabs( {
 	showReusableBlocks = false,
 	showMedia = false,
 	onSelect,
-	prioritizePatterns,
+	prioritizePatterns = false,
 } ) {
 	const tabs = useMemo( () => {
-		const tempTabs = [];
-		if ( prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		tempTabs.push( blocksTab );
-		if ( ! prioritizePatterns && showPatterns ) {
-			tempTabs.push( patternsTab );
-		}
-		if ( showMedia ) {
-			tempTabs.push( mediaTab );
-		}
-		if ( showReusableBlocks ) {
-			tempTabs.push( reusableBlocksTab );
-		}
-		return tempTabs;
+		return [
+			prioritizePatterns && showPatterns && patternsTab,
+			blocksTab,
+			! prioritizePatterns && showPatterns && patternsTab,
+			showMedia && mediaTab,
+			showReusableBlocks && reusableBlocksTab,
+		].filter( Boolean );
 	}, [ prioritizePatterns, showPatterns, showReusableBlocks, showMedia ] );
 
 	return (

diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js
@@ -1914,13 +1914,13 @@ export function blockEditingModes( state = new Map(), action ) {
 	return state;
 }
 
-export function parsedPatterns( state = new WeakMap(), action ) {
+export function parsedPatterns( state = {}, action ) {
 	switch ( action.type ) {
 		case 'SET_PARSED_PATTERN':
-			return new WeakMap( state ).set(
-				action.pattern,
-				action.parsedPattern
-			);
+			return {
+				...state,
+				[ action.patternName ]: action.parsedPattern,
+			};
 	}
 	return state;
 }

diff --git a/packages/block-editor/src/store/resolvers.js b/packages/block-editor/src/store/resolvers.js
@@ -6,9 +6,10 @@ import { parse } from '@wordpress/blocks';
 export const __experimentalGetParsedPattern =
 	( patternName ) =>
 	async ( { select, dispatch } ) => {
-		const pattern = select(
-			( state ) =>
-				state.settings.__experimentalBlockPatterns[ patternName ]
+		const pattern = select( ( state ) =>
+			state.root.settings.__experimentalBlockPatterns.find(
+				( { name } ) => name === patternName
+			)
 		);
 		if ( ! pattern ) {
 			return;
@@ -17,5 +18,9 @@ export const __experimentalGetParsedPattern =
 			__unstableSkipMigrationLogs: true,
 		} );
 		const parsedPattern = { ...pattern, blocks };
-		dispatch( { type: 'SET_PARSED_PATTERN', pattern, parsedPattern } );
+		dispatch( {
+			type: 'SET_PARSED_PATTERN',
+			patternName,
+			parsedPattern,
+		} );
 	};
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2317,42 +2317,9 @@ function getUnsyncedPatterns( state ) {
 }
 
 export const __experimentalGetParsedPattern = ( state, patternName ) => {
-	const patterns = state.settings.__experimentalBlockPatterns;
-	const unsyncedPatterns = getUnsyncedPatterns( state );
-	const pattern = [ ...patterns, ...unsyncedPatterns ].find(
-		( { name } ) => name === patternName
-	);
-	if ( ! pattern ) {
-		return null;
-	}
-	return state.parsedPatterns.get( pattern ) ?? null;
+	return state.parsedPatterns[ patternName ] ?? null;
 };
 
-const getAllAllowedPatterns = createSelector(
-	( state ) => {
-		const patterns = state.settings.__experimentalBlockPatterns;
-		const unsyncedPatterns = getUnsyncedPatterns( state );
-
-		const { allowedBlockTypes } = getSettings( state );
-
-		const parsedPatterns = [ ...patterns, ...unsyncedPatterns ]
-			.filter( ( { inserter = true } ) => inserter )
-			.map( ( { name } ) =>
-				__experimentalGetParsedPattern( state, name )
-			)
-			.filter( Boolean );
-		const allowedPatterns = parsedPatterns.filter( ( { blocks } ) =>
-			checkAllowListRecursive( blocks, allowedBlockTypes )
-		);
-		return allowedPatterns;
-	},
-	( state ) => [
-		state.settings.__experimentalBlockPatterns,
-		state.settings.__experimentalReusableBlocks,
-		state.settings.allowedBlockTypes,
-	]
-);
-
 /**
  * Returns the list of allowed patterns for inner blocks children.
  *
@@ -2363,15 +2330,30 @@ const getAllAllowedPatterns = createSelector(
  */
 export const __experimentalGetAllowedPatterns = createSelector(
 	( state, rootClientId = null ) => {
-		const availableParsedPatterns = getAllAllowedPatterns( state );
-		const patternsAllowed = availableParsedPatterns.filter(
+		const patterns = state.settings.__experimentalBlockPatterns;
+		const unsyncedPatterns = getUnsyncedPatterns( state );
+
+		const inserterPatterns = [ ...patterns, ...unsyncedPatterns ].filter(
+			( { inserter = true } ) => inserter
+		);
+
+		const parsedPatterns = inserterPatterns.map( ( pattern ) =>
+			__experimentalGetParsedPattern( state, pattern.name )
+		);
+
+		if ( parsedPatterns.some( ( p ) => ! p ) ) {
+			return null;
+		}
+		const { allowedBlockTypes } = getSettings( state );
+		const allowedPatterns = parsedPatterns.filter(
 			( { blocks } ) =>
-				blocks.every( ( { name } ) =>
-					canInsertBlockType( state, name, rootClientId )
+				checkAllowListRecursive( blocks, allowedBlockTypes ) &&
+				blocks.every( ( block ) =>
+					canInsertBlockType( state, block.name, rootClientId )
 				)
 		);
 
-		return patternsAllowed;
+		return allowedPatterns;
 	},
 	( state, rootClientId ) => [
 		state.settings.__experimentalBlockPatterns,
@@ -2380,6 +2362,7 @@ export const __experimentalGetAllowedPatterns = createSelector(
 		state.settings.templateLock,
 		state.blockListSettings[ rootClientId ],
 		state.blocks.byClientId.get( rootClientId ),
+		state.parsedPatterns,
 	]
 );
 
@@ -2403,6 +2386,11 @@ export const getPatternsByBlockTypes = createSelector(
 			state,
 			rootClientId
 		);
+
+		if ( ! patterns ) {
+			return null;
+		}
+
 		const normalizedBlockNames = Array.isArray( blockNames )
 			? blockNames
 			: [ blockNames ];