Product Collection: break taxonomies filter into multiple menu items per each taxonomy (#46160)

* Split taxonomies filter into seperate filter per taxonomy

* Add changelog

* Improve onDeselect function

* Update tests

* Fix lint

* Satisfy TS by returning single React element rather than array of elements

* Remove unused variable

plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/taxonomy-controls/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { Taxonomy } from '@wordpress/core-data/src/entity-types';
-import { __ } from '@wordpress/i18n';
 import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -17,7 +16,6 @@ import {
  */
 import TaxonomyItem from './taxonomy-item';
 import { ProductCollectionQuery } from '../../../types';
-import { DEFAULT_FILTERS } from '../../../constants';
 
 interface TaxonomyControlProps {
 	query: ProductCollectionQuery;
@@ -54,20 +52,8 @@ function TaxonomyControls( {
 		return null;
 	}
 
-	const deselectCallback = () =>
-		setQueryAttribute( { taxQuery: DEFAULT_FILTERS.taxQuery } );
-
 	return (
-		<ToolsPanelItem
-			label={ __( 'Taxonomies', 'woocommerce' ) }
-			hasValue={ () =>
-				Object.values( taxQuery || {} ).some(
-					( terms ) => !! terms.length
-				)
-			}
-			onDeselect={ deselectCallback }
-			resetAllFilter={ deselectCallback }
-		>
+		<>
 			{ taxonomies.map( ( taxonomy: Taxonomy ) => {
 				const termIds = taxQuery?.[ taxonomy.slug ] || [];
 				const handleChange = ( newTermIds: number[] ) =>
@@ -78,16 +64,26 @@ function TaxonomyControls( {
 						},
 					} );
 
+				const deselectCallback = () => handleChange( [] );
+
 				return (
-					<TaxonomyItem
+					<ToolsPanelItem
 						key={ taxonomy.slug }
-						taxonomy={ taxonomy }
-						termIds={ termIds }
-						onChange={ handleChange }
-					/>
+						label={ taxonomy.name }
+						hasValue={ () => termIds.length }
+						onDeselect={ deselectCallback }
+						resetAllFilter={ deselectCallback }
+					>
+						<TaxonomyItem
+							key={ taxonomy.slug }
+							taxonomy={ taxonomy }
+							termIds={ termIds }
+							onChange={ handleChange }
+						/>
+					</ToolsPanelItem>
 				);
 			} ) }
-		</ToolsPanelItem>
+		</>
 	);
 }
 

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.block_theme.side_effects.spec.ts

@@ -258,7 +258,7 @@ test.describe( 'Product Collection', () => {
 			pageObject,
 		} ) => {
 			const filterName = 'Product categories';
-			await pageObject.addFilter( 'Show Taxonomies' );
+			await pageObject.addFilter( 'Show product categories' );
 			await pageObject.setFilterComboboxValue( filterName, [
 				'Clothing',
 			] );
@@ -298,7 +298,7 @@ test.describe( 'Product Collection', () => {
 			pageObject,
 		} ) => {
 			const filterName = 'Product tags';
-			await pageObject.addFilter( 'Show Taxonomies' );
+			await pageObject.addFilter( 'Show product tags' );
 			await pageObject.setFilterComboboxValue( filterName, [
 				'Recommended',
 			] );

plugins/woocommerce-blocks/tests/e2e/tests/product-collection/product-collection.page.ts

@@ -250,7 +250,8 @@ class ProductCollectionPage {
 		name:
 			| 'Show Hand-picked Products'
 			| 'Keyword'
-			| 'Show Taxonomies'
+			| 'Show product categories'
+			| 'Show product tags'
 			| 'Show Product Attributes'
 			| 'Featured'
 			| 'Created'

plugins/woocommerce/changelog/42049-product-collection-break-taxonomies-filter-into-multiple-menu-items

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Product Collection: split Taxonomies filter into separate filter per taxonomy for better readibility