Product Rating block: Fix reviews count not showing on Single Product page #9995

thealexandrelara · 2023-06-26T17:22:00Z

Description

The Product Rating block is currently not showing the reviews count (it should appear after the rating stars). This PR addresses that by checking if the Product Rating block is being used inside the Single Product template, if so, the reviews count is displayed.

Walkthrough

`🤖 Generated by Copilot at 1968c86`

👨‍💻 Enhanced by @thealexandrelara

Add a new attribute isDescendentOfSingleProductTemplate to the ProductRating block class, to determine if the block is rendered inside a single product template (link)
Assign the value of the isDescendentOfSingleProductTemplate attribute to a local variable for easier access in the class methods (link)
Pass the local variable to the anonymous function that filters the rating HTML output, using the use clause (link)
Modify the conditional logic that shows the reviews count HTML, to check both the single product block and the single product template cases (link)

Fixes #9994

Accessibility

I've tested using only a keyboard (no mouse)
I've tested using a screen reader
All animations respect prefers-reduced-motion
All text has at least a 4.5 color contrast with its background

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.

Screenshots

Before	After

Testing

Automated Tests

Changes in this PR are covered by Automated Tests.
- Unit tests
- E2E tests

User Facing Testing

Log in to your WordPress dashboard.
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.
On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
On the left-hand side menu, click on Templates. This will open the list of available templates.
Find and select the 'Single Product' template from the list.
When the Classic Product Template renders, click on Transform into Blocks. This will transform the Classic template in a block template if you haven't done it before.
On the top-right side, click on the Save button.
Visit a product with at least 1 review and check that the Reviews count is being shown

Do not include in the Testing Notes

WooCommerce Visibility

WooCommerce Core
Feature plugin
Experimental

Performance Impact

Changelog

Fix reviews count not showing for the Product Rating block when inside the Single Product page

github-actions · 2023-06-26T17:23:54Z

