Products Block: fix grid view with Gutenberg 16

assets/js/blocks/product-query/constants.ts

@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-import { getSetting } from '@woocommerce/settings';
+import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { objectOmit } from '@woocommerce/utils';
 import type { InnerBlockTemplate } from '@wordpress/blocks';
-
+import { isBoolean } from '@woocommerce/types';
 /**
  * Internal dependencies
  */
@@ -69,19 +69,25 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
 	},
 };
 
+// This is necessary to fix https://github.com/woocommerce/woocommerce-blocks/issues/9884.
+const postTemplateHasSupportForGridView = getSettingWithCoercion(
+	'post_template_has_support_for_grid_view',
+	false,
+	isBoolean
+);
+
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/post-template',
 		{
 			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
-			layout: {
-				type: 'grid',
-				columnsCount: 3,
-			},
 			/**
 			 * This class is used to add default styles for inner blocks.
 			 */
 			className: 'products-block-post-template',
+			...( postTemplateHasSupportForGridView && {
+				layout: { type: 'grid', columnCount: 3 },
+			} ),
 		},
 		[
 			[

assets/js/blocks/product-query/variations/related-products.tsx

@@ -6,6 +6,8 @@ import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { stacks } from '@woocommerce/icons';
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { getSettingWithCoercion } from '@woocommerce/settings';
+import { isBoolean } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -43,6 +45,12 @@ export const BLOCK_ATTRIBUTES = {
 	},
 };
 
+const postTemplateHasSupportForGridView = getSettingWithCoercion(
+	'post_template_has_support_for_grid_view',
+	false,
+	isBoolean
+);
+
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
 		'core/heading',
@@ -55,10 +63,9 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 		'core/post-template',
 		{
 			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
-			layout: {
-				type: 'grid',
-				columnsCount: 3,
-			},
+			...( postTemplateHasSupportForGridView && {
+				layout: { type: 'grid', columnCount: 3 },
+			} ),
 		},
 		[
 			[

docs/internal-developers/testing/smoke-testing.md

@@ -174,7 +174,7 @@ Note: some blocks might fail to render because they are based on products having
 
 <!-- wp:column {"width":"66.66%"} -->
 <div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:query {"queryId":0,"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
-<div class="wp-block-query"><!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+<div class="wp-block-query"><!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 <!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}}} /-->
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

patterns/featured-products-5-cols.php

@@ -14,7 +14,7 @@
 
 <!-- wp:query {"queryId":2,"query":{"perPage":"5","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/product-query","align":"wide","layout":{"type":"default"}} -->
 <div class="wp-block-query alignwide">
-	<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template", "layout":{"type":"grid","columnCount":3}} -->
+	<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 
 		<!-- wp:cover {"useFeaturedImage":true,"dimRatio":0,"minHeight":190,"minHeightUnit":"px","contentPosition":"top right","isDark":false,"align":"right","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
 		<div class="wp-block-cover alignright is-light has-custom-content-position is-position-top-right" style="margin-bottom:var(--wp--preset--spacing--40);min-height:190px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>

patterns/product-collections-featured-collection.php

@@ -23,7 +23,7 @@
 	<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%">
 		<!-- wp:query {"queryId":5,"query":{"perPage":"3","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query"} -->
 		<div class="wp-block-query">
-			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 
 
 				<!-- wp:group {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0"},"color":{"background":"#484848"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"4px","bottomRight":"4px"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->

patterns/product-collections-newest-arrivals.php

@@ -31,7 +31,7 @@
 	<div class="wp-block-group alignfull">
 		<!-- wp:query {"query":{"perPage":"4","pages":0,"offset":0,"postType":"product","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":4},"namespace":"woocommerce/product-query"} -->
 		<div class="wp-block-query">
-			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 
 				<!-- wp:group {"style":{"border":{"radius":"4px","top":{"color":"#dddddd","style":"solid","width":"1px"},"right":{"color":"#dddddd","style":"solid","width":"1px"},"bottom":{"color":"#dddddd","style":"solid","width":"1px"},"left":{"color":"#dddddd","style":"solid","width":"1px"}},"spacing":{"padding":{"right":"20px","bottom":"10px","left":"20px","top":"20px"}}},"textColor":"contrast","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center","justifyContent":"center"}} -->
 				<div class="wp-block-group has-contrast-color has-text-color" style="border-radius:4px;border-top-color:#dddddd;border-top-style:solid;border-top-width:1px;border-right-color:#dddddd;border-right-style:solid;border-right-width:1px;border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#dddddd;border-left-style:solid;border-left-width:1px;padding-top:20px;padding-right:20px;padding-bottom:10px;padding-left:20px">

patterns/product-featured-2-columns.php

@@ -12,7 +12,7 @@
 	<div class="wp-block-column" style="flex-basis:66.66%">
 		<!-- wp:query {"queryId":7,"query":{"perPage":"4","pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","onbackorder"]},"displayLayout":{"type":"flex","columns":2},"namespace":"woocommerce/product-query"} -->
 		<div class="wp-block-query">
-			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+			<!-- wp:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 			<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true,"style":{"spacing":{"margin":{"bottom":"24px","top":"0"}}}} /-->
 
 			<!-- wp:columns {"verticalAlignment":"bottom"} -->

src/BlockTypes/ProductQuery.php

@@ -75,6 +75,38 @@ protected function initialize() {
 		add_filter( 'rest_product_collection_params', array( $this, 'extend_rest_query_allowed_params' ), 10, 1 );
 	}
 
+	/**
+	 * Extra data passed through from server to client for block.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 *                           Note, this will be empty in the editor context when the block is
+	 *                           not in the post content on editor load.
+	 */
+	protected function enqueue_data( array $attributes = [] ) {
+		parent::enqueue_data( $attributes );
+
+		$gutenberg_version = '';
+
+		if ( is_plugin_active( 'gutenberg/gutenberg.php' ) ) {
+			if ( defined( 'GUTENBERG_VERSION' ) ) {
+				$gutenberg_version = GUTENBERG_VERSION;
+			}
+
+			if ( ! $gutenberg_version ) {
+				$gutenberg_data    = get_file_data(
+					WP_PLUGIN_DIR . '/gutenberg/gutenberg.php',
+					array( 'Version' => 'Version' )
+				);
+				$gutenberg_version = $gutenberg_data['Version'];
+			}
+		}
+
+		$this->asset_data_registry->add(
+			'post_template_has_support_for_grid_view',
+			version_compare( $gutenberg_version, '16.0', '>=' )
+		);
+	}
+
 	/**
 	 * Check if a given block
 	 *

templates/templates/blockified/archive-product.html

@@ -18,7 +18,7 @@
 	<!-- /wp:group -->
 	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
 	<div class="wp-block-query alignwide">
-		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 		<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
 		<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","isLink":true,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
 		<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

templates/templates/blockified/product-search-results.html

@@ -16,7 +16,7 @@
 	<!-- /wp:group -->
 	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
 	<div class="wp-block-query alignwide">
-		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 		<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
 		<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","isLink":true,"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
 		<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->

templates/templates/blockified/single-product.html

@@ -53,7 +53,7 @@
 			<h2 class="wp-block-heading">Related products</h2>
 			<!-- /wp:heading -->
 
-			<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+			<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
 
 			<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->

templates/templates/blockified/taxonomy-product_attribute.html

@@ -18,7 +18,7 @@
 
 	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
 	<div class="wp-block-query alignwide">
-		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 		<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
 
 		<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@@ -46,4 +46,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->

templates/templates/blockified/taxonomy-product_cat.html

@@ -18,7 +18,7 @@
 
 	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
 	<div class="wp-block-query alignwide">
-		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 		<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
 
 		<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@@ -46,4 +46,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer"} /-->
+<!-- wp:template-part {"slug":"footer"} /-->

templates/templates/blockified/taxonomy-product_tag.html

@@ -18,7 +18,7 @@
 
 	<!-- wp:query {"query":{"perPage":9,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":true,"__woocommerceAttributes":[],"__woocommerceStockStatus":["instock","outofstock","onbackorder"]},"displayLayout":{"type":"flex","columns":3},"namespace":"woocommerce/product-query","align":"wide"} -->
 	<div class="wp-block-query alignwide">
-		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template","layout":{"type":"grid","columnCount":3}} -->
+		<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 		<!-- wp:woocommerce/product-image {"imageSizing":"thumbnail","isDescendentOfQueryLoop":true} /-->
 
 		<!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"bottom":"0.75rem","top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
@@ -43,4 +43,4 @@
 		<!-- /wp:query-no-results -->
 	</div>
 	<!-- /wp:query -->
-</div>
+</div>