[Block Library - Query Loop]: Suggest active variation patterns (#44197)

* [Block Library - Query Loop]: Suggest active variation patterns * optimization when no active variation exists * minor tweak * comment clarification
WordPress · Sep 19, 2022 · 8edb659 · 8edb659
1 parent c21b626
commit 8edb659
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 30 deletions.
diff --git 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 (
+		<>
+			<Component
+				{ ...props }
+				openPatternSelectionModal={ () =>
+					setIsPatternSelectionModalOpen( true )
+				}
+			/>
+			{ isPatternSelectionModalOpen && (
+				<PatternSelectionModal
+					clientId={ clientId }
+					attributes={ attributes }
+					setIsPatternSelectionModalOpen={
+						setIsPatternSelectionModalOpen
+					}
+				/>
+			) }
+		</>
+	);
+};
+
+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 (
-		<>
-			<Component
-				{ ...props }
-				openPatternSelectionModal={ () =>
-					setIsPatternSelectionModalOpen( true )
-				}
-			/>
-			{ isPatternSelectionModalOpen && (
-				<Modal
-					className="block-editor-query-pattern__selection-modal"
-					title={ __( 'Choose a pattern' ) }
-					closeLabel={ __( 'Cancel' ) }
-					onRequestClose={ () =>
-						setIsPatternSelectionModalOpen( false )
-					}
-				>
-					<BlockContextProvider value={ blockPreviewContext }>
-						<BlockPatternSetup
-							blockName={ name }
-							clientId={ clientId }
-							onBlockPatternSelect={ onBlockPatternSelect }
-						/>
-					</BlockContextProvider>
-				</Modal>
-			) }
-		</>
+		<Modal
+			className="block-editor-query-pattern__selection-modal"
+			title={ __( 'Choose a pattern' ) }
+			closeLabel={ __( 'Cancel' ) }
+			onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
+		>
+			<BlockContextProvider value={ blockPreviewContext }>
+				<BlockPatternSetup
+					blockName={ blockNameForPatterns }
+					clientId={ clientId }
+					onBlockPatternSelect={ onBlockPatternSelect }
+				/>
+			</BlockContextProvider>
+		</Modal>
 	);
-};
+}
 
 export default QueryEdit;
diff --git 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;
+}