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

Fix inconsistent HTML of rating section #5552

Merged
merged 1 commit into from Jan 14, 2022
Merged

Fix inconsistent HTML of rating section #5552

merged 1 commit into from Jan 14, 2022

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Jan 12, 2022 •
edited

Fixes #1916

Notes

In #1916, @dashkevych reported that the underlying HTML code of the rating sections is inconsistent. To solve this issue, I checked which of the current blocks is showing the rating section.

Block Rating type
All Products 1
All Reviews 2
Best Selling Products 3
Hand-picked Products 3
Newest Products 3
On Sale Products 3
Products by Attribute 3
Products by Category 3
Products by Tag 3
Reviews by Category 2
Reviews by Product 2
Single Product 1
Top Rated Products 3
  1. assets/js/atomic/product-elements/rating/block.js
  2. assets/js/base/components/reviews/review-list-item/index.js
  3. src/BlockTypes/AbstractProductGrid.php

Rating type 3 shows the correct HTML code and is defined in:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b72efda06f68d1caa5ab225bfb057489cf92ecd8/src/BlockTypes/AbstractProductGrid.php#L559-L564

This part calls the following WooCommerce core functions:

https://github.com/woocommerce/woocommerce/blob/159ceb3f3548c7d04140b9c8f48236b6afd36fee/plugins/woocommerce/includes/wc-template-functions.php#L3540-L3582

Rating type 1 shows the incorrect HTML code and is defined in:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b72efda06f68d1caa5ab225bfb057489cf92ecd8/assets/js/atomic/blocks/product-elements/rating/block.js#L44-L65

Rating type 2 also shows the incorrect HTML code and is defined in:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/b72efda06f68d1caa5ab225bfb057489cf92ecd8/assets/js/base/components/reviews/review-list-item/index.js#L127-L137

Rating types 1 and 2 have a slightly different logic. While rating type 1 shows individual ratings, rating type 2 shows all the average rating per product. Therefore, their final structure is slightly different.

Screenshots

Rating type 1 - before

<div class="wc-block-components-product-rating wc-block-grid__product-rating">
  <div
    class="wc-block-components-product-rating__stars wc-block-grid__product-rating__stars"
    role="img"
    aria-label="Rated 4.33 out of 5"
  >
    <span style="width: 86.6%;">Rated 4.33 out of 5</span>
  </div>
</div>

Rating type 1 - after

<div class="wc-block-components-product-rating wc-block-grid__product-rating">
  <div
    class="wc-block-components-product-rating__stars wc-block-grid__product-rating__stars"
    role="img"
    aria-label="Rated 4.33 out of 5"
  >
    <span style="width: 86.6%;">
      Rated
      <strong class="rating">4.33</strong>
      out of 5 based on
      <span class="rating">3</span>
      customer ratings
    </span>
  </div>
</div>

Rating type 2 - before

<div class="wc-block-review-list-item__rating wc-block-components-review-list-item__rating">
  <div
    class="wc-block-review-list-item__rating__stars wc-block-components-review-list-item__rating__stars"
    role="img"
    aria-label="Rated 4 out of 5"
  >
    <span style="width: 80%;">Rated 4 out of 5</span>
  </div>
</div>

Rating type 2 - after

<div class="wc-block-review-list-item__rating wc-block-components-review-list-item__rating">
  <div
    class="wc-block-review-list-item__rating__stars wc-block-components-review-list-item__rating__stars"
    role="img"
    aria-label="Rated 4 out of 5"
  >
    <span style="width: 80%;">
      Rated
      <strong class="rating">4</strong>
      out of 5
    </span>
  </div>
</div>

Testing

Manual Testing

Rating type 1 - Single rating

  1. Create a test page and add a rating type 1 block to it, e.g. the All Products block.
  2. Ensure to have one product with one rating.
  3. Look up that product in the All Products block on the frontend.
  4. Inspect the HTML code of the rating section.
  5. Ensure that the HTML code is displayed as mentioned in the screenshot section and the singular translation is visible.

Rating type 1 - Multiple ratings

  1. Create a test page and add a rating type 1 block to it, e.g. the All Products block.
  2. Ensure to have one product with multiple ratings.
  3. Look up that product in the All Products block on the frontend.
  4. Inspect the HTML code of the rating section.
  5. Ensure that the HTML code is displayed as mentioned in the screenshot section and the plural translation is visible.

Rating type 2 - Single rating

  1. Create a test page and add a rating type 2 block to it, e.g. the All Reviews block.
  2. Ensure to at least one product with a rating.
  3. Look up that product in the All Reviews block on the frontend.
  4. Inspect the HTML code of the rating section.
  5. Ensure that the HTML code is displayed as mentioned in the screenshot section.

