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

Product Details Block > Fix the review form rating #8431

Open
wants to merge 28 commits into
base: trunk
Choose a base branch
from

Conversation

nefeline
Copy link
Contributor

@nefeline nefeline commented Feb 15, 2023

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
Screenshot 2023-01-31 at 20 39 50 Screenshot 2023-02-16 at 15 48 13

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

  • 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.

thealexandrelara and others added 24 commits January 17, 2023 18:57
…block is used alongside the Classic Single Product Block.
@woocommercebot woocommercebot requested review from a team and Aljullu and removed request for a team February 15, 2023 08:44
@nefeline nefeline self-assigned this Feb 15, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2023

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
Copy link
Contributor

github-actions bot commented Feb 15, 2023

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

Copy link
Contributor

@gigitux gigitux left a comment

Choose a reason for hiding this comment

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

Thanks for working on this fix! In any case, I'm not sure of the outcome.

If the Product Details is added in a template where the Classic Template block isn't added, I see the select instead of the stars 🤔

Should we continue to render the stars, right?

* @return array The updated comment form arguments.
*/
public function review_comment_form( $comment_form ) {
$comment_form['comment_field'] = '<div class="comment-form-rating"><label for="rating">' . esc_html__( 'Your rating', 'woo-gutenberg-products-block' ) . ( wc_review_ratings_required() ? '&nbsp;<span class="required">*</span>' : '' ) . '</label><select name="rating" id="rating-select" required>
Copy link
Contributor

Choose a reason for hiding this comment

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

If we can fix the stars issue, I think that we should add this logic too.

Base automatically changed from feat/add-single-product-details-block to trunk February 16, 2023 10:18
Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Thanks for working on this, @nefeline! I can confirm it solves the issue.

I'm not 100% sure about this solution, though. To me, it might be better to update the script that adds the stars in WC core so it supports several instances of #rating. Sidenote: if we go that route, we should probably also change the selector to not use an id, ie: select[name='rating'].

I don't have a strong opinion, though. The template is using ids so having the Product Details block + the Classic Template in the same template will give unexpected issues, anyway.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 1, 2023

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 github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 1, 2023
@danielwrobert danielwrobert added type: cooldown Things that are queued for a cooldown period (assists with planning). block: single product Issues related to the single product block. block-type: product Issues related to/affecting all blocks related to products. focus: template Related to API powering block template functionality in the Site Editor and removed status: stale Stale issues and PRs have had no updates for 60 days. focus: template Related to API powering block template functionality in the Site Editor block-type: product Issues related to/affecting all blocks related to products. labels Mar 23, 2023
@github-actions
Copy link
Contributor

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 github-actions bot added the status: stale Stale issues and PRs have had no updates for 60 days. label Mar 31, 2023
@github-actions github-actions bot removed the status: stale Stale issues and PRs have had no updates for 60 days. label Apr 28, 2023
@gigitux
Copy link
Contributor

gigitux commented Jun 5, 2023

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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: single product Issues related to the single product block. focus: template Related to API powering block template functionality in the Site Editor type: cooldown Things that are queued for a cooldown period (assists with planning).
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Single Product Details Block > Duplicated star ratings
5 participants