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

Fix wc-settings not loading when a script that depend on it is in the header #5059

Merged
merged 7 commits into from
Nov 5, 2021

Conversation

senadir
Copy link
Member

@senadir senadir commented Nov 3, 2021

This PR is cherry-picked from #5045

The goal of it is to fix an issue in which a script:

  • Is loaded in the header (blocks from register_block_type( block.json ) for example).
  • Depend on wc-settings or something that depend on it like wc-blocks-checkout, wc-price-format.
    would break the page because wc-settings inline script would not load.

This PR (by @mikejolley) fixes the issue by forcing scripts that depend on wc-settings to print in the footer.

Testing steps

  1. This PR is meant to fix a regression in third party blocks, so you can test it by loading AutomateWoo newsletter block, MailPoet block, or create a new block npx wp-create-block test-block and include something from @woocommerce/blocks-checkout or @woocommerce/price-format.
  2. The block should load fine in the editor with Cart and Checkout.
  3. Inspect the page, you should have a single wc-settings script enqueued.

Changelog

Scripts using wc-settings or script that depend on it would be enqueued in the footer if they're enqueued in the header.

@rubikuserbot rubikuserbot requested review from a team and nielslange and removed request for a team November 3, 2021 10:37
@senadir senadir added type: bug The issue/PR concerns a confirmed bug. type: wp dependency labels Nov 3, 2021
@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2021

Size Change: 0 B

Total Size: 1.11 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 38 kB
build/all-reviews.js 9.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 874 B
build/atomic-block-components/category-list-frontend.js 467 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.11 kB
build/atomic-block-components/rating-frontend.js 563 B
build/atomic-block-components/rating.js 565 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 391 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 611 B
build/atomic-block-components/summary-frontend.js 908 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 467 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.48 kB
build/atomic-block-components/title.js 1.47 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 12.1 kB
build/blocks-checkout.js 21 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.22 kB
build/cart-blocks/empty-cart-frontend.js 349 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.58 kB
build/cart-blocks/filled-cart-frontend.js 806 B
build/cart-blocks/items-frontend.js 303 B
build/cart-blocks/line-items-frontend.js 5.85 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 322 B
build/cart-frontend.js 52.2 kB
build/cart.js 50.5 kB
build/checkout-blocks/actions-frontend.js 1.48 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.87 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 346 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.8 kB
build/checkout-blocks/payment-frontend.js 4.56 kB
build/checkout-blocks/shipping-address-frontend.js 3.03 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.65 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.4 kB
build/checkout.js 54 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.12 kB
build/mini-cart-component-frontend.js 44.4 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 5.72 kB
build/price-filter-frontend.js 14.2 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.37 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.68 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.4 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/single-product-frontend.js 26.6 kB
build/single-product.js 9.75 kB
build/stock-filter-frontend.js 8.62 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.02 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-editor-style-rtl.css 15.7 kB
build/wc-blocks-editor-style.css 15.7 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.92 kB
build/wc-blocks-style-rtl.css 21 kB
build/wc-blocks-style.css 21 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 254 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

@senadir senadir added the needs: dev note PR that has some text that needs to be included in the release notes. label Nov 3, 2021
@senadir
Copy link
Member Author

senadir commented Nov 3, 2021

This still needs a console log of when this happens This is now done

