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

Use 'enqueue_block_assets' action when is available #9332

Conversation

gigitux
Copy link
Contributor

@gigitux gigitux commented May 3, 2023

In the newer version of Gutenberg (and WordPress), there is a dedicated action to enqueue the assets of blocks on the Site Editor (WordPress/gutenberg#49655). This PR uses the new action.

WordPress/gutenberg#49655 changed how assets should be enqueued on the Site Editor. This PR is just a dirty patch to fix #9331, but we will revisit the entire process in the next cooldown. #9354

🤖 Generated by Copilot at 945ecf1

Summary

🆕🚀🐛

Hook register_data_script to enqueue_block_assets if available, or init otherwise, for compatibility and performance reasons. This is part of a pull request to improve asset data loading.

enqueue_block_assets
A later hook for data scripts
Fall leaves compatibility

Walkthrough

  • Hook register_data_script to enqueue_block_assets if available, or init otherwise, to improve data loading performance and compatibility (link)

Fixes #9331

Testing

Automated Tests

  • Changes in this PR are covered by Automated Tests.
    • Unit tests
    • E2E tests

User Facing Testing

  1. Be sure that you have the Gutenberg trunk installed.
  2. Open the Site Editor, and open the Single Product Template.
  3. See that the placeholder image is loaded.
  4. Disable the Gutenberg plugin.
  5. Open the Site Editor, and open the Single Product Template.
  6. See that the placeholder image is loaded.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@gigitux gigitux added type: bug The issue/PR concerns a confirmed bug. skip-changelog PRs that you don't want to appear in the changelog. labels May 3, 2023
@gigitux gigitux self-assigned this May 3, 2023
@gigitux gigitux linked an issue May 3, 2023 that may be closed by this pull request
@woocommercebot woocommercebot requested review from a team and kmanijak and removed request for a team May 3, 2023 09:51
@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

Remove this check when WordPress 6.3 is the minimum suppo...

Remove this check when WordPress 6.3 is the minimum supported version.


// @todo: Remove this check when WordPress 6.3 is the minimum supported version.
add_action( has_action( 'enqueue_block_assets' ) ? 'enqueue_block_assets' : 'init', array( $this, 'register_data_script' ) );
add_action( 'wp_print_footer_scripts', array( $this, 'enqueue_asset_data' ), 2 );
add_action( 'admin_print_footer_scripts', array( $this, 'enqueue_asset_data' ), 2 );
}

🚀 This comment was generated by the automations bot based on a todo comment in 5aa74cd in #9332. cc @gigitux

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

