Commit 30c03208a5 for woocommerce

commit 30c03208a5b504df31fa708022f6cefde6f62cec
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date:   Wed Jan 28 23:20:59 2026 +0530

    Refactor Product Category Title Block to use ToolsPanel (#62904)

    * Refactor category title block to use ToolsPanel

    * Add changelog file

    * Remove redundant resetAllFilter

    ---------

    Co-authored-by: Luigi Teschio <gigitux@gmail.com>

diff --git a/plugins/woocommerce/changelog/59464-use-toolspanel-in-category-title-block b/plugins/woocommerce/changelog/59464-use-toolspanel-in-category-title-block
new file mode 100644
index 0000000000..24549e3a7e
--- /dev/null
+++ b/plugins/woocommerce/changelog/59464-use-toolspanel-in-category-title-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Removes PanelBody and uses ToolsPanel in Product Category Title block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
index 1d37f668f0..ba744c96fb 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/category-title/edit.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { PanelBody, ToggleControl, TextControl } from '@wordpress/components';
 import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { createElement, forwardRef } from '@wordpress/element';
@@ -18,6 +17,15 @@ import {
 	// @ts-expect-error HeadingLevelDropdown is not exported from @wordpress/block-editor
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
+// eslint-disable-next-line @woocommerce/dependency-group
+import {
+	ToggleControl,
+	TextControl,
+	// 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';

 interface Props {
 	attributes: {
@@ -34,6 +42,12 @@ interface Props {
 	};
 }

+const DEFAULT_ATTRIBUTES = {
+	isLink: false,
+	linkTarget: '_self',
+	rel: '',
+};
+
 // Helper component to handle dynamic tag names without TypeScript union type issues
 const ContainerElement = forwardRef<
 	HTMLElement,
@@ -174,37 +188,85 @@ export default function Edit( { attributes, setAttributes, context }: Props ) {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings', 'woocommerce' ) }
+					resetAll={ () => {
+						setAttributes( DEFAULT_ATTRIBUTES );
+					} }
+				>
+					<ToolsPanelItem
 						label={ __( 'Make title a link', 'woocommerce' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						hasValue={ () => isLink !== DEFAULT_ATTRIBUTES.isLink }
+						onDeselect={ () =>
+							setAttributes( {
+								isLink: DEFAULT_ATTRIBUTES.isLink,
+							} )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Make title a link', 'woocommerce' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
 					{ isLink && (
 						<>
-							<ToggleControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
 								label={ __( 'Open in new tab', 'woocommerce' ) }
-								onChange={ ( v ) =>
+								hasValue={ () =>
+									linkTarget !== DEFAULT_ATTRIBUTES.linkTarget
+								}
+								onDeselect={ () =>
 									setAttributes( {
-										linkTarget: v ? '_blank' : '_self',
+										linkTarget:
+											DEFAULT_ATTRIBUTES.linkTarget,
 									} )
 								}
-								checked={ linkTarget === '_blank' }
-							/>
-							<TextControl
-								__next40pxDefaultSize
-								__nextHasNoMarginBottom
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __(
+										'Open in new tab',
+										'woocommerce'
+									) }
+									onChange={ ( v ) =>
+										setAttributes( {
+											linkTarget: v ? '_blank' : '_self',
+										} )
+									}
+									checked={ linkTarget === '_blank' }
+								/>
+							</ToolsPanelItem>
+							<ToolsPanelItem
 								label={ __( 'Link rel', 'woocommerce' ) }
-								value={ rel }
-								onChange={ ( newRel ) =>
-									setAttributes( { rel: newRel } )
+								hasValue={ () =>
+									rel !== DEFAULT_ATTRIBUTES.rel
+								}
+								onDeselect={ () =>
+									setAttributes( {
+										rel: DEFAULT_ATTRIBUTES.rel,
+									} )
 								}
-							/>
+								isShownByDefault
+							>
+								<TextControl
+									__next40pxDefaultSize
+									__nextHasNoMarginBottom
+									label={ __( 'Link rel', 'woocommerce' ) }
+									value={ rel }
+									onChange={ ( newRel ) =>
+										setAttributes( { rel: newRel } )
+									}
+								/>
+							</ToolsPanelItem>
 						</>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ titleElement }
 		</>