diff --git a/assets/js/blocks/product-query/inspector-controls.tsx b/assets/js/blocks/product-query/inspector-controls.tsx index 92aa23d2012..87ec22f422c 100644 --- a/assets/js/blocks/product-query/inspector-controls.tsx +++ b/assets/js/blocks/product-query/inspector-controls.tsx @@ -8,6 +8,7 @@ import { useSelect } from '@wordpress/data'; import { addFilter } from '@wordpress/hooks'; import { ProductQueryFeedbackPrompt } from '@woocommerce/editor-components/feedback-prompt'; import { EditorBlock } from '@woocommerce/types'; +import { usePrevious } from '@woocommerce/base-hooks'; import { FormTokenField, ToggleControl, @@ -33,6 +34,7 @@ import { } from './utils'; import { ALL_PRODUCT_QUERY_CONTROLS, + QUERY_DEFAULT_ATTRIBUTES, QUERY_LOOP_ID, STOCK_STATUS_OPTIONS, } from './constants'; @@ -88,6 +90,59 @@ function getStockStatusIdByLabel( statusLabel: FormTokenField.Value ) { )?.[ 0 ]; } +export const WooInheritToggleControl = ( + props: ProductQueryBlock & { + defaultWooQueryParams: Partial< ProductQueryArguments >; + } +) => { + const queryObjectBeforeInheritEnabled = usePrevious( + props.attributes.query, + ( value ) => { + return value.inherit === false; + } + ); + + return ( + { + if ( isCustomInheritGlobalQueryImplementationEnabled ) { + return setQueryAttribute( props, { + ...QUERY_DEFAULT_ATTRIBUTES.query, + __woocommerceInherit: inherit, + // Restore the query object value before inherit was enabled. + ...( inherit === false && { + ...queryObjectBeforeInheritEnabled, + } ), + } ); + } + + setQueryAttribute( props, { + ...props.defaultWooQueryParams, + inherit, + // Restore the query object value before inherit was enabled. + ...( inherit === false && { + ...queryObjectBeforeInheritEnabled, + } ), + } ); + } } + /> + ); +}; + export const TOOLS_PANEL_CONTROLS = { attributes: AttributesFilter, onSale: ( props: ProductQueryBlock ) => { @@ -149,34 +204,7 @@ export const TOOLS_PANEL_CONTROLS = { ); }, - wooInherit: ( props: ProductQueryBlock ) => { - return ( - { - if ( isCustomInheritGlobalQueryImplementationEnabled ) { - return setQueryAttribute( props, { - __woocommerceInherit: inherit, - } ); - } - return setQueryAttribute( props, { inherit } ); - } } - /> - ); - }, + wooInherit: WooInheritToggleControl, }; const ProductQueryControls = ( props: ProductQueryBlock ) => { @@ -184,6 +212,7 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => { const defaultWooQueryParams = useDefaultWooQueryParamsForVariation( props.attributes.namespace ); + return ( <> @@ -203,7 +232,13 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => { { Object.entries( TOOLS_PANEL_CONTROLS ).map( ( [ key, Control ] ) => allowedControls?.includes( key ) ? ( - + ) : null ) }