Commit a719ccba2e for woocommerce
commit a719ccba2e88c82b617dbe2ddbe676cc2371c531
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Wed Jan 28 23:23:17 2026 +0530
Refactor Product Filters Blocks to use ToolsPanel (#62723)
* Refactor PriceSliderEdit to use ToolsPanel
* Refactor Inspector to use ToolsPanel
* Add changelog file
---------
Co-authored-by: Luigi Teschio <gigitux@gmail.com>
diff --git a/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-filters-blocks b/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-filters-blocks
new file mode 100644
index 0000000000..7482ee6087
--- /dev/null
+++ b/plugins/woocommerce/changelog/59464-use-toolspanel-in-product-filters-blocks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Removes PanelBody and uses ToolsPanel for Product Filters blocks
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/edit.tsx
index c5bce17ad5..620fa99a3f 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/edit.tsx
@@ -3,13 +3,11 @@
*/
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
import { formatPrice, getCurrency } from '@woocommerce/price-format';
import {
useBlockProps,
InspectorControls,
withColors,
-
// @ts-expect-error - no types.
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
@@ -17,6 +15,15 @@ import {
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
} from '@wordpress/block-editor';
+// eslint-disable-next-line @woocommerce/dependency-group
+import {
+ ToggleControl,
+ Disabled,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
/**
* Internal dependencies
@@ -99,29 +106,60 @@ const PriceSliderEdit = ( {
return (
<>
<InspectorControls>
- <PanelBody title={ __( 'Settings', 'woocommerce' ) }>
- <ToggleControl
+ <ToolsPanel
+ label={ __( 'Settings', 'woocommerce' ) }
+ resetAll={ () => {
+ setAttributes( {
+ showInputFields: true,
+ inlineInput: false,
+ } );
+ } }
+ >
+ <ToolsPanelItem
+ hasValue={ () => showInputFields !== true }
label={ __( 'Show input fields', 'woocommerce' ) }
- checked={ showInputFields }
- onChange={ () =>
- setAttributes( {
- showInputFields: ! showInputFields,
- } )
+ onDeselect={ () =>
+ setAttributes( { showInputFields: true } )
}
- __nextHasNoMarginBottom
- />
-
- { showInputFields && (
+ isShownByDefault
+ >
<ToggleControl
- label={ __( 'Inline input fields', 'woocommerce' ) }
- checked={ inlineInput }
+ label={ __( 'Show input fields', 'woocommerce' ) }
+ checked={ showInputFields }
onChange={ () =>
- setAttributes( { inlineInput: ! inlineInput } )
+ setAttributes( {
+ showInputFields: ! showInputFields,
+ } )
}
__nextHasNoMarginBottom
/>
+ </ToolsPanelItem>
+
+ { showInputFields && (
+ <ToolsPanelItem
+ hasValue={ () => inlineInput === true }
+ label={ __( 'Inline input fields', 'woocommerce' ) }
+ onDeselect={ () =>
+ setAttributes( { inlineInput: false } )
+ }
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __(
+ 'Inline input fields',
+ 'woocommerce'
+ ) }
+ checked={ inlineInput }
+ onChange={ () =>
+ setAttributes( {
+ inlineInput: ! inlineInput,
+ } )
+ }
+ __nextHasNoMarginBottom
+ />
+ </ToolsPanelItem>
) }
- </PanelBody>
+ </ToolsPanel>
</InspectorControls>
<InspectorControls group="color">
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/components/inspector.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/components/inspector.tsx
index cf783dcb85..0a7f93652a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/components/inspector.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/components/inspector.tsx
@@ -7,9 +7,12 @@ import { __ } from '@wordpress/i18n';
import {
Flex,
FlexItem,
- PanelBody,
RadioControl,
ToggleControl,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanel as ToolsPanel,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
/**
@@ -63,62 +66,84 @@ export const Inspector = ( {
return (
<InspectorControls key="inspector">
- <PanelBody title={ __( 'Display', 'woocommerce' ) }>
- <RadioControl
+ <ToolsPanel
+ label={ __( 'Display', 'woocommerce' ) }
+ resetAll={ () => {
+ setAttributes( {
+ minRating: '0',
+ showCounts: false,
+ } );
+ } }
+ >
+ <ToolsPanelItem
+ hasValue={ () => minRating !== '0' }
label={ __( 'Minimum rating', 'woocommerce' ) }
- selected={ minRating }
- className="wc-block-rating-filter__rating-control"
- options={ [
- {
- label: (
- <MinimumRatingLabel
- stars={ 4 }
- ariaLabel={ __(
- 'Four stars and up',
- 'woocommerce'
- ) }
- />
- ),
- value: '4',
- },
- {
- label: (
- <MinimumRatingLabel
- stars={ 3 }
- ariaLabel={ __(
- 'Three stars and up',
- 'woocommerce'
- ) }
- />
- ),
- value: '3',
- },
- {
- label: (
- <MinimumRatingLabel
- stars={ 2 }
- ariaLabel={ __(
- 'Two stars and up',
- 'woocommerce'
- ) }
- />
- ),
- value: '2',
- },
- {
- label: __( 'No limit', 'woocommerce' ),
- value: '0', // no limit
- },
- ] }
- onChange={ setMinRating }
- />
- <ToggleControl
+ onDeselect={ () => setAttributes( { minRating: '0' } ) }
+ isShownByDefault
+ >
+ <RadioControl
+ label={ __( 'Minimum rating', 'woocommerce' ) }
+ selected={ minRating }
+ className="wc-block-rating-filter__rating-control"
+ options={ [
+ {
+ label: (
+ <MinimumRatingLabel
+ stars={ 4 }
+ ariaLabel={ __(
+ 'Four stars and up',
+ 'woocommerce'
+ ) }
+ />
+ ),
+ value: '4',
+ },
+ {
+ label: (
+ <MinimumRatingLabel
+ stars={ 3 }
+ ariaLabel={ __(
+ 'Three stars and up',
+ 'woocommerce'
+ ) }
+ />
+ ),
+ value: '3',
+ },
+ {
+ label: (
+ <MinimumRatingLabel
+ stars={ 2 }
+ ariaLabel={ __(
+ 'Two stars and up',
+ 'woocommerce'
+ ) }
+ />
+ ),
+ value: '2',
+ },
+ {
+ label: __( 'No limit', 'woocommerce' ),
+ value: '0', // no limit
+ },
+ ] }
+ onChange={ setMinRating }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
+ hasValue={ () => showCounts === true }
label={ __( 'Product counts', 'woocommerce' ) }
- checked={ showCounts }
- onChange={ setCountVisibility }
- __nextHasNoMarginBottom
- />
- </PanelBody>
+ onDeselect={ () => setAttributes( { showCounts: false } ) }
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __( 'Product counts', 'woocommerce' ) }
+ checked={ showCounts }
+ onChange={ setCountVisibility }
+ __nextHasNoMarginBottom
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
</InspectorControls>
);
};