Commit 499037d152f for woocommerce
commit 499037d152f89cb140afca9e7e79a615c5931308
Author: Rishabh Gupta <109821717+R1shabh-Gupta@users.noreply.github.com>
Date: Fri Jun 12 20:00:06 2026 +0530
Replace PanelBody with ToolsPanel in Stock Filter inspector controls (#65625)
* Replace PanelBody with ToolsPanel in Stock Filter inspector controls
* Add changelog for Stock Filter ToolsPanel migration
diff --git a/plugins/woocommerce/changelog/fix-59464-use-toolspanel-in-stock-filter b/plugins/woocommerce/changelog/fix-59464-use-toolspanel-in-stock-filter
new file mode 100644
index 00000000000..d0160e80944
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-59464-use-toolspanel-in-stock-filter
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace PanelBody with ToolsPanel in Stock Filter inspector controls.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/stock-filter/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/stock-filter/edit.tsx
index 69ab62e20ab..08a1ddad883 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/stock-filter/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/stock-filter/edit.tsx
@@ -15,6 +15,10 @@ import {
__experimentalToggleGroupControl as ToggleGroupControl,
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+ // 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';
/**
@@ -50,84 +54,139 @@ const Edit = ( {
<PanelBody>
<UpgradeNotice clientId={ clientId } />
</PanelBody>
- <PanelBody title={ __( 'Display Settings', 'woocommerce' ) }>
- <ToggleControl
+ <ToolsPanel
+ label={ __( 'Display Settings', 'woocommerce' ) }
+ resetAll={ () =>
+ setAttributes( {
+ showCounts: false,
+ showFilterButton: false,
+ displayStyle: 'list',
+ selectType: 'multiple',
+ } )
+ }
+ >
+ <ToolsPanelItem
label={ __( 'Display product count', 'woocommerce' ) }
- checked={ showCounts }
- onChange={ () =>
- setAttributes( {
- showCounts: ! showCounts,
- } )
+ hasValue={ () => showCounts !== false }
+ onDeselect={ () =>
+ setAttributes( { showCounts: false } )
}
- />
- <ToggleGroupControl
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __(
+ 'Display product count',
+ 'woocommerce'
+ ) }
+ checked={ showCounts }
+ onChange={ () =>
+ setAttributes( {
+ showCounts: ! showCounts,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ <ToolsPanelItem
label={ __(
'Allow selecting multiple options?',
'woocommerce'
) }
- isBlock
- value={ selectType || 'multiple' }
- onChange={ ( value: string ) =>
- setAttributes( {
- selectType: value,
- } )
+ hasValue={ () => selectType !== 'multiple' }
+ onDeselect={ () =>
+ setAttributes( { selectType: 'multiple' } )
}
- className="wc-block-attribute-filter__multiple-toggle"
+ isShownByDefault
>
- <ToggleGroupControlOption
- value="multiple"
- label={ _x(
- 'Multiple',
- 'Number of filters',
+ <ToggleGroupControl
+ label={ __(
+ 'Allow selecting multiple options?',
'woocommerce'
) }
- />
- <ToggleGroupControlOption
- value="single"
- label={ _x(
- 'Single',
- 'Number of filters',
- 'woocommerce'
- ) }
- />
- </ToggleGroupControl>
- <ToggleGroupControl
+ isBlock
+ value={ selectType || 'multiple' }
+ onChange={ ( value: string ) =>
+ setAttributes( {
+ selectType: value,
+ } )
+ }
+ className="wc-block-attribute-filter__multiple-toggle"
+ >
+ <ToggleGroupControlOption
+ value="multiple"
+ label={ _x(
+ 'Multiple',
+ 'Number of filters',
+ 'woocommerce'
+ ) }
+ />
+ <ToggleGroupControlOption
+ value="single"
+ label={ _x(
+ 'Single',
+ 'Number of filters',
+ 'woocommerce'
+ ) }
+ />
+ </ToggleGroupControl>
+ </ToolsPanelItem>
+ <ToolsPanelItem
label={ __( 'Display Style', 'woocommerce' ) }
- isBlock
- value={ displayStyle }
- onChange={ ( value ) =>
- setAttributes( {
- displayStyle: value,
- } )
+ hasValue={ () => displayStyle !== 'list' }
+ onDeselect={ () =>
+ setAttributes( { displayStyle: 'list' } )
}
- className="wc-block-attribute-filter__display-toggle"
+ isShownByDefault
>
- <ToggleGroupControlOption
- value="list"
- label={ __( 'List', 'woocommerce' ) }
- />
- <ToggleGroupControlOption
- value="dropdown"
- label={ __( 'Dropdown', 'woocommerce' ) }
- />
- </ToggleGroupControl>
- <ToggleControl
+ <ToggleGroupControl
+ label={ __( 'Display Style', 'woocommerce' ) }
+ isBlock
+ value={ displayStyle }
+ onChange={ ( value ) =>
+ setAttributes( {
+ displayStyle: value,
+ } )
+ }
+ className="wc-block-attribute-filter__display-toggle"
+ >
+ <ToggleGroupControlOption
+ value="list"
+ label={ __( 'List', 'woocommerce' ) }
+ />
+ <ToggleGroupControlOption
+ value="dropdown"
+ label={ __( 'Dropdown', 'woocommerce' ) }
+ />
+ </ToggleGroupControl>
+ </ToolsPanelItem>
+ <ToolsPanelItem
label={ __(
"Show 'Apply filters' button",
'woocommerce'
) }
- help={ __(
- 'Products will update when the button is clicked.',
- 'woocommerce'
- ) }
- checked={ showFilterButton }
- onChange={ ( value ) =>
- setAttributes( {
- showFilterButton: value,
- } )
+ hasValue={ () => showFilterButton !== false }
+ onDeselect={ () =>
+ setAttributes( { showFilterButton: false } )
}
- />
- </PanelBody>
+ isShownByDefault
+ >
+ <ToggleControl
+ label={ __(
+ "Show 'Apply filters' button",
+ 'woocommerce'
+ ) }
+ help={ __(
+ 'Products will update when the button is clicked.',
+ 'woocommerce'
+ ) }
+ checked={ showFilterButton }
+ onChange={ ( value ) =>
+ setAttributes( {
+ showFilterButton: value,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
</InspectorControls>
);
};