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

Avoid changing the markup of all ratings when the Product Rating block is present in the page #8247

Merged
merged 1 commit into from
Jan 20, 2023
Merged

Avoid changing the markup of all ratings when the Product Rating block is present in the page #8247

merged 1 commit into from
Jan 20, 2023

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jan 20, 2023 •
edited by nielslange
Loading

See previous discussion in #8202 (comment).

Testing

User Facing Testing

  1. Make sure a product has an average rating of 4 or less.
  2. With TT3, go to Appearance > Editor.
  3. Edit the Product Catalog template, adding the Products block above the WooCommerce Product Grid Block:

3. You might want to add a title above each of those blocks to help you distinguish them in the frontend. 4. Go to the frontend and verify the rating markup of the WooCommerce Product Grid block is not filtered. To verify it, scroll down to the WooCommerce Product Grid block and check that the "empty" star in the rating is outlined instead of dimmed:
Before After
imatge imatge

Note: the Products block is expected to have dimmed stars instead of outlined ones. This testing steps refers to the WooCommerce Product Grid block.

  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Enhancement: Prevent an edge case where adding the Product blocks above the Classic Template block would cause its ratings to change the markup.

@Aljullu Aljullu mentioned this pull request Jan 20, 2023
Merged
4 tasks
@github-actions
Copy link
Contributor

github-actions bot commented Jan 20, 2023 •
edited
Loading

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8247.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 Removed
wc-blocks.js wp-blocks, wp-compose, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives ⚠️
active-filters.js lodash, react, wc-blocks-data-store, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
all-products.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-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
all-reviews.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives ⚠️
attribute-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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.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-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, 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 ⚠️
catalog-sorting.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
checkout.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-core-data, wp-data, wp-deprecated, wp-dom, wp-editor, 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 ⚠️
customer-account.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
featured-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
featured-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
filter-wrapper.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
handpicked-products.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
legacy-template.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart.js react, wc-price-format, wc-settings, wp-block-editor, wp-blocks, wp-components, wp-dom, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
mini-cart-contents.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-blocks-registry, wc-price-format, wc-settings, wp-a11y, wp-autop, wp-block-editor, 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-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
store-notices.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
price-filter.js lodash, react, wc-blocks-data-store, wc-price-format, 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 ⚠️
product-best-sellers.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-category.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-categories.js wp-block-editor, wp-blocks, wp-components, wp-element, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render ⚠️
product-new.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-on-sale.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-query.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-data, wp-element, wp-hooks, wp-i18n, wp-polyfill, wp-primitives, wp-url ⚠️
product-results-count.js wp-block-editor, wp-blocks, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-search.js wc-settings, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-element, wp-i18n, wp-polyfill, wp-primitives ⚠️
product-tag.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
product-top-rated.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
products-by-attribute.js lodash, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-polyfill, wp-primitives, wp-server-side-render, wp-url ⚠️
rating-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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 ⚠️
reviews-by-category.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
reviews-by-product.js lodash, react, wc-settings, wp-api-fetch, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-element, wp-escape-html, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url ⚠️
single-product.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-api-fetch, wp-autop, wp-block-editor, wp-blocks, wp-components, wp-compose, wp-data, wp-deprecated, wp-dom, wp-element, wp-escape-html, wp-hooks, wp-html-entities, wp-i18n, wp-is-shallow-equal, wp-polyfill, wp-primitives, wp-url, wp-warning, wp-wordcount ⚠️
stock-filter.js lodash, react, wc-blocks-checkout, wc-blocks-data-store, wc-settings, wp-a11y, wp-block-editor, wp-blocks, wp-components, 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 ⚠️

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

TypeScript Errors Report

  • Files with errors: 496
  • Total errors: 2250

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

Size Change: -29 B (0%)

Total Size: 1.08 MB

