Commit a42985e66c for woocommerce

commit a42985e66c2528638e64ded32c9f7c3b5d4de77d
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date:   Thu Jan 15 14:07:40 2026 +0530

    Refactor Catalog Sorting Block to use ToolsPanel (#62699)

    * Refactor accessibility controls to use ToolsPanel in catalog sorting block

    * Add changelog file

    ---------

    Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>

diff --git a/plugins/woocommerce/changelog/59464-use-toolspanel-in-catalog-sorting-block b/plugins/woocommerce/changelog/59464-use-toolspanel-in-catalog-sorting-block
new file mode 100644
index 0000000000..f2267b8c27
--- /dev/null
+++ b/plugins/woocommerce/changelog/59464-use-toolspanel-in-catalog-sorting-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Removes PanelBody and uses ToolsPanel for Catalog Sorting Block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/edit.tsx
index 42756be2bb..02d777e240 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/catalog-sorting/edit.tsx
@@ -2,9 +2,16 @@
  * External dependencies
  */
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
+import {
+	Disabled,
+	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';

 /**
  * Internal dependencies
@@ -49,21 +56,36 @@ const Edit = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Accessibility', 'woocommerce' ) }>
-					<ToggleControl
+				<ToolsPanel
+					label={ __( 'Accessibility', 'woocommerce' ) }
+					resetAll={ () => {
+						setAttributes( { useLabel: false } );
+					} }
+				>
+					<ToolsPanelItem
+						hasValue={ () => useLabel !== false }
 						label={ __( 'Show visual label', 'woocommerce' ) }
-						help={ __(
-							'Displays "Sort by" text before the dropdown menu to improve clarity and accessibility.',
-							'woocommerce'
-						) }
-						checked={ useLabel }
-						onChange={ ( isChecked ) =>
-							setAttributes( {
-								useLabel: isChecked,
-							} )
+						onDeselect={ () =>
+							setAttributes( { useLabel: false } )
 						}
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show visual label', 'woocommerce' ) }
+							help={ __(
+								'Displays "Sort by" text before the dropdown menu to improve clarity and accessibility.',
+								'woocommerce'
+							) }
+							checked={ useLabel }
+							onChange={ ( isChecked ) =>
+								setAttributes( {
+									useLabel: isChecked,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
 				<Disabled>