[Experimental] Filter blocks: Add block preview

[thealexandrelara]

Changes proposed in this Pull Request:

This PR adds the block preview to each Product Filter block.

Closes #44748.

How to test the changes in this Pull Request:

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

1. Navigate to Single Product template (Appearance > Editor > Templates > Product Catalog template - or any archive template).
2. Click on "Edit" to open the WordPress editor.
3. In the editor, you should see a block inserter icon or an option to "Add Block". Click on it.
4. In the block inserter, search for "Product Filter" or browse the available blocks until you find them.
5. For each Product Filter [...] (Beta) that appears, hover over it and make sure the block preview is displayed.

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

Add block preview to filter blocks

Comment

[github-actions]

Hi @roykho,

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

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 38s
E2E Tests	316	0	0	35	0	351	7m 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.

[roykho]

The previews shows up nicely good work however I wanted to point out for the Attributes Filter, since it needs to first pick an attribute before showing the real preview, it is not ideal. I understand this has existed prior but perhaps we should figure out a way to make it work.

One thought is to use placeholder screenshots and in the edit.js, if isPreview load the screenshot.

But it is not a blocker so approving.

[thealexandrelara]

The previews shows up nicely good work however I wanted to point out for the Attributes Filter, since it needs to first pick an attribute before showing the real preview, it is not ideal. I understand this has existed prior but perhaps we should figure out a way to make it work.

One thought is to use placeholder screenshots and in the edit.js, if isPreview load the screenshot.

But it is not a blocker so approving.

Nice catch! I'm going to open a new issue to work specifically for the Attributes Filter! Thank you for pointing this out and sharing a solution.