properly handle query update and make previews show 1 post per page

lib/block-patterns.php

@@ -14,7 +14,7 @@
 		'title'      => __( 'Large', 'gutenberg' ),
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'Query' ),
-		'content'    => '<!-- wp:query -->
+		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 						<!-- wp:query-loop -->
 						<!-- wp:post-title {"isLink":true} /-->
 						<!-- wp:post-featured-image  {"isLink":true,"align":"wide"} /-->
@@ -34,7 +34,7 @@
 		'title'      => __( 'Medium', 'gutenberg' ),
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'Query' ),
-		'content'    => '<!-- wp:query -->
+		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 						<!-- wp:query-loop -->
 						<!-- wp:columns {"align":"wide"} -->
 						<div class="wp-block-columns alignwide"><!-- wp:column {"width":"66.66%"} -->
@@ -56,7 +56,7 @@
 		'title'      => __( 'Small', 'gutenberg' ),
 		'blockTypes' => array( 'core/query' ),
 		'categories' => array( 'Query' ),
-		'content'    => '<!-- wp:query -->
+		'content'    => '<!-- wp:query {"query":{"perPage":1,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true}} -->
 						<!-- wp:query-loop -->
 						<!-- wp:columns {"verticalAlignment":"center"} -->
 						<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->

packages/block-library/src/query/edit/query-block-setup.js

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import { cloneDeep } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -44,12 +48,32 @@ const QueryBlockSetup = ( {
 		}
 	};
 	const onBlockPatternSelect = ( blocks ) => {
-		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		// We need to override the attributes that can be set in the Placeholder.
-		Object.assign( clonedBlocks[ 0 ].attributes.query, {
-			inherit: query.inherit,
-			postType: query.postType,
-			perPage: null,
+		const clonedBlocks = blocks.map( ( block ) => {
+			const clone = cloneBlock( block );
+			/**
+			 * TODO: this check will be revised with the ongoing work on block patterns.
+			 * For now we keep the value of posts per page (`query.perPage`) from Query patterns
+			 * so as to preview the pattern as intented, without possible big previews.
+			 * During insertion, we need to override the Query's attributes that can be set in
+			 * the Placeholder and we unset the `perPage` value to be set appropriatelly by Query block.
+			 */
+			if ( block.name === 'core/query' ) {
+				/**
+				 * We need to `cloneDeep` the Query's attributes, as `cloneBlock` does a swallow
+				 * copy of the block.
+				 */
+				const queryAttributes = cloneDeep( clone.attributes );
+				Object.assign( queryAttributes.query, {
+					inherit: query.inherit,
+					postType: query.postType,
+					perPage: null,
+				} );
+				return {
+					...clone,
+					attributes: queryAttributes,
+				};
+			}
+			return clone;
 		} );
 		replaceBlocks( clientId, clonedBlocks );
 	};