Commit f919438ed2c for woocommerce

commit f919438ed2c349d2c3692ada320fcc4a9effaca1
Author: Rishabh Gupta <109821717+R1shabh-Gupta@users.noreply.github.com>
Date:   Wed Jun 10 15:26:10 2026 +0530

    Replace PanelBody with ToolsPanel in PageSelector component (#64935)

    * Replace PanelBody with ToolsPanel in PageSelector component

    * Add changelog for PageSelector ToolsPanel refactor

    * fix: guard against undefined pageId in hasValue check

diff --git a/plugins/woocommerce/changelog/refactor-59464-use-toolspanel-in-page-selector b/plugins/woocommerce/changelog/refactor-59464-use-toolspanel-in-page-selector
new file mode 100644
index 00000000000..4736802b5de
--- /dev/null
+++ b/plugins/woocommerce/changelog/refactor-59464-use-toolspanel-in-page-selector
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Replace PanelBody with ToolsPanel in the PageSelector component.
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/page-selector/index.js b/plugins/woocommerce/client/blocks/assets/js/editor-components/page-selector/index.js
index e1de1d02822..9e8d281a1ca 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/page-selector/index.js
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/page-selector/index.js
@@ -2,8 +2,15 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, SelectControl } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import {
+	SelectControl,
+	// 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
  */
@@ -21,25 +28,39 @@ const PageSelector = ( { setPageId, pageId, labels } ) => {
 		}, [] ) || null;
 	if ( pages ) {
 		return (
-			<PanelBody title={ labels.title }>
-				<SelectControl
+			<ToolsPanel
+				label={ labels.title }
+				resetAll={ () => setPageId( 0 ) }
+			>
+				<ToolsPanelItem
 					label={ __( 'Link to', 'woocommerce' ) }
-					value={ pageId }
-					options={ [
-						{
-							label: labels.default,
-							value: 0,
-						},
-						...pages.map( ( page ) => {
-							return {
-								label: formatTitle( page, pages ),
-								value: parseInt( page.id, 10 ),
-							};
-						} ),
-					] }
-					onChange={ ( value ) => setPageId( parseInt( value, 10 ) ) }
-				/>
-			</PanelBody>
+					hasValue={ () =>
+						typeof pageId === 'number' && pageId !== 0
+					}
+					onDeselect={ () => setPageId( 0 ) }
+					isShownByDefault
+				>
+					<SelectControl
+						label={ __( 'Link to', 'woocommerce' ) }
+						value={ pageId }
+						options={ [
+							{
+								label: labels.default,
+								value: 0,
+							},
+							...pages.map( ( page ) => {
+								return {
+									label: formatTitle( page, pages ),
+									value: parseInt( page.id, 10 ),
+								};
+							} ),
+						] }
+						onChange={ ( value ) =>
+							setPageId( parseInt( value, 10 ) )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		);
 	}
 	return null;