Skip to content

Commit

Permalink
Patterns: Fix missing custom patterns in patterns explorer (#51889)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
glendaviesnz authored Jun 26, 2023
1 parent 8d73990 commit 5695beb
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 32 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -52,6 +53,13 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
onInsertBlocks,
destinationRootClientId
);

const filteredUnsyncedPatterns = useUnsyncedPatterns(
destinationRootClientId,
onInsertBlocks,
true
);

const registeredPatternCategories = useMemo(
() =>
patternCategories.map(
Expand Down Expand Up @@ -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 && (
Expand All @@ -109,7 +124,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
{ hasItems && (
<BlockPatternsList
shownPatterns={ currentShownPatterns }
blockPatterns={ filteredBlockPatterns }
blockPatterns={ currentShownPatterns }
onClickPattern={ onSelectBlockPattern }
isDraggable={ false }
/>
Expand Down
41 changes: 12 additions & 29 deletions packages/block-editor/src/components/inserter/block-patterns-tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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 = () => {};

Expand All @@ -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 ) {
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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 ), [] );
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 5695beb

Please sign in to comment.