The release ZIP for this PR is accessible via:

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

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented May 3, 2023

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.56 kB
build/active-filters-wrapper--attribute-filter-wrapper--price-filter-wrapper--rating-filter-wrapper--stoc--78b62dd5-frontend.js 2.31 kB
build/active-filters-wrapper-frontend.js 4.68 kB
build/active-filters.js 7.47 kB
build/all-products-frontend.js 12.1 kB
build/all-products.js 38.9 kB
build/all-reviews.js 7.77 kB
build/attribute-filter-frontend.js 23.2 kB
build/attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 5.53 kB
build/attribute-filter-wrapper-frontend.js 4.64 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 35.1 kB
build/breadcrumbs.js 2.05 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 5.53 kB
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.16 kB
build/cart-blocks/cart-express-payment-frontend.js 717 B
build/cart-blocks/cart-items-frontend.js 302 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.39 kB
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.27 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 346 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 273 B
build/cart-blocks/order-summary-heading-frontend.js 332 B
build/cart-blocks/order-summary-shipping-frontend.js 16.9 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.6 kB
build/cart.js 44.7 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.65 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.13 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-note-frontend.js 1.13 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 435 B
build/checkout-blocks/payment-frontend.js 8.28 kB
build/checkout-blocks/pickup-options-frontend.js 4.81 kB
build/checkout-blocks/shipping-address-frontend.js 1.16 kB
build/checkout-blocks/shipping-method-frontend.js 2.6 kB
build/checkout-blocks/shipping-methods-frontend.js 6.35 kB
build/checkout-blocks/terms-frontend.js 1.56 kB
build/checkout-blocks/totals-frontend.js 310 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 14.4 kB
build/featured-product.js 14.7 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 5.62 kB
build/mini-cart-component-frontend.js 29.5 kB
build/mini-cart-contents-block/cart-button-frontend.js 864 B
build/mini-cart-contents-block/checkout-button-frontend.js 866 B
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/footer-frontend.js 3.23 kB
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/shopping-button-frontend.js 760 B
build/mini-cart-contents-block/title-frontend.js 1.08 kB
build/mini-cart-contents-block/title-items-counter-frontend.js 729 B
build/mini-cart-contents-block/title-label-frontend.js 661 B
build/mini-cart-contents.js 17.9 kB
build/mini-cart-frontend.js 2.05 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 14.5 kB
build/price-filter-wrapper-frontend.js 5.78 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-rating.js 151 B
build/product-add-to-cart-frontend.js 6.5 kB
build/product-add-to-cart.js 8.88 kB
build/product-best-sellers.js 8.34 kB
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--408017d2.js 262 B
build/product-button--product-image--product-price--product-rating--product-sale-badge--product-sku--prod--5bce0384.js 463 B
build/product-button-frontend.js 1.92 kB
build/product-button.js 4.18 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.35 kB
build/product-image-frontend.js 1.84 kB
build/product-image.js 4.31 kB
build/product-new.js 8.34 kB
build/product-on-sale.js 8.67 kB
build/product-price-frontend.js 2.17 kB
build/product-price.js 1.74 kB
build/product-query.js 11.4 kB
build/product-rating-frontend.js 1.45 kB
build/product-rating.js 1.04 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 974 B
build/product-sale-badge.js 801 B
build/product-search.js 2.63 kB
build/product-sku-frontend.js 1 kB
build/product-sku.js 578 B
build/product-stock-indicator-frontend.js 1.19 kB
build/product-stock-indicator.js 771 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 922 B
build/product-tag.js 8.97 kB
build/product-title-frontend.js 1.37 kB
build/product-title.js 3.75 kB
build/product-top-rated.js 8.58 kB
build/products-by-attribute.js 9.7 kB
build/rating-filter-frontend.js 21.5 kB
build/rating-filter-wrapper-frontend.js 3.04 kB
build/rating-filter.js 7.01 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-frontend.js 21.8 kB
build/stock-filter-wrapper-frontend.js 3.31 kB
build/stock-filter.js 7.73 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.2 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.58 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.4 kB
build/vendors--product-add-to-cart-frontend.js 7.25 kB
build/wc-blocks-data.js 22.5 kB
build/wc-blocks-editor-style-rtl.css 5.87 kB
build/wc-blocks-editor-style.css 5.87 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.7 kB
build/wc-blocks-style.css 27.7 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.2 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

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

This works and LGTM!

