Products Block: fix grid view with Gutenberg 16 (#9916)

* Revert "fix products block layout on gutenberg 16 (#9886)"

This reverts commit f1e5dd7.

* add post_template_has_support_for_grid_view setting

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,6 +69,13 @@ 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',
@@ -78,6 +85,9 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 			 * 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',
@@ -53,7 +61,12 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	],
 	[
 		'core/post-template',
-		{ __woocommerceNamespace: PRODUCT_TEMPLATE_ID },
+		{
+			__woocommerceNamespace: PRODUCT_TEMPLATE_ID,
+			...( postTemplateHasSupportForGridView && {
+				layout: { type: 'grid', columnCount: 3 },
+			} ),
+		},
 		[
 			[
 				'woocommerce/product-image',

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
 	 *