The release ZIP for this PR is accessible via:

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

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
`reviews-frontend.js`	`wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-compose`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`	⚠️
`active-filters-frontend.js`	`wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-url`	⚠️
`all-products-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`attribute-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`cart-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-context`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-blocks`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`checkout-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-blocks-shared-hocs`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-api-fetch`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-plugins`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️
`filter-wrapper-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`	⚠️
`mini-cart-frontend.js`	`wc-price-format`, `wc-settings`, `wp-i18n`, `wp-polyfill`	⚠️
`price-filter-frontend.js`	`react`, `wc-blocks-data-store`, `wc-price-format`, `wc-settings`, `wp-data`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-polyfill`, `wp-url`	⚠️
`rating-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`stock-filter-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-settings`, `wp-a11y`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-url`, `wp-warning`	⚠️
`mini-cart-component-frontend.js`	`lodash`, `react`, `wc-blocks-checkout`, `wc-blocks-data-store`, `wc-blocks-registry`, `wc-price-format`, `wc-settings`, `wp-a11y`, `wp-autop`, `wp-compose`, `wp-data`, `wp-deprecated`, `wp-dom`, `wp-element`, `wp-hooks`, `wp-html-entities`, `wp-i18n`, `wp-is-shallow-equal`, `wp-keycodes`, `wp-polyfill`, `wp-primitives`, `wp-style-engine`, `wp-url`, `wp-warning`, `wp-wordcount`	⚠️

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

TypeScript Errors Report

Files with errors: 464
Total errors: 2213

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

github-actions · 2023-06-26T17:30:33Z

Size Change: -1 B (0%)

Total Size: 1.17 MB

Filename	Size	Change
`build/wc-blocks-style.css`	28 kB	-1 B (0%)

ℹ️ View Unchanged

Filename	Size
`build/active-filters-frontend.js`	8.63 kB
`build/active-filters-wrapper-frontend.js`	7.58 kB
`build/active-filters.js`	7.48 kB
`build/all-products-frontend.js`	12.2 kB
`build/all-products.js`	40.3 kB
`build/all-reviews.js`	7.86 kB
`build/attribute-filter-frontend.js`	23 kB
`build/attribute-filter-wrapper-frontend.js`	7.73 kB
`build/attribute-filter.js`	13.3 kB
`build/blocks-checkout.js`	35.1 kB
`build/breadcrumbs.js`	2.13 kB
`build/cart-blocks/cart-accepted-payment-methods-frontend.js`	1.38 kB
`build/cart-blocks/cart-cross-sells-frontend.js`	253 B
`build/cart-blocks/cart-cross-sells-products--product-price-frontend.js`	2.92 kB
`build/cart-blocks/cart-cross-sells-products-frontend.js`	3.77 kB
`build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js`	5.17 kB
`build/cart-blocks/cart-express-payment-frontend.js`	719 B
`build/cart-blocks/cart-items-frontend.js`	302 B
`build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js`	5.57 kB
`build/cart-blocks/cart-line-items-frontend.js`	1.06 kB
`build/cart-blocks/cart-order-summary-frontend.js`	1.27 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`	655 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`	274 B
`build/cart-blocks/order-summary-heading-frontend.js`	333 B
`build/cart-blocks/order-summary-shipping-frontend.js`	17.1 kB
`build/cart-blocks/order-summary-subtotal-frontend.js`	274 B
`build/cart-blocks/order-summary-taxes-frontend.js`	436 B
`build/cart-blocks/proceed-to-checkout-frontend.js`	1.44 kB
`build/cart-frontend.js`	30 kB
`build/cart.js`	45.2 kB
`build/catalog-sorting.js`	1.7 kB
`build/checkout-blocks/actions-frontend.js`	1.88 kB
`build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js`	4.69 kB
`build/checkout-blocks/billing-address-frontend.js`	1.18 kB
`build/checkout-blocks/contact-information-frontend.js`	2.04 kB
`build/checkout-blocks/express-payment-frontend.js`	1.14 kB
`build/checkout-blocks/fields-frontend.js`	331 B
`build/checkout-blocks/order-note-frontend.js`	1.14 kB
`build/checkout-blocks/order-summary-cart-items-frontend.js`	3.76 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`	274 B
`build/checkout-blocks/order-summary-taxes-frontend.js`	436 B
`build/checkout-blocks/payment-frontend.js`	8.29 kB
`build/checkout-blocks/pickup-options-frontend.js`	4.84 kB
`build/checkout-blocks/shipping-address-frontend.js`	1.18 kB
`build/checkout-blocks/shipping-method-frontend.js`	2.64 kB
`build/checkout-blocks/shipping-methods-frontend.js`	6.41 kB
`build/checkout-blocks/terms-frontend.js`	1.56 kB
`build/checkout-blocks/totals-frontend.js`	360 B
`build/checkout-frontend.js`	31.9 kB
`build/checkout.js`	46.6 kB
`build/customer-account.js`	3.18 kB
`build/featured-category.js`	15.1 kB
`build/featured-product.js`	15.3 kB
`build/filter-wrapper-frontend.js`	14.3 kB
`build/filter-wrapper.js`	2.4 kB
`build/general-style-rtl.css`	1.31 kB
`build/general-style.css`	1.31 kB
`build/handpicked-products.js`	8.05 kB
`build/legacy-template.js`	6.8 kB
`build/mini-cart-component-frontend.js`	30.7 kB
`build/mini-cart-contents-block/cart-button-frontend.js`	1.73 kB
`build/mini-cart-contents-block/checkout-button-frontend.js`	1.81 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/products-table-frontend.js`	588 B
`build/mini-cart-contents-block/shopping-button-frontend.js`	530 B
`build/mini-cart-contents-block/title-frontend.js`	1.9 kB
`build/mini-cart-contents-block/title-items-counter-frontend.js`	1.59 kB
`build/mini-cart-contents-block/title-label-frontend.js`	1.53 kB
`build/mini-cart-contents.js`	18.1 kB
`build/mini-cart-frontend.js`	2.85 kB
`build/mini-cart.js`	5.92 kB
`build/price-filter-frontend.js`	14.6 kB
`build/price-filter-wrapper-frontend.js`	6.77 kB
`build/price-filter.js`	8.56 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`	250 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.84 kB
`build/product-best-sellers.js`	8.36 kB
`build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js`	955 B
`build/product-button-frontend.js`	2.65 kB
`build/product-button.js`	3.97 kB
`build/product-categories.js`	2.7 kB
`build/product-category.js`	9.37 kB
`build/product-collection.js`	12.3 kB
`build/product-image-frontend.js`	2.61 kB
`build/product-image.js`	4.14 kB
`build/product-new.js`	8.65 kB
`build/product-on-sale.js`	8.65 kB
`build/product-price-frontend.js`	204 B
`build/product-price.js`	1.68 kB
`build/product-query.js`	11.9 kB
`build/product-rating-frontend.js`	2.33 kB
`build/product-rating.js`	1.03 kB
`build/product-results-count.js`	1.66 kB
`build/product-sale-badge-frontend.js`	1.79 kB
`build/product-sale-badge.js`	666 B
`build/product-search.js`	2.63 kB
`build/product-sku-frontend.js`	1.83 kB
`build/product-sku.js`	535 B
`build/product-stock-indicator-frontend.js`	2.03 kB
`build/product-stock-indicator.js`	731 B
`build/product-summary-frontend.js`	2.25 kB
`build/product-summary.js`	1 kB
`build/product-tag.js`	9.01 kB
`build/product-template.js`	3.34 kB
`build/product-title-frontend.js`	2.21 kB
`build/product-title.js`	3.66 kB
`build/product-top-rated.js`	8.91 kB
`build/products-by-attribute.js`	9.75 kB
`build/rating-filter-frontend.js`	21.4 kB
`build/rating-filter-wrapper-frontend.js`	6.23 kB
`build/rating-filter.js`	6.93 kB
`build/reviews-by-category.js`	12.1 kB
`build/reviews-by-product.js`	13.3 kB
`build/reviews-frontend.js`	7.17 kB
`build/single-product.js`	11.1 kB
`build/stock-filter-frontend.js`	21.7 kB
`build/stock-filter-wrapper-frontend.js`	6.48 kB
`build/stock-filter.js`	7.66 kB
`build/store-notices.js`	1.68 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js`	6.84 kB
`build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js`	4.19 kB
`build/vendors--attribute-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.4 kB
`build/vendors--price-filter-wrapper-frontend.js`	2.2 kB
`build/vendors--product-add-to-cart-frontend.js`	7.25 kB
`build/vendors--rating-filter-wrapper-frontend.js`	5.11 kB
`build/vendors--stock-filter-wrapper-frontend.js`	5.11 kB
`build/wc-blocks-data.js`	22.3 kB
`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-vendors-style-rtl.css`	1.96 kB
`build/wc-blocks-vendors-style.css`	1.96 kB
`build/wc-blocks-vendors.js`	65.1 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.4 kB
`build/woo-directives-runtime.js`	2.73 kB
`build/woo-directives-vendors.js`	7.91 kB

