Product Collection - Add Inherit query from template control

assets/js/base/hooks/use-previous.ts

@@ -7,7 +7,7 @@ interface Validation< T > {
 	( value: T, previousValue: T | undefined ): boolean;
 }
 /**
- * Use Previous based on https://usehooks.com/usePrevious/.
+ * Use Previous based on https://usehooks.com/useprevious/.
  *
  * @param {*}        value
  * @param {Function} [validation] Function that needs to validate for the value

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

@@ -42,7 +42,7 @@ export const DEFAULT_QUERY: ProductCollectionQuery = {
 	search: '',
 	exclude: [],
 	sticky: '',
-	inherit: false,
+	inherit: null,
 	taxQuery: {},
 	parents: [],
 	isProductCollectionBlock: true,
@@ -69,6 +69,7 @@ export const getDefaultSettings = (
 		...currentAttributes.query,
 		orderBy: DEFAULT_QUERY.orderBy as TProductCollectionOrderBy,
 		order: DEFAULT_QUERY.order as TProductCollectionOrder,
+		inherit: DEFAULT_QUERY.inherit,
 	},
 } );
 

assets/js/blocks/product-collection/edit.tsx

@@ -10,11 +10,15 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
-import { ProductCollectionAttributes } from './types';
+import type {
+	ProductCollectionAttributes,
+	ProductCollectionQuery,
+} from './types';
 import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
 import InspectorControls from './inspector-controls';
 import { DEFAULT_ATTRIBUTES } from './constants';
 import './editor.scss';
+import { getDefaultValueOfInheritQueryFromTemplate } from './utils';
 
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -84,14 +88,6 @@ const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
 
 	const instanceId = useInstanceId( Edit );
 
-	/**
-	 * Because of issue https://github.com/WordPress/gutenberg/issues/7342,
-	 * We are using this workaround to set default attributes.
-	 */
-	useEffect( () => {
-		setAttributes( { ...DEFAULT_ATTRIBUTES, ...attributes } );
-	}, [ setAttributes ] );
-
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -100,6 +96,31 @@ const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
 		}
 	}, [ queryId, instanceId, setAttributes ] );
 
