Commit 9eafe010f0 for woocommerce
commit 9eafe010f0b09b0e5e955c064cc2ee963be0f8b7
Author: Raluca Stan <ralucastn@gmail.com>
Date: Mon Nov 17 14:32:02 2025 +0100
Prevent warnings coming from checkout block settings (#61830)
* Prevent warnings coming from checkout block settings
* Add changelog
diff --git a/plugins/woocommerce/changelog/fix-site-editor-warnings b/plugins/woocommerce/changelog/fix-site-editor-warnings
new file mode 100644
index 0000000000..d3ba6c9a44
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-site-editor-warnings
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+prevent block settings warnings for checkout areas
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/express-payment-settings.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/express-payment-settings.tsx
index 4519338ac7..a02fd651f0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/express-payment-settings.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/express-payment-settings.tsx
@@ -165,6 +165,7 @@ export const ExpressPaymentControls = ( {
className="express-payment-button-settings"
>
<ToggleControl
+ __nextHasNoMarginBottom
label={ toggleLabel }
checked={ attributes.showButtonStyles }
onChange={ () =>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx
index 43e16a8d54..adeff2cfa6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-checkout-shared/block-settings/index.tsx
@@ -18,6 +18,7 @@ export const BlockSettings = ( {
<InspectorControls>
<PanelBody title={ __( 'Style', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Show form step numbers', 'woocommerce' ) }
checked={ showFormStepNumbers }
onChange={ () =>
@@ -27,6 +28,7 @@ export const BlockSettings = ( {
}
/>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Dark mode inputs', 'woocommerce' ) }
help={ __(
'Inputs styled specifically for use on dark background colors.',
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/edit.tsx
index 264d76b456..147d5c0e13 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart-link/edit.tsx
@@ -43,6 +43,8 @@ const Edit = ( { attributes, setAttributes }: Props ): JSX.Element => {
<InspectorControls>
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
<ToggleGroupControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
className="wc-block-editor-mini-cart__cart-icon-toggle"
isBlock
label={ __( 'Cart Icon', 'woocommerce' ) }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx
index 0f0577dde6..59b86de759 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx
@@ -40,6 +40,7 @@ export const Edit = ( {
! displayCartPricesIncludingTax && (
<PanelBody title={ __( 'Taxes', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Show rate after tax name',
'woocommerce'
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-field-controls.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-field-controls.tsx
index adba40ce3a..cb89e8d983 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-field-controls.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/address-field-controls.tsx
@@ -52,6 +52,7 @@ export const AddressFieldControls = (): JSX.Element => {
) }
</p>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Company', 'woocommerce' ) }
checked={ ! defaultFields.company.hidden }
onChange={ () => {
@@ -78,6 +79,7 @@ export const AddressFieldControls = (): JSX.Element => {
/>
) }
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Address line 2', 'woocommerce' ) }
checked={ ! defaultFields.address_2.hidden }
onChange={ () => {
@@ -104,6 +106,7 @@ export const AddressFieldControls = (): JSX.Element => {
/>
) }
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Phone', 'woocommerce' ) }
checked={ ! defaultFields.phone.hidden }
onChange={ () => {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
index e95d38a8ac..598629c947 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-actions-block/edit.tsx
@@ -57,6 +57,7 @@ export const Edit = ( {
<InspectorControls>
<PanelBody title={ __( 'Options', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Show a "Return to Cart" link',
'woocommerce'
@@ -75,6 +76,8 @@ export const Edit = ( {
{ showPrice && (
<TextControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Price separator', 'woocommerce' ) }
id="price-separator"
value={ attributes.priceSeparator }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
index f1a18716f4..ac17ea3abc 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
@@ -33,6 +33,7 @@ export const Edit = ( {
<InspectorControls>
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Disable product descriptions',
'woocommerce'
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
index 0f0577dde6..59b86de759 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
@@ -40,6 +40,7 @@ export const Edit = ( {
! displayCartPricesIncludingTax && (
<PanelBody title={ __( 'Taxes', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Show rate after tax name',
'woocommerce'
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
index cd0c2f0db9..8dd1886c51 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-shipping-method-block/edit.tsx
@@ -222,6 +222,7 @@ export const Edit = ( {
) }
</p>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Show icon', 'woocommerce' ) }
checked={ showIcon }
onChange={ () =>
@@ -231,6 +232,7 @@ export const Edit = ( {
}
/>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Show costs', 'woocommerce' ) }
checked={ showPrice }
onChange={ () =>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
index f20d1056f3..dc27835e51 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/edit.tsx
@@ -121,6 +121,7 @@ export const Edit = ( {
) }
<PanelBody title={ __( 'Display options', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Require checkbox', 'woocommerce' ) }
checked={ checkbox }
onChange={ () =>
@@ -130,6 +131,7 @@ export const Edit = ( {
}
/>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Show separator', 'woocommerce' ) }
checked={ showSeparator }
onChange={ () =>
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/sidebar-settings.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
index edc30c2a14..da9543edc0 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/customer-account/sidebar-settings.tsx
@@ -69,6 +69,8 @@ export const BlockSettings = ( {
</PanelBody>
<PanelBody title={ __( 'Display settings', 'woocommerce' ) }>
<SelectControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
className="customer-account-display-style"
label={ __( 'Icon options', 'woocommerce' ) }
value={ displayStyle }
@@ -96,6 +98,8 @@ export const BlockSettings = ( {
/>
{ displayIconStyleSelector ? (
<ToggleGroupControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Display Style', 'woocommerce' ) }
isBlock
value={ iconStyle }
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/edit.tsx
index da903aec0d..b75a0a4f54 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/edit.tsx
@@ -119,6 +119,8 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
<InspectorControls>
<PanelBody title={ __( 'Settings', 'woocommerce' ) }>
<ToggleGroupControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
className="wc-block-editor-mini-cart__cart-icon-toggle"
isBlock
label={ __( 'Cart Icon', 'woocommerce' ) }
@@ -143,10 +145,13 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
/>
</ToggleGroupControl>
<BaseControl
+ __nextHasNoMarginBottom
id="wc-block-mini-cart__display-toggle"
label={ __( 'Display', 'woocommerce' ) }
>
<ToggleControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
label={ __( 'Display total price', 'woocommerce' ) }
help={ __(
'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
@@ -161,6 +166,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
/>
</BaseControl>
<BaseControl
+ __nextHasNoMarginBottom
id="wc-block-mini-cart__product-count-basecontrol"
label={ __( 'Show Cart Item Count:', 'woocommerce' ) }
>
@@ -200,6 +206,8 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
</BaseControl>
{ isSiteEditor && (
<ToggleGroupControl
+ __nextHasNoMarginBottom
+ __next40pxDefaultSize
className="wc-block-editor-mini-cart__render-in-cart-and-checkout-toggle"
label={ __(
'Mini-Cart in cart and checkout pages',
@@ -257,10 +265,12 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
</>
) }
<BaseControl
+ __nextHasNoMarginBottom
id="wc-block-mini-cart__add-to-cart-behaviour-toggle"
label={ __( 'Behavior', 'woocommerce' ) }
>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Open drawer when adding',
'woocommerce'
@@ -279,6 +289,7 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
checked={ addToCartBehaviour === 'open_drawer' }
/>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Navigate to checkout when clicking the Mini-Cart, instead of opening the drawer.',
'woocommerce'
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
index a0ceb8b739..58d7784aad 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/edit.tsx
@@ -79,6 +79,7 @@ const Edit = ( {
initialOpen
>
<UnitControl
+ __next40pxDefaultSize
onChange={ ( value ) => {
setAttributes( { width: value } );
} }
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 f4eaa59420..77355d7fe4 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
@@ -112,6 +112,7 @@ export const Edit = ( {
<InspectorControls>
<PanelBody title={ __( 'Style', 'woocommerce' ) }>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __( 'Dark mode inputs', 'woocommerce' ) }
help={ __(
'Inputs styled specifically for use on dark background colors.',
diff --git a/plugins/woocommerce/client/blocks/assets/js/editor-components/grid-layout-control/index.tsx b/plugins/woocommerce/client/blocks/assets/js/editor-components/grid-layout-control/index.tsx
index 38c5892d72..dabd5c0c18 100644
--- a/plugins/woocommerce/client/blocks/assets/js/editor-components/grid-layout-control/index.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/editor-components/grid-layout-control/index.tsx
@@ -56,6 +56,8 @@ const GridLayoutControl = ( {
return (
<>
<RangeControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Columns', 'woocommerce' ) }
value={ columns }
onChange={ ( value: number ) => {
@@ -68,6 +70,8 @@ const GridLayoutControl = ( {
max={ maxColumns }
/>
<RangeControl
+ __next40pxDefaultSize
+ __nextHasNoMarginBottom
label={ __( 'Rows', 'woocommerce' ) }
value={ rows }
onChange={ ( value: number ) => {
@@ -80,6 +84,7 @@ const GridLayoutControl = ( {
max={ maxRows }
/>
<ToggleControl
+ __nextHasNoMarginBottom
label={ __(
'Align the last block to the bottom',
'woocommerce'