Filename Size Change
build/wc-blocks-style-rtl.css 25.6 kB -14 B (0%)
build/wc-blocks-style.css 25.6 kB -15 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.99 kB
build/active-filters-wrapper-frontend.js 6.01 kB
build/active-filters.js 7.31 kB
build/all-products-frontend.js 11.6 kB
build/all-products.js 33.4 kB
build/all-reviews.js 7.67 kB
build/attribute-filter-frontend.js 22.9 kB
build/attribute-filter-wrapper-frontend.js 7.68 kB
build/attribute-filter.js 12.4 kB
build/blocks-checkout.js 41 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-frontend.js 9.61 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-express-payment-frontend.js 722 B
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.33 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.25 kB
build/cart-blocks/cart-totals-frontend.js 321 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.69 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 456 B
build/cart-blocks/order-summary-shipping-frontend.js 14.9 kB
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 435 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.24 kB
build/cart-frontend.js 28.5 kB
build/cart.js 47.5 kB
build/catalog-sorting.js 1.71 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.91 kB
build/checkout-blocks/billing-address-frontend.js 1.15 kB
build/checkout-blocks/contact-information-frontend.js 2.04 kB
build/checkout-blocks/express-payment-frontend.js 1.13 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.67 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.85 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB
build/checkout-blocks/order-summary-fee-frontend.js 277 B
build/checkout-blocks/order-summary-frontend.js 1.25 kB
build/checkout-blocks/order-summary-shipping-frontend.js 14.9 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 8.33 kB
build/checkout-blocks/pickup-options-frontend.js 2.78 kB
build/checkout-blocks/shipping-address-frontend.js 1.11 kB
build/checkout-blocks/shipping-method-frontend.js 2.26 kB
build/checkout-blocks/shipping-methods-frontend.js 4.83 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 324 B
build/checkout-frontend.js 30.1 kB
build/checkout.js 43.3 kB
build/customer-account.js 3.08 kB
build/featured-category.js 13.1 kB
build/featured-product.js 13.4 kB
build/filter-wrapper-frontend.js 14.1 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 7.24 kB
build/legacy-template.js 2.87 kB
build/mini-cart-component-frontend.js 27.7 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 2.82 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 590 B
build/mini-cart-contents-block/shopping-button-frontend.js 313 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 16.9 kB
build/mini-cart-frontend.js 1.88 kB
build/mini-cart.js 4.29 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 7.01 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 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.71 kB
build/product-add-to-cart.js 8.47 kB
build/product-best-sellers.js 7.61 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 439 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 257 B
build/product-button-frontend.js 2.14 kB
build/product-button.js 3.84 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 1.14 kB
build/product-category-list.js 503 B
build/product-category.js 8.6 kB
build/product-image-frontend.js 2.14 kB
build/product-image.js 3.94 kB
build/product-new.js 7.6 kB
build/product-on-sale.js 7.93 kB
build/product-price-frontend.js 2.18 kB
build/product-price.js 1.54 kB
build/product-query.js 5.95 kB
build/product-rating-frontend.js 1.57 kB
build/product-rating.js 920 B
build/product-results-count.js 1.68 kB
build/product-sale-badge-frontend.js 1.37 kB
build/product-sale-badge.js 812 B
build/product-search.js 2.62 kB
build/product-sku-frontend.js 629 B
build/product-sku.js 377 B
build/product-stock-indicator-frontend.js 1.26 kB
build/product-stock-indicator.js 645 B
build/product-summary-frontend.js 1.53 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 1.13 kB
build/product-tag-list.js 496 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.57 kB
build/product-title.js 3.31 kB
build/product-top-rated.js 7.84 kB
build/products-by-attribute.js 8.52 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 7.43 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.14 kB
build/single-product-frontend.js 17.7 kB
build/single-product.js 9.99 kB
build/stock-filter-frontend.js 21.1 kB
build/stock-filter-wrapper-frontend.js 5.87 kB
build/stock-filter.js 8.17 kB
build/store-notices.js 1.64 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.86 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 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-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.53 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.83 kB
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB
build/vendors--checkout-blocks/shipping-methods-frontend.js 9.48 kB
build/wc-blocks-data.js 21.6 kB
build/wc-blocks-editor-style-rtl.css 5.41 kB
build/wc-blocks-editor-style.css 5.41 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 933 B
build/wc-blocks-registry.js 3.16 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 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 64.2 kB
build/wc-blocks.js 2.63 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 29.7 kB

compressed-size-action

@Aljullu Aljullu self-assigned this Jan 20, 2023
@Aljullu Aljullu added status: needs review block: single product Issues related to the single product block. block-type: product elements Issues related to Product Element blocks. labels Jan 20, 2023
@Aljullu Aljullu marked this pull request as ready for review January 20, 2023 12:13
@woocommercebot woocommercebot requested review from a team and danieldudzic and removed request for a team January 20, 2023 12:13
kmanijak
kmanijak approved these changes Jan 20, 2023
View reviewed changes
Copy link
Contributor

@kmanijak kmanijak left a comment

Choose a reason for hiding this comment

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

Nice one, I appreciate the fix! 🎉

Also it tests nicely:

  • ✅ Products block - "empty" stars are dimmed

  • ✅ Classic Template - "empty" stars are empty

  • ✅ I checked All Products as well and it behaves like Products - "empty" stars are dimmed

@github-actions github-actions bot added this to the 9.5.0 milestone Jan 20, 2023
danieldudzic
danieldudzic approved these changes Jan 20, 2023
View reviewed changes
Copy link
Contributor

@danieldudzic danieldudzic left a comment

Choose a reason for hiding this comment

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

Tested, and LGTM!

@Aljullu Aljullu merged commit c65fe1c into trunk Jan 20, 2023
@Aljullu Aljullu deleted the fix/product-rating-not-affect-classic-template branch January 20, 2023 13:44
@nielslange nielslange added the type: enhancement The issue is a request for an enhancement. label Jan 30, 2023
@tarhi-saad tarhi-saad mentioned this pull request Feb 16, 2023
Merged
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@kmanijak kmanijak kmanijak approved these changes

@danieldudzic danieldudzic danieldudzic approved these changes

Assignees

@Aljullu Aljullu

Labels
block: single product Issues related to the single product block. block-type: product elements Issues related to Product Element blocks. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Milestone
9.5.0
Development

Successfully merging this pull request may close these issues.
4 participants
@Aljullu @danieldudzic @kmanijak @nielslange