[Experimental] Render headings as inner blocks of collection filters

[samueljseay]

Changes proposed in this Pull Request:

We needed to achieve not displaying filter headings when there is nothing to filter. For example when there are no product ratings it makes no sense to render the "Filter by rating" header on its own since nothing can be filtered.

To do this, this PR adjusts all the new experimental filter blocks to accept only core/heading as an inner block. With this change we can render the inner blocks on PHP side, but if we don't have any data (e.g. no product ratings) we can simply not render the whole block including inner blocks.

This also adjusts the collection filters template that auto inserts all the filter blocks. It now inserts the headings as child blocks.

Closes #42055

How to test the changes in this Pull Request:

1. You can firstly insert the new collection filters block in the editor. You should see that inner heading blocks are inserted. You can test that it saves by updating / saving and then reload the page to ensure the inner heading blocks are retained.

2. Each block has different conditions in which it will not render. Rating can be tested for example, by ensuring you have no product reviews. (In my test site I just manually delete them all). Once this is done, view the frontend page corresponding to your collection filters and see that nothing is rendered for the rating filter.

3. for Price Filter it should pretty much always render unless something has gone wrong. (I might not have considered edge cases here, please enlighten me if I have missed some).

4. for Stock Status filter TBD

5. for active filters, nothing should render unless at least one filter is active on the page. e.g. with no query params on the page the heading should not render. If you choose a single filter like price range, the heading should render along with the active filter.

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

Comment

Hide block headings when there are no filter options for experimental collection filter blocks.

[github-actions]

Test Results Summary

Commit SHA: cb24302

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

---

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.

[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

[dinhtungdu]

for Price Filter it should pretty much always render unless something has gone wrong. (I might not have considered edge cases here, please enlighten me if I have missed some).

There is also a case when there is only one simple product, the min and max price is equal, the Price filter shouldn't be render at that point. (I fixed that in https://github.com/woocommerce/woocommerce/pull/43112/files#diff-cae9a0f3ce62ffc67ce67010b5f92334df81848c280613e5f49c43d6819b3591R147-R152).

In my test site I just manually delete them all

Theoretically, rating can be tested with a filtered query that returns products without rating, but it doesn't work now with Store API. #42811 will fix that issue.

[samueljseay]

Unused import leftover in the branch this branches from.

[dinhtungdu]

LGTM!

[dinhtungdu]

The level is missing here.