Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Make filter by rating preview consistent with default settings #10007

Merged
merged 2 commits into from
Jun 29, 2023

Conversation

roykho
Copy link
Member

@roykho roykho commented Jun 27, 2023

Fixes #9958

This PR updates the preview to be consistent with default settings.

Screenshots

Before After
file.png file.png

Testing

User Facing Testing

  1. Ensure you don't have any product reviews on your store.
  2. Add a new post and add the Filter by Rating block.
  3. Because you don't have any reviews, it will show a preview of what the ratings filter would look like.
  4. Ensure you don't see any product counts because by default, the Display Product count setting is disabled.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Make filter by rating preview consistent with default settings

@roykho roykho added type: bug The issue/PR concerns a confirmed bug. block: filter by rating Issues related to the Filter by Rating block. labels Jun 27, 2023
@woocommercebot woocommercebot requested review from a team and imanish003 and removed request for a team June 27, 2023 14:43
@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10007.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 461
  • Total errors: 2229

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Jun 27, 2023

Size Change: +1.68 kB (0%)

Total Size: 1.17 MB

Filename Size Change
build/active-filters-frontend.js 8.64 kB +12 B (0%)
build/active-filters-wrapper-frontend.js 7.58 kB +7 B (0%)
build/active-filters.js 7.49 kB +5 B (0%)
build/all-products.js 40.3 kB +3 B (0%)
build/all-reviews.js 7.87 kB +3 B (0%)
build/attribute-filter-frontend.js 23 kB +7 B (0%)
build/attribute-filter-wrapper-frontend.js 7.73 kB +7 B (0%)
build/attribute-filter.js 13.3 kB +4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.92 kB +2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.78 kB +11 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -5 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 720 B +1 B (0%)
build/cart-blocks/cart-items-frontend.js 301 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.48 kB -98 B (-2%)
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB +2 B (0%)
build/cart-blocks/cart-totals-frontend.js 307 B -1 B (0%)
build/cart-blocks/empty-cart-frontend.js 346 B +1 B (0%)
build/cart-blocks/filled-cart-frontend.js 656 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB +1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -2 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -2 B (-1%)
build/cart-blocks/order-summary-heading-frontend.js 334 B +1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 17.1 kB +3 B (0%)
build/cart-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/cart-frontend.js 29.9 kB -100 B (0%)
build/cart.js 45 kB -261 B (-1%)
build/catalog-sorting.js 1.7 kB +1 B (0%)
build/checkout-blocks/actions-frontend.js 1.88 kB -1 B (0%)
build/checkout-blocks/billing-address-frontend.js 1.18 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.04 kB -7 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB -1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.76 kB +4 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/order-summary-fee-frontend.js 275 B -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.28 kB +1 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB +4 B (0%)
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B -1 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 435 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 9.27 kB +976 B (+12%) ⚠️
build/checkout-blocks/shipping-address-frontend.js 1.17 kB -1 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.63 kB -4 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 6.41 kB -2 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 361 B +1 B (0%)
build/checkout-frontend.js 31.8 kB -101 B (0%)
build/checkout.js 47.6 kB +983 B (+2%)
build/customer-account.js 3.19 kB +1 B (0%)
build/featured-category.js 15.1 kB +13 B (0%)
build/featured-product.js 15.3 kB +9 B (0%)
build/filter-wrapper-frontend.js 14.2 kB -28 B (0%)
build/filter-wrapper.js 2.4 kB -1 B (0%)
build/handpicked-products.js 8.04 kB -2 B (0%)
build/legacy-template.js 6.82 kB +19 B (0%)
build/mini-cart-component-frontend.js 30.7 kB -14 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB +1 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 1.81 kB +2 B (0%)
build/mini-cart-contents-block/products-table-frontend.js 587 B -1 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 531 B +1 B (0%)
build/mini-cart-contents-block/title-items-counter-frontend.js 1.59 kB +3 B (0%)
build/mini-cart-contents-block/title-label-frontend.js 1.53 kB +3 B (0%)
build/mini-cart-contents.js 18.1 kB -66 B (0%)
build/mini-cart-frontend.js 2.84 kB -1 B (0%)
build/mini-cart.js 5.93 kB +12 B (0%)
build/price-filter-frontend.js 14.7 kB +25 B (0%)
build/price-filter-wrapper-frontend.js 6.79 kB +17 B (0%)
build/price-filter.js 8.56 kB +6 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 272 B +22 B (+9%) 🔍
build/product-add-to-cart-frontend.js 6.52 kB +2 B (0%)
build/product-add-to-cart.js 8.84 kB -7 B (0%)
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 954 B -1 B (0%)
build/product-button-frontend.js 2.67 kB +16 B (+1%)
build/product-categories.js 2.72 kB +12 B (0%)
build/product-category.js 9.37 kB -3 B (0%)
build/product-image-frontend.js 2.63 kB +19 B (+1%)
build/product-image.js 4.14 kB -3 B (0%)
build/product-new.js 8.65 kB -3 B (0%)
build/product-on-sale.js 8.65 kB -3 B (0%)
build/product-price-frontend.js 231 B +27 B (+13%) ⚠️
build/product-price.js 1.68 kB +1 B (0%)
build/product-query.js 11.9 kB +11 B (0%)
build/product-rating-frontend.js 2.35 kB +17 B (+1%)
build/product-rating.js 1.04 kB +6 B (+1%)
build/product-results-count.js 1.65 kB -4 B (0%)
build/product-sale-badge-frontend.js 1.8 kB +15 B (+1%)
build/product-sale-badge.js 665 B -1 B (0%)
build/product-sku-frontend.js 1.85 kB +18 B (+1%)
build/product-stock-indicator-frontend.js 2.04 kB +12 B (+1%)
build/product-stock-indicator.js 730 B -1 B (0%)
build/product-summary-frontend.js 2.26 kB +16 B (+1%)
build/product-summary.js 1.01 kB +4 B (0%)
build/product-tag.js 9.01 kB -7 B (0%)
build/product-template.js 3.34 kB -2 B (0%)
build/product-title-frontend.js 2.22 kB +12 B (+1%)
build/product-title.js 3.66 kB +1 B (0%)
build/product-top-rated.js 8.91 kB +2 B (0%)
build/products-by-attribute.js 9.76 kB +11 B (0%)
build/rating-filter-frontend.js 21.4 kB -16 B (0%)
build/rating-filter-wrapper-frontend.js 6.23 kB -1 B (0%)
build/rating-filter.js 6.92 kB -15 B (0%)
build/reviews-by-category.js 12.1 kB +4 B (0%)
build/reviews-by-product.js 13.3 kB -2 B (0%)
build/reviews-frontend.js 7.17 kB -1 B (0%)
build/single-product.js 11.1 kB -1 B (0%)
build/stock-filter-frontend.js 21.7 kB +4 B (0%)
build/stock-filter-wrapper-frontend.js 6.5 kB +16 B (0%)
build/stock-filter.js 7.67 kB +12 B (0%)
build/store-notices.js 1.69 kB +5 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.83 kB -3 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.2 kB +2 B (0%)
build/vendors--attribute-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB -1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB -5 B (0%)
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB -1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12.4 kB -5 B (0%)
build/vendors--price-filter-wrapper-frontend.js 2.2 kB +1 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/vendors--stock-filter-wrapper-frontend.js 5.11 kB -2 B (0%)
build/wc-blocks-data.js 22.4 kB +37 B (0%)
build/wc-blocks-vendors.js 65.1 kB +11 B (0%)
build/wc-blocks.js 3.71 kB +11 B (0%)
ℹ️ View Unchanged
Filename Size
build/all-products-frontend.js 12.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.13 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/order-summary-taxes-frontend.js 436 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.69 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/pickup-options-frontend.js 4.84 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 267 B
build/mini-cart-contents-block/footer-frontend.js 3.83 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/title-frontend.js 1.9 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-best-sellers.js 8.36 kB
build/product-button.js 3.97 kB
build/product-collection.js 12.3 kB
build/product-search.js 2.63 kB
build/product-sku.js 535 B
build/wc-blocks-editor-style-rtl.css 6.21 kB
build/wc-blocks-editor-style.css 6.21 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 934 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.1 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 28 kB
build/wc-blocks-style.css 27.9 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-interactivity.js 10.4 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
build/wc-shipping-method-pickup-location.js 30.4 kB

