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

packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -14,6 +14,7 @@ import BlockPatternsList from '../../block-patterns-list';
 import InserterNoResults from '../no-results';
 import useInsertionPoint from '../hooks/use-insertion-point';
 import usePatternsState from '../hooks/use-patterns-state';
+import useUnsyncedPatterns from '../hooks/use-unsynced-patterns';
 import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 
@@ -52,6 +53,13 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		onInsertBlocks,
 		destinationRootClientId
 	);
+
+	const filteredUnsyncedPatterns = useUnsyncedPatterns(
+		destinationRootClientId,
+		onInsertBlocks,
+		true
+	);
+
 	const registeredPatternCategories = useMemo(
 		() =>
 			patternCategories.map(
@@ -91,11 +99,18 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		debouncedSpeak( resultsFoundMessage );
 	}, [ filterValue, debouncedSpeak ] );
 
-	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
+	const blockPatterns = useAsyncList( filteredBlockPatterns, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
 
-	const hasItems = !! filteredBlockPatterns?.length;
+	const blockPatternsUnsynced = useAsyncList( filteredUnsyncedPatterns, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+
+	const currentShownPatterns =
+		selectedCategory === 'reusable' ? blockPatternsUnsynced : blockPatterns;
+
+	const hasItems = !! currentShownPatterns?.length;
 	return (
 		<div className="block-editor-block-patterns-explorer__list">
 			{ hasItems && (
@@ -109,7 +124,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 				{ hasItems && (
 					<BlockPatternsList
 						shownPatterns={ currentShownPatterns }
-						blockPatterns={ filteredBlockPatterns }
+						blockPatterns={ currentShownPatterns }
 						onClickPattern={ onSelectBlockPattern }
 						isDraggable={ false }
 					/>

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,7 @@ 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';
+import useUnsyncedPatterns from './hooks/use-unsynced-patterns';
 
 const noop = () => {};
 
@@ -51,18 +50,8 @@ function usePatternsCategories( rootClientId ) {
 		rootClientId
 	);
 
-	const [ unsyncedPatterns ] = useBlockTypesState(
-		rootClientId,
-		undefined,
-		'unsynced'
-	);
+	const filteredUnsyncedPatterns = useUnsyncedPatterns( rootClientId );
 
-	const filteredUnsyncedPatterns = useMemo( () => {
-		return unsyncedPatterns.filter(
-			( { category: unsyncedPatternCategory } ) =>
-				unsyncedPatternCategory === 'reusable'
-		);
-	}, [ unsyncedPatterns ] );
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
 			if ( ! pattern.categories || ! pattern.categories.length ) {
@@ -169,24 +158,11 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-	const [ unsyncedPatterns ] = useBlockTypesState(
+	const filteredUnsyncedPatterns = useUnsyncedPatterns(
 		rootClientId,
 		onInsert,
-		'unsynced'
+		true
 	);
-	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(
@@ -214,7 +190,14 @@ export function BlockPatternsCategoryPanel( {
 		category.name === 'reusable'
 			? filteredUnsyncedPatterns
 			: currentCategoryPatterns;
-	const currentShownPatterns = useAsyncList( patterns );
+
+	const unsyncedPatternsList = useAsyncList( filteredUnsyncedPatterns );
+	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
+
+	const currentShownPatterns =
+		category.name === 'reusable'
+			? unsyncedPatternsList
+			: categoryPatternsList;
 
 	// Hide block pattern preview on unmount.
 	useEffect( () => () => onHover( null ), [] );

packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import useBlockTypesState from '../hooks/use-block-types-state';
+
+export default function useUnsyncedPatterns(
+	rootClientId,
+	onInsert,
+	withBlocks
+) {
+	const [ unsyncedPatterns ] = useBlockTypesState(
+		rootClientId,
+		onInsert,
+		'unsynced'
+	);
+	const filteredUnsyncedPatterns = useMemo( () => {
+		return unsyncedPatterns
+			.filter(
+				( { category: unsyncedPatternCategory } ) =>
+					unsyncedPatternCategory === 'reusable'
+			)
+			.map( ( syncedPattern ) => ( {
+				...syncedPattern,
+				blocks: withBlocks
+					? parse( syncedPattern.content, {
+							__unstableSkipMigrationLogs: true,
+					  } )
+					: undefined,
+			} ) );
+	}, [ unsyncedPatterns, withBlocks ] );
+	return filteredUnsyncedPatterns;
+}