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

Pattern Shuffling: Only use the category that the user selected to shuffle patterns #60088

Closed
wants to merge 4 commits into from
Closed

Pattern Shuffling: Only use the category that the user selected to shuffle patterns #60088

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5830828
Pattern Shuffling: Only use the category that the user selected to sh…
scruffian Mar 21, 2024
f50fbea
remove unneeded changes
scruffian Mar 21, 2024
9849ddb
Fix withPatternCategory
ajlende Mar 21, 2024
59dd8e2
don't use a reducer
scruffian Apr 18, 2024
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
4 changes: 3 additions & 1 deletion ...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,9 @@ export function PatternCategoryPreviews( {
ref={ scrollContainerRef }
shownPatterns={ pagingProps.categoryPatternsAsyncList }
blockPatterns={ pagingProps.categoryPatterns }
onClickPattern={ onClickPattern }
onClickPattern={ ( pattern, blocks ) =>
onClickPattern( pattern, blocks, category )
}
onHover={ onHover }
label={ category.label }
orientation="vertical"
Expand Down
5 changes: 3 additions & 2 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
Expand Up @@ -56,15 +56,16 @@ const usePatternsState = ( onInsert, rootClientId ) => {

const { createSuccessNotice } = useDispatch( noticesStore );
const onClickPattern = useCallback(
( pattern, blocks ) => {
( pattern, blocks, category ) => {
const patternBlocks =
pattern.type === INSERTER_PATTERN_TYPES.user &&
pattern.syncStatus !== 'unsynced'
? [ createBlock( 'core/block', { ref: pattern.id } ) ]
: blocks;
onInsert(
( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
pattern.name
pattern.name,
category
);
createSuccessNotice(
sprintf(
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,11 @@ function InserterMenu(
);

const onInsertPattern = useCallback(
( blocks, patternName ) => {
onInsertBlocks( blocks, { patternName } );
( blocks, patternName, category ) => {
onInsertBlocks( blocks, {
patternName,
category,
} );
onSelect();
},
[ onInsertBlocks, onSelect ]
Expand Down
23 changes: 22 additions & 1 deletion packages/block-editor/src/store/reducer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,22 @@ const withResetControlledBlocks = ( reducer ) => ( state, action ) => {
return reducer( state, action );
};

/**
* Adds the selected pattern category to the outer block.
*
* @param {Object} action Dispatched action.
* @param {Object} action.meta The meta object from the action.
* @param {Array} action.blocks The array of blocks to insert.
*
* @return {Array} The blocks array.
*/
function addSelectedPatternCategoryToOuterBlock( { meta, blocks } ) {
if ( meta?.category && blocks.length === 1 ) {
blocks[ 0 ].attributes.metadata.categories = [ meta.category.name ];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if category is too generic for the metadata. It's more about the "pattern category at point of insertion".

}
return blocks;
}

/**
* Reducer returning the blocks state.
*
Expand Down Expand Up @@ -847,7 +863,12 @@ export const blocks = pipe(
case 'RECEIVE_BLOCKS':
case 'INSERT_BLOCKS': {
const newState = new Map( state );
getFlattenedBlockAttributes( action.blocks ).forEach(

// Adds the selected pattern category to the outer block.
const newBlocks =
addSelectedPatternCategoryToOuterBlock( action );
Comment on lines +868 to +869
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like it should be called conditionally.

Also it's feeling a little bit like a side effect in a reducer.

Are "Patterns" a concept in the block editor outside of the WordPress context? If not then should we be adding this to the block editor store?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original approach used a different reducer before this one, to try to keep the concerns separate. However this one addresses actions.block directly, so any changes we make to the blocks before this point are overridden by this one.


getFlattenedBlockAttributes( newBlocks ).forEach(
( [ key, value ] ) => {
newState.set( key, value );
}
Expand Down
Loading