Add: Active Filters block powered by Interactivity API

[dinhtungdu]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Closes #42179 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Add the Collection Filters block into a Product Collection block.
2. See the Collection Active Filters and other filter blocks added along with the Collection Filters block.
3. Toggle the display style, see the editor reacts.
4. Save and test the block on the frontend:

• It's hidden when no filter applied.
• It's visible when a filter is applied.
• Clicking on the remove button of each active filter removes that filter from the URL and update the products grid as well as the corresponding filter block.
• Clicking on the Clear All button remove all filters.
• Removing a filter from the filter block also remove the corresponding one from the active filter block.
• See chip and list style work as expected.

Note that the price filter nêd to be updated to use context instead of state to make it work properly with Clear All button.

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

Add new Active Filters block powered by Interactivity API.

[github-actions]

Test Results Summary

Commit SHA: 43a05a2

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 17s

---

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 @samueljseay,

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

[samueljseay]

Tests well for me. Just some nitpicks mainly. 🚢

[samueljseay]

So I've been following this pattern too, mainly due to copy/paste, but do we really need separate file to declare types like this? i think it can live with the block?

nitpick really, it doesn't matter too much

[dinhtungdu]

If we don't use attribute outside of the edit component, then we don't need this file. But usually, we need to use block attributes and/or edit props in other components, then a separate file makes more sense to me. Because it's something happy more often than not, I think following the 'convention' (even when the attribute is used only in one place) make it easier for every one working on the source.

[samueljseay]

One nitpick suggestion from me 😄 pre-approving

[dinhtungdu]

E2E tests passed after one retry. Merging.