Fix custom patterns console error (#51947)

* Fix error with react list key with new custom patterns list in inserter * Update placeholder key * Add comment to explain the different keys * Patterns: Fix missing custom patterns in patterns explorer (#51889) * Add custom patterns to pattern explorer * show custom patterns in the patterns explorer dialog * remove changes from 51877 * Fix up use of async lists * remove a bit of code duplication by adding a new hook * add 51877 fix back to make testing easier * Just assign the key value in one place * Refactor the custom patterns to use the usePatternsState hook * Fix use of async list * Translate strings and remove unneeded fields from pattern object * Try integrating unsynced patterns directly into pattern selectors (#51955) * Include reusable blocks with an undefined sync status in inserter items * Update docs * Remove change to hover dependencies --------- Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
WordPress · Jul 3, 2023 · db15884 · db15884
1 parent 2e8830c
commit db15884
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 102 deletions.
diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md
@@ -538,7 +538,6 @@ _Parameters_
 
 -   _state_ `Object`: Editor state.
 -   _rootClientId_ `?string`: Optional root client ID of block list.
--   _syncStatus_ `?string`: Optional sync status to filter pattern blocks by.
 
 _Returns_
 

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
@@ -52,6 +52,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		onInsertBlocks,
 		destinationRootClientId
 	);
+
 	const registeredPatternCategories = useMemo(
 		() =>
 			patternCategories.map(
@@ -75,7 +76,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			);
 		}
 		return searchItems( allPatterns, filterValue );
-	}, [ filterValue, selectedCategory, allPatterns ] );
+	}, [
+		filterValue,
+		allPatterns,
+		selectedCategory,
+		registeredPatternCategories,
+	] );
 
 	// Announce search results on change.
 	useEffect( () => {
@@ -89,7 +95,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak ] );
+	}, [ filterValue, debouncedSpeak, filteredBlockPatterns.length ] );
 
 	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
 		step: INITIAL_INSERTER_RESULTS,

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -18,7 +18,6 @@ import {
 	Button,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
-import { parse } from '@wordpress/blocks';
 import { focus } from '@wordpress/dom';
 
 /**
@@ -28,7 +27,6 @@ import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
-import useBlockTypesState from './hooks/use-block-types-state';
 
 const noop = () => {};
 
@@ -51,18 +49,6 @@ function usePatternsCategories( rootClientId ) {
 		rootClientId
 	);
 
-	const [ unsyncedPatterns ] = useBlockTypesState(
-		rootClientId,
-		undefined,
-		'unsynced'
-	);
-
-	const filteredUnsyncedPatterns = useMemo( () => {
-		return unsyncedPatterns.filter(
-			( { category: unsyncedPatternCategory } ) =>
-				unsyncedPatternCategory === 'reusable'
-		);
-	}, [ unsyncedPatterns ] );
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
 			if ( ! pattern.categories || ! pattern.categories.length ) {
@@ -107,20 +93,9 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-		if ( filteredUnsyncedPatterns.length > 0 ) {
-			categories.push( {
-				name: 'reusable',
-				label: _x( 'Custom patterns' ),
-			} );
-		}
 
 		return categories;
-	}, [
-		allCategories,
-		allPatterns,
-		filteredUnsyncedPatterns.length,
-		hasRegisteredCategory,
-	] );
+	}, [ allCategories, allPatterns, hasRegisteredCategory ] );
 
 	return populatedCategories;
 }
@@ -169,24 +144,6 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-	const [ unsyncedPatterns ] = useBlockTypesState(
-		rootClientId,
-		onInsert,
-		'unsynced'
-	);
-	const filteredUnsyncedPatterns = useMemo( () => {
-		return unsyncedPatterns
-			.filter(
-				( { category: unsyncedPatternCategory } ) =>
-					unsyncedPatternCategory === 'reusable'
-			)
-			.map( ( syncedPattern ) => ( {
-				...syncedPattern,
-				blocks: parse( syncedPattern.content, {
-					__unstableSkipMigrationLogs: true,
-				} ),
-			} ) );
-	}, [ unsyncedPatterns ] );
 
 	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
@@ -208,21 +165,15 @@ export function BlockPatternsCategoryPanel( {
 
 				return availablePatternCategories.length === 0;
 			} ),
-		[ allPatterns, category ]
+		[ allPatterns, availableCategories, category.name ]
 	);
-	const patterns =
-		category.name === 'reusable'
-			? filteredUnsyncedPatterns
-			: currentCategoryPatterns;
-	const currentShownPatterns = useAsyncList( patterns );
+
+	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
 
 	// Hide block pattern preview on unmount.
 	useEffect( () => () => onHover( null ), [] );
 
-	if (
-		! currentCategoryPatterns.length &&
-		! filteredUnsyncedPatterns.length
-	) {
+	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
 
@@ -233,8 +184,8 @@ export function BlockPatternsCategoryPanel( {
 			</div>
 			<p>{ category.description }</p>
 			<BlockPatternList
-				shownPatterns={ currentShownPatterns }
-				blockPatterns={ patterns }
+				shownPatterns={ categoryPatternsList }
+				blockPatterns={ currentCategoryPatterns }
 				onClickPattern={ onClick }
 				onHover={ onHover }
 				label={ category.label }

diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
@@ -19,10 +19,9 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string=}  rootClientId Insertion's root client ID.
  * @param {Function} onInsert     function called when inserter a list of blocks.
- * @param {?string}  syncStatus   Optional sync status to filter pattern blocks by.
  * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler)
  */
-const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
+const useBlockTypesState = ( rootClientId, onInsert ) => {
 	const { categories, collections, items } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
@@ -31,10 +30,10 @@ const useBlockTypesState = ( rootClientId, onInsert, syncStatus ) => {
 			return {
 				categories: getCategories(),
 				collections: getCollections(),
-				items: getInserterItems( rootClientId, syncStatus ),
+				items: getInserterItems( rootClientId ),
 			};
 		},
-		[ rootClientId, syncStatus ]
+		[ rootClientId ]
 	);
 
 	const onSelectItem = useCallback(

diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback } from '@wordpress/element';
+import { useCallback, useMemo } from '@wordpress/element';
 import { cloneBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
@@ -12,6 +12,12 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { store as blockEditorStore } from '../../../store';
 
+const CUSTOM_CATEGORY = {
+	name: 'custom',
+	label: __( 'Custom patterns' ),
+	description: __( 'Custom patterns add by site users' ),
+};
+
 /**
  * Retrieves the block patterns inserter state.
  *
@@ -25,6 +31,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
 				select( blockEditorStore );
+
 			return {
 				patterns: __experimentalGetAllowedPatterns( rootClientId ),
 				patternCategories:
@@ -33,25 +40,34 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 		},
 		[ rootClientId ]
 	);
+
+	const allCategories = useMemo(
+		() => [ ...patternCategories, CUSTOM_CATEGORY ],
+		[ patternCategories ]
+	);
+
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const onClickPattern = useCallback( ( pattern, blocks ) => {
-		onInsert(
-			( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
-			pattern.name
-		);
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: block pattern title. */
-				__( 'Block pattern "%s" inserted.' ),
-				pattern.title
-			),
-			{
-				type: 'snackbar',
-			}
-		);
-	}, [] );
-
-	return [ patterns, patternCategories, onClickPattern ];
+	const onClickPattern = useCallback(
+		( pattern, blocks ) => {
+			onInsert(
+				( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				pattern.name
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: %s: block pattern title. */
+					__( 'Block pattern "%s" inserted.' ),
+					pattern.title
+				),
+				{
+					type: 'snackbar',
+				}
+			);
+		},
+		[ createSuccessNotice, onInsert ]
+	);
+
+	return [ patterns, allCategories, onClickPattern ];
 };
 
 export default usePatternsState;