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

Product Rating block: Hide rating when the product has no reviews #9556

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented May 19, 2023

Description

πŸ€– Generated by Copilot at e4efbf4

πŸ‘¨β€πŸ’» Enhanced by @thealexandrelara

Removed the AddReview component from the rating block and replaced it with a mocked rating component for products with no reviews.

Walkthrough

πŸ€– Generated by Copilot at e4efbf4

πŸ‘¨β€πŸ’» Enhanced by @thealexandrelara

  • Remove AddReview component and related logic from rating block (link, link, link, link, link)
  • Add shouldDisplayMockedReviewsWhenProductHasNoReviews prop to rating block to toggle mocked rating component when on the Editor (link, link)
  • Render mocked rating component when product has no reviews and shouldDisplayMockedReviewsWhenProductHasNoReviews prop is true (link, link)

Fixes #9270

Accessibility

Other Checks

  • This PR adds/removes a feature flag & I've updated this doc.
  • This PR adds/removes an experimental interfaces and I've updated this doc.
  • I tagged two reviewers because this PR makes queries to the database or I think it might have some security impact.

User Facing Testing

Product Rating block inside Single Product Block with a selected product that contains reviews

On Editor:

Before After
image image

On Frontend:

Before After
image image
  1. Log in to your WordPress dashboard.
  2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
  3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
  4. On the left-hand side menu, click on Templates. This will open the list of available templates.
  5. Find and select any template from the list.
  6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
  7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
  8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
  9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
  10. Within the content area of the Single Product block, click on the '+' button to add a new block.
  11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
  12. Once the block is added to the template, make sure the rating stars and reviews count appears for the selected product.
  13. On the top-right side, click on the Save button.
  14. Visit a product and check if the Product Rating block is displayed with the rating stars and reviews count.

Product Rating block inside Single Product Block with a selected product that has NO reviews

On Editor:

Before After
image image

On Frontend:

Before After
image image
  1. Log in to your WordPress dashboard.
  2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
  3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
  4. On the left-hand side menu, click on Templates. This will open the list of available templates.
  5. Find and select any template from the list.
  6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
  7. In the block library that pops up, you can search for the 'Single Product' block. You can do this by typing 'Single Product' into the search bar at the top of the block library.
  8. Click on the 'Single Product' block to add it to the template. You'll be prompted to select a product from your WooCommerce store to feature in the block. Make sure to select a product that contains at least one review.
  9. Once you've selected a product, the block will be inserted into your template and will display information about the product you've selected.
  10. Within the content area of the Single Product block, click on the '+' button to add a new block.
  11. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
  12. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for the selected product.
  13. On the top-right side, click on the Save button.
  14. Visit a product and check if the Product Rating block is hidden.

Product Rating block inside Related Products Block

On Editor:

Before After
image image

On Frontend:

Before After
image image
  1. Log in to your WordPress dashboard.
  2. From your WordPress dashboard, go to Appearance > Themes. Make sure you have a block-based theme installed and activated. If not, you can install one from the Add New option. Block-based themes include "Twenty-twenty Two," "Twenty-twenty Three," etc.
  3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
  4. On the left-hand side menu, click on Templates. This will open the list of available templates.
  5. Find and select any template from the list.
  6. Inside the Site editor, click on the '+' button, usually found at the top left of the editing space or within the content area itself, to add a new block.
  7. In the block library that pops up, you can search for the 'Related Products' block. You can do this by typing 'Related Products' into the search bar at the top of the block library.
  8. Click on the 'Related Products' block to add it to the template.
  9. Within the content area of the Related Products block, click on the '+' button to add a new block.
  10. In the block library that pops up, you can search for the 'Product Rating' block. You can do this by typing 'Product Rating' into the search bar at the top of the block library.
  11. Once the block is added to the template, make sure the rating stars appears empty and the reviews count is not displayed for products that has no reviews, but the stars appears filled with the rating for products that contains reviews.
  12. On the top-right side, click on the Save button.
  13. Visit a product and check if the Product Rating block is hidden for products with no reviews, and is displayed for products with reviews.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Hide the Product Rating when the product has no reviews. Previously, a link to the Reviews section was displayed

