diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
index f38108e948b3f..f15b71f13f587 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -138,6 +138,7 @@ function BlockPatternList( {
return isShown ? (
) : (
-
+
);
} ) }
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
index a4e3c91cba4ba..52f3591e221b2 100644
--- 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
@@ -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 (
{ hasItems && (
@@ -109,7 +124,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
{ hasItems && (
diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
index 578791e880269..34e264b967af1 100644
--- 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,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 ), [] );
diff --git a/packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js b/packages/block-editor/src/components/inserter/hooks/use-unsynced-patterns.js
new file mode 100644
index 0000000000000..77a02c10860e7
--- /dev/null
+++ b/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;
+}