Product Collection: allow custom collections hiding each of the filters (#49713)

* Allow hiding all of the filter controls in PC block

* Add new test

* Add changelog

* Update documentation with information about hideControls values

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

@@ -81,8 +81,23 @@ const ProductCollectionInspectorControls = (
 		isArchiveTemplate && shouldShowFilter( CoreFilterNames.INHERIT );
 	const showOrderControl =
 		showQueryControls && shouldShowFilter( CoreFilterNames.ORDER );
-	const showFeaturedControl = shouldShowFilter( CoreFilterNames.FEATURED );
 	const showOnSaleControl = shouldShowFilter( CoreFilterNames.ON_SALE );
+	const showStockStatusControl = shouldShowFilter(
+		CoreFilterNames.STOCK_STATUS
+	);
+	const showHandPickedProductsControl = shouldShowFilter(
+		CoreFilterNames.HAND_PICKED
+	);
+	const showKeywordControl = shouldShowFilter( CoreFilterNames.KEYWORD );
+	const showAttributesControl = shouldShowFilter(
+		CoreFilterNames.ATTRIBUTES
+	);
+	const showTaxonomyControls = shouldShowFilter( CoreFilterNames.TAXONOMY );
+	const showFeaturedControl = shouldShowFilter( CoreFilterNames.FEATURED );
+	const showCreatedControl = shouldShowFilter( CoreFilterNames.CREATED );
+	const showPriceRangeControl = shouldShowFilter(
+		CoreFilterNames.PRICE_RANGE
+	);
 
 	const setQueryAttributeBind = useMemo(
 		() => setQueryAttribute.bind( null, props ),
@@ -134,16 +149,30 @@ const ProductCollectionInspectorControls = (
 					{ showOnSaleControl && (
 						<OnSaleControl { ...queryControlProps } />
 					) }
-					<StockStatusControl { ...queryControlProps } />
-					<HandPickedProductsControl { ...queryControlProps } />
-					<KeywordControl { ...queryControlProps } />
-					<AttributesControl { ...queryControlProps } />
-					<TaxonomyControls { ...queryControlProps } />
+					{ showStockStatusControl && (
+						<StockStatusControl { ...queryControlProps } />
+					) }
+					{ showHandPickedProductsControl && (
+						<HandPickedProductsControl { ...queryControlProps } />
+					) }
+					{ showKeywordControl && (
+						<KeywordControl { ...queryControlProps } />
+					) }
+					{ showAttributesControl && (
+						<AttributesControl { ...queryControlProps } />
+					) }
+					{ showTaxonomyControls && (
+						<TaxonomyControls { ...queryControlProps } />
+					) }
 					{ showFeaturedControl && (
 						<FeaturedProductsControl { ...queryControlProps } />
 					) }
-					<CreatedControl { ...queryControlProps } />
-					<PriceRangeControl { ...queryControlProps } />
+					{ showCreatedControl && (
+						<CreatedControl { ...queryControlProps } />
+					) }
+					{ showPriceRangeControl && (
+						<PriceRangeControl { ...queryControlProps } />
+					) }
 				</ToolsPanel>
 			) : null }
 			<ProductCollectionFeedbackPrompt />

plugins/woocommerce-blocks/docs/third-party-developers/extensibility/register-product-collection.md

@@ -66,7 +66,17 @@ Attributes are the properties that define the behavior of the collection. All th
     - `type` (type `string`): The type of layout. Accepted values are `grid` and `stack`.
     - `columns` (type `number`): The number of columns to display.
     - `shrinkColumns` (type `boolean`): Whether the layout should be responsive.
-- `hideControls` (type `array`): The controls to hide.
+- `hideControls` (type `array`): The controls to hide. Possible values:
+    - `order` - "Order by" setting
+    - `attributes` - "Product Attributes" filter
+    - `created` - "Created" filter
+    - `featured` - "Featured" filter
+    - `hand-picked` - "Hand-picked Products" filter
+    - `keyword` - "Keyword" filter
+    - `on-sale` - "On Sale" filter
+    - `stock-status` - "Stock Status" filter
+    - `taxonomy` - "Product Categories", "Product Tags" and custom taxonomies filters
+    - `price-range` - "Price Range" filter
 
 #### Preview Attribute
 
@@ -127,6 +137,7 @@ __experimentalRegisterProductCollection({
       columns: 3,
       shrinkColumns: true,
     },
+	hideControls: [ "created", "stock-status" ]
   },
 });
 ```

plugins/woocommerce-blocks/tests/e2e/plugins/register-product-collection-tester/index.js

@@ -11,6 +11,7 @@ __experimentalRegisterProductCollection( {
 		query: {
 			perPage: 5,
 		},
+		hideControls: [ 'keyword', 'on-sale' ],
 	},
 } );
 

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

@@ -1468,6 +1468,30 @@ test.describe( 'Testing registerProductCollection', () => {
 				.locator( 'visible=true' );
 			await expect( products ).toHaveCount( 5 );
 		} );
+
+		test( 'hideControls allows to hide filters', async ( {
+			pageObject,
+			page,
+		} ) => {
+			await pageObject.goToProductCatalogAndInsertCollection(
+				'myCustomCollection'
+			);
+
+			const sidebarSettings = await pageObject.locateSidebarSettings();
+			const onsaleControl = sidebarSettings.getByLabel(
+				SELECTORS.onSaleControlLabel
+			);
+			await expect( onsaleControl ).toBeHidden();
+
+			await page
+				.getByRole( 'button', { name: 'Filters options' } )
+				.click();
+			const keywordControl = page.getByRole( 'menuitemcheckbox', {
+				name: 'Keyword',
+			} );
+
+			await expect( keywordControl ).toBeHidden();
+		} );
 	} );
 
 	test.describe( 'My Custom Collection with Preview', () => {

plugins/woocommerce/changelog/49187-product-collection-missing-handlers-for-controls-when-using-the-hidecontrols-attribute

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Product Collection: allow custom collections to hide all of the filter controls, not only some of them