@github-actions github-actions bot added this to the 10.2.0 milestone May 3, 2023
@gigitux gigitux enabled auto-merge (squash) May 3, 2023 10:23
@gigitux gigitux force-pushed the 9331-with-gutenberg-trunk-the-images-arent-loaded-on-the-site-editor branch from 20cf6ad to 8971146 Compare May 4, 2023 09:07
@gigitux gigitux merged commit 4d81620 into trunk May 4, 2023
@gigitux gigitux deleted the 9331-with-gutenberg-trunk-the-images-arent-loaded-on-the-site-editor branch May 4, 2023 12:32
@@ -66,11 +66,25 @@ public function __construct( Api $asset_api ) {
* Hook into WP asset registration for enqueueing asset data.
*/
protected function init() {
add_action( 'init', array( $this, 'register_data_script' ) );
if ( $this->is_site_editor() ) {
add_action( 'enqueue_block_editor_assets', array( $this, 'register_data_script' ) );
Copy link
Contributor

Choose a reason for hiding this comment

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

This is dangerous because there may be other Woo Extensions using the AssetDataRegistry which aren't explicitly using it for blocks. Have you double-checked this?

Copy link
Contributor

Choose a reason for hiding this comment

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

I guess it should be okay when restricted to the site editor 🤔

Copy link
Contributor

@nerrad nerrad May 4, 2023

Choose a reason for hiding this comment

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

Still, I wonder if in a followup iteration we should expose a separate API on AssetDataRegistry that is explicitly for blocks to register their asset data rather (and thus enqueued differently) than accounting for multiple locations here. That would help with future maintenance as well if things change.

Copy link
Contributor

Choose a reason for hiding this comment

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

there may be other Woo Extensions using the AssetDataRegistry which aren't explicitly using it for blocks. Have you double-checked this?

I guess it should be okay when restricted to the site editor

Yeah, this has only really changed within the context of the site editor. And are we aware of any plugins (of our own or third party) that pass data to the site editor in a non-blocks context? It seems like a bit of an edge case but definitely worth thinking about/a look into.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Still, I wonder if in a followup iteration we should expose a separate API on AssetDataRegistry that is explicitly for blocks to register their asset data rather (and thus enqueued differently) than accounting for multiple locations here

Agree on this! This is just a patch. We will revisit the entire process during the next cooldown!

Copy link
Contributor

Choose a reason for hiding this comment

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

This is dangerous because there may be other Woo Extensions using the AssetDataRegistry which aren't explicitly using it for blocks. Have you double-checked this?
I guess it should be okay when restricted to the site editor 🤔

That's a good point: I think so, but IMO it's hard to be 100% sure at this point without any further investigation. We have #9354 as a FU task for a permanent fix.

Copy link
Contributor

Choose a reason for hiding this comment

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

@tjcafferkey @gigitux @nerrad do you think we should prioritize revising this before releasing the patch, just to make sure we won't end up breaking things elsewhere, or are we a-ok with keeping the patch as-is and revisiting later?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I would release as-is, but instead of waiting for the cooldown, work on a proper fix now. In this way, we can:

  • Apply the new changes if we break something.
  • Work on a proper solution without the rush.

Copy link
Contributor

Choose a reason for hiding this comment

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

I tend to be more conservative in such cases so my vote would be for spending some extra time investigating alternatives & possible consequences before releasing, but if most of us are comfortable with releasing as-is I agree with your proposed approach @gigitux

Copy link
Contributor

Choose a reason for hiding this comment

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

@gigitux @nefeline I am happy to pick this refactor up instead of waiting for cooldown.

@thealexandrelara thealexandrelara modified the milestones: 10.2.0, 10.0.4 May 4, 2023
thealexandrelara added a commit that referenced this pull request May 4, 2023
thealexandrelara added a commit that referenced this pull request May 4, 2023
gigitux added a commit that referenced this pull request May 5, 2023
* Empty commit for release pull request

* Add 10.0.3 changelog

* Update versions to 10.0.3

* Fix image editor in Featured Product/Category blocks on WP 6.2 (#9142)

* Add 10.0.3 testing steps

* Empty commit for release pull request

* Check that the customized fallback template is archive-product before unsetting the source property (#9330)

* use 'enqueue_block_assets' is available (#9332)

* Remove esc_url() on self generated link to edit the Mini Cart template since it gets escaped in JS (#9348)

* Add changelog entries to readme.txt

* Update version number in several files

* Add testing notes for the release

* Add #9332 to testing notes

* Add testing on frontend for #9332

---------

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Tom Cafferkey <[email protected]>
Co-authored-by: Luigi Teschio <[email protected]>
Co-authored-by: Alexandre Lara <[email protected]>
mikejolley added a commit that referenced this pull request May 17, 2023
mikejolley added a commit that referenced this pull request May 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
skip-changelog PRs that you don't want to appear in the changelog. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

With Gutenberg trunk, the images aren't loaded on the Site Editor
5 participants