diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js index b64b8bacf46f3a..07c841e607c216 100644 --- a/packages/block-library/src/query/edit/index.js +++ b/packages/block-library/src/query/edit/index.js @@ -16,19 +16,48 @@ import { __ } from '@wordpress/i18n'; */ import QueryContent from './query-content'; import QueryPlaceholder from './query-placeholder'; -import { getTransformedBlocksFromPattern } from '../utils'; +import { + useBlockNameForPatterns, + getTransformedBlocksFromPattern, +} from '../utils'; const QueryEdit = ( props ) => { - const { clientId, name, attributes } = props; + const { clientId, attributes } = props; const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] = useState( false ); - const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); const hasInnerBlocks = useSelect( ( select ) => !! select( blockEditorStore ).getBlocks( clientId ).length, [ clientId ] ); const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder; + return ( + <> + + setIsPatternSelectionModalOpen( true ) + } + /> + { isPatternSelectionModalOpen && ( + + ) } + + ); +}; + +function PatternSelectionModal( { + clientId, + attributes, + setIsPatternSelectionModalOpen, +} ) { + const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); const onBlockPatternSelect = ( blocks ) => { const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern( blocks, @@ -47,34 +76,26 @@ const QueryEdit = ( props ) => { } ), [ attributes.query.postType ] ); + const blockNameForPatterns = useBlockNameForPatterns( + clientId, + attributes + ); return ( - <> - - setIsPatternSelectionModalOpen( true ) - } - /> - { isPatternSelectionModalOpen && ( - - setIsPatternSelectionModalOpen( false ) - } - > - - - - - ) } - + setIsPatternSelectionModalOpen( false ) } + > + + + + ); -}; +} export default QueryEdit; diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index d3633575616632..d6848724b82874 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -9,6 +9,7 @@ import { get } from 'lodash'; import { useSelect } from '@wordpress/data'; import { useMemo } from '@wordpress/element'; import { store as coreStore } from '@wordpress/core-data'; +import { store as blockEditorStore } from '@wordpress/block-editor'; import { decodeEntities } from '@wordpress/html-entities'; import { cloneBlock, store as blocksStore } from '@wordpress/blocks'; @@ -214,3 +215,48 @@ export const getTransformedBlocksFromPattern = ( } return { newBlocks: clonedBlocks, queryClientIds }; }; + +/** + * Helper hook that determines if there is an active variation of the block + * and if there are available specific patterns for this variation. + * If there are, these patterns are going to be the only ones suggested to + * the user in setup and replace flow, without including the default ones + * for Query Loop. + * + * If there are no such patterns, the default ones for Query Loop are going + * to be suggested. + * + * @param {string} clientId The block's client ID. + * @param {Object} attributes The block's attributes. + * @return {string} The block name to be used in the patterns suggestions. + */ +export function useBlockNameForPatterns( clientId, attributes ) { + const activeVariationName = useSelect( + ( select ) => + select( blocksStore ).getActiveBlockVariation( + queryLoopName, + attributes + )?.name, + + [ attributes ] + ); + const blockName = `${ queryLoopName }/${ activeVariationName }`; + const activeVariationPatterns = useSelect( + ( select ) => { + if ( ! activeVariationName ) { + return; + } + const { + getBlockRootClientId, + __experimentalGetPatternsByBlockTypes, + } = select( blockEditorStore ); + const rootClientId = getBlockRootClientId( clientId ); + return __experimentalGetPatternsByBlockTypes( + blockName, + rootClientId + ); + }, + [ clientId, activeVariationName ] + ); + return activeVariationPatterns?.length ? blockName : queryLoopName; +}