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

Use full link for WordPress resources when using wp_resource_hints #7211

Merged
merged 2 commits into from
Sep 23, 2022

Conversation

senadir
Copy link
Member

@senadir senadir commented Sep 23, 2022

In 7.3.0 (#5553), we introduced resource hinting for cart and checkout, the way we did that is by checking if we're going to visit Cart/Checkout (via cart content) and gather up cart/checkout scripts and their dependencies before passing them to wp_resource_hints.

The issue that was happening is that wp_resource_hints didn't assume anything about the url and printed it as is, and WordPress core dependencies are registered with a relative path.

For WordPress, it's not until WP_Scripts is about to print them that this is fixed, for us, we didn't get access to that luxury so they were printed with relative paths.

In normal installs, this is not an issue, but for subfolder installs, it is one because the root link doesn't match the website link and this caused several 404 in the console and even cart fragments requests to fail.

In this PR, we match the same behavior that exists in WP_Scripts and prefix scripts with the correct url.

kudos for @nielslange for the initial implementation of this PR.

Fixes #6186

User Facing Testing

  1. Make sure Gutenberg is disabled.
  2. Add an item to cart.
  3. Go to any frontend page, and view the page source.
  4. In that source page, search for scripts starting with /wp-includes, you shouldn't see any relative links in them ( as in href="/wp-includes/js/...") but that everything starts with a full link.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Ensure that scripts are loaded using absolute URLs to prevent loading issues with subfolder installs.

@rubikuserbot rubikuserbot requested review from a team and tarunvijwani and removed request for a team September 23, 2022 09:55
@github-actions
Copy link
Contributor

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7211.zip

@github-actions
Copy link
Contributor

github-actions bot commented Sep 23, 2022

Size Change: 0 B

Total Size: 893 kB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.62 kB
build/active-filters.js 8.29 kB
build/all-products-frontend.js 18.2 kB
build/all-products.js 34 kB
build/all-reviews.js 7.79 kB
build/attribute-filter-frontend.js 22.3 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 17.5 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.17 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 5.43 kB
build/cart-blocks/cart-cross-sells-products-frontend.js 4.66 kB
build/cart-blocks/cart-express-payment-frontend.js 5.08 kB
build/cart-blocks/cart-items-frontend.js 299 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.27 kB
build/cart-blocks/cart-line-items-frontend.js 430 B
build/cart-blocks/cart-order-summary-frontend.js 1.1 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.64 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 273 B
build/cart-blocks/order-summary-heading-frontend.js 454 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 48 kB
build/cart.js 50.3 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.11 kB
build/checkout-blocks/billing-address-frontend.js 890 B
build/checkout-blocks/contact-information-frontend.js 2.84 kB
build/checkout-blocks/express-payment-frontend.js 5.37 kB
build/checkout-blocks/fields-frontend.js 345 B
build/checkout-blocks/order-note-frontend.js 1.08 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.66 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 600 B
build/checkout-blocks/order-summary-subtotal-frontend.js 275 B
build/checkout-blocks/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 7.68 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.75 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.9 kB
build/checkout.js 43.7 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.4 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.33 kB
build/legacy-template.js 2.84 kB
build/mini-cart-component-frontend.js 16.9 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 7.39 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 23.4 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.57 kB
build/price-filter-frontend.js 13.4 kB
build/price-filter.js 9.35 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 226 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.69 kB
build/product-add-to-cart-frontend.js 2.6 kB
build/product-add-to-cart.js 6.87 kB
build/product-best-sellers.js 7.7 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 432 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 302 B
build/product-button-frontend.js 1.89 kB
build/product-button.js 1.58 kB
build/product-categories.js 2.36 kB
build/product-category-list-frontend.js 879 B
build/product-category-list.js 503 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.91 kB
build/product-image.js 1.61 kB
build/product-new.js 7.69 kB
build/product-on-sale.js 8.02 kB
build/product-price-frontend.js 1.91 kB
build/product-price.js 1.53 kB
build/product-query.js 646 B
build/product-rating-frontend.js 1.18 kB
build/product-rating.js 771 B
build/product-sale-badge-frontend.js 1.14 kB
build/product-sale-badge.js 816 B
build/product-search.js 2.61 kB
build/product-sku-frontend.js 380 B
build/product-sku.js 380 B
build/product-stock-indicator-frontend.js 992 B
build/product-stock-indicator.js 623 B
build/product-summary-frontend.js 1.28 kB
build/product-summary.js 920 B
build/product-tag-list-frontend.js 873 B
build/product-tag-list.js 497 B
build/product-tag.js 8.05 kB
build/product-title-frontend.js 1.34 kB
build/product-title.js 938 B
build/product-top-rated.js 7.93 kB
build/products-by-attribute.js 8.62 kB
build/reviews-by-category.js 11.3 kB
build/reviews-by-product.js 12.4 kB
build/reviews-frontend.js 7.02 kB
build/single-product-frontend.js 21.5 kB
build/single-product.js 10.1 kB
build/stock-filter-frontend.js 7.61 kB
build/stock-filter.js 7.55 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--04fe80d1-frontend.js 5.26 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.1 kB
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 6.92 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/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/wc-blocks-data.js 9.9 kB
build/wc-blocks-editor-style-rtl.css 5.24 kB
build/wc-blocks-editor-style.css 5.24 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.51 kB
build/wc-blocks-shared-hocs.js 1.71 kB
build/wc-blocks-style-rtl.css 23.9 kB
build/wc-blocks-style.css 23.8 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 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

compressed-size-action

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 8.6.0 milestone Sep 23, 2022
@senadir senadir self-assigned this Sep 23, 2022
@senadir senadir added type: bug The issue/PR concerns a confirmed bug. block: checkout Issues related to the checkout block. labels Sep 23, 2022
@ralucaStan ralucaStan added the status: blocker Used on issues or pulls that block work from being released. label Sep 23, 2022
@ralucaStan ralucaStan changed the title use full link for WordPress resources when using wp_resource_hints Use full link for WordPress resources when using wp_resource_hints Sep 23, 2022
@nielslange nielslange merged commit 9f9682f into trunk Sep 23, 2022
@nielslange nielslange deleted the fix/use-full-link branch September 23, 2022 11:02
gigitux pushed a commit that referenced this pull request Sep 23, 2022
@gigitux gigitux modified the milestones: 8.6.0, 8.5.1 Sep 23, 2022
gigitux added a commit that referenced this pull request Sep 23, 2022
* use full link for WordPress resources (#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
senadir added a commit that referenced this pull request Sep 23, 2022
alexflorisca pushed a commit that referenced this pull request Sep 23, 2022
* Empty commit for release pull request

* use full link for WordPress resources (#7211)

Co-authored-by: Niels Lange <[email protected]>

* add readme

* add testing steps

* Bumping version strings to new version.

Co-authored-by: github-actions <[email protected]>
Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
gigitux added a commit that referenced this pull request Oct 31, 2022
* use full link for WordPress resources (#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

* Empty commit for release pull request

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (#7506)

* Use theme's body background color as the mini cart contents default background color (#7510)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* Price Slider: use `currentColor` for the slider (#7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block #7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <[email protected]>
Co-authored-by: Niels Lange <[email protected]>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (#7525)

* Fix inconsistent button styling with TT3 (#7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles #7379 (#7515)

* Fix Mini Cart Block global styles #7379

Fix Mini Cart Block global styles

* add font_size

* Empty commit for release pull request

* add changelog and testing instructions

* add zip link for testing

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: EmptySet-Exe <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

* Empty commit for release pull request

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506)

* Use theme's body background color as the mini cart contents default background color (woocommerce#7510)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* Price Slider: use `currentColor` for the slider (woocommerce#7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <[email protected]>
Co-authored-by: Niels Lange <[email protected]>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525)

* Fix inconsistent button styling with TT3 (woocommerce#7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515)

* Fix Mini Cart Block global styles woocommerce#7379

Fix Mini Cart Block global styles

* add font_size

* Empty commit for release pull request

* add changelog and testing instructions

* add zip link for testing

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: EmptySet-Exe <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

* Empty commit for release pull request

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506)

* Use theme's body background color as the mini cart contents default background color (woocommerce#7510)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* Price Slider: use `currentColor` for the slider (woocommerce#7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <[email protected]>
Co-authored-by: Niels Lange <[email protected]>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525)

* Fix inconsistent button styling with TT3 (woocommerce#7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515)

* Fix Mini Cart Block global styles woocommerce#7379

Fix Mini Cart Block global styles

* add font_size

* Empty commit for release pull request

* add changelog and testing instructions

* add zip link for testing

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: EmptySet-Exe <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 20, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
senadir added a commit to senadir/woocommerce-blocks that referenced this pull request Nov 20, 2022
* use full link for WordPress resources (woocommerce#7211)

Co-authored-by: Niels Lange <[email protected]>

* Empty commit for release pull request

* update readme

* add testing instructions

* add zip file link

* update testing instructions and changelog entry

* Bumping version strings to new version.

* Empty commit for release pull request

* Update styles of the Filter by Attribute dropdown so it looks good in TT3 (woocommerce#7506)

* Use theme's body background color as the mini cart contents default background color (woocommerce#7510)

Co-authored-by: Albert Juhé Lluveras <[email protected]>

* Price Slider: use `currentColor` for the slider (woocommerce#7527)

* Fixed Price Slider Issue

Located where the price slider was hard coded and replaced it.

* fix CSS lint

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* use currentColor instead of hard-coded color for the slider of the Filter By Price block woocommerce#7130

use currentColor instead of hard-coded color for the slider of the Filte By Price block

* remove background-color

Co-authored-by: EmptySet-Exe <[email protected]>
Co-authored-by: Niels Lange <[email protected]>

* Make price slider 'inactive' range half transparent so it looks better in dark themes (woocommerce#7525)

* Fix inconsistent button styling with TT3 (woocommerce#7516)

* fix inconsistent button styling with TT3

* use wc_wp_theme_get_element_class_name

* add check to be sure that wc_wp_theme_get_element_class_name function exists

* Fix Mini Cart Block global styles woocommerce#7379 (woocommerce#7515)

* Fix Mini Cart Block global styles woocommerce#7379

Fix Mini Cart Block global styles

* add font_size

* Empty commit for release pull request

* add changelog and testing instructions

* add zip link for testing

* Bumping version strings to new version.

Co-authored-by: Seghir Nadir <[email protected]>
Co-authored-by: Niels Lange <[email protected]>
Co-authored-by: github-actions <[email protected]>
Co-authored-by: Luigi <[email protected]>
Co-authored-by: Albert Juhé Lluveras <[email protected]>
Co-authored-by: Tung Du <[email protected]>
Co-authored-by: EmptySet-Exe <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. status: blocker Used on issues or pulls that block work from being released. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Version 7.3 uses relative URLs to load scripts from wp-includes
4 participants