woocommerce-blocks
woocommerce-blocks copied to clipboard
woocommerce
Add a Products by Rating filter block
This is an attempt at adding a Products by Rating filter block.
For now, I have focused on the core functionality, and there are several pending items on the to-do list:
To-do
- [ ] Add support for Display Options: Product count, Show 'Apply filters' button, Color
- [ ] Fix the editor preview display
- [ ] Migrate the block from directly using the
Ratingcomponent to utilizing theCheckboxListcomponent (this will also make the UX match the preferred option ( pdnLyh-1sR-p2#comment-1044 )) - [ ] Investigate why the Active Filters block
Clear Allbutton doesn't work correctly (doesn't clear Rating filters on a Block Shop page) - [ ] Provide the legacy Filter Products by Rating widget deprecation
- [ ] Add E2E tests
- [ ] Add the ability for the
Ratingcomponent to support other contexts (for example the All Products block)
Screenshots
Testing
- Activate a block theme & setup WooCommerce with products that have some ratings
- Create a classic shop page and a separate page using the
All Productsblock - Add the
Filter Products by Ratingblock andActive Filtersblock on both pages - Check that
Filter Products by Ratingblock is correctly:- Displaying the star rating buttons within the filter block
- Displaying the active state (stars using the Primary color and the product count are in bold)
- Filtering the products in the product loop (on both Classic and block shop pages)
- Clearing after getting removed via
Active Filtersremove button - Updating the URL with the rating parameter
- Loading the rating filters via URL parameters on page reload
User Facing Testing
Same as the above steps
WooCommerce Visibility
- [ ] WooCommerce Core
- [ ] Feature plugin
- [x] Experimental
Changelog
Add Filter Products by Rating block
The release ZIP for this PR is accessible via:
https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7048.zip
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Script Dependencies Report
The compare-assets action has detected some changed script dependencies between this branch and trunk. Please review and confirm the following are correct before merging.
| Script Handle | Added | Removed | |
|---|---|---|---|
rating-filter.js |
lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url |
⚠️ |
This comment was automatically generated by the ./github/compare-assets action.
Size Change: +12.9 kB (+1%)
Total Size: 916 kB
| Filename | Size | Change | |
|---|---|---|---|
build/active-filters-frontend.js |
7.62 kB | +1 B (0%) | |
build/active-filters.js |
8.3 kB | +33 B (0%) | |
build/all-products-frontend.js |
26.5 kB | +63 B (0%) | |
build/all-products.js |
33.6 kB | +23 B (0%) | |
build/all-reviews.js |
7.79 kB | -1 B (0%) | |
build/attribute-filter-frontend.js |
22.4 kB | +93 B (0%) | |
build/attribute-filter.js |
13.3 kB | +40 B (0%) | |
build/cart-blocks/cart-cross-sells-frontend.js |
253 B | +1 B (0%) | |
build/cart-blocks/cart-cross-sells-products-frontend.js |
4.66 kB | +2 B (0%) | |
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js |
5.12 kB | +4 B (0%) | |
build/cart-blocks/cart-express-payment-frontend.js |
798 B | -3 B (0%) | |
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js |
5.26 kB | -5 B (0%) | |
build/cart-blocks/cart-line-items-frontend.js |
1.07 kB | +5 B (0%) | |
build/cart-blocks/cart-order-summary-frontend.js |
1.1 kB | -3 B (0%) | |
build/cart-blocks/cart-totals-frontend.js |
321 B | -1 B (0%) | |
build/cart-blocks/empty-cart-frontend.js |
345 B | -2 B (-1%) | |
build/cart-blocks/filled-cart-frontend.js |
783 B | +1 B (0%) | |
build/cart-blocks/order-summary-coupon-form-frontend.js |
2.73 kB | +1 B (0%) | |
build/cart-blocks/order-summary-discount-frontend.js |
2.16 kB | +1 B (0%) | |
build/cart-blocks/order-summary-fee-frontend.js |
274 B | +1 B (0%) | |
build/cart-blocks/order-summary-heading-frontend.js |
454 B | -1 B (0%) | |
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js |
6.73 kB | -3 B (0%) | |
build/cart-blocks/order-summary-taxes-frontend.js |
433 B | +1 B (0%) | |
build/cart-blocks/proceed-to-checkout-frontend.js |
1.19 kB | -1 B (0%) | |
build/cart-frontend.js |
50.3 kB | -41 B (0%) | |
build/cart.js |
46.4 kB | -13 B (0%) | |
build/checkout-blocks/actions-frontend.js |
1.76 kB | -1 B (0%) | |
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js |
4.94 kB | -5 B (0%) | |
build/checkout-blocks/billing-address-frontend.js |
925 B | -2 B (0%) | |
build/checkout-blocks/contact-information-frontend.js |
2.99 kB | -1 B (0%) | |
build/checkout-blocks/express-payment-frontend.js |
1.18 kB | -3 B (0%) | |
build/checkout-blocks/fields-frontend.js |
343 B | +1 B (0%) | |
build/checkout-blocks/order-note-frontend.js |
1.13 kB | -2 B (0%) | |
build/checkout-blocks/order-summary-cart-items-frontend.js |
3.66 kB | -4 B (0%) | |
build/checkout-blocks/order-summary-coupon-form-frontend.js |
2.88 kB | +2 B (0%) | |
build/checkout-blocks/order-summary-discount-frontend.js |
2.28 kB | +1 B (0%) | |
build/checkout-blocks/order-summary-frontend.js |
1.1 kB | -4 B (0%) | |
build/checkout-blocks/order-summary-shipping-frontend.js |
602 B | -2 B (0%) | |
build/checkout-blocks/order-summary-subtotal-frontend.js |
273 B | -1 B (0%) | |
build/checkout-blocks/payment-frontend.js |
7.89 kB | -5 B (0%) | |
build/checkout-blocks/shipping-methods-frontend.js |
4.98 kB | -1 B (0%) | |
build/checkout-blocks/totals-frontend.js |
324 B | +1 B (0%) | |
build/checkout-frontend.js |
52.5 kB | -31 B (0%) | |
build/checkout.js |
40.1 kB | -4 B (0%) | |
build/featured-category.js |
13.2 kB | -8 B (0%) | |
build/featured-product.js |
13.4 kB | -9 B (0%) | |
build/handpicked-products.js |
7.28 kB | -2 B (0%) | |
build/legacy-template.js |
2.83 kB | -5 B (0%) | |
build/mini-cart-component-frontend.js |
16.8 kB | +5 B (0%) | |
build/mini-cart-contents-block/filled-cart-frontend.js |
229 B | -1 B (0%) | |
build/mini-cart-contents-block/items-frontend.js |
236 B | -1 B (0%) | |
build/mini-cart-contents-block/products-table-frontend.js |
589 B | -3 B (-1%) | |
build/mini-cart-contents-block/shopping-button-frontend.js |
287 B | -1 B (0%) | |
build/mini-cart-contents-block/title-frontend.js |
366 B | -2 B (-1%) | |
build/mini-cart-contents.js |
17 kB | -3 B (0%) | |
build/mini-cart-frontend.js |
1.71 kB | -1 B (0%) | |
build/mini-cart.js |
4.58 kB | +1 B (0%) | |
build/price-filter-frontend.js |
13.5 kB | +77 B (+1%) | |
build/price-filter.js |
9.4 kB | +56 B (+1%) | |
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js |
225 B | -1 B (0%) | |
build/product-add-to-cart--product-button--product-image--product-title.js |
2.66 kB | +2 B (0%) | |
build/product-add-to-cart.js |
6.47 kB | -11 B (0%) | |
build/product-best-sellers.js |
7.63 kB | +2 B (0%) | |
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js |
433 B | +1 B (0%) | |
build/product-button-frontend.js |
1.89 kB | +3 B (0%) | |
build/product-button.js |
1.58 kB | +2 B (0%) | |
build/product-categories.js |
2.36 kB | +6 B (0%) | |
build/product-category-list-frontend.js |
879 B | +1 B (0%) | |
build/product-category-list.js |
501 B | -1 B (0%) | |
build/product-category.js |
8.61 kB | -2 B (0%) | |
build/product-image.js |
1.61 kB | +3 B (0%) | |
build/product-new.js |
7.62 kB | +4 B (0%) | |
build/product-on-sale.js |
7.94 kB | +1 B (0%) | |
build/product-price-frontend.js |
1.91 kB | +1 B (0%) | |
build/product-price.js |
1.53 kB | -3 B (0%) | |
build/product-query.js |
648 B | -1 B (0%) | |
build/product-rating-frontend.js |
1.18 kB | +2 B (0%) | |
build/product-sale-badge-frontend.js |
1.14 kB | +1 B (0%) | |
build/product-search.js |
2.61 kB | -2 B (0%) | |
build/product-sku-frontend.js |
380 B | -1 B (0%) | |
build/product-stock-indicator-frontend.js |
995 B | +2 B (0%) | |
build/product-stock-indicator.js |
623 B | -1 B (0%) | |
build/product-tag-list-frontend.js |
875 B | +1 B (0%) | |
build/product-tag.js |
7.99 kB | -2 B (0%) | |
build/product-title-frontend.js |
1.33 kB | -2 B (0%) | |
build/product-title.js |
939 B | +3 B (0%) | |
build/product-top-rated.js |
7.86 kB | +2 B (0%) | |
build/products-by-attribute.js |
8.52 kB | -4 B (0%) | |
build/reviews-by-category.js |
11.2 kB | -2 B (0%) | |
build/reviews-by-product.js |
12.3 kB | -1 B (0%) | |
build/reviews-frontend.js |
7.01 kB | -1 B (0%) | |
build/single-product-frontend.js |
29.3 kB | -12 B (0%) | |
build/stock-filter-frontend.js |
7.64 kB | +28 B (0%) | |
build/stock-filter.js |
7.6 kB | +67 B (+1%) | |
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js |
19.1 kB | +9 B (0%) | |
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js |
7.54 kB | +5 B (0%) | |
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js |
3.14 kB | +1 B (0%) | |
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js |
4.85 kB | +6 B (0%) | |
build/vendors--mini-cart-contents-block/footer-frontend.js |
6.86 kB | -2 B (0%) | |
build/wc-blocks-style-rtl.css |
24.1 kB | +124 B (+1%) | |
build/wc-blocks-style.css |
24 kB | +126 B (+1%) | |
build/wc-blocks-vendors.js |
62 kB | +12 B (0%) | |
build/rating-filter-frontend.js |
6.73 kB | +6.73 kB (new file) | 🆕 |
build/rating-filter.js |
5.53 kB | +5.53 kB (new file) | 🆕 |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/blocks-checkout.js |
17.5 kB |
build/cart-blocks/cart-accepted-payment-methods-frontend.js |
1.39 kB |
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js |
5.63 kB |
build/cart-blocks/cart-items-frontend.js |
299 B |
build/cart-blocks/order-summary-shipping-frontend.js |
428 B |
build/cart-blocks/order-summary-subtotal-frontend.js |
274 B |
build/checkout-blocks/order-summary-fee-frontend.js |
275 B |
build/checkout-blocks/order-summary-taxes-frontend.js |
433 B |
build/checkout-blocks/shipping-address-frontend.js |
1.06 kB |
build/checkout-blocks/terms-frontend.js |
1.62 kB |
build/general-style-rtl.css |
1.29 kB |
build/general-style.css |
1.29 kB |
build/mini-cart-contents-block/empty-cart-frontend.js |
366 B |
build/mini-cart-contents-block/footer-frontend.js |
3.18 kB |
build/price-format.js |
1.19 kB |
build/product-add-to-cart-frontend.js |
1.24 kB |
build/product-button--product-image--product-rating--product-sale-badge--product-title.js |
302 B |
build/product-image-frontend.js |
1.91 kB |
build/product-rating.js |
772 B |
build/product-sale-badge.js |
817 B |
build/product-sku.js |
379 B |
build/product-summary-frontend.js |
1.29 kB |
build/product-summary.js |
920 B |
build/product-tag-list.js |
497 B |
build/single-product.js |
10 kB |
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js |
5.26 kB |
build/wc-blocks-data.js |
15.9 kB |
build/wc-blocks-editor-style-rtl.css |
5.24 kB |
build/wc-blocks-editor-style.css |
5.24 kB |
build/wc-blocks-google-analytics.js |
1.56 kB |
build/wc-blocks-middleware.js |
932 B |
build/wc-blocks-registry.js |
2.79 kB |
build/wc-blocks-shared-context.js |
1.52 kB |
build/wc-blocks-shared-hocs.js |
1.72 kB |
build/wc-blocks-vendors-style-rtl.css |
1.95 kB |
build/wc-blocks-vendors-style.css |
1.95 kB |
build/wc-blocks.js |
2.62 kB |
build/wc-payment-method-bacs.js |
816 B |
build/wc-payment-method-cheque.js |
811 B |
build/wc-payment-method-cod.js |
909 B |
build/wc-payment-method-paypal.js |
837 B |
build/wc-settings.js |
2.6 kB |
This PR has been marked as stale because it has not seen any activity within the past 60 days. Our team uses this tool to help surface pull requests that have slipped through review.
If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label - otherwise it will automatically be closed after 10 days.
@Aljullu Re:
I also noticed the stars are not visible in the Site Editor
I have just noticed the same issue occurs for the All Products block. Would you mind having a look?
Thanks for applying the changes and updating this PR, @danieldudzic!
I have just noticed the same issue occurs for the All Products block. Would you mind having a look?
You are right! Could you fill a separate issue for that? I don't think we should block this PR if this is affecting other blocks.
Issue created: https://github.com/woocommerce/woocommerce-blocks/issues/7167
I noticed that some elements get a numeric id (ie:
id="5"). I think that's problematic because ids need to be unique in the page and it's easy to introduce a clash at some point if we only use a number as the id. Ideally we should make sure those ids are really unique, either in the form ofwc-blocks-products-by-rating-5(or something along these lines) or usinguuid()as in GB. I know this is something that is inherited from the Filter by Attribute so it probably makes sense working on both blocks at the same time. However, could you create an issue as well so we don't forget?
I have now created an issue for this, here: https://github.com/woocommerce/woocommerce/issues/42579
In recent PRs, we added loading skeletons to filter blocks. We will need to do the same for the Products by Rating block. @danieldudzic can you create an issue for this?
I have now created an issue for this, here: https://github.com/woocommerce/woocommerce-blocks/issues/7208
Remove this logic when WordPress 6.1 is released.
Remove this logic when WordPress 6.1 is released.
https://github.com/woocommerce/woocommerce-blocks/blob/986cf189df1d5b7afdd149425c3a6f15aeca2fd5/tests/e2e/config/setup.js#L33-L44
:rocket: This comment was generated by the automations bot based on a todo comment in 986cf189df1d5b7afdd149425c3a6f15aeca2fd5 in woocommerce/woocommerce-blocks#7048. cc @danieldudzic
Remove runOnlyWhenGutenbergIsDisabled function and relati...
Remove runOnlyWhenGutenbergIsDisabled function and relative workarounds when WordPress 6.1 is released.
https://github.com/woocommerce/woocommerce-blocks/blob/986cf189df1d5b7afdd149425c3a6f15aeca2fd5/tests/e2e/specs/backend/site-editing-templates.test.js#L132-L143
:rocket: This comment was generated by the automations bot based on a todo comment in 986cf189df1d5b7afdd149425c3a6f15aeca2fd5 in woocommerce/woocommerce-blocks#7048. cc @danieldudzic
Besides that, I noticed that the placeholder title is strangely big compared to the other filter blocks
Thank you for the review!
I'm not seeing the issue with the large placeholder:
