From 85b7689d093e6bd380306767194e06a1fab077ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= Date: Mon, 13 Feb 2023 16:36:38 +0100 Subject: [PATCH] Set inherit default to true when products is inserted on archive product templates (#8375) * Set inherit default to true when products is inserted on archive products templates * Create new query attributes object Co-authored-by: kmanijak * 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 --- .../variations/product-query.tsx | 52 +++++++++++++++++-- .../product-query-with-templates.test.ts | 21 ++++---- .../e2e/specs/shopper/product-query/utils.ts | 5 +- 3 files changed, 63 insertions(+), 15 deletions(-) diff --git a/assets/js/blocks/product-query/variations/product-query.tsx b/assets/js/blocks/product-query/variations/product-query.tsx index 73362b8bf0d..b5804d87d17 100644 --- 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 index 26740c556d4..9328004f709 100644 --- 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 index 26b3d232b89..08c86c01b81 100644 --- 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 () => {