Add dropdown version of Filter by Rating

assets/js/base/components/product-rating/index.tsx

@@ -11,7 +11,6 @@ import './style.scss';
 
 const Rating = ( {
 	className,
-	key,
 	rating,
 	ratedProductsCount,
 }: RatingProps ): JSX.Element => {
@@ -39,7 +38,7 @@ const Rating = ( {
 	};
 
 	return (
-		<div className={ ratingClassName } key={ key }>
+		<div className={ ratingClassName }>
 			<div
 				className={ 'wc-block-components-product-rating__stars' }
 				role="img"
@@ -58,10 +57,11 @@ const Rating = ( {
 		</div>
 	);
 };
+
+export type RatingValues = 0 | 1 | 2 | 3 | 4 | 5;
 interface RatingProps {
-	className: string;
-	key: 0 | 1 | 2 | 3 | 4 | 5;
-	rating: 0 | 1 | 2 | 3 | 4 | 5;
+	className?: string;
+	rating: RatingValues;
 	ratedProductsCount?: number | null;
 }
 

assets/js/blocks/attribute-filter/edit.tsx

@@ -171,7 +171,7 @@ const Edit = ( {
 				>
 					<ToggleControl
 						label={ __(
-							'Include product count',
+							'Display product count',
 							'woo-gutenberg-products-block'
 						) }
 						checked={ showCounts }

assets/js/blocks/attribute-filter/style.scss

@@ -1,3 +1,5 @@
+@import "../shared/styles/style";
+
 .wp-block-woocommerce-attribute-filter {
 	// We need to override it because by default the global styles applied the border-style: solid;
 	// Our goal is not to have a border on main wrapper DOM element
@@ -27,6 +29,8 @@
 	}
 
 	&.style-dropdown {
+		@include includeFormTokenFieldFix();
+
 		position: relative;
 		display: flex;
 		gap: $gap;
@@ -76,12 +80,17 @@
 		&.is-loading {
 			border-radius: em(4px);
 		}
+
+		.components-form-token-field {
+			border-radius: inherit;
+		}
 	}
 
 	.wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
 		@include reset-typography();
 		border: 0;
 		padding: $gap-smaller;
+		border-radius: inherit;
 
 		.components-form-token-field__input {
 			@include font-size(small);

assets/js/blocks/attribute-filter/test/block.tsx

@@ -146,7 +146,7 @@ const setupWithoutSelectedFilterAttributes = () => {
 	};
 };
 
-describe( 'AttributeFilterBlock', () => {
+describe( 'Filter by Attribute block', () => {
 	describe( 'Given no filter attribute is selected when page loads', () => {
 		test( 'should disable Apply button when page loads', () => {
 			const { applyButton } = setupWithoutSelectedFilterAttributes();

assets/js/blocks/rating-filter/block.json

@@ -30,10 +30,18 @@
 			"type": "boolean",
 			"default": true
 		},
+		"displayStyle": {
+			"type": "string",
+			"default": "list"
+		},
 		"showFilterButton": {
 			"type": "boolean",
 			"default": false
 		},
+		"selectType": {
+			"type": "string",
+			"default": "multiple"
+		},
 		"isPreview": {
 			"type": "boolean",
 			"default": false