Set inherit default to true when products is inserted on archive prod…

…uct templates (#8375) * Set inherit default to true when products is inserted on archive products templates * Create new query attributes object Co-authored-by: kmanijak <karol.manijak@automattic.com> * Extract the products registration to a separate function * Bring back variation name * Move variation name * Unregister the block before registering it again * Use subscribe only on the site editor * Undo change * Try fixing tests * Fix test * Revert test only --------- Co-authored-by: kmanijak <karol.manijak@automattic.com>
woocommerce · Feb 13, 2023 · 85b7689 · 85b7689
1 parent e15824f
commit 85b7689
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/assets/js/blocks/product-query/variations/product-query.tsx b/assets/js/blocks/product-query/variations/product-query.tsx
@@ -1,11 +1,16 @@
 /**
  * External dependencies
  */
-import { registerBlockVariation } from '@wordpress/blocks';
+import {
+	registerBlockVariation,
+	unregisterBlockVariation,
+} from '@wordpress/blocks';
 import { Icon } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { stacks } from '@woocommerce/icons';
 import { isWpVersion } from '@woocommerce/settings';
+import { select, subscribe } from '@wordpress/data';
+import { QueryBlockAttributes } from '@woocommerce/blocks/product-query/types';
 
 /**
  * Internal dependencies
@@ -19,7 +24,15 @@ import {
 
 const VARIATION_NAME = 'woocommerce/product-query';
 
-if ( isWpVersion( '6.1', '>=' ) ) {
+const ARCHIVE_PRODUCT_TEMPLATES = [
+	'woocommerce/woocommerce//archive-product',
+	'woocommerce/woocommerce//taxonomy-product_cat',
+	'woocommerce/woocommerce//taxonomy-product_tag',
+	'woocommerce/woocommerce//taxonomy-product_attribute',
+	'woocommerce/woocommerce//product-search-results',
+];
+
+const registerProductsBlock = ( attributes: QueryBlockAttributes ) => {
 	registerBlockVariation( QUERY_LOOP_ID, {
 		description: __(
 			'A block that displays a selection of products in your store.',
@@ -37,7 +50,7 @@ if ( isWpVersion( '6.1', '>=' ) ) {
 			/>
 		),
 		attributes: {
-			...QUERY_DEFAULT_ATTRIBUTES,
+			...attributes,
 			namespace: VARIATION_NAME,
 		},
 		// Gutenberg doesn't support this type yet, discussion here:
@@ -48,4 +61,37 @@ if ( isWpVersion( '6.1', '>=' ) ) {
 		innerBlocks: INNER_BLOCKS_TEMPLATE,
 		scope: [ 'inserter' ],
 	} );
+};
+
+if ( isWpVersion( '6.1', '>=' ) ) {
+	const store = select( 'core/edit-site' );
+
+	if ( store ) {
+		let currentTemplateId: string | undefined;
+
+		subscribe( () => {
+			const previousTemplateId = currentTemplateId;
+
+			currentTemplateId = store?.getEditedPostId();
+
+			if ( previousTemplateId === currentTemplateId ) {
+				return;
+			}
+
+			const queryAttributes = {
+				...QUERY_DEFAULT_ATTRIBUTES,
+				query: {
+					...QUERY_DEFAULT_ATTRIBUTES.query,
+					inherit:
+						ARCHIVE_PRODUCT_TEMPLATES.includes( currentTemplateId ),
+				},
+			};
+
+			unregisterBlockVariation( QUERY_LOOP_ID, VARIATION_NAME );
+
+			registerProductsBlock( queryAttributes );
+		} );
+	} else {
+		registerProductsBlock( QUERY_DEFAULT_ATTRIBUTES );
+	}
 }
diff --git a/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts b/tests/e2e/specs/shopper/product-query/product-query-with-templates.test.ts
@@ -20,16 +20,17 @@ import {
 import {
 	addProductQueryBlock,
 	block,
-	configurateProductQueryBlock,
+	configureProductQueryBlock,
 	getProductsNameFromClassicTemplate,
 	getProductsNameFromProductQuery,
+	toggleInheritQueryFromTemplateSetting,
 } from './utils';
 
 describe( `${ block.name } Block`, () => {
 	useTheme( 'emptytheme' );
 
 	describe( 'with All Templates', () => {
-		beforeAll( async () => {
+		beforeEach( async () => {
 			const productCatalogTemplateId =
 				'woocommerce/woocommerce//archive-product';
 
@@ -41,7 +42,9 @@ describe( `${ block.name } Block`, () => {
 			await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' );
 		} );
 
-		it( 'when Inherit Query from template is disabled all the settings that customize the query should be hide', async () => {
+		it( 'when Inherit Query from template is disabled all the settings that customize the query should be hidden', async () => {
+			await toggleInheritQueryFromTemplateSetting();
+
 			await expect( page ).toMatchElement(
 				block.selectors.editor.popularFilter
 			);
@@ -51,8 +54,8 @@ describe( `${ block.name } Block`, () => {
 			);
 		} );
 
-		it( 'when Inherit Query from template is enabled all the settings that customize the query should be hide', async () => {
-			await configurateProductQueryBlock();
+		it( 'when Inherit Query from template is enabled all the settings that customize the query should be hidden', async () => {
+			await configureProductQueryBlock();
 
 			const popularFilterEl = await page.$(
 				block.selectors.editor.popularFilter
@@ -75,7 +78,7 @@ describe( `${ block.name } Block`, () => {
 				postId: productCatalogTemplateId,
 			} );
 			await addProductQueryBlock();
-			await configurateProductQueryBlock();
+			await configureProductQueryBlock();
 			await page.waitForNetworkIdle();
 			await saveTemplate();
 			await page.waitForNetworkIdle();
@@ -104,7 +107,7 @@ describe( `${ block.name } Block`, () => {
 				postId: taxonomyProductCategory,
 			} );
 			await addProductQueryBlock();
-			await configurateProductQueryBlock();
+			await configureProductQueryBlock();
 			await page.waitForNetworkIdle();
 			await saveTemplate();
 			await page.waitForNetworkIdle();
@@ -136,7 +139,7 @@ describe( `${ block.name } Block`, () => {
 				postId: tagProductCategory,
 			} );
 			await addProductQueryBlock();
-			await configurateProductQueryBlock();
+			await configureProductQueryBlock();
 			await page.waitForNetworkIdle();
 			await saveTemplate();
 			await page.waitForNetworkIdle();
@@ -168,7 +171,7 @@ describe( `${ block.name } Block`, () => {
 				postId: productSearchResults,
 			} );
 			await addProductQueryBlock();
-			await configurateProductQueryBlock();
+			await configureProductQueryBlock();
 			await page.waitForNetworkIdle();
 			await saveTemplate();
 			await page.waitForNetworkIdle();

diff --git a/tests/e2e/specs/shopper/product-query/utils.ts b/tests/e2e/specs/shopper/product-query/utils.ts
@@ -32,17 +32,16 @@ export const addProductQueryBlock = async () => {
 	await page.waitForNetworkIdle();
 };
 
-const enableInheritQueryFromTemplateSetting = async () => {
+export const toggleInheritQueryFromTemplateSetting = async () => {
 	const [ button ] = await page.$x(
 		block.selectors.editor.inheritQueryFromTemplateSetting
 	);
 	await button.click();
 };
 
-export const configurateProductQueryBlock = async () => {
+export const configureProductQueryBlock = async () => {
 	await ensureSidebarOpened();
 	await switchBlockInspectorTabWhenGutenbergIsInstalled( 'Settings' );
-	await enableInheritQueryFromTemplateSetting();
 };
 
 export const getProductsNameFromClassicTemplate = async () => {