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/inspector-controls/columns-control.tsx

@@ -22,6 +22,8 @@ import { getDefaultSettings } from '../constants';
 const ColumnsControl = (
 	props: BlockEditProps< ProductCollectionAttributes >
 ) => {
+	if ( ! props.attributes.displayLayout ) return null;
+
 	const { type, columns } = props.attributes.displayLayout;
 	const showColumnsControl = type === 'flex';
 

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

@@ -15,8 +15,9 @@ import {
 /**
  * Internal dependencies
  */
-import { ProductCollectionAttributes } from '../types';
+import { ProductCollectionAttributes, ProductCollectionQuery } 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 +30,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 +51,43 @@ 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 as AttributeMetadata[]
+						}
+						setQueryAttribute={ setQueryAttributeBind }
+					/>
+					<TaxonomyControls
+						setQueryAttribute={ setQueryAttributeBind }
+						query={
+							props.attributes.query as ProductCollectionQuery
+						}
+					/>
+				</ToolsPanel>
+			) : null }
 		</InspectorControls>
 	);
 };

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

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import { isSiteEditorPage } from '@woocommerce/utils';
+import { usePrevious } from '@woocommerce/base-hooks';
+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';
+
+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 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 currentTemplateId = editSiteStore?.getEditedPostId() as string;
+
+	const queryObjectBeforeInheritEnabled = usePrevious(
+		query,
+		( value?: ProductCollectionQuery ) => {
+			return value?.inherit === false;
+		}
+	);
+
+	/**
+	 * 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;
+	if ( inherit === null ) {
+		setQueryAttribute( {
+			inherit: initialValue,
+		} );
+		return null;
+	}
+
+	// Hide the control if not in site editor.
+	const isSiteEditor = isSiteEditorPage( editSiteStore );
+	if ( ! isSiteEditor ) {
+		return null;
+	}
+
+	return (
+		<ToolsPanelItem
+			label={ label }
+			hasValue={ () => inherit !== initialValue }
+			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 ) {
+						setQueryAttribute( {
+							...DEFAULT_QUERY,
+							inherit: newInherit,
+						} );
+					} else {
+						setQueryAttribute( {
+							...DEFAULT_QUERY,
+							...queryObjectBeforeInheritEnabled,
+							inherit: newInherit,
+						} );
+					}
+				} }
+			/>
+		</ToolsPanelItem>
+	);
+};
+
+export default InheritQueryControl;

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

@@ -4,7 +4,7 @@
 import { AttributeMetadata } from '@woocommerce/types';
 
 export interface ProductCollectionAttributes {
-	query: ProductCollectionQuery;
+	query?: ProductCollectionQuery;
 	queryId: number;
 	queryContext: [
 		{
@@ -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;

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 ),
 		);
 	}