diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/product-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/product-filter/block.json index bd07a4b1563..673300a288c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/product-filter/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/product-filter/block.json @@ -12,7 +12,7 @@ "supports": { "html": false, "reusable": false, - "inserter": false + "inserter": true }, "ancestor": [ "woocommerce/product-filters" @@ -44,4 +44,4 @@ }, "apiVersion": 3, "$schema": "https://schemas.wp.org/trunk/block.json" -} \ No newline at end of file +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/block.json b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/block.json index 1b023dccbbe..ab8fa25fd7d 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/block.json +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-filters/inner-blocks/stock-filter/block.json @@ -12,7 +12,6 @@ "supports": { "interactivity": true, "html": false, - "multiple": false, "inserter": false, "color": { "text": true, @@ -51,4 +50,4 @@ "textdomain": "woocommerce", "apiVersion": 3, "$schema": "https://schemas.wp.org/trunk/block.json" -} \ No newline at end of file +} diff --git a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts index ef76aaeb74f..d065baf73dc 100644 --- a/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts +++ b/plugins/woocommerce-blocks/tests/e2e/tests/product-filters/product-filters-template-part.block_theme.spec.ts @@ -1,7 +1,19 @@ /** * External dependencies */ -import { test, expect } from '@woocommerce/e2e-utils'; +import { test, expect, BlockData } from '@woocommerce/e2e-utils'; + +const blockData: BlockData = { + name: 'Product Filters (Experimental)', + slug: 'woocommerce/product-filters', + mainClass: '.wp-block-woocommerce-product-filters', + selectors: { + editor: { + block: '.wp-block-woocommerce-product-filters', + }, + frontend: {}, + }, +}; test.describe( 'Product Filters Template Part', () => { test.beforeEach( async ( { admin, requestUtils } ) => { @@ -31,8 +43,50 @@ test.describe( 'Product Filters Template Part', () => { test( 'should render the Product Filters block', async ( { editor } ) => { const productFiltersBlock = editor.canvas.getByLabel( - 'Block: Product Filters (Experimental)' + `Block: ${ blockData.name }` ); await expect( productFiltersBlock ).toBeVisible(); } ); + + test( 'Filters > can be added multiple times', async ( { editor } ) => { + const block = editor.canvas.getByLabel( `Block: ${ blockData.name }` ); + await expect( block ).toBeVisible(); + + const searchTerms = [ + 'Status (Experimental)', + 'Price (Experimental)', + 'Rating (Experimental)', + 'Attribute (Experimental)', + 'Active (Experimental)', + ]; + + for ( const filter of searchTerms ) { + await editor.selectBlocks( blockData.selectors.editor.block ); + + const addBlock = block.getByRole( 'button', { + name: 'Add block', + } ); + + await addBlock.click(); + + await editor.page.getByPlaceholder( 'Search' ).fill( filter ); + + const searchResult = editor.page.getByRole( 'option', { + name: filter, + } ); + await expect( searchResult ).toBeVisible(); + + await searchResult.click(); + + let _locator = `[aria-label="Block: ${ filter }"]`; + + // We need to treat the attributes filter different because + // the variation of the block label depends on the product attribute. + if ( filter === 'Attribute (Experimental)' ) { + _locator = '.wp-block-woocommerce-product-filter-attribute'; + } + + await expect( editor.canvas.locator( _locator ) ).toHaveCount( 2 ); + } + } ); } ); diff --git a/plugins/woocommerce/changelog/51051-product-filters-multiple b/plugins/woocommerce/changelog/51051-product-filters-multiple new file mode 100644 index 00000000000..c5b940c6926 --- /dev/null +++ b/plugins/woocommerce/changelog/51051-product-filters-multiple @@ -0,0 +1,4 @@ +Significance: patch +Type: tweak +Comment: Allow multiple instances of the product filters +