Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix custom patterns console error #51947

Merged
merged 12 commits into from
Jun 28, 2023
Merged

Fix custom patterns console error #51947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e75b15c
Fix error with react list key with new custom patterns list in inserter
glendaviesnz Jun 25, 2023
4d5a286
Update placeholder key
glendaviesnz Jun 26, 2023
fe6bbb5
Add comment to explain the different keys
glendaviesnz Jun 26, 2023
7492f24
Patterns: Fix missing custom patterns in patterns explorer (#51889)
glendaviesnz Jun 26, 2023
476f805
Just assign the key value in one place
glendaviesnz Jun 26, 2023
607e339
Refactor the custom patterns to use the usePatternsState hook
glendaviesnz Jun 26, 2023
6fba2ee
Fix use of async list
glendaviesnz Jun 26, 2023
d42efb2
Translate strings and remove unneeded fields from pattern object
glendaviesnz Jun 27, 2023
dfbb15d
Try integrating unsynced patterns directly into pattern selectors (#5…
talldan Jun 27, 2023
a2bbc29
Include reusable blocks with an undefined sync status in inserter items
talldan Jun 27, 2023
477f533
Update docs
talldan Jun 27, 2023
62b0996
Remove change to hover dependencies
talldan Jun 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion docs/reference-guides/data/data-core-block-editor.md
View file
Open in desktop
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
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
View file
Open in desktop
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
63 changes: 7 additions & 56 deletions packages/block-editor/src/components/inserter/block-patterns-tab.js
View file
Open in desktop
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
7 changes: 3 additions & 4 deletions packages/block-editor/src/components/inserter/hooks/use-block-types-state.js
View file
Open in desktop
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
54 changes: 35 additions & 19 deletions packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
View file
Open in desktop
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