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

Fix Product Rating Block not showing when manually inserted to Single Product Block #9413

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented May 9, 2023

Summary

This solves an issue that was being caused when manually adding the Product Rating block to the Single Product block. The "isDescendentOfSingleProductBlock" attribute is what defines how the Product Rating block will behave depending on the context in which it is inserted. The issue is that when the Product Rating block was manually added, this attribute remained with a false value, so this way the block didn't know that it was inside the context of the Single Product block.

Walkthrough

🤖 Generated by Copilot at 8b7b69e

  • Import useSelect hook from @wordpress/data package to select data from WordPress data store (link)
  • Modify Edit component to use useSelect hook to check if block is a descendent of woocommerce/single-product block and store result in new attribute isDescendentOfSingleProductBlock (link)
  • Conditionally render rating element based on isDescendentOfSingleProductBlock and isDescendentOfQueryLoop attributes (link)
  • Update useEffect hook to set both attributes when component mounts or updates (link)
  • Extend BlockAttributes interface to include new attribute (link)

Fixes #9333

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.

Testing

Automated Tests

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

User Facing Testing

  1. Log in to your WordPress dashboard.
  2. On the left-hand side menu, click on 'Posts' and then 'Add New' to create a new post. Alternatively, if you want to add the block to an existing post, you can simply find that post and click 'Edit'.
  3. Inside the post 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.
  4. 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.
  5. Click on the 'Single Product' block to add it to your post. You'll be prompted to select a product from your WooCommerce store to feature in the block.
  6. Once you've selected a product, the block will be inserted into your post and will display information about the product you've selected.
  7. Click on the 'Single Product' block in your post to select it.
  8. In the blocks list on the left-hand side, you should see different components of the 'Single Product' block that you can select, remove, or modify. These components typically include the product image, title, price, rating, summary, and button.
  9. Find the 'Product Rating' component, click on the three dots to the right side, click Remove. This will remove the product rating from the block.
  10. To add the Product Rating back into the Single Product block, simply click on the 'Single Product' block to select it again.
  11. With the block selected, add the Product Rating block inside it.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@thealexandrelara thealexandrelara self-assigned this May 9, 2023
@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2023

The release ZIP for this PR is accessible via:

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

⚠️ ⚠️ This PR introduces new TS errors on 1 files:

assets/js/atomic/blocks/product-elements/rating/edit.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 9, 2023

Size Change: +91 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/all-products.js 39.1 kB +91 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 12.1 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 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.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 654 B
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 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 332 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 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.6 kB
build/cart.js 44.7 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.73 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.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 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 275 B
build/checkout-blocks/order-summary-frontend.js 1.28 kB
build/checkout-blocks/order-summary-shipping-frontend.js 17.1 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.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 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 14.4 kB
build/featured-product.js 14.7 kB
build/filter-wrapper-frontend.js 14.2 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 kB
build/legacy-template.js 6.33 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.23 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 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-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.88 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-query.js 11.6 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 579 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.02 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.1 kB
build/single-product.js 11.1 kB
build/stock-filter-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.73 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.2 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.58 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--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.91 kB
build/wc-blocks-editor-style.css 5.91 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.7 kB
build/wc-blocks-style.css 27.7 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.2 kB
build/wc-blocks.js 2.62 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 changed the title Fix Product Rating Block not showing when manually inserted to Single… Fix Product Rating Block not showing when manually inserted to Single Product Block May 9, 2023
@thealexandrelara thealexandrelara marked this pull request as ready for review May 10, 2023 14:09
@woocommercebot woocommercebot requested review from a team and nefeline and removed request for a team May 10, 2023 14:10
@thealexandrelara thealexandrelara requested a review from gigitux May 10, 2023 14:13
Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

Works like a charm, well done 🎉 ! I've just left a question.

@@ -33,11 +34,25 @@ const Edit = ( {
...context,
};
const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
const { isDescendentOfSingleProductBlock } = useSelect( ( select ) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it be worth having this logic stored as a React hook for shared usage across all inner blocks for the Single Product? Could other blocks, such as price and add to cart, also benefit from this change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes! I agree with this, today I opened another PR to an issue that I was investigating and I found out that it was being caused by the same thing, so I created a hook in that PR that I'll be using to refactor this and other blocks that need it

Copy link
Contributor

@nefeline nefeline May 12, 2023

Choose a reason for hiding this comment

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

Cool! Looking forward to having #9446 merged so this PR can benefit from this update.

Copy link
Contributor

@nefeline nefeline left a comment

Choose a reason for hiding this comment

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

:shipit:

@github-actions github-actions bot added this to the 10.3.0 milestone May 16, 2023
@thealexandrelara thealexandrelara merged commit a4fb03d into trunk May 16, 2023
@thealexandrelara thealexandrelara deleted the fix/product-rating-not-displaying-when-manually-added-to-single-product-block branch May 16, 2023 18:28
@thealexandrelara thealexandrelara added skip-changelog PRs that you don't want to appear in the changelog. block: single product Issues related to the single product block. block: product rating Issues related to the Product Rating block labels May 17, 2023
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 block: single product Issues related to the single product block. skip-changelog PRs that you don't want to appear in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Rating Block: When it is added manually inside the Single Product Block isn't visible on the frontend
2 participants