Also use the new selector in the block editor

WordPress · Nov 9, 2023 · 0662690 · 0662690
1 parent 05184f2
commit 0662690
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 68 deletions.
diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2291,31 +2291,6 @@ const checkAllowListRecursive = ( blocks, allowedBlockTypes ) => {
 	return true;
 };
 
-function getUserPatterns( state ) {
-	const userPatterns =
-		state?.settings?.__experimentalReusableBlocks ?? EMPTY_ARRAY;
-	const userPatternCategories =
-		state?.settings?.__experimentalUserPatternCategories ?? [];
-	const categories = new Map();
-	userPatternCategories.forEach( ( userCategory ) =>
-		categories.set( userCategory.id, userCategory )
-	);
-	return userPatterns.map( ( userPattern ) => {
-		return {
-			name: `core/block/${ userPattern.id }`,
-			id: userPattern.id,
-			title: userPattern.title.raw,
-			categories: userPattern.wp_pattern_category.map( ( catId ) =>
-				categories && categories.get( catId )
-					? categories.get( catId ).slug
-					: catId
-			),
-			content: userPattern.content.raw,
-			syncStatus: userPattern.wp_pattern_sync_status,
-		};
-	} );
-}
-
 export const __experimentalUserPatternCategories = createSelector(
 	( state ) => {
 		return state?.settings?.__experimentalUserPatternCategories;
@@ -2326,32 +2301,36 @@ export const __experimentalUserPatternCategories = createSelector(
 export const __experimentalGetParsedPattern = createSelector(
 	( state, patternName ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
-		const userPatterns = getUserPatterns( state );
+		const userPatterns = state.settings.__experimentalUserPatterns;
 
 		const pattern = [ ...patterns, ...userPatterns ].find(
 			( { name } ) => name === patternName
 		);
 		if ( ! pattern ) {
 			return null;
 		}
+
 		return {
 			...pattern,
-			blocks: parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} ),
+			blocks: pattern.blocks
+				? pattern.blocks
+				: parse( pattern.content, {
+						__unstableSkipMigrationLogs: true,
+				  } ),
 		};
 	},
 	( state ) => [
 		state.settings.__experimentalBlockPatterns,
 		state.settings.__experimentalReusableBlocks,
 		state?.settings?.__experimentalUserPatternCategories,
+		state?.settings?.__experimentalUserPatterns,
 	]
 );
 
 const getAllAllowedPatterns = createSelector(
 	( state ) => {
 		const patterns = state.settings.__experimentalBlockPatterns;
-		const userPatterns = getUserPatterns( state );
+		const userPatterns = state.settings.__experimentalUserPatterns;
 
 		const { allowedBlockTypes } = getSettings( state );
 
@@ -2367,7 +2346,7 @@ const getAllAllowedPatterns = createSelector(
 	},
 	( state ) => [
 		state.settings.__experimentalBlockPatterns,
-		state.settings.__experimentalReusableBlocks,
+		state.settings.__experimentalUserPatterns,
 		state.settings.allowedBlockTypes,
 		state?.settings?.__experimentalUserPatternCategories,
 	]

diff --git a/packages/core-data/src/selectors.ts b/packages/core-data/src/selectors.ts
@@ -9,6 +9,7 @@ import createSelector from 'rememo';
 import { createRegistrySelector } from '@wordpress/data';
 import { addQueryArgs } from '@wordpress/url';
 import deprecated from '@wordpress/deprecated';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -1333,9 +1334,42 @@ export function getBlockPatternCategories( state: State ): Array< any > {
  *
  * @return User pattern list.
  */
-export function getUserPatterns( state: State ): Array< any > {
-	return state.userPatterns;
-}
+export const getUserPatterns = createSelector(
+	( state: State ): Array< unknown > => {
+		const categories = new Map();
+		state.userPatternCategories.forEach( ( userCategory ) =>
+			categories.set( userCategory.id, userCategory )
+		);
+
+		return state.userPatterns.map( ( patternBlock: any ) => ( {
+			blocks: parse( patternBlock.content.raw, {
+				__unstableSkipMigrationLogs: true,
+			} ),
+			...( patternBlock.wp_pattern_category.length > 0 && {
+				categories: patternBlock.wp_pattern_category.map(
+					( patternCategoryId ) =>
+						categories && categories.get( patternCategoryId )
+							? categories.get( patternCategoryId ).slug
+							: patternCategoryId
+				),
+			} ),
+			termLabels: patternBlock.wp_pattern_category.map(
+				( patternCategoryId ) =>
+					categories?.get( patternCategoryId )
+						? categories.get( patternCategoryId ).label
+						: patternCategoryId
+			),
+			id: patternBlock.id,
+			name: `core/block/${ patternBlock.id }`,
+			slug: patternBlock.slug,
+			syncStatus: patternBlock.wp_pattern_sync_status,
+			title: patternBlock.title.raw,
+			type: 'wp_block',
+			patternBlock,
+		} ) );
+	},
+	( state ) => [ state.userPatternCategories, state.userPatterns ]
+);
 
 /**
  * Retrieve the registered user pattern categories.

diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -184,49 +184,19 @@ const selectPatterns = createSelector(
 	]
 );
 
-const patternBlockToPattern = ( patternBlock, categories ) => ( {
-	blocks: parse( patternBlock.content.raw, {
-		__unstableSkipMigrationLogs: true,
-	} ),
-	...( patternBlock.wp_pattern_category.length > 0 && {
-		categories: patternBlock.wp_pattern_category.map(
-			( patternCategoryId ) =>
-				categories && categories.get( patternCategoryId )
-					? categories.get( patternCategoryId ).slug
-					: patternCategoryId
-		),
-	} ),
-	termLabels: patternBlock.wp_pattern_category.map( ( patternCategoryId ) =>
-		categories?.get( patternCategoryId )
-			? categories.get( patternCategoryId ).label
-			: patternCategoryId
-	),
-	id: patternBlock.id,
-	name: patternBlock.slug,
-	syncStatus: patternBlock.wp_pattern_sync_status || PATTERN_SYNC_TYPES.full,
-	title: patternBlock.title.raw,
-	type: PATTERN_TYPES.user,
-	patternBlock,
-} );
-
 const selectUserPatterns = createSelector(
 	( select, syncStatus, search = '' ) => {
 		const { getIsResolving, getUserPatternCategories, getUserPatterns } =
 			select( coreStore );
 
-		const userPatterns = getUserPatterns();
+		let patterns = getUserPatterns();
+		console.log( 'hmm', patterns );
 		const userPatternCategories = getUserPatternCategories();
 		const categories = new Map();
 		userPatternCategories.forEach( ( userCategory ) =>
 			categories.set( userCategory.id, userCategory )
 		);
 
-		let patterns = userPatterns
-			? userPatterns.map( ( record ) =>
-					patternBlockToPattern( record, categories )
-			  )
-			: EMPTY_PATTERN_LIST;
-
 		const isResolving = getIsResolving( 'getUserPatterns' );
 
 		if ( syncStatus ) {

diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js
@@ -96,12 +96,17 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 		pageForPosts,
 		postType,
 		userPatternCategories,
+		userPatterns,
 	} = useSelect( ( select ) => {
 		const { canUserUseUnfilteredHTML, getCurrentPostType } =
 			select( editorStore );
 		const isWeb = Platform.OS === 'web';
-		const { canUser, getEntityRecord, getUserPatternCategories } =
-			select( coreStore );
+		const {
+			canUser,
+			getEntityRecord,
+			getUserPatternCategories,
+			getUserPatterns,
+		} = select( coreStore );
 
 		const siteSettings = canUser( 'read', 'settings' )
 			? getEntityRecord( 'root', 'site' )
@@ -122,6 +127,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			pageForPosts: siteSettings?.page_for_posts,
 			postType: getCurrentPostType(),
 			userPatternCategories: getUserPatternCategories(),
+			userPatterns: getUserPatterns(),
 		};
 	}, [] );
 
@@ -210,6 +216,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			__experimentalBlockPatterns: blockPatterns,
 			__experimentalBlockPatternCategories: blockPatternCategories,
 			__experimentalUserPatternCategories: userPatternCategories,
+			__experimentalUserPatterns: userPatterns,
 			__experimentalFetchLinkSuggestions: ( search, searchOptions ) =>
 				fetchLinkSuggestions( search, searchOptions, settings ),
 			inserterMediaCategories,
@@ -237,6 +244,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 			userCanCreatePages,
 			pageOnFront,
 			pageForPosts,
+			userPatterns,
 		]
 	);
 }