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

Product Gallery Block > Remove global variable overwrite and keep support for the Single Product Block. #9475

Merged

Conversation

nefeline
Copy link
Member

@nefeline nefeline commented May 15, 2023

This is a simplified version of #9458 aimed as a short-term solution for ensuring the $product global variable is not overwritten within the Product Gallery block while still keeping support for the (still experimental) Single Product block.

While for the Add to Cart with Options block it was possible to simply ditch the call to the global variable (as visible on #9457), that's not the case for this block, as due to the nature of how the templates and functions are structured, not invoking global $product results in fatal errors even within the context of the single product template.

With that said, a basic version of the following templates was added to the ProductImageGallery class:

single-product/product-thumbnails.php
single-product/product-image.php
single-product/sale-flash.php

All hooks were deliberately removed in this first instance, more discussion and changes are expected to happen on #9458 later on.

Fixes #9453

Testing

User Facing Testing

  1. While having a block theme enabled such as Twenty-twenty Three, head over to your Dashboard, and on the sidebar, click on "Appearance > Editor".
  2. Select the Single Product template to customize it and click on edit.
  3. If you are still not using the blockified version of the template, click on “Transform into blocks” first to ensure all blocks are in place.
  4. Make sure the Product Gallery block is automatically added and available for usage on the inserter (you can remove/add the block from the template), add it, and save.
  5. On the front end, ensure the block works as expected and the product can be added to the cart.
  6. Now create a new post and add the Single Product Block to it.
  7. Save the post and head over to the FE: make sure the Gallery Block is properly displayed on the post without any problems.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Performance Impact

Changelog

Fix: Remove the global variable overwrite for the Product Gallery block while still keeping support for the Single Product block.

…ock to continue to work within the Single Product template without any problems.
…k works as expected without the relying on the global product.
@woocommercebot woocommercebot requested review from a team and roykho and removed request for a team May 15, 2023 22:34
@github-actions
Copy link
Contributor

github-actions bot commented May 15, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 15, 2023

Size Change: 0 B

Total Size: 1.08 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 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 39.1 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.2 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.04 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.73 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.17 kB
build/cart-blocks/cart-express-payment-frontend.js 719 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.37 kB
build/cart-blocks/cart-line-items-frontend.js 1.06 kB
build/cart-blocks/cart-order-summary-frontend.js 1.28 kB
build/cart-blocks/cart-totals-frontend.js 308 B
build/cart-blocks/empty-cart-frontend.js 345 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 273 B
build/cart-blocks/order-summary-heading-frontend.js 333 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 433 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.38 kB
build/cart-frontend.js 29.7 kB
build/cart.js 44.9 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.19 kB
build/checkout-blocks/contact-information-frontend.js 2.05 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 330 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.1 kB
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout-blocks/payment-frontend.js 8.27 kB
build/checkout-blocks/pickup-options-frontend.js 4.8 kB
build/checkout-blocks/shipping-address-frontend.js 1.17 kB
build/checkout-blocks/shipping-method-frontend.js 2.59 kB
build/checkout-blocks/shipping-methods-frontend.js 6.34 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 312 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 15 kB
build/featured-product.js 15.2 kB
build/filter-wrapper-frontend.js 14.2 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 8 kB
build/legacy-template.js 6.33 kB
build/mini-cart-component-frontend.js 28.9 kB
build/mini-cart-contents-block/cart-button-frontend.js 1.97 kB
build/mini-cart-contents-block/checkout-button-frontend.js 1.97 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 266 B
build/mini-cart-contents-block/footer-frontend.js 4.3 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 592 B
build/mini-cart-contents-block/shopping-button-frontend.js 757 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 17.9 kB
build/mini-cart-frontend.js 2.15 kB
build/mini-cart.js 4.2 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.86 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 963 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 2.99 kB
build/product-image-frontend.js 2.63 kB
build/product-image.js 4.18 kB
build/product-new.js 8.35 kB
build/product-on-sale.js 8.68 kB
build/product-price-frontend.js 203 B
build/product-price.js 1.68 kB
build/product-query.js 11.6 kB
build/product-rating-frontend.js 2.31 kB
build/product-rating.js 999 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 535 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 904 B
build/product-tag.js 8.97 kB
build/product-template.js 3.28 kB
build/product-title-frontend.js 2.22 kB
build/product-title.js 3.69 kB
build/product-top-rated.js 8.58 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.1 kB
build/single-product.js 11.1 kB
build/stock-filter-wrapper-frontend.js 2.98 kB
build/stock-filter.js 7.61 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.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.11 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.8 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 2.63 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

@gigitux
Copy link
Contributor

gigitux commented May 16, 2023

Save the post and head over to the FE: make sure the Gallery Block is properly displayed on the post without any problems.

The Single Product Block uses the Product Image block and not the Product Image Gallery block. I guess that this PR should not affect the Single Product block.

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.

Great work! LGTM!

@github-actions github-actions bot added this to the 10.3.0 milestone May 16, 2023
@nefeline
Copy link
Member Author

Thanks for the review!

The Single Product Block uses the Product Image block and not the Product Image Gallery block. I guess that this PR should not affect the Single Product block.

That's true, although nothing prevents the user from removing the product image block and adding the product gallery block instead.

@gigitux out of curiosity: why are we using the product image block by default within the single product block? Shouldn't it be the gallery block, the same way the core's templates do for single products?

@nefeline nefeline merged commit 81a2912 into trunk May 16, 2023
29 checks passed
@nefeline nefeline deleted the fix/remove-global-variable-call-from-product-gallery-block branch May 16, 2023 08:36
@gigitux
Copy link
Contributor

gigitux commented May 16, 2023

That's true, although nothing prevents the user from removing the product image block and adding the product gallery block instead.

I'm not able to add the Product Gallery block. Can you add it?

@gigitux out of curiosity: why are we using the product image block by default within the single product block? Shouldn't it be the gallery block, the same way the core's templates do for single products?

We decided to support, for now, only the Product Image block. When the Single Product block is out, we will add the support for the Product Gallery block.

@nefeline
Copy link
Member Author

I'm not able to add the Product Gallery block. Can you add it?

Yep: the block is available for adding on the inserter, the only limitation is that the editor preview is not displayed, but the block is rendered on the FE without any problems.

@mikejolley mikejolley added the type: bug The issue/PR concerns a confirmed bug. label May 22, 2023
@nerrad
Copy link
Contributor

nerrad commented May 28, 2023

All hooks were deliberately removed in this first instance, more discussion and changes are expected to happen on #9458 later on.

This should be reconsidered, filter hooks like what is mentioned here (#9618) are broken because they were called in the equivalent template. Rolling out the initial blockified templates with the existing templates was done initially to preserve the most back-compat we could to help transition extension developers, etc.

As an initial step here for fixing the global issue, would saving the global to a temporary variable and then restoring it generating the HTML have been sufficient?

At some point we likely will move away from calling functions that just load the existing template parts but until then we need to keep the compatibility layer intact.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
4 participants