_{compressed-size-action}

…e-product-page

gigitux

Thanks for working on the fix! LGTM!

… page (#9995) * Fix reviews count not showing on Single Product page * Fix css style

* Product Rating block > Ensure the customer reviews text is linked to the relevant reviews (#9998) * Fix reviews count not showing on Single Product page * Fix css style * Product Rating block: Ensure the Customer reviews text is linked to the relevant reviews when used within the Single Product Template. When used within the Single Product Block, the link directs the user to the product template. Additionally, clear out\ PHPCS warnings. * remove unnecessary call to wc_get_star_rating_html --------- Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> * Product Rating block: Fix reviews count not showing on Single Product page (#9995) * Fix reviews count not showing on Single Product page * Fix css style * Single Product: Fix Product SKU not loading for different variations (#9990) * Single Product: Fix incorrect add to cart form markup (#9986) * Product Image Gallery block: Fix overflow when multiple images are used (#10013) * Fix Product Image Gallery block overflow when multiple images are used * Increase css specificity for the Product Image Gallery images * Fix whitespace * Fix style issue when using smaller images in the product image gallery * Empty commit for release pull request * update version * add testing instructions * update zip link * Product Rating: append #reviews on the Single Product Block (#10040) * Product Rating: append #reviews on the Single Product Block * refactor after feedback * fix version * update zip link * Single Product Block: avoid to register incompatibility blocks with the Single Product Block on the post/page editor (#10044) * update testing instructions * update zip link --------- Co-authored-by: Patricia Hillebrandt <patriciahillebrandt@gmail.com> Co-authored-by: Alexandre Lara <allexandrelara@gmail.com> Co-authored-by: Daniel Dudzic <daniel.dudzic@automattic.com> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Luigi <gigitux@gmail.com>

Fix reviews count not showing on Single Product page

1968c86

Fix css style

076bd1b

thealexandrelara self-assigned this Jun 26, 2023

thealexandrelara added type: bug The issue/PR concerns a confirmed bug. block: product rating Issues related to the Product Rating block labels Jun 26, 2023

thealexandrelara marked this pull request as ready for review June 26, 2023 18:12

thealexandrelara requested review from gigitux and nefeline June 26, 2023 18:12

woocommercebot requested a review from a team June 26, 2023 18:12

nefeline mentioned this pull request Jun 26, 2023

Product Rating block > Ensure the customer reviews text is linked to the relevant reviews #9998

Merged

3 tasks

Merge branch 'trunk' into fix/9994-reviews-count-not-showing-on-singl…

9e742f2

…e-product-page

gigitux approved these changes Jun 27, 2023

View reviewed changes

github-actions bot added this to the 10.6.0 milestone Jun 27, 2023

github-actions bot added the status: ready to merge label Jun 27, 2023

thealexandrelara merged commit d8cda16 into trunk Jun 27, 2023

thealexandrelara deleted the fix/9994-reviews-count-not-showing-on-single-product-page branch June 27, 2023 10:50

github-actions bot removed the status: ready to merge label Jun 27, 2023

gigitux modified the milestones: 10.6.0, 10.4.5 Jun 29, 2023

gigitux pushed a commit that referenced this pull request Jun 29, 2023

Product Rating block: Fix reviews count not showing on Single Product…

84cbb32

… page (#9995) * Fix reviews count not showing on Single Product page * Fix css style

gigitux mentioned this pull request Jun 30, 2023

Update WooCommerce Blocks to 10.4.5 woocommerce/woocommerce#39048

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Product Rating block: Fix reviews count not showing on Single Product page #9995

Product Rating block: Fix reviews count not showing on Single Product page #9995

thealexandrelara commented Jun 26, 2023 •

edited

Loading

github-actions bot commented Jun 26, 2023 •

edited

Loading

github-actions bot commented Jun 26, 2023 •

edited

Loading

gigitux left a comment

Product Rating block: Fix reviews count not showing on Single Product page #9995

Product Rating block: Fix reviews count not showing on Single Product page #9995

Conversation

thealexandrelara commented Jun 26, 2023 • edited Loading

Description

Walkthrough

🤖 Generated by Copilot at 1968c86

Accessibility

Other Checks

Screenshots

Testing

Automated Tests

User Facing Testing

WooCommerce Visibility

Performance Impact

Changelog

github-actions bot commented Jun 26, 2023 • edited Loading

Script Dependencies Report

TypeScript Errors Report

github-actions bot commented Jun 26, 2023 • edited Loading

gigitux left a comment

Choose a reason for hiding this comment

thealexandrelara commented Jun 26, 2023 •

edited

Loading

`🤖 Generated by Copilot at 1968c86`

github-actions bot commented Jun 26, 2023 •

edited

Loading

github-actions bot commented Jun 26, 2023 •

edited

Loading