Commit bbb40d78c5e for woocommerce
commit bbb40d78c5e27b72f919bd43f23d553b7b384a20
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Wed Aug 26 12:11:45 2026 +0200
Add support for border radius styles in the Product Quantity block (#68000)
* Add support for border radius styles in the Product Quantity block
* Add changelog
* Remove unnecessary comment
* Add tests for styles
* Simplify block.json
* Add guard against trying to set a wrong border CSS key
* Merge style.scss selectors
* Prevent styles breaking is they don't end with semicolon
* Simplify logic
* Remove unnecessary guard
* Simplify stylesheets
* Fix border radius not working in the editor
* Remove unused import
diff --git a/plugins/woocommerce/changelog/add-quantity-selector-border-radius b/plugins/woocommerce/changelog/add-quantity-selector-border-radius
new file mode 100644
index 00000000000..d1fcb139ad7
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-quantity-selector-border-radius
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add support for border radius styles in the Product Quantity block
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
index d168244f133..4072b0b6e9f 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
@@ -74,11 +74,13 @@
}
> .wc-block-components-quantity-selector__button--minus {
- border-radius: $universal-border-radius 0 0 $universal-border-radius;
+ border-start-start-radius: inherit;
+ border-end-start-radius: inherit;
}
> .wc-block-components-quantity-selector__button--plus {
- border-radius: 0 $universal-border-radius $universal-border-radius 0;
+ border-start-end-radius: inherit;
+ border-end-end-radius: inherit;
}
&[hidden] {
display: none;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
index b48382629dd..c24d4be5797 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
@@ -34,4 +34,5 @@
// when the block contents are wrapped in a <Disabled> component.
:where(.wc-block-add-to-cart-with-options__quantity-selector .components-disabled) {
display: contents;
+ border-radius: inherit;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
index fbd179fce54..9c7439f4a8e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/quantity-selector/block.json
@@ -9,7 +9,13 @@
"textdomain": "woocommerce",
"apiVersion": 3,
"supports": {
- "interactivity": true
+ "interactivity": true,
+ "__experimentalBorder": {
+ "radius": true
+ }
+ },
+ "selectors": {
+ "border": ".wp-block-woocommerce-add-to-cart-with-options-quantity-selector, .wc-block-add-to-cart-with-options-grouped-product-item-selector .wc-block-components-quantity-selector"
},
"$schema": "https://schemas.wp.org/trunk/block.json",
"viewScriptModule": "woocommerce/add-to-cart-with-options-quantity-selector"
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
index 529e294794f..581ad3c9bd7 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
@@ -18,6 +18,16 @@
height: 100%;
}
+// Default radius lives on the block wrapper so user/theme border-radius
+// styles (inline or global) override it, then inner elements inherit.
+:where(.wc-block-add-to-cart-with-options__quantity-selector) {
+ border-radius: $universal-border-radius;
+}
+
+.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector {
+ border-radius: inherit;
+}
+
:where(.wc-block-add-to-cart-with-options),
:where(.wc-block-add-to-cart-with-options__quantity-selector),
:where(.wc-block-add-to-cart-with-options-grouped-product-item-selector) {
diff --git a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/AddToCartWithOptions.php b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/AddToCartWithOptions.php
index 4431313411b..aa38548565e 100644
--- a/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/AddToCartWithOptions.php
+++ b/plugins/woocommerce/tests/php/src/Blocks/BlockTypes/AddToCartWithOptions.php
@@ -525,6 +525,47 @@ class AddToCartWithOptions extends \WP_UnitTestCase {
}
}
+ /**
+ * Tests that the Quantity Selector block outputs configured border radius styles.
+ *
+ * @covers \Automattic\WooCommerce\Blocks\BlockTypes\AddToCartWithOptions\QuantitySelector::render
+ */
+ public function test_quantity_selector_renders_border_radius_styles() {
+ global $product;
+ $product = new \WC_Product_Simple();
+ $product->set_regular_price( 10 );
+ $product_id = $product->save();
+
+ $linked_markup = do_blocks(
+ '<!-- wp:woocommerce/single-product {"productId":' . $product_id . '} --><!-- wp:woocommerce/add-to-cart-with-options-quantity-selector {"style":{"border":{"radius":"12px"}}} /--><!-- /wp:woocommerce/single-product -->'
+ );
+
+ $this->assertStringContainsString(
+ 'border-radius:12px',
+ $linked_markup,
+ 'The quantity selector wrapper includes the configured border radius.'
+ );
+
+ $unlinked_markup = do_blocks(
+ '<!-- wp:woocommerce/single-product {"productId":' . $product_id . '} --><!-- wp:woocommerce/add-to-cart-with-options-quantity-selector {"style":{"border":{"radius":{"topLeft":"4px","topRight":"8px","bottomRight":"16px","bottomLeft":"2px"}}}} /--><!-- /wp:woocommerce/single-product -->'
+ );
+
+ foreach (
+ array(
+ 'border-top-left-radius:4px',
+ 'border-top-right-radius:8px',
+ 'border-bottom-right-radius:16px',
+ 'border-bottom-left-radius:2px',
+ ) as $border_radius
+ ) {
+ $this->assertStringContainsString(
+ $border_radius,
+ $unlinked_markup,
+ "The quantity selector wrapper includes the configured {$border_radius}."
+ );
+ }
+ }
+
/**
* Tests that add_quantity_stepper_classes adds wrapper and input classes to inputs.
*