Commit beb1f02dede for woocommerce
commit beb1f02dedea0322f0a998d743af1a167865e930
Author: yjailin <yoann.jailin@automattic.com>
Date: Tue Jul 7 07:37:35 2026 -0400
Fix: normalize Product Collection carousel header alignment and button colors (#65691)
* Fix: normalize carousel heading alignment, button colors and spacing in Product Collection block
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* Remove redundant style attribute declaration from next-previous-buttons block.json
Gutenberg auto-registers the style attribute for blocks with color/spacing/border
supports, so the explicit declaration is unnecessary.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Remove non-functional blockGap support from next-previous-buttons block.json
The spacing support uses __experimentalSkipSerialization, so the Block Spacing
control never applied and produced a dead editor control. Removing it since it
isn't needed for the block.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
* Remove redundant blockGap style attribute from carousel next/prev buttons
The blockGap spacing style on the created next/previous buttons block was
redundant and had no effect. Removing it.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/fix-product-collection-carousel-styles b/plugins/woocommerce/changelog/fix-product-collection-carousel-styles
new file mode 100644
index 00000000000..339e9aade02
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-product-collection-carousel-styles
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Normalize the Product Collection carousel header row by aligning the heading and navigation buttons, removing the heading's hardcoded spacing, and applying theme-aware colors to the navigation buttons.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/style.scss
index e24c5a54bf1..cc960cfe9f4 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/next-previous-buttons/style.scss
@@ -40,7 +40,9 @@
height: 40px;
font-size: 12px;
padding: 0;
- background: #fff;
+ color: inherit;
+ background: var(--wp--preset--color--base, #fff);
+ outline-color: currentColor;
outline-offset: -2px;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-carousel-layout-adjustments.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-carousel-layout-adjustments.ts
index 52e833987fd..2a4a40b6095 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-carousel-layout-adjustments.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/edit/inspector-controls/use-carousel-layout-adjustments.ts
@@ -35,10 +35,12 @@ const createGroupSpaceBetween = ( innerBlocks: BlockInstance[] ) =>
'core/group',
// Row variation of the group block
{
+ className: 'wc-product-collection-carousel-header',
layout: {
type: 'flex',
flexWrap: 'nowrap',
justifyContent: 'space-between',
+ verticalAlignment: 'center',
},
},
innerBlocks
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
index 77632359204..ed2196d2b6b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-collection/style.scss
@@ -5,10 +5,6 @@
text-align: center;
}
- h2.wp-block-heading {
- @include font-small-locked;
- }
-
// Gutenberg adds margin between elements but notices are often empty
// resulting in an unnecessary margin on product template.
.wc-block-components-notices:not(:has(*)) + .wc-block-product-template {
@@ -31,6 +27,11 @@
}
}
+.wc-product-collection-carousel-header .wp-block-heading {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
// Styles for the interactivity API store notices rendered top of block for client side errors.
.wc-block-components-notice-banner {
.wc-block-components-button.wc-block-components-notice-banner__dismiss[hidden] {
diff --git a/plugins/woocommerce/patterns/related-products.php b/plugins/woocommerce/patterns/related-products.php
index bd0ddc9ec1c..3a06b3ae7ed 100644
--- a/plugins/woocommerce/patterns/related-products.php
+++ b/plugins/woocommerce/patterns/related-products.php
@@ -9,8 +9,8 @@
<!-- wp:woocommerce/product-collection {"align":"wide","queryId":0,"query":{"perPage":5,"pages":1,"offset":0,"postType":"product","order":"asc","orderBy":"title","search":"","exclude":[],"inherit":false,"taxQuery":{},"isProductCollectionBlock":true,"featured":false,"woocommerceOnSale":false,"woocommerceStockStatus":["instock","onbackorder"],"woocommerceAttributes":[],"woocommerceHandPickedProducts":[],"filterable":false,"relatedBy":{"categories":true,"tags":true}},"tagName":"div","displayLayout":{"type":"flex","columns":5,"shrinkColumns":false},"dimensions":{"widthType":"fill"},"collection":"woocommerce/product-collection/related","hideControls":["inherit"],"queryContextIncludes":["collection"]} -->
<div class="wp-block-woocommerce-product-collection alignwide">
- <!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
- <h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
+ <!-- wp:heading -->
+ <h2 class="wp-block-heading">
<?php
echo esc_html__(
'Related products',