[Block Library - Query Loop]: Select first Query Loop found from patt…

…ern selection (#32737) * [Block Library - Query Loop]: Select first Query Loop found from pattern selection * Update packages/block-library/src/query/utils.js Co-authored-by: Miguel Fonseca <[email protected]> Co-authored-by: Miguel Fonseca <[email protected]>
WordPress · Jun 25, 2021 · 87d46c3 · 87d46c3
1 parent 32ca6e4
commit 87d46c3
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/block-library/src/query/edit/index.js b/packages/block-library/src/query/edit/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { cloneBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 import { useEffect, useMemo } from '@wordpress/element';
 import {
@@ -23,6 +24,7 @@ import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './query-inspector-controls';
 import QueryPlaceholder from './query-placeholder';
 import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
+import { getFirstQueryClientIdFromBlocks } from '../utils';
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
 export function QueryContent( { attributes, setAttributes } ) {
@@ -140,6 +142,17 @@ export function QueryContent( { attributes, setAttributes } ) {
 function QueryPatternSetup( props ) {
 	const { clientId, name: blockName } = props;
 	const blockProps = useBlockProps();
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+	const onBlockPatternSelect = ( blocks ) => {
+		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
+			clonedBlocks
+		);
+		replaceBlock( clientId, clonedBlocks );
+		if ( firstQueryClientId ) {
+			selectBlock( firstQueryClientId );
+		}
+	};
 	// `startBlankComponent` is what to render when clicking `Start blank`
 	// or if no matched patterns are found.
 	return (
@@ -148,6 +161,7 @@ function QueryPatternSetup( props ) {
 				blockName={ blockName }
 				clientId={ clientId }
 				startBlankComponent={ <QueryPlaceholder { ...props } /> }
+				onBlockPatternSelect={ onBlockPatternSelect }
 			/>
 		</div>
 	);

diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js
@@ -89,3 +89,23 @@ export const usePostTypes = () => {
 	);
 	return { postTypesTaxonomiesMap, postTypesSelectOptions };
 };
+
+/**
+ * Recurses over a list of blocks and returns the first found
+ * Query Loop block's clientId.
+ *
+ * @param {WPBlock[]} blocks The list of blocks to look through.
+ * @return {string=} The first found Query Loop's clientId.
+ */
+export const getFirstQueryClientIdFromBlocks = ( blocks ) => {
+	const blocksQueue = [ ...blocks ];
+	while ( blocksQueue.length > 0 ) {
+		const block = blocksQueue.shift();
+		if ( block.name === 'core/query' ) {
+			return block.clientId;
+		}
+		block.innerBlocks?.forEach( ( innerBlock ) => {
+			blocksQueue.push( innerBlock );
+		} );
+	}
+};