Product Query - Enable "Inherit Query from template" option (#7641)

* Add Inherit Query from template option

* Update label

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

@@ -28,6 +28,7 @@ export const ALL_PRODUCT_QUERY_CONTROLS = [
 	'presets',
 	'onSale',
 	'stockStatus',
+	'wooInherit',
 ];
 
 export const DEFAULT_ALLOWED_CONTROLS = [
@@ -56,8 +57,8 @@ export const QUERY_DEFAULT_ATTRIBUTES: QueryBlockAttributes = {
 		pages: 0,
 		offset: 0,
 		postType: 'product',
-		order: 'desc',
-		orderBy: 'date',
+		order: 'asc',
+		orderBy: 'title',
 		author: '',
 		search: '',
 		exclude: [],

assets/js/blocks/product-query/editor.scss

@@ -0,0 +1,4 @@
+.woo-inherit-query-toggle {
+	grid-column-start: 1;
+	grid-column-end: 3;
+}

assets/js/blocks/product-query/inspector-controls.tsx

@@ -26,6 +26,7 @@ import {
 	QueryBlockAttributes,
 } from './types';
 import {
+	isCustomInheritGlobalQueryImplementationEnabled,
 	isWooQueryBlockVariation,
 	setQueryAttribute,
 	useAllowedControls,
@@ -38,6 +39,8 @@ import {
 import { PopularPresets } from './inspector-controls/popular-presets';
 import { AttributesFilter } from './inspector-controls/attributes-filter';
 
+import './editor.scss';
+
 const NAMESPACED_CONTROLS = ALL_PRODUCT_QUERY_CONTROLS.map(
 	( id ) =>
 		`__woocommerce${ id[ 0 ].toUpperCase() }${ id.slice(
@@ -146,59 +149,82 @@ export const TOOLS_PANEL_CONTROLS = {
 			</ToolsPanelItem>
 		);
 	},
-	wooInherit: ( props: ProductQueryBlock ) => (
-		<ToggleControl
-			label={ __(
-				'Woo Inherit query from template',
-				'woo-gutenberg-products-block'
-			) }
-			checked={ props.attributes.query.__woocommerceInherit || false }
-			onChange={ ( __woocommerceInherit ) => {
-				setQueryAttribute( props, { __woocommerceInherit } );
-			} }
-		/>
-	),
+	wooInherit: ( props: ProductQueryBlock ) => {
+		return (
+			<ToggleControl
+				className="woo-inherit-query-toggle"
+				label={ __(
+					'Inherit query from template',
+					'woo-gutenberg-products-block'
+				) }
+				help={ __(
+					'Toggle to use the global query context that is set with the current template, such as variations of the product catalog or search. Disable to customize the filtering independently.',
+					'woo-gutenberg-products-block'
+				) }
+				checked={
+					isCustomInheritGlobalQueryImplementationEnabled
+						? props.attributes.query.__woocommerceInherit || false
+						: props.attributes.query.inherit || false
+				}
+				onChange={ ( inherit ) => {
+					if ( isCustomInheritGlobalQueryImplementationEnabled ) {
+						return setQueryAttribute( props, {
+							__woocommerceInherit: inherit,
+						} );
+					}
+					return setQueryAttribute( props, { inherit } );
+				} }
+			/>
+		);
+	},
+};
+
+const ProductQueryControls = ( props: ProductQueryBlock ) => {
+	const allowedControls = useAllowedControls( props.attributes );
+	const defaultWooQueryParams = useDefaultWooQueryParamsForVariation(
+		props.attributes.namespace
+	);
+	return (
+		<>
+			<InspectorControls>
+				{ allowedControls?.includes( 'presets' ) && (
+					<PopularPresets { ...props } />
+				) }
+				<ToolsPanel
+					className="woocommerce-product-query-toolspanel"
+					label={ __(
+						'Advanced Filters',
+						'woo-gutenberg-products-block'
+					) }
+					resetAll={ () => {
+						setQueryAttribute( props, defaultWooQueryParams );
+					} }
+				>
+					{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
+						( [ key, Control ] ) =>
+							allowedControls?.includes( key ) ? (
+								<Control { ...props } key={ key } />
+							) : null
+					) }
+				</ToolsPanel>
+			</InspectorControls>
+			{
+				// Hacky temporary solution to display the feedback prompt
+				// at the bottom of the inspector controls
+			 }
+			<InspectorControls __experimentalGroup="color">
+				<ProductQueryFeedbackPrompt />
+			</InspectorControls>
+		</>
+	);
 };
 
 export const withProductQueryControls =
 	< T extends EditorBlock< T > >( BlockEdit: ElementType ) =>
 	( props: ProductQueryBlock ) => {
-		const allowedControls = useAllowedControls( props.attributes );
-		const defaultWooQueryParams = useDefaultWooQueryParamsForVariation(
-			props.attributes.namespace
-		);
-
 		return isWooQueryBlockVariation( props ) ? (
 			<>
-				<InspectorControls>
-					{ allowedControls?.includes( 'presets' ) && (
-						<PopularPresets { ...props } />
-					) }
-					<ToolsPanel
-						className="woocommerce-product-query-toolspanel"
-						label={ __(
-							'Advanced Filters',
-							'woo-gutenberg-products-block'
-						) }
-						resetAll={ () => {
-							setQueryAttribute( props, defaultWooQueryParams );
-						} }
-					>
-						{ Object.entries( TOOLS_PANEL_CONTROLS ).map(
-							( [ key, Control ] ) =>
-								allowedControls?.includes( key ) ? (
-									<Control { ...props } key={ key } />
-								) : null
-						) }
-					</ToolsPanel>
-				</InspectorControls>
-				{
-					// Hacky temporary solution to display the feedback prompt
-					// at the bottom of the inspector controls
-				 }
-				<InspectorControls __experimentalGroup="color">
-					<ProductQueryFeedbackPrompt />
-				</InspectorControls>
+				<ProductQueryControls { ...props } />
 				<BlockEdit { ...props } />
 			</>
 		) : (

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

@@ -94,7 +94,7 @@ export interface QueryBlockQuery {
 	inherit: boolean;
 	offset?: number;
 	order: 'asc' | 'desc';
-	orderBy: 'date' | 'relevance';
+	orderBy: 'date' | 'relevance' | 'title';
 	pages?: number;
 	parents?: number[];
 	perPage?: number;

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

@@ -56,6 +56,19 @@ export function setQueryAttribute(
 	} );
 }
 
+// This is a feature flag to enable the custom inherit Global Query implementation.
+// This is not intended to be a permanent feature flag, but rather a temporary.
+// https://github.com/woocommerce/woocommerce-blocks/pull/7382
+export const isCustomInheritGlobalQueryImplementationEnabled = false;
+
+export function isWooInheritQueryEnabled(
+	attributes: ProductQueryBlock[ 'attributes' ]
+) {
+	return isCustomInheritGlobalQueryImplementationEnabled
+		? attributes.query.__woocommerceInherit
+		: attributes.query.inherit;
+}
+
 /**
  * Hook that returns the query properties' names defined by the active
  * block variation, to determine which block inspector controls to show.
@@ -66,13 +79,22 @@ export function setQueryAttribute(
 export function useAllowedControls(
 	attributes: ProductQueryBlock[ 'attributes' ]
 ) {
-	return useSelect(
+	const isSiteEditor = useSelect( 'core/edit-site' ) !== undefined;
+
+	const controls = useSelect(
 		( select ) =>
 			select( WP_BLOCKS_STORE ).getActiveBlockVariation(
 				QUERY_LOOP_ID,
 				attributes
 			)?.allowedControls,
-
 		[ attributes ]
 	);
+
+	if ( ! isSiteEditor ) {
+		return controls.filter( ( control ) => control !== 'wooInherit' );
+	}
+
+	return isWooInheritQueryEnabled( attributes )
+		? controls.filter( ( control ) => control === 'wooInherit' )
+		: controls;
 }

assets/js/blocks/product-query/variations/product-query.tsx

@@ -19,12 +19,6 @@ import {
 
 const VARIATION_NAME = 'woocommerce/product-query';
 
-// This is a feature flag to enable the custom inherit Global Query implementation.
-// This is not intended to be a permanent feature flag, but rather a temporary.
-// It is also necessary to enable this feature flag on the PHP side: `src/BlockTypes/ProductQuery.php:49`.
-// https://github.com/woocommerce/woocommerce-blocks/pull/7382
-const isCustomInheritGlobalQueryImplementationEnabled = false;
-
 if ( isFeaturePluginBuild() ) {
 	registerBlockVariation( QUERY_LOOP_ID, {
 		description: __(
@@ -50,9 +44,7 @@ if ( isFeaturePluginBuild() ) {
 		// https://github.com/WordPress/gutenberg/pull/43632
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
-		allowedControls: isCustomInheritGlobalQueryImplementationEnabled
-			? [ ...DEFAULT_ALLOWED_CONTROLS, 'wooInherit' ]
-			: DEFAULT_ALLOWED_CONTROLS,
+		allowedControls: DEFAULT_ALLOWED_CONTROLS,
 		innerBlocks: INNER_BLOCKS_TEMPLATE,
 		scope: [ 'inserter' ],
 	} );

src/BlockTypes/ProductQuery.php

@@ -41,7 +41,7 @@ class ProductQuery extends AbstractBlock {
 
 	/** This is a feature flag to enable the custom inherit Global Query implementation.
 	 * This is not intended to be a permanent feature flag, but rather a temporary.
-	 * It is also necessary to enable this feature flag on the PHP side: `assets/js/blocks/product-query/variations/product-query.tsx:26`.
+	 * It is also necessary to enable this feature flag on the PHP side: `assets/js/blocks/product-query/utils.tsx:83`.
 	 * https://github.com/woocommerce/woocommerce-blocks/pull/7382
 	 *
 	 * @var boolean

tests/e2e/config/jest.config.js

@@ -30,6 +30,10 @@ module.exports = {
 		'<rootDir>/tests/e2e/config/jest.setup.js',
 		'expect-puppeteer',
 	],
-	testPathIgnorePatterns: [ '<rootDir>/tests/e2e/specs/performance' ],
+	testPathIgnorePatterns: [
+		'<rootDir>/tests/e2e/specs/performance',
+		// Ignore all the files that have utils in the name
+		'utils',
+	],
 	transformIgnorePatterns: [ 'node_modules/(?!(woocommerce)/)' ],
 };