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 a4e3c91cba4ba2..52f3591e221b20 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 578791e8802692..34e264b967af16 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 00000000000000..77a02c10860e78 --- /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; +}