Commit 1817e2466ca for woocommerce

commit 1817e2466cad4ca766c7969dc0629e7f38132a6f
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date:   Tue May 26 10:19:14 2026 +0200

    Fix active Chips not being correctly styled in the editor (#65243)

    * Add changelog

    * Fix active Chips not being correctly styled in the editor

    * PHPStan

    * Remove unnecessary CSS variables

diff --git a/plugins/woocommerce/changelog/fix-chips-style-editor b/plugins/woocommerce/changelog/fix-chips-style-editor
new file mode 100644
index 00000000000..d1b658cc6a5
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-chips-style-editor
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fix active Chips not being correctly styled in the editor
+
+
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
index b09cf5dce7b..d277d8ba6a5 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/edit.tsx
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import clsx from 'clsx';
 import { decodeHtmlEntities } from '@woocommerce/utils';
+import { getSetting } from '@woocommerce/settings';
 import {
 	InspectorControls,
 	useBlockProps,
@@ -57,13 +58,28 @@ const Edit = ( props: EditProps ): JSX.Element => {

 	const hasColorSwatches = items.some( ( item ) => 'color' in item );

+	const globalColors = getSetting< { background?: string; text?: string } >(
+		'globalStylesColors',
+		{}
+	);
+	const colorVars = getColorVars( attributes );
+
 	const blockProps = useBlockProps( {
 		className: clsx( 'wc-block-product-filter-chips', {
 			'is-loading': isLoading,
 			'is-style-swatch': hasColorSwatches,
 			...getColorClasses( attributes ),
 		} ),
-		style: getColorVars( attributes ),
+		style: {
+			'--wc-product-filter-chips-text':
+				colorVars[ '--wc-product-filter-chips-text' ] ||
+				globalColors.text ||
+				undefined,
+			'--wc-product-filter-chips-background':
+				colorVars[ '--wc-product-filter-chips-background' ] ||
+				globalColors.background ||
+				undefined,
+		},
 	} );

 	const loadingState = useMemo( () => {
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterChips.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterChips.php
index 81b7b8b5eca..694e1bef539 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterChips.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterChips.php
@@ -17,6 +17,22 @@ final class ProductFilterChips extends AbstractBlock {
 	 */
 	protected $block_name = 'product-filter-chips';

+	/**
+	 * Extra data passed through from server to client for block.
+	 *
+	 * @param array $attributes  Any attributes that currently are available from the block.
+	 *                           Note, this will be empty in the editor context when the block is
+	 *                           not in the post content on editor load.
+	 * @return void
+	 */
+	protected function enqueue_data( array $attributes = array() ) {
+		parent::enqueue_data( $attributes );
+
+		if ( is_admin() ) {
+			$this->asset_data_registry->add( 'globalStylesColors', wp_get_global_styles( array( 'color' ) ) );
+		}
+	}
+
 	/**
 	 * Render the block.
 	 *
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
index 83a331f16e8..29d45a75a07 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/ProductFilters.php
@@ -39,7 +39,9 @@ class ProductFilters extends AbstractBlock {
 	protected function enqueue_data( array $attributes = array() ) {
 		parent::enqueue_data( $attributes );

-		$this->asset_data_registry->add( 'globalStylesColors', wp_get_global_styles( array( 'color' ) ) );
+		if ( is_admin() ) {
+			$this->asset_data_registry->add( 'globalStylesColors', wp_get_global_styles( array( 'color' ) ) );
+		}

 		BlocksSharedState::load_store_config( 'I acknowledge that using private APIs means my theme or plugin will inevitably break in the next version of WooCommerce' );