[Experimental] Rename Collection Filters to Product Filters (#43363)

---------
Co-authored-by: Tung Du <dinhtungdu@gmail.com>

plugins/woocommerce-blocks/assets/js/blocks/filter-wrapper/edit.tsx

@@ -8,7 +8,7 @@ import { isExperimentalBuild } from '@woocommerce/block-settings';
  * Internal dependencies
  */
 import { EditProps } from './types';
-import Upgrade from '../collection-filters/components/upgrade';
+import Upgrade from '../product-filters/components/upgrade';
 
 const Edit = ( { attributes, clientId }: EditProps ) => {
 	const blockProps = useBlockProps();

plugins/woocommerce-blocks/assets/js/blocks/product-filters/block.json

@@ -1,7 +1,7 @@
 {
-	"name": "woocommerce/collection-filters",
+	"name": "woocommerce/product-filters",
 	"version": "1.0.0",
-	"title": "Collection Filters",
+	"title": "Product Filters",
 	"description": "A block that adds product filters to the product collection.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce", "Filters" ],

plugins/woocommerce-blocks/assets/js/blocks/product-filters/components/downgrade.tsx

@@ -7,6 +7,11 @@ import { PanelBody, Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createBlock, BlockInstance } from '@wordpress/blocks';
 
+/**
+ * Internal dependencies
+ */
+import { UPGRADE_MAP } from './upgrade';
+
 const Downgrade = ( { clientId }: { clientId: string } ) => {
 	const { replaceBlock } = useDispatch( 'core/block-editor' );
 	const block = useSelect( ( select ) => {
@@ -16,10 +21,12 @@ const Downgrade = ( { clientId }: { clientId: string } ) => {
 	const downgradeBlock = () => {
 		if ( ! block ) return;
 		const filterBlock = block.innerBlocks[ 0 ];
-		const filterType = filterBlock.name.replace(
-			'woocommerce/collection-',
-			''
-		);
+		const filterType = Object.entries( UPGRADE_MAP ).find(
+			( [ , value ] ) => value === filterBlock.name
+		)?.[ 0 ];
+
+		if ( ! filterType ) return;
+
 		const innerBlocks: BlockInstance[] = [
 			createBlock( `woocommerce/${ filterType }`, {
 				...filterBlock.attributes,

plugins/woocommerce-blocks/assets/js/blocks/product-filters/components/upgrade.tsx

@@ -14,6 +14,20 @@ import {
 	ToolbarGroup,
 } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { FilterType } from '../types';
+
+export const UPGRADE_MAP: Record< FilterType, string > = {
+	'active-filters': 'woocommerce/product-filters-active',
+	'price-filter': 'woocommerce/product-filters-price',
+	'stock-filter': 'woocommerce/product-filters-stock-status',
+	'rating-filter': 'woocommerce/product-filters-rating',
+	'product-filters': 'woocommerce/product-filters',
+	'attribute-filter': 'woocommerce/product-filters-attribute',
+};
+
 const Upgrade = ( { clientId }: { clientId: string } ) => {
 	const block = useSelect( ( select ) => {
 		return select( 'core/block-editor' ).getBlock( clientId );
@@ -22,7 +36,7 @@ const Upgrade = ( { clientId }: { clientId: string } ) => {
 
 	const upgradeBlock = useCallback( () => {
 		if ( ! block || ! block.innerBlocks ) return;
-		const filterType = block.attributes.filterType;
+		const filterType: FilterType = block.attributes.filterType;
 		const filterBlock = block.innerBlocks.find(
 			( item ) => item.name === `woocommerce/${ filterType }`
 		);
@@ -35,9 +49,9 @@ const Upgrade = ( { clientId }: { clientId: string } ) => {
 
 		replaceBlock(
 			clientId,
-			createBlock( `woocommerce/collection-filters`, {}, [
+			createBlock( `woocommerce/product-filters`, {}, [
 				createBlock(
-					`woocommerce/collection-${ filterType }`,
+					`${ UPGRADE_MAP[ filterType ] }`,
 					filterBlockAttributes,
 					headingBlock
 						? [

plugins/woocommerce-blocks/assets/js/blocks/product-filters/edit.tsx

@@ -18,7 +18,7 @@ import './editor.scss';
 
 const DISALLOWED_BLOCKS = [
 	'woocommerce/filter-wrapper',
-	'woocommerce/collection-filters',
+	'woocommerce/product-filters',
 ];
 
 const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
@@ -26,26 +26,30 @@ const ATTRIBUTES = getSetting< AttributeSetting[] >( 'attributes', [] );
 const firstAttribute = ATTRIBUTES.find( Boolean );
 
 const templates: Partial< Record< FilterType, Template[] > > = {
-	'active-filters': [ [ 'woocommerce/collection-active-filters', {} ] ],
-	'price-filter': [ [ 'woocommerce/collection-price-filter', {} ] ],
-	'stock-filter': [ [ 'woocommerce/collection-stock-filter', {} ] ],
-	'rating-filter': [ [ 'woocommerce/collection-rating-filter', {} ] ],
-	'collection-filters': [
-		[ 'woocommerce/collection-active-filters', {} ],
-		[ 'woocommerce/collection-price-filter', {} ],
-		[ 'woocommerce/collection-stock-filter', {} ],
-		[ 'woocommerce/collection-rating-filter', {} ],
-		[ 'woocommerce/collection-attribute-filter', {} ],
+	'active-filters': [ [ 'woocommerce/product-filters-active', {} ] ],
+	'price-filter': [ [ 'woocommerce/product-filters-price', {} ] ],
+	'stock-filter': [ [ 'woocommerce/product-filters-stock-status', {} ] ],
+	'rating-filter': [ [ 'woocommerce/product-filters-rating', {} ] ],
+	'product-filters': [
+		[ 'woocommerce/product-filters-active', {} ],
+		[ 'woocommerce/product-filters-price', {} ],
+		[ 'woocommerce/product-filters-stock-status', {} ],
+		[ 'woocommerce/product-filters-rating', {} ],
 	],
 };
 
 if ( firstAttribute ) {
 	templates[ 'attribute-filter' ] = [
 		[
-			'woocommerce/collection-attribute-filter',
+			'woocommerce/product-filters-attribute',
 			{ attributeId: parseInt( firstAttribute?.attribute_id, 10 ) },
 		],
 	];
+
+	templates[ 'product-filters' ]?.push( [
+		'woocommerce/product-filters-attribute',
+		{ attributeId: parseInt( firstAttribute?.attribute_id, 10 ) },
+	] );
 }
 
 const Edit = ( props: EditProps ) => {

plugins/woocommerce-blocks/assets/js/blocks/product-filters/index.tsx

@@ -33,14 +33,14 @@ if ( isExperimentalBuild() ) {
 		},
 		variations: [
 			{
-				name: 'woocommerce/collection-filters-variant',
-				title: __( 'Collection Filters', 'woocommerce' ),
+				name: 'woocommerce/product-filters-wrapper',
+				title: __( 'Product Filters', 'woocommerce' ),
 				description: __(
 					'Enable customers to filter the product collection.',
 					'woocommerce'
 				),
 				attributes: {
-					filterType: 'collection-filters',
+					filterType: 'product-filters',
 				},
 				icon: {
 					src: (
@@ -53,8 +53,8 @@ if ( isExperimentalBuild() ) {
 				isDefault: true,
 			},
 			{
-				name: 'woocommerce/active-filters-variant',
-				title: __( 'Active Product Filters', 'woocommerce' ),
+				name: 'woocommerce/product-filters-active-wrapper',
+				title: __( 'Product Filters: Active Filters', 'woocommerce' ),
 				description: __(
 					'Display the currently active filters.',
 					'woocommerce'
@@ -72,8 +72,8 @@ if ( isExperimentalBuild() ) {
 				},
 			},
 			{
-				name: 'woocommerce/price-filter-variant',
-				title: __( 'Filter Products by Price', 'woocommerce' ),
+				name: 'woocommerce/product-filters-price-wrapper',
+				title: __( 'Product Filters: Price', 'woocommerce' ),
 				description: __(
 					'Enable customers to filter the product collection by choosing a price range.',
 					'woocommerce'
@@ -92,8 +92,8 @@ if ( isExperimentalBuild() ) {
 				},
 			},
 			{
-				name: 'woocommerce/stock-filter-variant',
-				title: __( 'Filter Products by Stock', 'woocommerce' ),
+				name: 'woocommerce/product-filters-stock-status-wrapper',
+				title: __( 'Product Filters: Stock Status', 'woocommerce' ),
 				description: __(
 					'Enable customers to filter the product collection by stock status.',
 					'woocommerce'
@@ -111,10 +111,10 @@ if ( isExperimentalBuild() ) {
 				},
 			},
 			{
-				name: 'woocommerce/attribute-filter-variant',
-				title: __( 'Filter Products by Attribute', 'woocommerce' ),
+				name: 'woocommerce/product-filters-attribute-wrapper',
+				title: __( 'Product Filters: Attribute', 'woocommerce' ),
 				description: __(
-					'Enable customers to filter the product grid by selecting one or more attributes, such as color.',
+					'Enable customers to filter the product collection by selecting one or more attributes, such as color.',
 					'woocommerce'
 				),
 				attributes: {
@@ -130,8 +130,8 @@ if ( isExperimentalBuild() ) {
 				},
 			},
 			{
-				name: 'woocommerce/rating-filter-variant',
-				title: __( 'Filter Products by Rating', 'woocommerce' ),
+				name: 'woocommerce/product-filters-rating-wrapper',
+				title: __( 'Product Filters: Rating', 'woocommerce' ),
 				description: __(
 					'Enable customers to filter the product collection by rating.',
 					'woocommerce'

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/block.json

@@ -1,14 +1,14 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"name": "woocommerce/collection-active-filters",
+	"name": "woocommerce/product-filters-active",
 	"version": "1.0.0",
-	"title": "Collection Active Filters",
+	"title": "Product Filters: Active Filters",
 	"description": "Display the currently active filters.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"textdomain": "woocommerce",
 	"apiVersion": 2,
-	"ancestor": [ "woocommerce/collection-filters" ],
+	"ancestor": [ "woocommerce/product-filters" ],
 	"supports": {
 		"interactivity": true,
 		"color": {

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/active-filters/frontend.ts

@@ -13,7 +13,7 @@ type ActiveFiltersContext = {
 	params: string[];
 };
 
-store( 'woocommerce/collection-active-filters', {
+store( 'woocommerce/product-filters-active', {
 	actions: {
 		clearAll: () => {
 			const { params } = getContext< ActiveFiltersContext >();

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/block.json

@@ -1,14 +1,14 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"name": "woocommerce/collection-attribute-filter",
+	"name": "woocommerce/product-filters-attribute",
 	"version": "1.0.0",
-	"title": "Collection Attribute Filter",
+	"title": "Product Filters: Attribute",
 	"description": "Enable customers to filter the product grid by selecting one or more attributes, such as color.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"textdomain": "woocommerce",
 	"apiVersion": 2,
-	"ancestor": [ "woocommerce/collection-filters" ],
+	"ancestor": [ "woocommerce/product-filters" ],
 	"supports": {
 		"interactivity": true,
 		"color": {

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/attribute-filter/frontend.ts

@@ -50,7 +50,7 @@ function getSelectedTermsFromUrl( slug: string ) {
 		.filter( Boolean );
 }
 
-store( 'woocommerce/collection-attribute-filter', {
+store( 'woocommerce/product-filters-attribute', {
 	actions: {
 		navigate: () => {
 			const dropdownContext = getContext< DropdownContext >(

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

@@ -1,4 +1,4 @@
-.wp-block-woocommerce-collection-attribute-filter {
+.wp-block-woocommerce-product-filters-attribute {
 	.style-dropdown {
 		position: relative;
 

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/price-filter/block.json

@@ -1,14 +1,14 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"name": "woocommerce/collection-price-filter",
+	"name": "woocommerce/product-filters-price",
 	"version": "1.0.0",
-	"title": "Collection Price Filter",
+	"title": "Product Filters: Price",
 	"description": "Enable customers to filter the product collection by choosing a price range.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"textdomain": "woocommerce",
 	"apiVersion": 2,
-	"ancestor": [ "woocommerce/collection-filters" ],
+	"ancestor": [ "woocommerce/product-filters" ],
 	"supports": {
 		"interactivity": true
 	},

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/price-filter/frontend.ts

@@ -35,7 +35,7 @@ const getUrl = ( context: PriceFilterContext ) => {
 	return url.href;
 };
 
-store< PriceFilterStore >( 'woocommerce/collection-price-filter', {
+store< PriceFilterStore >( 'woocommerce/product-filters-price', {
 	state: {
 		rangeStyle: () => {
 			const { minPrice, maxPrice, minRange, maxRange } =

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

@@ -51,7 +51,7 @@
 	appearance: none;
 }
 
-.wp-block-woocommerce-collection-price-filter {
+.wp-block-woocommerce-product-filters-price {
 	.range {
 		--low: 0%;
 		--high: 100%;

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/block.json

@@ -1,7 +1,7 @@
 {
-	"name": "woocommerce/collection-rating-filter",
+	"name": "woocommerce/product-filters-rating",
 	"version": "1.0.0",
-	"title": "Collection Rating Filter",
+	"title": "Product Filters: Rating",
 	"description": "Enable customers to filter the product collection by rating.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
@@ -12,7 +12,7 @@
 			"text": true
 		}
 	},
-	"ancestor": [ "woocommerce/collection-filters" ],
+	"ancestor": [ "woocommerce/product-filters" ],
 	"usesContext": [ "collectionData" ],
 	"attributes": {
 		"className": {

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/rating-filter/frontend.ts

@@ -25,7 +25,7 @@ function getUrl( filters: Array< string | null > ) {
 	return url.href;
 }
 
-store( 'woocommerce/collection-rating-filter', {
+store( 'woocommerce/product-filters-rating', {
 	actions: {
 		onCheckboxChange: () => {
 			const checkboxContext = getContext< CheckboxListContext >(

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/block.json

@@ -1,7 +1,7 @@
 {
-	"name": "woocommerce/collection-stock-filter",
+	"name": "woocommerce/product-filters-stock-status",
 	"version": "1.0.0",
-	"title": "Collection Stock Filter",
+	"title": "Product Filters: Stock Status",
 	"description": "Enable customers to filter the product collection by stock status.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce", "filter", "stock" ],
@@ -43,7 +43,7 @@
 		}
 	},
 	"usesContext": [ "collectionData" ],
-	"ancestor": [ "woocommerce/collection-filters" ],
+	"ancestor": [ "woocommerce/product-filters" ],
 	"textdomain": "woocommerce",
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"

plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/frontend.ts

@@ -24,7 +24,7 @@ const getUrl = ( activeFilters: string ) => {
 	return url.href;
 };
 
-store( 'woocommerce/collection-stock-filter', {
+store( 'woocommerce/product-filters-stock-status', {
 	actions: {
 		onCheckboxChange: () => {
 			const checkboxContext = getContext< CheckboxListContext >(

plugins/woocommerce-blocks/assets/js/blocks/product-filters/types.ts

@@ -9,7 +9,7 @@ export type FilterType =
 	| 'rating-filter'
 	| 'active-filters'
 	| 'stock-filter'
-	| 'collection-filters';
+	| 'product-filters';
 
 export type BlockAttributes = {
 	filterType: FilterType;

plugins/woocommerce-blocks/bin/webpack-entries.js

@@ -94,27 +94,27 @@ const blocks = {
 	},
 	'single-product': {},
 	'stock-filter': {},
-	'collection-filters': {
+	'product-filters': {
 		isExperimental: true,
 	},
-	'collection-stock-filter': {
+	'product-filters-stock-status': {
 		isExperimental: true,
-		customDir: 'collection-filters/inner-blocks/stock-filter',
+		customDir: 'product-filters/inner-blocks/stock-filter',
 	},
-	'collection-price-filter': {
-		customDir: 'collection-filters/inner-blocks/price-filter',
+	'product-filters-price': {
+		customDir: 'product-filters/inner-blocks/price-filter',
 		isExperimental: true,
 	},
-	'collection-attribute-filter': {
-		customDir: 'collection-filters/inner-blocks/attribute-filter',
+	'product-filters-attribute': {
+		customDir: 'product-filters/inner-blocks/attribute-filter',
 		isExperimental: true,
 	},
-	'collection-rating-filter': {
-		customDir: 'collection-filters/inner-blocks/rating-filter',
+	'product-filters-rating': {
+		customDir: 'product-filters/inner-blocks/rating-filter',
 		isExperimental: true,
 	},
-	'collection-active-filters': {
-		customDir: 'collection-filters/inner-blocks/active-filters',
+	'product-filters-active': {
+		customDir: 'product-filters/inner-blocks/active-filters',
 		isExperimental: true,
 	},
 	'order-confirmation-summary': {

plugins/woocommerce-blocks/tests/e2e/tests/filter-blocks/basic.block_theme.spec.ts

@@ -4,38 +4,38 @@
 import { test, expect } from '@woocommerce/e2e-playwright-utils';
 
 const wrapperBlock = {
-	name: 'woocommerce/collection-filters',
-	title: 'Collection Filters',
+	name: 'woocommerce/product-filters',
+	title: 'Product Filters',
 };
 const filterBlocks = [
 	{
-		name: 'woocommerce/collection-price-filter',
-		title: 'Collection Price Filter',
-		variation: 'Filter Products by Price',
+		name: 'woocommerce/product-filters-price',
+		title: 'Product Filters: Price',
+		variation: 'Product Filters: Price',
 		heading: 'Filter by Price',
 	},
 	{
-		name: 'woocommerce/collection-stock-filter',
-		title: 'Collection Stock Filter',
-		variation: 'Filter Products by Stock',
+		name: 'woocommerce/product-filters-stock-status',
+		title: 'Product Filters: Stock Status',
+		variation: 'Product Filters: Stock Status',
 		heading: 'Filter by Stock Status',
 	},
 	{
-		name: 'woocommerce/collection-rating-filter',
-		title: 'Collection Rating Filter',
-		variation: 'Filter Products by Rating',
+		name: 'woocommerce/product-filters-rating',
+		title: 'Product Filters: Rating',
+		variation: 'Product Filters: Rating',
 		heading: 'Filter by Rating',
 	},
 	{
-		name: 'woocommerce/collection-attribute-filter',
-		title: 'Collection Attribute Filter',
-		variation: 'Filter Products by Attribute',
-		heading: 'Filter Products by Attribute',
+		name: 'woocommerce/product-filters-attribute',
+		title: 'Product Filters: Attribute',
+		variation: 'Product Filters: Attribute',
+		heading: 'Filter by ', // The attribute filter comes with a dynamic title
 	},
 	{
-		name: 'woocommerce/collection-active-filters',
-		title: 'Collection Active Filters',
-		variation: 'Active Product Filters',
+		name: 'woocommerce/product-filters-active',
+		title: 'Product Filters: Active Filters',
+		variation: 'Product Filters: Active Filters',
 		heading: 'Active Filters',
 	},
 ];
@@ -52,7 +52,9 @@ test.describe( 'Filter blocks registration', async () => {
 		await editorUtils.insertBlockUsingGlobalInserter( wrapperBlock.title );
 
 		await expect(
-			editor.canvas.getByLabel( `Block: ${ wrapperBlock.title }` )
+			editor.canvas.getByLabel( `Block: ${ wrapperBlock.title }`, {
+				exact: true,
+			} )
 		).toBeVisible();
 	} );
 
@@ -75,7 +77,10 @@ test.describe( 'Filter blocks registration', async () => {
 		await editorUtils.insertBlockUsingGlobalInserter( wrapperBlock.title );
 		for ( const block of filterBlocks ) {
 			await expect(
-				editor.canvas.getByText( block.heading )
+				editor.canvas
+					.getByLabel( `Block: ${ block.title }` )
+					.getByLabel( 'Block: Heading' )
+					.and( editor.canvas.getByText( block.heading ) )
 			).toBeVisible();
 		}
 	} );

plugins/woocommerce-blocks/tests/e2e/utils/editor/editor-utils.page.ts

@@ -392,6 +392,9 @@ export class EditorUtils {
 	async insertBlockUsingGlobalInserter( blockTitle: string ) {
 		await this.openGlobalBlockInserter();
 		await this.page.getByPlaceholder( 'Search' ).fill( blockTitle );
-		await this.page.getByRole( 'option', { name: blockTitle } ).click();
+		await this.page
+			.getByRole( 'option', { name: blockTitle, exact: true } )
+			.first()
+			.click();
 	}
 }

plugins/woocommerce/changelog/43363-dev-unify-product-filter-naming-convention

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+[Experimental] Rename experimental "Collection Filters" to "Product Filters"

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

@@ -70,6 +70,15 @@ abstract class AbstractBlock {
 		$this->initialize();
 	}
 
+	/**
+	 * Get the interactivity namespace. Only used when utilizing the interactivity API.
+
+	 * @return string The interactivity namespace, used to namespace interactivity API actions and state.
+	 */
+	protected function get_full_block_name() {
+		return $this->namespace . '/' . $this->block_name;
+	}
+
 	/**
 	 * The default render_callback for all blocks. This will ensure assets are enqueued just in time, then render
 	 * the block (if applicable).

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

@@ -5,15 +5,15 @@ use Automattic\WooCommerce\Blocks\QueryFilters;
 use Automattic\WooCommerce\Blocks\Package;
 
 /**
- * CollectionFilters class.
+ * Product Filters Block.
  */
-final class CollectionFilters extends AbstractBlock {
+final class ProductFilters extends AbstractBlock {
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-filters';
+	protected $block_name = 'product-filters';
 
 	/**
 	 * Cache the current response from the API.
@@ -90,7 +90,7 @@ final class CollectionFilters extends AbstractBlock {
 		$this->current_response = null;
 
 		$attributes_data = array(
-			'data-wc-interactive' => wp_json_encode( array( 'namespace' => 'woocommerce/collection-filters' ) ),
+			'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 			'class'               => 'wc-block-collection-filters',
 		);
 

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

@@ -2,15 +2,15 @@
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
 /**
- * CollectionAttributeFilter class.
+ * Product Filters: Active Block.
  */
-final class CollectionActiveFilters extends AbstractBlock {
+final class ProductFiltersActive extends AbstractBlock {
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-active-filters';
+	protected $block_name = 'product-filters-active';
 
 	/**
 	 * Render the block.
@@ -56,7 +56,7 @@ final class CollectionActiveFilters extends AbstractBlock {
 		$wrapper_attributes = get_block_wrapper_attributes(
 			array(
 				'class'               => 'wc-block-active-filters',
-				'data-wc-interactive' => wp_json_encode( array( 'namespace' => 'woocommerce/collection-active-filters' ) ),
+				'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 				'data-wc-context'     => wp_json_encode( $context ),
 			)
 		);

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

@@ -5,16 +5,16 @@ use Automattic\WooCommerce\Blocks\InteractivityComponents\Dropdown;
 use Automattic\WooCommerce\Blocks\InteractivityComponents\CheckboxList;
 
 /**
- * CollectionAttributeFilter class.
+ * Product Filters: Attribute Block.
  */
-final class CollectionAttributeFilter extends AbstractBlock {
+final class ProductFiltersAttribute extends AbstractBlock {
 
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-attribute-filter';
+	protected $block_name = 'product-filters-attribute';
 
 	/**
 	 * Initialize this block type.
@@ -86,18 +86,20 @@ final class CollectionAttributeFilter extends AbstractBlock {
 			}
 		);
 
+		$action_namespace = $this->get_full_block_name();
+
 		foreach ( $active_product_attributes as $product_attribute ) {
 			$terms = explode( ',', get_query_var( "filter_{$product_attribute}" ) );
 
 			// Get attribute term by slug.
 			$terms = array_map(
-				function( $term ) use ( $product_attribute ) {
+				function( $term ) use ( $product_attribute, $action_namespace ) {
 					$term_object = get_term_by( 'slug', $term, "pa_{$product_attribute}" );
 					return array(
 						'title'      => $term_object->name,
 						'attributes' => array(
-							'data-wc-on--click' => 'woocommerce/collection-attribute-filter::actions.removeFilter',
-							'data-wc-context'   => 'woocommerce/collection-attribute-filter::' . wp_json_encode(
+							'data-wc-on--click' => "$action_namespace::actions.removeFilter",
+							'data-wc-context'   => "$action_namespace::" . wp_json_encode(
 								array(
 									'value'         => $term,
 									'attributeSlug' => $product_attribute,
@@ -148,7 +150,7 @@ final class CollectionAttributeFilter extends AbstractBlock {
 				'<div %s></div>',
 				get_block_wrapper_attributes(
 					array(
-						'data-wc-interactive' => wp_json_encode( array( 'namespace' => 'woocommerce/collection-attribute-filter' ) ),
+						'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 					)
 				),
 			);
@@ -201,7 +203,7 @@ final class CollectionAttributeFilter extends AbstractBlock {
 			get_block_wrapper_attributes(
 				array(
 					'data-wc-context'     => wp_json_encode( $context ),
-					'data-wc-interactive' => wp_json_encode( array( 'namespace' => 'woocommerce/collection-attribute-filter' ) ),
+					'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 				)
 			),
 			$content,
@@ -241,7 +243,7 @@ final class CollectionAttributeFilter extends AbstractBlock {
 		return Dropdown::render(
 			array(
 				'items'          => $list_items,
-				'action'         => 'woocommerce/collection-attribute-filter::actions.navigate',
+				'action'         => "{$this->get_full_block_name()}::actions.navigate",
 				'selected_items' => $selected_items,
 				'select_type'    => $attributes['selectType'] ?? 'multiple',
 				// translators: %s is a product attribute name.
@@ -279,7 +281,7 @@ final class CollectionAttributeFilter extends AbstractBlock {
 		return CheckboxList::render(
 			array(
 				'items'     => $list_options,
-				'on_change' => 'woocommerce/collection-attribute-filter::actions.updateProducts',
+				'on_change' => "{$this->get_full_block_name()}::actions.updateProducts",
 			)
 		);
 	}

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

@@ -2,16 +2,16 @@
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
 /**
- * CollectionPriceFilter class.
+ * Product Filters: Price Block.
  */
-final class CollectionPriceFilter extends AbstractBlock {
+final class ProductFiltersPrice extends AbstractBlock {
 
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-price-filter';
+	protected $block_name = 'product-filters-price';
 
 	const MIN_PRICE_QUERY_VAR = 'min_price';
 	const MAX_PRICE_QUERY_VAR = 'max_price';
@@ -93,7 +93,7 @@ final class CollectionPriceFilter extends AbstractBlock {
 				array(
 					'title'      => $title,
 					'attributes' => array(
-						'data-wc-on--click' => 'woocommerce/collection-price-filter::actions.reset',
+						'data-wc-on--click' => "{$this->get_full_block_name()}::actions.reset",
 					),
 				),
 			),
@@ -139,7 +139,7 @@ final class CollectionPriceFilter extends AbstractBlock {
 		$wrapper_attributes = get_block_wrapper_attributes(
 			array(
 				'class'               => $show_input_fields && $inline_input ? 'inline-input' : '',
-				'data-wc-interactive' => wp_json_encode( array( 'namespace' => 'woocommerce/collection-price-filter' ) ),
+				'data-wc-interactive' => wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) ),
 				'data-wc-context'     => wp_json_encode( $data ),
 			)
 		);

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

@@ -5,17 +5,17 @@ use Automattic\WooCommerce\Blocks\InteractivityComponents\CheckboxList;
 use Automattic\WooCommerce\Blocks\InteractivityComponents\Dropdown;
 
 /**
- * Collection Rating Filter Block
+ * Product Filters: Rating Block
  *
  * @package Automattic\WooCommerce\Blocks\BlockTypes
  */
-final class CollectionRatingFilter extends AbstractBlock {
+final class ProductFiltersRating extends AbstractBlock {
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-rating-filter';
+	protected $block_name = 'product-filters-rating';
 
 	const RATING_FILTER_QUERY_VAR = 'rating_filter';
 
@@ -80,8 +80,8 @@ final class CollectionRatingFilter extends AbstractBlock {
 					/* translators: %d is the rating value. */
 					'title'      => sprintf( __( 'Rated %d out of 5', 'woocommerce' ), $rating ),
 					'attributes' => array(
-						'data-wc-on--click' => 'woocommerce/collection-rating-filter::actions.removeFilter',
-						'data-wc-context'   => 'woocommerce/collection-rating-filter::' . wp_json_encode( array( 'value' => $rating ) ),
+						'data-wc-on--click' => "{$this->get_full_block_name()}::actions.removeFilter",
+						'data-wc-context'   => "{$this->get_full_block_name()}::" . wp_json_encode( array( 'value' => $rating ) ),
 					),
 				);
 			},
@@ -116,7 +116,7 @@ final class CollectionRatingFilter extends AbstractBlock {
 
 		$wrapper_attributes = get_block_wrapper_attributes(
 			array(
-				'data-wc-interactive' => 'woocommerce/collection-rating-filter',
+				'data-wc-interactive' => $this->get_full_block_name(),
 				'class'               => 'wc-block-rating-filter',
 			)
 		);
@@ -141,7 +141,7 @@ final class CollectionRatingFilter extends AbstractBlock {
 		$input = 'list' === $display_style ? CheckboxList::render(
 			array(
 				'items'     => $this->get_checkbox_list_items( $filtered_rating_counts, $selected_ratings_query_param, $show_counts ),
-				'on_change' => 'woocommerce/collection-rating-filter::actions.onCheckboxChange',
+				'on_change' => "{$this->get_full_block_name()}::actions.onCheckboxChange",
 			)
 		) : Dropdown::render(
 			$this->get_dropdown_props( $filtered_rating_counts, $selected_ratings_query_param, $show_counts, $attributes['selectType'] )
@@ -265,7 +265,7 @@ final class CollectionRatingFilter extends AbstractBlock {
 			),
 			'select_type'    => $select_type,
 			'selected_items' => $selected_items,
-			'action'         => 'woocommerce/collection-rating-filter::actions.onDropdownChange',
+			'action'         => "{$this->get_full_block_name()}::actions.onDropdownChange",
 			'placeholder'    => $placeholder_text,
 		);
 	}

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

@@ -5,16 +5,16 @@ use Automattic\WooCommerce\Blocks\InteractivityComponents\Dropdown;
 use Automattic\WooCommerce\Blocks\InteractivityComponents\CheckboxList;
 
 /**
- * CollectionStockFilter class.
+ * Product Filters: Stock Status Block.
  */
-final class CollectionStockFilter extends AbstractBlock {
+final class ProductFiltersStockStatus extends AbstractBlock {
 
 	/**
 	 * Block name.
 	 *
 	 * @var string
 	 */
-	protected $block_name = 'collection-stock-filter';
+	protected $block_name = 'product-filters-stock-status';
 
 	const STOCK_STATUS_QUERY_VAR = 'filter_stock_status';
 
@@ -75,13 +75,15 @@ final class CollectionStockFilter extends AbstractBlock {
 			return $data;
 		}
 
+		$action_namespace = $this->get_full_block_name();
+
 		$active_stock_statuses = array_map(
-			function( $status ) use ( $stock_status_options ) {
+			function( $status ) use ( $stock_status_options, $action_namespace ) {
 				return array(
 					'title'      => $stock_status_options[ $status ],
 					'attributes' => array(
-						'data-wc-on--click' => 'woocommerce/collection-stock-filter::actions.removeFilter',
-						'data-wc-context'   => 'woocommerce/collection-stock-filter::' . wp_json_encode( array( 'value' => $status ) ),
+						'data-wc-on--click' => "$action_namespace::actions.removeFilter",
+						'data-wc-context'   => "$action_namespace::" . wp_json_encode( array( 'value' => $status ) ),
 					),
 				);
 			},
@@ -169,16 +171,18 @@ final class CollectionStockFilter extends AbstractBlock {
 			return '';
 		}
 
-		$list_items = array_map(
-			function( $item ) use ( $stock_statuses, $show_counts, $selected_stock_statuses ) {
-				$label = $show_counts ? $stock_statuses[ $item['status'] ] . ' (' . $item['count'] . ')' : $stock_statuses[ $item['status'] ];
-				return array(
-					'label'   => $label,
-					'value'   => $item['status'],
-					'checked' => in_array( $item['status'], $selected_stock_statuses, true ),
-				);
-			},
-			$filtered_stock_counts
+		$list_items = array_values(
+			array_map(
+				function( $item ) use ( $stock_statuses, $show_counts, $selected_stock_statuses ) {
+					$label = $show_counts ? $stock_statuses[ $item['status'] ] . ' (' . $item['count'] . ')' : $stock_statuses[ $item['status'] ];
+					return array(
+						'label'   => $label,
+						'value'   => $item['status'],
+						'checked' => in_array( $item['status'], $selected_stock_statuses, true ),
+					);
+				},
+				$filtered_stock_counts
+			)
 		);
 
 		$selected_items = array_values(
@@ -190,7 +194,7 @@ final class CollectionStockFilter extends AbstractBlock {
 			)
 		);
 
-		$data_directive = wp_json_encode( array( 'namespace' => 'woocommerce/collection-stock-filter' ) );
+		$data_directive = wp_json_encode( array( 'namespace' => $this->get_full_block_name() ) );
 
 		ob_start();
 		?>
@@ -202,7 +206,7 @@ final class CollectionStockFilter extends AbstractBlock {
 				echo CheckboxList::render(
 					array(
 						'items'     => $list_items,
-						'on_change' => 'woocommerce/collection-stock-filter::actions.onCheckboxChange',
+						'on_change' => "{$this->get_full_block_name()}::actions.onCheckboxChange",
 					)
 				);
 				?>
@@ -214,7 +218,7 @@ final class CollectionStockFilter extends AbstractBlock {
 				echo Dropdown::render(
 					array(
 						'items'          => $list_items,
-						'action'         => 'woocommerce/collection-stock-filter::actions.onDropdownChange',
+						'action'         => "{$this->get_full_block_name()}::actions.onDropdownChange",
 						'selected_items' => $selected_items,
 						'select_type'    => $select_type,
 						'placeholder'    => $placeholder_text,

plugins/woocommerce/src/Blocks/BlockTypesController.php

@@ -296,12 +296,12 @@ final class BlockTypesController {
 			$block_types[] = 'ProductGalleryLargeImageNextPrevious';
 			$block_types[] = 'ProductGalleryPager';
 			$block_types[] = 'ProductGalleryThumbnails';
-			$block_types[] = 'CollectionFilters';
-			$block_types[] = 'CollectionStockFilter';
-			$block_types[] = 'CollectionPriceFilter';
-			$block_types[] = 'CollectionAttributeFilter';
-			$block_types[] = 'CollectionRatingFilter';
-			$block_types[] = 'CollectionActiveFilters';
+			$block_types[] = 'ProductFilters';
+			$block_types[] = 'ProductFiltersStockStatus';
+			$block_types[] = 'ProductFiltersPrice';
+			$block_types[] = 'ProductFiltersAttribute';
+			$block_types[] = 'ProductFiltersRating';
+			$block_types[] = 'ProductFiltersActive';
 		}
 
 		/**