compressed-size-action

Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @roykho, I tested the PR and it's working as expected. 🚀

I left one minor suggestion. Also, I noticed that the UI isn't looking as expected. In the screenshot you can see that the number of faded stars is not correct. Since we are providing ratings from 5 to 1, the second row should have 1 faded star at the end, the third row should have 2 faded stars at the end, and so on.
image

Although I don't think this falls within the scope of the current PR, I am pre-approving it. However, feel free to work on fixing the UI in this PR or we can create a new task for it. 🙂

assets/js/blocks/rating-filter/preview.tsx Outdated Show resolved Hide resolved
@github-actions github-actions bot added this to the 10.6.0 milestone Jun 28, 2023
@roykho
Copy link
Member Author

roykho commented Jun 28, 2023

Hi @imanish003 - I've removed the className as suggested. As for the stars not showing correctly, that is a side effect of GB. If you deactivate the GB plugin, you will see it correct. As shown below:
file.png

@imanish003
Copy link
Contributor

Hi @roykho, I just confirmed that disabling Gutenberg fixes the issue. Thank you for explaining it to me. The changes you made look good to me. Well done! 🚀 🚢

@roykho roykho merged commit ad92e31 into trunk Jun 29, 2023
@roykho roykho deleted the fix/filter-by-rating-preview branch June 29, 2023 13:15
@nielslange nielslange mentioned this pull request Jul 6, 2023
5 tasks
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: filter by rating Issues related to the Filter by Rating block. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Filter by Rating Preview discrepancy
2 participants