[Experimental] Fix Active Filter chips style (#44682)

plugins/woocommerce-blocks/assets/js/blocks/product-filter/inner-blocks/active-filters/style.scss

@@ -1,3 +1,5 @@
+@import "../../../../../../packages/components/chip/style";
+
 .wp-block-woocommerce-product-filter-active {
 	margin-bottom: $gap-large;
 	overflow: hidden;

plugins/woocommerce/changelog/fix-44630-active-filter-chip-styles

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+[Experimental] Fix the style of chip for new active filter block.

plugins/woocommerce/src/Blocks/BlockTypes/ProductFilterActive.php

@@ -61,12 +61,18 @@ final class ProductFilterActive extends AbstractBlock {
 			)
 		);
 
+		$list_classes = 'filter-list';
+
+		if ( 'chips' === $attributes['displayStyle'] ) {
+			$list_classes .= ' list-chips';
+		}
+
 		ob_start();
 		?>
 
 		<div <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
 			<?php if ( ! empty( $active_filters ) ) : ?>
-				<ul class="filter-list">
+				<ul class="<?php echo esc_attr( $list_classes ); ?>">
 					<?php foreach ( $active_filters as $filter ) : ?>
 					<li>
 						<span class="list-item-type"><?php echo esc_html( $filter['type'] ); ?>: </span>