[Experimental] Use variations to provide all the product filters wrapped by CollectionFilters block

[samueljseay]

Changes proposed in this Pull Request:

To support discoverability and simplify adding filters this PR registers each of the new interactivity filters as a variation of the collection-filters block and inside the block we choose a template for the respective filter based on an attribute passed in the variant.

Closes #42160

How to test the changes in this Pull Request:

1. In the block editor the filter blocks by themselves should not show in the block inserter
2. These new block variants should show
3. try adding each one of the new variants
4. It should add a collection filters wrapper and a corresponding heading for the block

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

[Experimental] Use variations of collection filter to provide new interactivity based filter blocks.

Comment

[github-actions]

Hi @dinhtungdu,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[github-actions]

Test Results Summary

Commit SHA: 442e98a

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 36s
E2E Tests	258	0	0	3	0	261	13m 43s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[dinhtungdu]

Thanks for working on this PR! This is working as expected according to the testing instructions. I don't have any comment codewise but about one on the behavior:

In the block editor the filter blocks by themselves should not show in the block inserter

I don't think we should do this, because:

• The filter blocks are only available inside Collection Filters block, so they don't add more noise to the global inserter.
• With this PR, when adding inner blocks to Collection Filters, for example Price Filter, we're adding another Collection Filters block and Price Filter blocks to the original Collection Filters block.

I think the behavior should be:

• Collection Filters block shouldn't be available inside other Collection Filters block.
• The new variations added in this PR also shouldn't be available inside Collection Filters block.
• The inserter visibility of new filter blocks should be restored as they are before, only available inside Collection Filters block.
• In the other words, we should disallow the following blocks inside Collection Filters, so when inside that block, the only result, price filter for example, should be the new price filter block:
  • Filter Wrapper variations (we will disable legacy blocks soon so this may not necessary).
  • Collection Filters block and its variations.

Sadly, Gutenberg hasn't provided any API to disallow specific inner blocks right now, so we have to either:

• use a fix list of allowed blocks, which includes new filter blocks and blocks for layout purpose.
• use a dynamic list of allow blocks (defining the list at run time).

[samueljseay]

@dinhtungdu I took another go at this based on your feedback. Hurts the head a little when dealing with variants and such but let me try explain the behavior implemented. If you could test and see if what I've implemented here matches your expectations :)

1. Collection filters can be inserted. It has default variant which includes all the new filter blocks

2. Collection filters cannot be inserted in collection filters

3. The filters themselves can still be inserted at top level of collection filters though

4. The filter variants cannot be nested in filter variants (again avoiding nested collection filters)

5. The inserter false is removed now and you can use variants to add the collection-filter -> filter hierarchy

6. By disallowing woocommerce/filter-wrapper we disallow adding any of the old filters

I think that about sums it up.

I expect we can fix up any block naming as part of #43167

[dinhtungdu]

Great update! Having the Collection Filters inserts all filter blocks by default is a good UX 💯 .

In my test, I can still insert variation inside another variation. Here is the testing video taken on https://shy-kingfisher.jurassic.ninja/

Screen.Recording.2024-01-03.at.18.12.09.mov

Checking the code, I can see you're splitting into two cases. I don't think we need those two cases because in every case, only the collection filter blocks can be added in inside Collection Filters, not variations of Collection Filters block.

[samueljseay]

thanks @dinhtungdu I tested your changes and you're right I was overthinking the block filtering (I also learned that variations are not individual block types, neat!)

I've applied your suggestions and ready for re-review

[dinhtungdu]

Thanks for the updates! This is LGTM now.