User Facing Testing

  • Same as above

Changelog

Use consistent HTML code for all rating sections, so that screen readers pronounce the rating correctly.

@nielslange nielslange added type: bug The issue/PR concerns a confirmed bug. focus: global styles Issues that involve styles/css/layout structure. labels Jan 12, 2022
@rubikuserbot rubikuserbot requested review from a team and mikejolley and removed request for a team January 12, 2022 11:39
@nielslange nielslange added block: all products Issues related to the all products block. block: all reviews Issues related to the All Reviews block. block: single product Issues related to the single product block. block: reviews by product Issues related to the Reviews by Product block. block: reviews by category Issues related to the Reviews by Category block. labels Jan 12, 2022
@github-actions
Copy link
Contributor

Size Change: +576 B (0%)

Total Size: 815 kB

Filename Size Change
build/all-products-frontend.js 18.6 kB +1 B (0%)
build/all-products.js 34.7 kB +106 B (0%)
build/all-reviews.js 8.39 kB +45 B (+1%)
build/atomic-block-components/rating-frontend.js 699 B +146 B (+26%) 🚨
build/atomic-block-components/rating.js 700 B +145 B (+26%) 🚨
build/reviews-by-category.js 11.9 kB +42 B (0%)
build/reviews-by-product.js 12.9 kB +43 B (0%)
build/reviews-frontend.js 7.29 kB +46 B (+1%)
build/single-product-frontend.js 22.1 kB +1 B (0%)
build/single-product.js 10.4 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.1 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.76 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 7.05 kB
build/atomic-block-components/add-to-cart.js 6.62 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 852 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/sale-badge-frontend.js 625 B
build/atomic-block-components/sale-badge.js 622 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator-frontend.js 585 B
build/atomic-block-components/stock-indicator.js 585 B
build/atomic-block-components/summary-frontend.js 874 B
build/atomic-block-components/summary.js 872 B
build/atomic-block-components/tag-list-frontend.js 460 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.11 kB
build/atomic-block-components/title.js 1.1 kB
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.6 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.86 kB
build/cart-blocks/filled-cart-frontend.js 766 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.48 kB
build/cart-blocks/order-summary-frontend.js 8.98 kB
build/cart-blocks/totals-frontend.js 320 B
build/cart-frontend.js 45.4 kB
build/cart.js 44.5 kB
build/checkout-blocks/actions-frontend.js 1.44 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 884 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.15 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.38 kB
build/checkout-blocks/shipping-address-frontend.js 971 B
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB
build/checkout-blocks/terms-frontend.js 1.21 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 47.5 kB
build/checkout.js 47.1 kB
build/featured-category.js 8.55 kB
build/featured-product.js 9.91 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.18 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.6 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.46 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.77 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.54 kB
build/product-categories.js 3.48 kB
build/product-category.js 9.11 kB
build/product-new.js 8.44 kB
build/product-on-sale.js 8.8 kB
build/product-search.js 2.47 kB
build/product-tag.js 8.5 kB
build/product-top-rated.js 8.41 kB
build/products-by-attribute.js 9.22 kB
build/stock-filter-frontend.js 6.81 kB
build/stock-filter.js 6.83 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.43 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.55 kB
build/wc-blocks-editor-style.css 4.55 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.7 kB
build/wc-blocks-style.css 21.7 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.6 kB
build/wc-blocks.js 2.96 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.61 kB

compressed-size-action

mikejolley
mikejolley approved these changes Jan 12, 2022
View reviewed changes
Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Looks good. I also tested the single products block which also used the correct markup.

@github-actions github-actions bot added this to the 6.8.0 milestone Jan 12, 2022
@nielslange nielslange merged commit 0d9d693 into trunk Jan 14, 2022
@nielslange nielslange deleted the fix/1916-fix-inconsistent-rating-HTML branch January 14, 2022 11:32
@nielslange nielslange mentioned this pull request Dec 11, 2023
Open
@alexflorisca alexflorisca mentioned this pull request Feb 3, 2022
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@mikejolley mikejolley mikejolley approved these changes

Assignees
No one assigned
Labels
block: all products Issues related to the all products block. block: all reviews Issues related to the All Reviews block. block: reviews by category Issues related to the Reviews by Category block. block: reviews by product Issues related to the Reviews by Product block. block: single product Issues related to the single product block. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
6.8.0
Development

Successfully merging this pull request may close these issues.

The Rating section HTML inconsistency in the products grid
2 participants
@nielslange @mikejolley