From a3acb3474906939b7a354faf55f545d05106e526 Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 10 May 2024 11:10:06 +0300 Subject: [PATCH] Only add the selected pattern category in metadata during insertion (#61557) Co-authored-by: ntsekouras Co-authored-by: scruffian --- .../components/block-patterns-list/index.js | 29 +++++++++++++++++-- .../block-patterns-explorer/pattern-list.js | 3 +- .../pattern-category-previews.js | 3 +- .../inserter/hooks/use-patterns-state.js | 23 +++++++++++---- 4 files changed, 49 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index e24decfb35d21f..845bfc4f803a35 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -6,7 +6,8 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { useEffect, useState, forwardRef } from '@wordpress/element'; +import { cloneBlock } from '@wordpress/blocks'; +import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element'; import { VisuallyHidden, Tooltip, @@ -47,16 +48,38 @@ function BlockPattern( { onHover, showTitle = true, showTooltip, + category, } ) { const [ isDragging, setIsDragging ] = useState( false ); const { blocks, viewportWidth } = pattern; const instanceId = useInstanceId( BlockPattern ); const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`; + // When we have a selected category and the pattern is draggable, we need to update the + // pattern's categories in metadata to only contain the selected category, and pass this to + // InserterDraggableBlocks component. We do that because we use this information for pattern + // shuffling and it makes more sense to show only the ones from the initially selected category during insertion. + const patternBlocks = useMemo( () => { + if ( ! category || ! isDraggable ) { + return blocks; + } + return ( blocks ?? [] ).map( ( block ) => { + const clonedBlock = cloneBlock( block ); + if ( + clonedBlock.attributes.metadata?.categories?.includes( + category + ) + ) { + clonedBlock.attributes.metadata.categories = [ category ]; + } + return clonedBlock; + } ); + }, [ blocks, isDraggable, category ] ); + return ( { ( { draggable, onDragStart, onDragEnd } ) => ( @@ -173,6 +196,7 @@ function BlockPatternsList( onClickPattern, orientation, label = __( 'Block patterns' ), + category, showTitle = true, showTitlesAsTooltip, pagingProps, @@ -209,6 +233,7 @@ function BlockPatternsList( isDraggable={ isDraggable } showTitle={ showTitle } showTooltip={ showTitlesAsTooltip } + category={ category } /> ) : ( diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index a5e43c2c6bf870..d1021b639a5c57 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js @@ -61,7 +61,8 @@ function PatternList( { } ); const [ patterns, , onClickPattern ] = usePatternsState( onInsertBlocks, - destinationRootClientId + destinationRootClientId, + selectedCategory ); const registeredPatternCategories = useMemo( diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 8a4bedbb4a5fc6..9ee57ed7950a83 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -44,7 +44,8 @@ export function PatternCategoryPreviews( { } ) { const [ allPatterns, , onClickPattern ] = usePatternsState( onInsert, - rootClientId + rootClientId, + category?.name ); const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' ); const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js index b5c8c8551b1118..6483dc58ae8b97 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js @@ -16,12 +16,13 @@ import { INSERTER_PATTERN_TYPES } from '../block-patterns-tab/utils'; /** * Retrieves the block patterns inserter state. * - * @param {Function} onInsert function called when inserter a list of blocks. - * @param {string=} rootClientId Insertion's root client ID. + * @param {Function} onInsert function called when inserter a list of blocks. + * @param {string=} rootClientId Insertion's root client ID. * + * @param {string} selectedCategory The selected pattern category. * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler) */ -const usePatternsState = ( onInsert, rootClientId ) => { +const usePatternsState = ( onInsert, rootClientId, selectedCategory ) => { const { patternCategories, patterns, userPatternCategories } = useSelect( ( select ) => { const { __experimentalGetAllowedPatterns, getSettings } = @@ -63,7 +64,19 @@ const usePatternsState = ( onInsert, rootClientId ) => { ? [ createBlock( 'core/block', { ref: pattern.id } ) ] : blocks; onInsert( - ( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ), + ( patternBlocks ?? [] ).map( ( block ) => { + const clonedBlock = cloneBlock( block ); + if ( + clonedBlock.attributes.metadata?.categories?.includes( + selectedCategory + ) + ) { + clonedBlock.attributes.metadata.categories = [ + selectedCategory, + ]; + } + return clonedBlock; + } ), pattern.name ); createSuccessNotice( @@ -78,7 +91,7 @@ const usePatternsState = ( onInsert, rootClientId ) => { } ); }, - [ createSuccessNotice, onInsert ] + [ createSuccessNotice, onInsert, selectedCategory ] ); return [ patterns, allCategories, onClickPattern ];