[Experimental] Filter block: replace custom upgrade panel by Transforms 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:

This PR:

• removes the upgrade and downgrade panel added in [Experimental] Add: Filter blocks migration #43218.
• uses the Block Transforms API to add transform option to existing filter block.

Closes #43732 .

How to test the changes in this Pull Request:

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

1. Add the current Active Filters block to the page.
2. Customize that block:

• Heading: move it below the filter block, change the content, customize the styling
• Filter block: change default sidebar setting, customize styling.

3. Click on the icon of the filter wrapper block to open the block Transforms UI.
4. See Product Filter option there.
5. Hover on the Product Filter, see the preview that match with actual filter blocks.
6. Click on the Product Filter, see the existing filter block is replaced with new ones, with all customized setting carried over.
7. Repeat steps 2-6 with other filter blocks and see the same results.

Before	After

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

[github-actions]

Hi @samueljseay, @woocommerce/woo-fse

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: df3871e

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	291	0	0	5	0	296	6m 28s

---

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.

[samueljseay]

Code looks great, again another great simplification. Tests well, my only question is, we don't really support downgrade now do we? But I think that's probably fine, since we can just "undo" or not save changes if something went wrong.

Love this, the transform API is much nicer than upgrade/downgrade. 🚢

[dinhtungdu]

Tests well, my only question is, we don't really support downgrade now do we? But I think that's probably fine, since we can just "undo" or not save changes if something went wrong.

Yeah, I decided to not support downgrade because of this and we will deprecate existing filter blocks.