Refactor logic that sets default attributes to Products block dependi…

…ng on the template
woocommerce · Jul 24, 2023 · 2057f0f · 2057f0f
1 parent 6db30aa
commit 2057f0f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/assets/js/blocks/product-query/index.tsx b/assets/js/blocks/product-query/index.tsx
@@ -13,7 +13,7 @@ import { CORE_NAME as PRODUCT_SUMMARY_ID } from './variations/elements/product-s
 import { CORE_NAME as PRODUCT_TEMPLATE_ID } from './variations/elements/product-template';
 import './inspector-controls';
 import './style.scss';
-import './variations/product-query';
+import { registerProductsBlockWithCorrectAttributes } from './variations/product-query';
 import './variations/related-products';
 
 const EXTENDED_CORE_ELEMENTS = [
@@ -47,4 +47,5 @@ if ( isWpVersion( '6.1', '>=' ) ) {
 		'core/custom-class-name/attribute',
 		registerProductQueryElementsNamespace
 	);
+	registerProductsBlockWithCorrectAttributes();
 }
diff --git a/assets/js/blocks/product-query/variations/product-query.tsx b/assets/js/blocks/product-query/variations/product-query.tsx
@@ -8,7 +8,6 @@ import {
 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';
 
@@ -22,7 +21,7 @@ import {
 	QUERY_LOOP_ID,
 } from '../constants';
 
-export const VARIATION_NAME = 'woocommerce/product-query';
+const VARIATION_NAME = 'woocommerce/product-query';
 
 const ARCHIVE_PRODUCT_TEMPLATES = [
 	'woocommerce/woocommerce//archive-product',
@@ -63,39 +62,46 @@ const registerProductsBlock = ( attributes: QueryBlockAttributes ) => {
 	} );
 };
 
-if ( isWpVersion( '6.1', '>=' ) ) {
-	const store = select( 'core/edit-site' );
-	const isTemplate = store?.getEditedPostType() === 'wp_template';
+export const registerProductsBlockWithCorrectAttributes = () => {
+	const QUERY_DEFAULT_ATTRIBUTES_WITH_INHERIT = {
+		...QUERY_DEFAULT_ATTRIBUTES,
+		query: {
+			...QUERY_DEFAULT_ATTRIBUTES.query,
+			inherit: true,
+		},
+	};
+	let previousQueryAttributes: QueryBlockAttributes | null = null;
+
+	// Register the Products block with default attributes.
+	registerProductsBlock( QUERY_DEFAULT_ATTRIBUTES );
+
+	subscribe( () => {
+		const store = select( 'core/edit-site' );
+		const editedPostType = store?.getEditedPostType();
 
-	if ( isTemplate ) {
-		let currentTemplateId: string | undefined;
+		if ( typeof editedPostType === 'undefined' ) {
+			return;
+		}
 
-		subscribe( () => {
-			const previousTemplateId = currentTemplateId;
+		let queryAttributes = QUERY_DEFAULT_ATTRIBUTES;
 
-			currentTemplateId = store?.getEditedPostId();
+		if ( editedPostType === 'wp_template' ) {
+			const currentTemplateId: string | null =
+				store?.getEditedPostId() || null;
 
 			if (
-				previousTemplateId === currentTemplateId ||
-				typeof currentTemplateId === 'undefined'
+				currentTemplateId &&
+				ARCHIVE_PRODUCT_TEMPLATES.includes( currentTemplateId )
 			) {
-				return;
+				queryAttributes = QUERY_DEFAULT_ATTRIBUTES_WITH_INHERIT;
 			}
+		}
 
-			const queryAttributes = {
-				...QUERY_DEFAULT_ATTRIBUTES,
-				query: {
-					...QUERY_DEFAULT_ATTRIBUTES.query,
-					inherit:
-						ARCHIVE_PRODUCT_TEMPLATES.includes( currentTemplateId ),
-				},
-			};
+		if ( queryAttributes !== previousQueryAttributes ) {
+			previousQueryAttributes = queryAttributes;
 
 			unregisterBlockVariation( QUERY_LOOP_ID, VARIATION_NAME );
-
 			registerProductsBlock( queryAttributes );
-		} );
-	} else {
-		registerProductsBlock( QUERY_DEFAULT_ATTRIBUTES );
-	}
-}
+		}
+	} );
+};