+	/**
+	 * Because of issue https://github.com/WordPress/gutenberg/issues/7342,
+	 * We are using this workaround to set default attributes.
+	 */
+	useEffect( () => {
+		setAttributes( {
+			...DEFAULT_ATTRIBUTES,
+			query: {
+				...( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery ),
+				inherit: getDefaultValueOfInheritQueryFromTemplate(),
+			},
+			...( attributes as Partial< ProductCollectionAttributes > ),
+		} );
+		// We don't wanna add attributes as a dependency here.
+		// Because we want this to run only once.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ setAttributes ] );
+
+	/**
+	 * If inherit is not a boolean, then we haven't set default attributes yet.
+	 * We don't wanna render anything until default attributes are set.
+	 * Default attributes are set in the useEffect above.
+	 */
+	if ( typeof attributes?.query?.inherit !== 'boolean' ) return null;
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls { ...props } />

assets/js/blocks/product-collection/inspector-controls/columns-control.tsx

@@ -43,6 +43,7 @@ const ColumnsControl = (
 			} }
 		>
 			<RangeControl
+				label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
 				value={ columns }
 				onChange={ ( value: number ) =>
 					props.setAttributes( {

assets/js/blocks/product-collection/inspector-controls/index.tsx

@@ -5,7 +5,6 @@ import type { BlockEditProps } from '@wordpress/blocks';
 import { InspectorControls } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
-import { AttributeMetadata } from '@woocommerce/types';
 import {
 	// @ts-expect-error Using experimental features
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -17,6 +16,7 @@ import {
  */
 import { ProductCollectionAttributes } from '../types';
 import ColumnsControl from './columns-control';
+import InheritQueryControl from './inherit-query-control';
 import OrderByControl from './order-by-control';
 import OnSaleControl from './on-sale-control';
 import { setQueryAttribute } from '../utils';
@@ -29,6 +29,10 @@ import TaxonomyControls from './taxonomy-controls';
 const ProductCollectionInspectorControls = (
 	props: BlockEditProps< ProductCollectionAttributes >
 ) => {
+	const query = props.attributes.query;
+	const inherit = query?.inherit;
+	const displayQueryControls = inherit === false;
+
 	const setQueryAttributeBind = useMemo(
 		() => setQueryAttribute.bind( null, props ),
 		[ props ]
@@ -46,33 +50,41 @@ const ProductCollectionInspectorControls = (
 				} }
 			>
 				<ColumnsControl { ...props } />
-				<OrderByControl { ...props } />
-			</ToolsPanel>
-
-			<ToolsPanel
-				label={ __( 'Filters', 'woo-gutenberg-products-block' ) }
-				resetAll={ ( resetAllFilters: ( () => void )[] ) => {
-					setQueryAttribute( props, DEFAULT_FILTERS );
-					resetAllFilters.forEach( ( resetFilter ) => resetFilter() );
-				} }
-				className="wc-block-editor-product-collection-inspector-toolspanel__filters"
-			>
-				<OnSaleControl { ...props } />
-				<StockStatusControl { ...props } />
-				<KeywordControl { ...props } />
-				<AttributesControl
-					woocommerceAttributes={
-						props.attributes.query &&
-						( props.attributes.query
-							.woocommerceAttributes as AttributeMetadata[] )
-					}
-					setQueryAttribute={ setQueryAttributeBind }
-				/>
-				<TaxonomyControls
+				<InheritQueryControl
 					setQueryAttribute={ setQueryAttributeBind }
-					query={ props.attributes.query }
+					query={ query }
 				/>
+				{ displayQueryControls ? (
+					<OrderByControl { ...props } />
+				) : null }
 			</ToolsPanel>
+
+			{ displayQueryControls ? (
+				<ToolsPanel
+					label={ __( 'Filters', 'woo-gutenberg-products-block' ) }
+					resetAll={ ( resetAllFilters: ( () => void )[] ) => {
+						setQueryAttribute( props, DEFAULT_FILTERS );
+						resetAllFilters.forEach( ( resetFilter ) =>
+							resetFilter()
+						);
+					} }
+					className="wc-block-editor-product-collection-inspector-toolspanel__filters"
+				>
+					<OnSaleControl { ...props } />
+					<StockStatusControl { ...props } />
+					<KeywordControl { ...props } />
+					<AttributesControl
+						woocommerceAttributes={
+							query.woocommerceAttributes || []
+						}
+						setQueryAttribute={ setQueryAttributeBind }
+					/>
+					<TaxonomyControls
+						setQueryAttribute={ setQueryAttributeBind }
+						query={ query }
+					/>
+				</ToolsPanel>
+			) : null }
 		</InspectorControls>
 	);
 };

assets/js/blocks/product-collection/inspector-controls/inherit-query-control.tsx

@@ -0,0 +1,97 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { isSiteEditorPage } from '@woocommerce/utils';
+import { usePrevious } from '@woocommerce/base-hooks';
+import { select } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import {
+	ToggleControl,
+	// @ts-expect-error Using experimental features
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ProductCollectionQuery } from '../types';
+import { DEFAULT_QUERY } from '../constants';
+import { getDefaultValueOfInheritQueryFromTemplate } from '../utils';
+
+const label = __(
+	'Inherit query from template',
+	'woo-gutenberg-products-block'
+);
+
+interface InheritQueryControlProps {
+	setQueryAttribute: ( value: Partial< ProductCollectionQuery > ) => void;
+	query: ProductCollectionQuery | undefined;
+}
+
+const InheritQueryControl = ( {
+	setQueryAttribute,
+	query,
+}: InheritQueryControlProps ) => {
+	const inherit = query?.inherit;
+	const editSiteStore = select( 'core/edit-site' );
+
+	const queryObjectBeforeInheritEnabled = usePrevious(
+		query,
+		( value?: ProductCollectionQuery ) => {
+			return value?.inherit === false;
+		}
+	);
+
+	const defaultValue = useMemo(
+		() => getDefaultValueOfInheritQueryFromTemplate(),
+		[]
+	);
+
+	// Hide the control if not in site editor.
+	const isSiteEditor = isSiteEditorPage( editSiteStore );
+	if ( ! isSiteEditor ) {
+		return null;
+	}
+
+	return (
+		<ToolsPanelItem
+			label={ label }
+			hasValue={ () => inherit !== defaultValue }
+			isShownByDefault
+			onDeselect={ () => {
+				setQueryAttribute( {
+					inherit: null,
+				} );
+			} }
+		>
+			<ToggleControl
+				label={ label }
+				help={ __(
+					'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.',
+					'woo-gutenberg-products-block'
+				) }
+				checked={ !! inherit }
+				onChange={ ( newInherit ) => {
+					if ( newInherit ) {
+						// If the inherit is enabled, we want to reset the query to the default.
+						setQueryAttribute( {
+							...DEFAULT_QUERY,
+							inherit: newInherit,
+						} );
+					} else {
+						// If the inherit is disabled, we want to reset the query to the previous query before the inherit was enabled.
+						setQueryAttribute( {
+							...DEFAULT_QUERY,
+							...queryObjectBeforeInheritEnabled,
+							inherit: newInherit,
+						} );
+					}
+				} }
+			/>
+		</ToolsPanelItem>
+	);
+};
+
+export default InheritQueryControl;

assets/js/blocks/product-collection/types.ts

@@ -24,7 +24,7 @@ export interface ProductCollectionDisplayLayout {
 export interface ProductCollectionQuery {
 	author: string;
 	exclude: string[];
-	inherit: boolean;
+	inherit: boolean | null;
 	offset: number;
 	order: TProductCollectionOrder;
 	orderBy: TProductCollectionOrderBy;

assets/js/blocks/product-collection/utils.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { BlockEditProps } from '@wordpress/blocks';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -26,3 +27,27 @@ export function setQueryAttribute(
 		},
 	} );
 }
+
+export function getDefaultValueOfInheritQueryFromTemplate(): boolean {
+	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 editSiteStore = select( 'core/edit-site' );
+	const currentTemplateId = editSiteStore?.getEditedPostId() as string;
+
+	/**
+	 * Set inherit value when Product Collection block is first added to the page.
+	 * We want inherit value to be true when block is added to ARCHIVE_PRODUCT_TEMPLATES
+	 * and false when added to somewhere else.
+	 */
+	const initialValue = currentTemplateId
+		? ARCHIVE_PRODUCT_TEMPLATES.includes( currentTemplateId )
+		: false;
+
+	return initialValue;
+}

src/BlockTypes/ProductCollection.php

@@ -490,7 +490,7 @@ function ( $carry, $item ) {
 		);
 
 		return array(
-			// phpcs:ignore WordPress.DB.SlowDBQuery
+			// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query
 			'tax_query' => array_values( $grouped_attributes ),
 		);
 	}