@thealexandrelara thealexandrelara self-assigned this May 19, 2023
@thealexandrelara thealexandrelara changed the title Remove Add Review link and hide rating when the Product has no rating Product Rating block: Hide rating when the product has no reviews May 19, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 19, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-9556.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: 472
  • Total errors: 2267

πŸŽ‰ πŸŽ‰ This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 19, 2023

Size Change: -97 B (0%)

Total Size: 1.09 MB

Filename Size Change
build/all-products.js 39.9 kB +10 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 kB -24 B (-1%)
build/cart-frontend.js 29.7 kB +2 B (0%)
build/cart.js 45 kB -29 B (0%)
build/product-rating-frontend.js 2.28 kB -28 B (-1%)
build/product-rating.js 971 B -28 B (-3%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-wrapper-frontend.js 7.62 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 11.9 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.05 kB
build/attribute-filter-wrapper-frontend.js 4.28 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.94 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.51 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 656 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.63 kB
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 333 B
build/cart-blocks/order-summary-shipping-frontend.js 17 kB
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.7 kB
build/checkout-blocks/billing-address-frontend.js 1.18 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 330 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.69 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.29 kB
build/checkout-blocks/pickup-options-frontend.js 4.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-methods-frontend.js 6.36 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 312 B
build/checkout-frontend.js 31.3 kB
build/checkout.js 46.3 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15 kB
build/featured-product.js 15.2 kB
build/filter-wrapper-frontend.js 14.2 kB
build/filter-wrapper.js 2.39 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 8 kB
build/legacy-template.js 6.45 kB
build/mini-cart-component-frontend.js 28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.73 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.74 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 266 B
build/mini-cart-contents-block/footer-frontend.js 4.1 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 591 B
build/mini-cart-contents-block/shopping-button-frontend.js 528 B
build/mini-cart-contents-block/title-frontend.js 1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.61 kB
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.15 kB
build/mini-cart.js 4.35 kB
build/price-filter-wrapper-frontend.js 6.75 kB
build/price-filter.js 8.47 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 251 B
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.52 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 963 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.35 kB
build/product-collection.js 3.39 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.18 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-query.js 11.7 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 535 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 731 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 904 B
build/product-tag.js 8.97 kB
build/product-template.js 3.27 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.3 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.11 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.61 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js 6.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-filter-wrapper-frontend.js 5.11 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.57 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.4 kB
build/vendors--checkout-blocks/pickup-options--checkout-blocks/shipping-methods-frontend.js 8.25 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.11 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.75 kB
build/wc-blocks-style-rtl.css 27.8 kB
build/wc-blocks-style.css 27.8 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 65 kB
build/wc-blocks.js 3.7 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.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@thealexandrelara thealexandrelara added type: enhancement The issue is a request for an enhancement. block: product rating Issues related to the Product Rating block labels May 22, 2023
@thealexandrelara thealexandrelara marked this pull request as ready for review May 22, 2023 18:04
@woocommercebot woocommercebot requested review from a team and danieldudzic and removed request for a team May 22, 2023 18:04
@thealexandrelara thealexandrelara requested a review from gigitux May 23, 2023 12:53
Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

:shipit:
I will approve this PR, but let me tag @shaunandrews that could have some feedback that we could take care of in a follow-up PR if necessary.

@github-actions github-actions bot added this to the 10.4.0 milestone May 25, 2023
@thealexandrelara thealexandrelara merged commit 3a2ab1c into trunk May 25, 2023
@thealexandrelara thealexandrelara deleted the feat/9270-hide-add-review-link-from-product-rating-block branch May 25, 2023 14:49
@shaunandrews
Copy link

I think there could some confusion that 5 faded stars represents a 0 (zero) average rating, rather than a lack of ratings. These are two very different things. Instead, maybe we show a label that says "No reviews."

CleanShot 2023-05-25 at 14 35 01@2x

@gigitux
Copy link
Contributor

gigitux commented May 26, 2023

we show a label that says "No reviews."

Thanks for the feedback, @shaunandrews! Should we show the label only on the site editor or on the front end as well?

cc @thealexandrelara

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: product rating Issues related to the Product Rating block type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Rating block: Nothing happens when clicking on Add review link
3 participants