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

Product Rating block: Add the block to the Single Product template by default #9510

Conversation

thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented May 18, 2023

Description

🤖 Generated by Copilot at 42381e2

This pull request adds the woocommerce/product-rating block to the block-based single product template.

Walkthrough

🤖 Generated by Copilot at 42381e2

👨‍💻 Enhanced by @thealexandrelara

  • Add the woocommerce/product-rating block to the getBlockifiedTemplate function in single-product.ts and the blockified/single-product.html file (link, link)

Fixes #9287

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.

Screenshots

Before After
image image

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. 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.
  3. On the left-hand side menu, click on Appearance > Editor. This will open the Site Editor.
  4. On the left-hand side menu, click on Templates. This will open the list of available templates.
  5. Find and select the Single Product template from the list.
  6. 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.
  7. Make sure the Product Rating block appears below the Product Title block;
  8. On the top right side, click on Save;
  9. Visit a product page and make sure the Product Rating block appears below the Product Title.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Add Product Rating block to the default Single Product template

@thealexandrelara thealexandrelara added type: enhancement The issue is a request for an enhancement. block: product rating Issues related to the Product Rating block labels May 18, 2023
@thealexandrelara thealexandrelara self-assigned this May 18, 2023
@woocommercebot woocommercebot requested review from a team and albarin and removed request for a team May 18, 2023 19:09
@github-actions
Copy link
Contributor

github-actions bot commented May 18, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 18, 2023

Size Change: +8 B (0%)

Total Size: 1.09 MB

Filename Size Change
build/legacy-template.js 6.38 kB +8 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.57 kB
build/active-filters-wrapper-frontend.js 7.62 kB
build/active-filters.js 7.48 kB
build/all-products-frontend.js 11.9 kB
build/all-products.js 40 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-wrapper--stock-filter-wrapper-frontend.js 4.05 kB
build/attribute-filter-wrapper-frontend.js 4.29 kB
build/attribute-filter.js 13.1 kB
build/blocks-checkout.js 35.2 kB
build/breadcrumbs.js 2.05 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js 2.94 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 3.71 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 301 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.5 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 346 B
build/cart-blocks/filled-cart-frontend.js 656 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 272 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 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.8 kB
build/cart.js 45.1 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.7 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 332 B
build/checkout-blocks/order-note-frontend.js 1.14 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 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 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.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.63 kB
build/checkout-blocks/shipping-methods-frontend.js 6.4 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 361 B
build/checkout-frontend.js 31.9 kB
build/checkout.js 46.4 kB
build/customer-account.js 3.18 kB
build/featured-category.js 15 kB
build/featured-product.js 15.2 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 7.99 kB
build/mini-cart-component-frontend.js 28.4 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.74 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.74 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 4.1 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 594 B
build/mini-cart-contents-block/shopping-button-frontend.js 528 B
build/mini-cart-contents-block/title-frontend.js 1.91 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 1.61 kB
build/mini-cart-contents-block/title-label-frontend.js 1.54 kB
build/mini-cart-contents.js 18 kB
build/mini-cart-frontend.js 2.66 kB
build/mini-cart.js 4.35 kB
build/price-filter-wrapper-frontend.js 6.75 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-button--product-image--product-rating--product-title.js 151 B
build/product-add-to-cart-frontend.js 6.51 kB
build/product-add-to-cart.js 8.87 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 964 B
build/product-button-frontend.js 2.65 kB
build/product-button.js 4.01 kB
build/product-categories.js 2.37 kB
build/product-category.js 9.35 kB
build/product-collection.js 4.23 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.18 kB
build/product-new.js 8.64 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-query.js 11.7 kB
build/product-rating-frontend.js 2.28 kB
build/product-rating.js 971 B
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 1.8 kB
build/product-sale-badge.js 666 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1.84 kB
build/product-sku.js 536 B
build/product-stock-indicator-frontend.js 2.02 kB
build/product-stock-indicator.js 730 B
build/product-summary-frontend.js 2.19 kB
build/product-summary.js 905 B
build/product-tag.js 8.97 kB
build/product-template.js 3.26 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.89 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.4 kB
build/rating-filter-wrapper-frontend.js 6.21 kB
build/rating-filter.js 6.89 kB
build/reviews-by-category.js 12.1 kB
build/reviews-by-product.js 13.2 kB
build/reviews-frontend.js 7.11 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.6 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.82 kB
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-shipping--checkout-blocks/billing-addr--d9f38f9d-frontend.js 4.21 kB
build/vendors--attribute-filter-wrapper--stock-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.5 kB
build/vendors--price-filter-wrapper-frontend.js 2.2 kB
build/vendors--product-add-to-cart-frontend.js 7.26 kB
build/vendors--rating-filter-wrapper-frontend.js 5.1 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.96 kB
build/wc-blocks-editor-style.css 5.96 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.9 kB
build/wc-blocks-style.css 27.8 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 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.3 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

Copy link
Contributor

@albarin albarin left a comment

Choose a reason for hiding this comment

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

👏

@github-actions github-actions bot added this to the 10.3.0 milestone May 19, 2023
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.

I'm not sure that the product-rating block is in the right position in the .html template.

templates/templates/blockified/single-product.html Outdated Show resolved Hide resolved
@gigitux gigitux mentioned this pull request May 19, 2023
4 tasks
@thealexandrelara thealexandrelara requested a review from gigitux May 19, 2023 19:55
@mikejolley
Copy link
Member

Bumping to 10.4.0.

@mikejolley mikejolley modified the milestones: 10.3.0, 10.4.0 May 22, 2023
@gigitux gigitux modified the milestones: 10.4.0, 10.3.0 May 22, 2023
@gigitux gigitux added the status: blocker Used on issues or pulls that block work from being released. label May 22, 2023
@gigitux gigitux modified the milestones: 10.3.0, 10.4.0 May 23, 2023
@gigitux gigitux removed the status: blocker Used on issues or pulls that block work from being released. label May 23, 2023
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.

LGTM

@thealexandrelara thealexandrelara merged commit 48f17a6 into trunk May 30, 2023
@thealexandrelara thealexandrelara deleted the feat/9287-add-product-rating-block-to-default-blockified-single-product-template branch May 30, 2023 13:10
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 type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Product Rating: Add the support for the Single Product Template
4 participants