Commit 6ab2b6bf6c2 for woocommerce
commit 6ab2b6bf6c25b51094d66960b4f77d8fb737104b
Author: Jorge A. Torres <jorge.torres@automattic.com>
Date: Fri Mar 6 18:44:48 2026 +0000
Address console warnings in cart & checkout blocks in editor (#63541)
diff --git a/plugins/woocommerce/changelog/fix-62340 b/plugins/woocommerce/changelog/fix-62340
new file mode 100644
index 00000000000..464a9735cc9
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-62340
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix console warnings in the editor when using cart and checkout blocks.
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
index 6d1e8ccb30f..86a7ec0bab0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
@@ -15,8 +15,10 @@ import { ProductQueryContext as Context } from '@woocommerce/blocks/product-quer
import { useProduct } from '@woocommerce/entities';
import {
Disabled,
- Button,
- ButtonGroup,
+ // eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+ __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
@@ -40,14 +42,6 @@ function WidthPanel( {
selectedWidth: number | undefined;
setAttributes: ( attributes: BlockAttributes ) => void;
} ) {
- function handleChange( newWidth: number ) {
- // Check if we are toggling the width off
- const width = selectedWidth === newWidth ? undefined : newWidth;
-
- // Update attributes.
- setAttributes( { width } );
- }
-
return (
<ToolsPanel
label={ __( 'Width settings', 'woocommerce' ) }
@@ -63,24 +57,25 @@ function WidthPanel( {
}
isShownByDefault
>
- <ButtonGroup aria-label={ __( 'Button width', 'woocommerce' ) }>
- { [ 25, 50, 75, 100 ].map( ( widthValue ) => {
- return (
- <Button
- key={ widthValue }
- isSmall
- variant={
- widthValue === selectedWidth
- ? 'primary'
- : undefined
- }
- onClick={ () => handleChange( widthValue ) }
- >
- { widthValue }%
- </Button>
- );
- } ) }
- </ButtonGroup>
+ <ToggleGroupControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
+ hideLabelFromVision
+ label={ __( 'Button width', 'woocommerce' ) }
+ value={ selectedWidth }
+ isDeselectable
+ onChange={ ( value?: number ) =>
+ setAttributes( { width: value } )
+ }
+ >
+ { [ 25, 50, 75, 100 ].map( ( widthValue ) => (
+ <ToggleGroupControlOption
+ key={ widthValue }
+ value={ widthValue }
+ label={ `${ widthValue }%` }
+ />
+ ) ) }
+ </ToggleGroupControl>
</ToolsPanelItem>
</ToolsPanel>
);
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx
index b042678c9ca..1131386b249 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/edit.tsx
@@ -173,6 +173,7 @@ const Edit = ( {
isShownByDefault
>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Link to Product Page',
'woocommerce'
@@ -202,6 +203,8 @@ const Edit = ( {
isShownByDefault
>
<ToggleGroupControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Resolution', 'woocommerce' ) }
isBlock
help={
diff --git a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx
index 5b9f3620d58..622b6d277b6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/atomic/blocks/product-elements/image/image-size-settings.tsx
@@ -82,6 +82,7 @@ export const ImageSizeSettings = ( {
label={ __( 'Image size', 'woocommerce' ) }
>
<UnitControl
+ __next40pxDefaultSize
label={ __( 'Height', 'woocommerce' ) }
onChange={ ( value: string ) => {
setAttributes( { height: value } );
@@ -90,6 +91,7 @@ export const ImageSizeSettings = ( {
units={ sizeUnits }
/>
<UnitControl
+ __next40pxDefaultSize
label={ __( 'Width', 'woocommerce' ) }
onChange={ ( value: string ) => {
setAttributes( { width: value } );
@@ -103,6 +105,8 @@ export const ImageSizeSettings = ( {
label={ __( 'Scale', 'woocommerce' ) }
>
<ToggleGroupControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Scale', 'woocommerce' ) }
value={ scale }
help={ scaleHelp[ scale ] }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx
index 151ad6faa45..1af7600eb5b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/edit.tsx
@@ -32,6 +32,8 @@ export const Edit = ( { attributes, setAttributes }: Props ): JSX.Element => {
<InspectorControls>
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
<RangeControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __(
'Cross-Sells products to show',
'woocommerce'
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/form-step/form-step-heading.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/form-step/form-step-heading.tsx
index 3b853e1b98b..24423aa0d9e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/form-step/form-step-heading.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/form-step/form-step-heading.tsx
@@ -15,7 +15,6 @@ const FormStepHeading = ( {
} ): JSX.Element => (
<div className="wc-block-components-checkout-step__heading">
<Title
- aria-hidden="true"
className="wc-block-components-checkout-step__title"
headingLevel="2"
>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
index edb6041c871..3d820bd5763 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/width-options-control.tsx
@@ -73,6 +73,7 @@ const WidthOptionsControl = ( {
</ToggleGroupControl>
{ widthType === WidthOptions.FIXED && (
<UnitControl
+ __next40pxDefaultSize
onChange={ ( value: string ) => {
setAttributes( {
dimensions: {