Commit 34460523ddc for woocommerce
commit 34460523ddcb90a0fa811356c5841d7f28bb8299
Author: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
Date: Thu Oct 8 08:00:12 2026 +0200
Add styling supports to Product Categories List (and minor rendering fixes and simplifications) (#69440)
* Add styling supports to Product Categories List
* Add changelog for Product Categories List styling
* Simplify Product Categories List styling
* Fix duplicated Product Categories List styles in the editor
diff --git a/docs/block-development/reference/block-references.md b/docs/block-development/reference/block-references.md
index 204fb548ac6..524e086feee 100644
--- a/docs/block-development/reference/block-references.md
+++ b/docs/block-development/reference/block-references.md
@@ -1041,8 +1041,8 @@ Show all product categories as a list or dropdown.
- **Name:** woocommerce/product-categories
- **Category:** woocommerce
-- **Supports:** align (full, wide), color (link, text, ~~background~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~
-- **Attributes:** align, hasCount, hasEmpty, hasImage, isDropdown, isHierarchical, showChildrenOnly
+- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Attributes:** align, hasCount, hasEmpty, hasImage, isDropdown, isHierarchical, isPreview, showChildrenOnly
## Products by Category - woocommerce/product-category
diff --git a/plugins/woocommerce/changelog/update-product-categories-block-supports b/plugins/woocommerce/changelog/update-product-categories-block-supports
new file mode 100644
index 00000000000..67fcfa07aea
--- /dev/null
+++ b/plugins/woocommerce/changelog/update-product-categories-block-supports
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Customize spacing, backgrounds, and borders in the Product Categories List block.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.json
index c04d355ac0f..939ff27217c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.json
@@ -10,10 +10,21 @@
},
"align": [ "wide", "full" ],
"html": false,
+ "spacing": {
+ "margin": true,
+ "padding": true
+ },
"color": {
- "background": false,
+ "background": true,
+ "gradients": true,
"link": true
},
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "style": true,
+ "width": true
+ },
"typography": {
"fontSize": true,
"lineHeight": true
@@ -39,6 +50,9 @@
"type": "boolean",
"default": false
},
+ "isPreview": {
+ "type": "boolean"
+ },
"isHierarchical": {
"type": "boolean",
"default": true
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.tsx
index 261ac6510ec..62841956dc2 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-categories/block.tsx
@@ -2,8 +2,9 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
+// eslint-disable-next-line import/named -- listView is exported through @wordpress/icons' library re-export.
import { Icon, listView } from '@wordpress/icons';
import { isSiteEditorPage, isWidgetEditorPage } from '@woocommerce/utils';
import { useSelect } from '@wordpress/data';
@@ -162,21 +163,18 @@ const ProductCategoriesBlock = ( {
);
};
- const blockProps = useBlockProps( {
- className: 'wc-block-product-categories',
- } );
-
return (
- <div { ...blockProps }>
+ <>
{ getInspectorControls() }
<Disabled>
<ServerSideRender
block={ name }
- attributes={ attributes }
+ attributes={ { ...attributes, isPreview: true } }
+ skipBlockSupportAttributes
EmptyResponsePlaceholder={ EmptyPlaceholder }
/>
</Disabled>
- </div>
+ </>
);
};
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php
index cf437e5440b..c0fe78a3ce6 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductCategories.php
@@ -1,8 +1,6 @@
<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;
-use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
-
/**
* ProductCategories class.
*/
@@ -87,15 +85,14 @@ class ProductCategories extends AbstractDynamicBlock {
}
}
- $classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes(
- $attributes,
- array( 'line_height', 'text_color', 'font_size', 'extra_classes' )
- );
-
- $classes = $this->get_container_classes( $attributes ) . ' ' . $classes_and_styles['classes'];
- $styles = $classes_and_styles['styles'];
+ $classes = $this->get_container_classes( $attributes );
+ // The editor wrapper already applies block supports and Global Styles.
+ // Replace this workaround when Gutenberg exposes HtmlRenderer: https://github.com/WordPress/gutenberg/pull/74228.
+ $wrapper_attributes = ! empty( $attributes['isPreview'] )
+ ? 'class="' . esc_attr( $classes ) . '"'
+ : get_block_wrapper_attributes( array( 'class' => $classes ) );
- $output = '<div class="wp-block-woocommerce-product-categories ' . esc_attr( $classes ) . '" style="' . esc_attr( $styles ) . '">';
+ $output = '<div ' . $wrapper_attributes . '>';
$output .= ! empty( $attributes['isDropdown'] ) ? $this->renderDropdown( $categories, $attributes, $uid ) : $this->renderList( $categories, $attributes, $uid );
$output .= '</div>';
@@ -339,14 +336,10 @@ class ProductCategories extends AbstractDynamicBlock {
protected function renderListItems( $categories, $attributes, $uid, $depth = 0 ) {
$output = '';
- $link_color_class_and_style = StyleAttributesUtils::get_link_color_class_and_style( $attributes );
-
- $link_color_style = isset( $link_color_class_and_style['style'] ) ? $link_color_class_and_style['style'] : '';
-
foreach ( $categories as $category ) {
$output .= '
<li class="wc-block-product-categories-list-item">
- <a style="' . esc_attr( $link_color_style ) . '" href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">'
+ <a href="' . esc_attr( get_term_link( $category->term_id, 'product_cat' ) ) . '">'
. $this->get_image_html( $category, $attributes )
. '<span class="wc-block-product-categories-list-item__name">' . esc_html( $category->name ) . '</span>'
. '</a>'