@senadir senadir changed the title Fix wc-settings not loading when a block is in the header Fix wc-settings not loading when a script that depend on it is in the header Nov 3, 2021
@@ -38,6 +38,8 @@ protected function init() {
add_action( 'body_class', array( $this, 'add_theme_body_class' ), 1 );
add_action( 'admin_body_class', array( $this, 'add_theme_body_class' ), 1 );
add_action( 'admin_enqueue_scripts', array( $this, 'update_block_style_dependencies' ), 20 );
add_action( 'wp_enqueue_scripts', array( $this, 'update_block_settings_dependencies' ), 1 );
Copy link
Member

Choose a reason for hiding this comment

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

Why priority 1 for these?

Copy link
Member Author

Choose a reason for hiding this comment

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

I'm not sure, as this is your commit.

Copy link
Member

Choose a reason for hiding this comment

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

I don't recall adding it, it shouldn't be needed. If anything, it should be a late priority.

wp_add_inline_script(
$error_handle,
sprintf( 'console.warn( "%s" );', $error_message )
);
Copy link
Member

Choose a reason for hiding this comment

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

👍🏻

Copy link
Member

@mikejolley mikejolley left a comment

Choose a reason for hiding this comment

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

Question below. Everything else looks ok. Let @nielslange give final approval.

Copy link
Member

@nielslange nielslange left a comment

Choose a reason for hiding this comment

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

LGTM! 🚢

@github-actions github-actions bot added this to the 6.3.0 milestone Nov 5, 2021
@senadir senadir merged commit 60ba597 into trunk Nov 5, 2021
@senadir senadir deleted the fix/wc-settings-not-loading branch November 5, 2021 13:44
@nielslange nielslange added the skip-changelog PRs that you don't want to appear in the changelog. label Nov 16, 2021
@senadir
Copy link
Member Author

senadir commented Nov 19, 2021

@mikejolley this code seems to be running on all registered scripts, even the ones not enqueued on the current page. I'm seeing it on the checkout frontend for an editor script. I guess that's not something we can avoid?

image

@mikejolley
Copy link
Member

mikejolley commented Nov 19, 2021

@senadir could try using $wp_scripts->enqueued instead of $wp_scripts->registered? But it might break for dependencies of dependencies.

@senadir
Copy link
Member Author

senadir commented Nov 19, 2021

enqueued is returning undefined for me

Notice: Undefined property: WP_Scripts::$enqueued in /src/AssetsController.php on line 172

@senadir
Copy link
Member Author

senadir commented Nov 19, 2021

We can try queue but its content is different from registered. queue is a flat array of handles that would enqueued.

Notice: Trying to get property 'deps' of non-object in /Users/nadir/work/bergs/src/AssetsController.php on line 174

@mikejolley
Copy link
Member

Maybe it is queue. You can cross-reference the objects in registered.

jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
… header (woocommerce#5059)

* Enqueue in header if required.

* revert scripts change

* Dirty fix for settings dependency

* Also implement in admin

* add console warn

* grammar issues

* increase priority

Co-authored-by: Mike Jolley <[email protected]>
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
… header (woocommerce#5059)

* Enqueue in header if required.

* revert scripts change

* Dirty fix for settings dependency

* Also implement in admin

* add console warn

* grammar issues

* increase priority

Co-authored-by: Mike Jolley <[email protected]>
@tomalec
Copy link
Member

tomalec commented Jul 4, 2023

@senadir Could you give some hints on how to act upon that warning?
For AutomateWoo it throws it for the block added in https://github.com/woocommerce/automatewoo/pull/1061

What is the recommended way to register a block in the footer?

See https://github.com/woocommerce/automatewoo/issues/1304

@senadir
Copy link
Member Author

senadir commented Jul 4, 2023

If you're loading scripts using the block.json then it will load up in the header sadly, you will need to enqueue your scripts manually.

@nerrad
Copy link
Contributor

nerrad commented Jul 20, 2023

@senadir or @mikejolley is this (showing a warning for blocks registering scripts via block.json configuration that also have a dependency on wc-settings) something that can't be addressed in WooCommerce Blocks? I realize the warning is shown after forcing the script to load in the footer.

There's a couple things we might want to consider:

  • rethink the loading strategy of wc-settings. Instead of having the entire library enqueued in the footer (which was done to allow for additional settings to be set before the script data is rendered inline) - could we decouple the inline data output from the client API for the data? Then maybe the inline data output could just always be in the footer without requiring wc-settings client to also be in the footer?
  • There is a defer loading strategy being proposed for block scripts that could potentially be considered for wc-settings in combination with the above.

@mikejolley
Copy link
Member

I'd need to look at this again to refresh memory, but I think we currently just dump a variable on the page with the settings object right? What if that were a callback that added the settings after initial load? I guess this could break some blocks/utils relying on settings being there on load however.

@Brianmitchtay
Copy link

Seeing this come up here with a user, letting them know not to worry about it. 7761451-zd-a8c

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: dev note PR that has some text that needs to be included in the release notes. 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.

6 participants