Product Details Block > Fix the review form rating

[nefeline]

trafficstars

While working on the new Single Product Details block, we noticed the star ratings are duplicated when this block is used alongside the classic Single Product block.

Fixes woocommerce/woocommerce#42475

Screenshots

Before	After

Testing

User Facing Testing

1. Enable a block theme in your WordPress installation (go to Appearance > Themes, and select one of the block themes options, such as Twenty-Twenty-Three);
2. Once the theme is enabled, go to Appearance > Editor (Beta);
3. On the left side menu, click on Templates;
4. Select the Single Product template, and click Edit;
5. Using the Block Inserter, type: Product Details and add it to the Editor while keeping the pre-existing WooCommerce Product Block that comes by default with the template.
6. Save the changes. Access your website and click on a product;
7. Make sure the Single Product Details block is properly rendered and contains the product description (Description tab), product attributes (Additional Information tab), and product reviews (Reviews tab).
8. On the product reviews tab, ensure the review form is properly displayed (as demonstrated in the screenshot for this PR).

WooCommerce Visibility

• [x] WooCommerce Core
• [ ] Feature plugin
• [ ] Experimental

Changelog

Ensure the review form is properly rendered when the Product Details block is used alongside the Classic Single Product Block.

[github-actions[bot]]

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions[bot]]

Size Change: +74 B (0%)

Total Size: 1.1 MB

Filename	Size	Change
build/wc-blocks-style-rtl.css	26.7 kB	+37 B (0%)
build/wc-blocks-style.css	26.7 kB	+37 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	7.98 kB
build/active-filters-wrapper-frontend.js	6 kB
build/active-filters.js	7.32 kB
build/add-to-cart-form.js	1.48 kB
build/all-products-frontend.js	11.7 kB
build/all-products.js	34.6 kB
build/all-reviews.js	7.66 kB
build/attribute-filter-frontend.js	22.9 kB
build/attribute-filter-wrapper-frontend.js	7.67 kB
build/attribute-filter.js	12.3 kB
build/blocks-checkout.js	41.2 kB
build/breadcrumbs.js	2.04 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.7 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5.17 kB
build/cart-blocks/cart-express-payment-frontend.js	720 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.36 kB
build/cart-blocks/cart-line-items-frontend.js	1.07 kB
build/cart-blocks/cart-order-summary-frontend.js	1.24 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	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	274 B
build/cart-blocks/order-summary-heading-frontend.js	455 B
build/cart-blocks/order-summary-shipping-frontend.js	14.8 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.7 kB
build/cart.js	47.2 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	3.92 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	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.78 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.24 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.43 kB
build/checkout-blocks/pickup-options-frontend.js	2.8 kB
build/checkout-blocks/shipping-address-frontend.js	1.14 kB
build/checkout-blocks/shipping-method-frontend.js	2.27 kB
build/checkout-blocks/shipping-methods-frontend.js	4.78 kB
build/checkout-blocks/terms-frontend.js	1.56 kB
build/checkout-blocks/totals-frontend.js	324 B
build/checkout-frontend.js	30.3 kB
build/checkout.js	43.7 kB
build/customer-account.js	3.12 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.39 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.85 kB
build/mini-cart-component-frontend.js	27.9 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.79 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	313 B
build/mini-cart-contents-block/title-frontend.js	367 B
build/mini-cart-contents.js	17 kB
build/mini-cart-frontend.js	2 kB
build/mini-cart.js	4.3 kB
build/price-filter-frontend.js	13.9 kB
build/price-filter-wrapper-frontend.js	6.99 kB
build/price-filter.js	8.39 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	253 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.73 kB
build/product-add-to-cart.js	8.63 kB
build/product-best-sellers.js	7.6 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js	496 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-title.js	258 B
build/product-button-frontend.js	2.19 kB
build/product-button.js	3.99 kB
build/product-categories.js	2.36 kB
build/product-category-list-frontend.js	1.19 kB
build/product-category-list.js	503 B
build/product-category.js	8.58 kB
build/product-image-frontend.js	2.2 kB
build/product-image.js	4.09 kB
build/product-new.js	7.58 kB
build/product-on-sale.js	7.91 kB
build/product-price-frontend.js	2.29 kB
build/product-price.js	1.58 kB
build/product-query.js	6.08 kB
build/product-rating-frontend.js	1.62 kB
build/product-rating.js	919 B
build/product-results-count.js	1.65 kB
build/product-sale-badge-frontend.js	1.43 kB
build/product-sale-badge.js	817 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	629 B
build/product-sku.js	378 B
build/product-stock-indicator-frontend.js	1.32 kB
build/product-stock-indicator.js	645 B
build/product-summary-frontend.js	1.58 kB
build/product-summary.js	920 B
build/product-tag-list-frontend.js	1.18 kB
build/product-tag-list.js	497 B
build/product-tag.js	8.06 kB
build/product-title-frontend.js	1.62 kB
build/product-title.js	3.46 kB
build/product-top-rated.js	7.84 kB
build/products-by-attribute.js	8.53 kB
build/rating-filter-frontend.js	21.4 kB
build/rating-filter-wrapper-frontend.js	6.19 kB
build/rating-filter.js	7.4 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.8 kB
build/single-product.js	9.98 kB
build/stock-filter-frontend.js	21.1 kB
build/stock-filter-wrapper-frontend.js	5.85 kB
build/stock-filter.js	8.13 kB
build/store-notices.js	1.65 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.4 kB
build/wc-blocks-editor-style-rtl.css	5.66 kB
build/wc-blocks-editor-style.css	5.67 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.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.4 kB
build/wc-blocks.js	2.65 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
build/wp-directives-runtime.js	2.4 kB
build/wp-directives-vendors.js	7.89 kB

_{compressed-size-action}

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[github-actions[bot]]

This PR has been marked as stale because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review.

If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label.

[gigitux]

I'm removing the issue and this PR from the scope of the Blockified Single Product Template. @nefeline feel free to continue to work on this if you want!