Skip to content

Commit

Permalink
Fix custom patterns console error (#51947)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
2 people authored and tellthemachines committed Jul 3, 2023
1 parent 2e8830c commit db15884
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 102 deletions.
1 change: 0 additions & 1 deletion docs/reference-guides/data/data-core-block-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
onInsertBlocks,
destinationRootClientId
);

const registeredPatternCategories = useMemo(
() =>
patternCategories.map(
Expand All @@ -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( () => {
Expand All @@ -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,
Expand Down
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,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 = () => {};

Expand All @@ -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 ) {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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(
Expand All @@ -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;
}

Expand All @@ -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 }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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(
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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.
*
Expand All @@ -25,6 +31,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
( select ) => {
const { __experimentalGetAllowedPatterns, getSettings } =
select( blockEditorStore );

return {
patterns: __experimentalGetAllowedPatterns( rootClientId ),
patternCategories:
Expand All @@ -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;
Loading

0 comments on commit db15884

Please sign in to comment.