Commit 0cb4ca44d8 for woocommerce
commit 0cb4ca44d8b00fa2fae66cd90b0c06b6333b3f6c
Author: Amit Raj <77401999+amitraj2203@users.noreply.github.com>
Date: Thu Jan 15 17:11:20 2026 +0530
Refactor Order Confirmation Block to use ToolsPanel (#62698)
* Refactor order confirmation block to use ToolsPanel for styling options
* Add changelog file
* Fix typo in changelog
* Fix linting
* Move imports in order confirmation block to avoid lint errors
diff --git a/plugins/woocommerce/changelog/59464-use-toolspanel-in-order-confirmation-block b/plugins/woocommerce/changelog/59464-use-toolspanel-in-order-confirmation-block
new file mode 100644
index 0000000000..de6ef37cb8
--- /dev/null
+++ b/plugins/woocommerce/changelog/59464-use-toolspanel-in-order-confirmation-block
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Removes PanelBody and uses ToolsPanel for Order Confirmation Block
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
index 77355d7fe4..af08852de2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/order-confirmation/create-account/edit.tsx
@@ -4,18 +4,22 @@
import { __, sprintf } from '@wordpress/i18n';
import clsx from 'clsx';
import type { TemplateArray, BlockAttributes } from '@wordpress/blocks';
-import {
- Disabled,
- PanelBody,
- ToggleControl,
- ExternalLink,
-} from '@wordpress/components';
import {
InnerBlocks,
useBlockProps,
InspectorControls,
} from '@wordpress/block-editor';
import { getSetting, ADMIN_URL } from '@woocommerce/settings';
+import {
+ Disabled,
+ PanelBody,
+ ToggleControl,
+ ExternalLink,
+ // 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
@@ -110,23 +114,42 @@ export const Edit = ( {
</Disabled>
{ ! generatePassword && (
<InspectorControls>
- <PanelBody title={ __( 'Style', 'woocommerce' ) }>
- <ToggleControl
- __nextHasNoMarginBottom
+ <ToolsPanel
+ label={ __( 'Style', 'woocommerce' ) }
+ resetAll={ () => {
+ setAttributes( { hasDarkControls: false } );
+ } }
+ >
+ <ToolsPanelItem
+ hasValue={ () =>
+ attributes.hasDarkControls === true
+ }
label={ __( 'Dark mode inputs', 'woocommerce' ) }
- help={ __(
- 'Inputs styled specifically for use on dark background colors.',
- 'woocommerce'
- ) }
- checked={ attributes.hasDarkControls }
- onChange={ () =>
- setAttributes( {
- hasDarkControls:
- ! attributes.hasDarkControls,
- } )
+ onDeselect={ () =>
+ setAttributes( { hasDarkControls: false } )
}
- />
- </PanelBody>
+ isShownByDefault
+ >
+ <ToggleControl
+ __nextHasNoMarginBottom
+ label={ __(
+ 'Dark mode inputs',
+ 'woocommerce'
+ ) }
+ help={ __(
+ 'Inputs styled specifically for use on dark background colors.',
+ 'woocommerce'
+ ) }
+ checked={ attributes.hasDarkControls }
+ onChange={ () =>
+ setAttributes( {
+ hasDarkControls:
+ ! attributes.hasDarkControls,
+ } )
+ }
+ />
+ </ToolsPanelItem>
+ </ToolsPanel>
</InspectorControls>
) }
<InspectorControls>