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

Conversation

@thealexandrelara
Copy link
Contributor

@thealexandrelara thealexandrelara commented Mar 2, 2023

Fixes #8568

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. Go to Appearance > Themes, and select a block theme (for example: Twenty-twenty three);
  3. Go to Appearance < Site Editor (Beta);
  4. Click the Edit button;
  5. Click on the "+" icon to add a new block and search for "Single Product" block in the search bar;
  6. Click on the "Single Product" block to add it to your page or post;
  7. Select a product on the Product Selector and click on the Save button;
  8. Go to your website and check the selected product is being displayed with its correct information
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Add Single Product block that allows merchant to select and display a single product on their store

@thealexandrelara thealexandrelara changed the title Feat/add single product block server side Add single product block server side Mar 2, 2023
@thealexandrelara thealexandrelara changed the title Add single product block server side Add single product block Mar 2, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-8610.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
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 ⚠️

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

TypeScript Errors Report

  • Files with errors: 450
  • Total errors: 2207

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

assets/js/blocks/single-product/edit/shared-product-control.tsx

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 2, 2023

Size Change: +39.6 kB (+4%)

Total Size: 1.1 MB

Filename Size Change
build/active-filters-frontend.js 7.98 kB -2 B (0%)
build/all-products-frontend.js 11.8 kB -3 B (0%)
build/all-products.js 38.4 kB +832 B (+2%)
build/all-reviews.js 7.65 kB -5 B (0%)
build/attribute-filter-frontend.js 22.5 kB -6 B (0%)
build/attribute-filter.js 13.2 kB +17 B (0%)
build/blocks-checkout.js 35.1 kB +28 B (0%)
build/breadcrumbs.js 2.05 kB +3 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -2 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.75 kB +29 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB -34 B (-1%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.4 kB +32 B (+1%)
build/cart-blocks/cart-line-items-frontend.js 1.07 kB +1 B (0%)
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB +33 B (+3%)
build/cart-blocks/cart-totals-frontend.js 308 B +1 B (0%)
build/cart-blocks/empty-cart-frontend.js 344 B -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 655 B +1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -3 B (0%)
build/cart-blocks/order-summary-fee-frontend.js 272 B -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 11.8 kB +263 B (+2%)
build/cart-blocks/order-summary-taxes-frontend.js 431 B -2 B (0%)
build/cart-frontend.js 29.3 kB +5 B (0%)
build/cart.js 48.7 kB -20 B (0%)
build/catalog-sorting.js 1.7 kB +3 B (0%)
build/checkout-blocks/actions-frontend.js 1.85 kB +4 B (0%)
build/checkout-blocks/billing-address-frontend.js 4.18 kB -5 B (0%)
build/checkout-blocks/express-payment-frontend.js 1.14 kB +3 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.71 kB +29 B (+1%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.78 kB -2 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -2 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.27 kB +33 B (+3%)
build/checkout-blocks/order-summary-shipping-frontend.js 11.8 kB +270 B (+2%)
build/checkout-blocks/order-summary-taxes-frontend.js 431 B -3 B (-1%)
build/checkout-blocks/payment-frontend.js 8.27 kB -510 B (-6%)
build/checkout-blocks/pickup-options-frontend.js 4.14 kB +26 B (+1%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB -2 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.64 kB +29 B (+1%)
build/checkout-blocks/shipping-methods-frontend.js 5.84 kB +23 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB -3 B (0%)
build/checkout-blocks/totals-frontend.js 311 B +2 B (+1%)
build/checkout-frontend.js 30.9 kB -1 B (0%)
build/checkout.js 46.3 kB -17 B (0%)
build/customer-account.js 3.17 kB -1 B (0%)
build/featured-category.js 13.9 kB -100 B (-1%)
build/featured-product.js 14.2 kB -180 B (-1%)
build/filter-wrapper-frontend.js 14 kB -16 B (0%)
build/handpicked-products.js 7.92 kB +5 B (0%)
build/legacy-template.js 5.57 kB -7 B (0%)
build/mini-cart-component-frontend.js 28.3 kB -45 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 820 B +2 B (0%)
build/mini-cart-contents-block/checkout-button-frontend.js 821 B +2 B (0%)
build/mini-cart-contents-block/empty-cart-frontend.js 360 B -1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 3.18 kB -3 B (0%)
build/mini-cart-contents-block/shopping-button-frontend.js 705 B +1 B (0%)
build/mini-cart-contents.js 17.4 kB +41 B (0%)
build/mini-cart.js 4.49 kB +2 B (0%)
build/price-filter-frontend.js 13.9 kB +72 B (+1%)
build/price-filter-wrapper-frontend.js 7.04 kB +81 B (+1%)
build/price-filter.js 8.46 kB +57 B (+1%)
build/product-add-to-cart.js 8.8 kB +8.62 kB (+4845%) 🆘
build/product-best-sellers.js 8.26 kB +4 B (0%)
build/product-button-frontend.js 1.92 kB +2 B (0%)
build/product-categories.js 2.36 kB -2 B (0%)
build/product-category.js 9.25 kB -1 B (0%)
build/product-image-frontend.js 1.77 kB +11 B (+1%)
build/product-image.js 4.28 kB +4.1 kB (+2302%) 🆘
build/product-new.js 8.26 kB -2 B (0%)
build/product-on-sale.js 8.59 kB +1 B (0%)
build/product-price-frontend.js 2.11 kB +32 B (+2%)
build/product-query.js 11.2 kB +179 B (+2%)
build/product-rating-frontend.js 1.33 kB +5 B (0%)
build/product-sale-badge-frontend.js 975 B +1 B (0%)
build/product-search.js 2.63 kB +1 B (0%)
build/product-sku-frontend.js 999 B +545 B (+120%) 🆘
build/product-stock-indicator-frontend.js 1.01 kB -2 B (0%)
build/product-summary-frontend.js 1.29 kB -1 B (0%)
build/product-tag.js 8.75 kB +6 B (0%)
build/product-title-frontend.js 1.37 kB -4 B (0%)
build/product-title.js 3.72 kB +3.55 kB (+1992%) 🆘
build/product-top-rated.js 8.49 kB +1 B (0%)
build/products-by-attribute.js 9.59 kB +16 B (0%)
build/rating-filter-frontend.js 20.8 kB -11 B (0%)
build/rating-filter.js 6.99 kB +6 B (0%)
build/reviews-by-category.js 11.9 kB +2 B (0%)
build/reviews-by-product.js 13 kB -64 B (0%)
build/stock-filter-frontend.js 21.1 kB -12 B (0%)
build/stock-filter-wrapper-frontend.js 5.83 kB +6 B (0%)
build/store-notices.js 1.69 kB +2 B (0%)
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--82e4ed06-frontend.js 6.82 kB -17 B (0%)
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB -1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +3 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB -1 B (0%)
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB +2 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB -1 B (0%)
build/wc-blocks-editor-style-rtl.css 5.83 kB +27 B (0%)
build/wc-blocks-editor-style.css 5.83 kB +27 B (0%)
build/wc-blocks-style-rtl.css 27.6 kB -23 B (0%)
build/wc-blocks-style.css 27.6 kB -23 B (0%)
build/wc-blocks-vendors.js 63.8 kB -79 B (0%)
build/wc-blocks.js 2.63 kB +1 B (0%)
build/product-add-to-cart--product-button--product-image--product-price--product-rating--product-sale-bad--49d3ecb2.js 253 B +253 B (new file) 🆕
build/product-add-to-cart--product-button--product-image--product-rating--product-title.js 151 B +151 B (new file) 🆕
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 464 B +464 B (new file) 🆕
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--product-title.js 262 B +262 B (new file) 🆕
build/product-button.js 4.17 kB +4.17 kB (new file) 🆕
build/product-price.js 1.67 kB +1.67 kB (new file) 🆕
build/product-rating.js 921 B +921 B (new file) 🆕
build/product-sale-badge.js 797 B +797 B (new file) 🆕
build/product-sku.js 578 B +578 B (new file) 🆕
build/product-stock-indicator.js 647 B +647 B (new file) 🆕
build/product-summary.js 919 B +919 B (new file) 🆕
build/single-product.js 10.9 kB +10.9 kB (new file) 🆕
ℹ️ View Unchanged
Filename Size
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-express-payment-frontend.js 718 B
build/cart-blocks/cart-items-frontend.js 301 B
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.33 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.14 kB
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
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/title-frontend.js 368 B
build/mini-cart-frontend.js 2.02 kB
build/price-format.js 1.19 kB
build/product-add-to-cart-frontend.js 6.43 kB
build/product-results-count.js 1.66 kB
build/rating-filter-wrapper-frontend.js 5.58 kB
build/reviews-frontend.js 7.1 kB
build/stock-filter.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-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/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB
build/wc-blocks-data.js 21.8 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-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.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@thealexandrelara thealexandrelara self-assigned this Mar 3, 2023
This attribute is used to determine if the product image should be rendered on the server side or not. This is needed because the product image is not rendered on the server side by default, but we want to render it on the server side when it is inside the Single Product block.
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.

From my side, I think we can merge this PR as-is and work in the other issues in follow-ups. Good job, @thealexandrelara, this is an exciting achievement! 👏 Leaving it to @nefeline to do the final approval, though.

Only a heads-up that I'm still able to reproduce this one: Not sure if it needs to be part of this PR, but mentioning in case it's not known: the Product Meta block doesn't seem to work on the Single Product block. I think there is no issue for it, so it might be good to create one so we don't forget.

Unfortunately I can't reproduce it, I tried different scenarios: on the Home template, on the Single Product template, on a post and on a Page, and all of them are rendering the product title when I move the Product Summary bellow it

This only happens to me when GB is disabled and in WP 6.2. But if that's only occurring to me, feel free to merge and I can investigate it later.

@github-actions github-actions bot added this to the 10.0.0 milestone Apr 6, 2023
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.

Thanks for addressing all feedback! I did another round of tests; there's only one problem that surfaced that I would recommend fixing before merging, as it is a regression when using the post excerpt block outside of the single product block. The following example is when adding this block to the single product template. On the editor, the following error is triggered:

Screenshot 2023-04-06 at 10 24 50

@thealexandrelara
Copy link
Contributor Author

From my side, I think we can merge this PR as-is and work in the other issues in follow-ups. Good job, @thealexandrelara, this is an exciting achievement! 👏 Leaving it to @nefeline to do the final approval, though.

Only a heads-up that I'm still able to reproduce this one: Not sure if it needs to be part of this PR, but mentioning in case it's not known: the Product Meta block doesn't seem to work on the Single Product block. I think there is no issue for it, so it might be good to create one so we don't forget.

Unfortunately I can't reproduce it, I tried different scenarios: on the Home template, on the Single Product template, on a post and on a Page, and all of them are rendering the product title when I move the Product Summary bellow it

This only happens to me when GB is disabled and in WP 6.2. But if that's only occurring to me, feel free to merge and I can investigate it later.

The Product Meta block is being fixed by Luigi in this PR. I'll investigate more about this issue that you commented

Thank you so much for the reviews, insights and suggestions 🙌

@thealexandrelara
Copy link
Contributor Author

Thanks for addressing all feedback! I did another round of tests; there's only one problem that surfaced that I would recommend fixing before merging, as it is a regression when using the post excerpt block outside of the single product block. The following example is when adding this block to the single product template. On the editor, the following error is triggered:

Screenshot 2023-04-06 at 10 24 50

Thank you for raising this @nefeline, this is an error that was occurring in Gutenberg, but they solved it last week: WordPress/gutenberg#48730

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.

Thank you for raising this @nefeline, this is an error that was occurring in Gutenberg, but they solved it last week: WordPress/gutenberg#48730

Gotcha! Thanks for sharing this info. The curious thing is that the error only occurs when the excerpt is used outside of the single product block; perhaps something to explore later on.

Thanks again for all your work here! I'm a-ok with merging this PR as-is and working on other issues in follow-ups as well. It's fantastic to see this block in place: keep it up! 🚢

@thealexandrelara
Copy link
Contributor Author

Thank you for raising this @nefeline, this is an error that was occurring in Gutenberg, but they solved it last week: WordPress/gutenberg#48730

Gotcha! Thanks for sharing this info. The curious thing is that the error only occurs when the excerpt is used outside of the single product block; perhaps something to explore later on.

Thanks again for all your work here! I'm a-ok with merging this PR as-is and working on other issues in follow-ups as well. It's fantastic to see this block in place: keep it up! 🚢

Thank you so much for providing detailed reviews and suggestions! Looking forward to see your PR getting merged on Gutenberg, so we can remove this temporary solution and replace it with the suggestion that you made!

@thealexandrelara thealexandrelara merged commit cb11cd2 into trunk Apr 6, 2023
@thealexandrelara thealexandrelara deleted the feat/add-single-product-block-server-side branch April 6, 2023 18:40
@opr opr added type: enhancement The issue is a request for an enhancement. focus: blocks Specific work involving or impacting how blocks behave. block: single product Issues related to the single product block. type: new block Applied to work that introduces a new block (typically used on an epic issue). and removed focus: blocks Specific work involving or impacting how blocks behave. labels Apr 10, 2023
@opr
Copy link
Contributor

opr commented Apr 10, 2023

@thealexandrelara I have added the correct labels to this PR.

@opr
Copy link
Contributor

opr commented Apr 10, 2023

I am skipping adding this to the testing notes as it is experimental. I will check the box in the PR body.

@easilyamused
Copy link

I'm not seeing the block in the released package version 10.0.0 from the .org repo.

@Aljullu
Copy link
Contributor

Aljullu commented Apr 13, 2023

Hey there @easilyamused, sorry for the confusion, this block is still marked as experimental and hasn't been released for public use yet. There are still some improvements and fixes we would like to introduce before making the Single Product block available to everybody. If you want to test it now, you can do so downloading one of our nightly builds. However, keep in mind it's experimental so it's not recommended to use it on production sites.

We have updated the changelog to make sure this block isn't mentioned there. Hopefully, in the following weeks we will be able to graduate it and make it available in the plugin. 🙂

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. type: enhancement The issue is a request for an enhancement. type: new block Applied to work that introduces a new block (typically used on an epic issue).

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create Single Product block

7 participants