[Experimental] Utilize WP generated class names to style rating filter block.

[samueljseay]

Changes proposed in this Pull Request:

@dinhtungdu and I agreed that we don't need to create our own unique class names or use bem style syntax, its overly verbose and doesn't add anything.

Instead we scope all styles to the class name generated for the block by WP, and also remove the BEM style prefix from any scoped class names. (To keep PR's small and testable I'm addressing one block at a time.)

Additionally, I noticed a lot of copy pasted styles from the old block that we don't use or need.

This is part of #43167

How to test the changes in this Pull Request:

1. Much like in [Experimental] Utilize WP generated class names when styling new active filters block. #44069, edit the product catalog or a page and alongside product collection add rating filter.
2. Also in editor try different modes like dropdown/multiple etc
3. Check that styling looks good in editor and frontend.

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] Utilize WP generated class names to style rating filter block.

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

[samueljseay]

Actually not convinced we need this but it does target the class on the empty loading state in the editor. I've left it as is for now, but happy to remove it because after removing it I didn't notice anything looking wrong in the styles.

[github-actions]

Test Results Summary

Commit SHA: a05eaf3

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 36s
E2E Tests	291	0	0	8	0	299	6m 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.

[dinhtungdu]

Wow. 6 added 179 removed. I'm always pleased to review PRs simplifying the codebase. Great work!
Everything still works as expected except the count in checkbox list.

I was gonna comment only, not approve.

[samueljseay]

@dinhtungdu thanks good spotting of the count bug. I've fixed it here

[dinhtungdu]

Thanks for the update, this is LGTM now.