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

Handle translations in lazy loaded files by injecting them into the page #4897

Merged
merged 5 commits into from
Oct 11, 2021

Conversation

mikejolley
Copy link
Member

This is an alternative, simpler fix for #4019 (replaces #4392) inspired by Automattic/jetpack#20926.

#4392 worked, however, it introduced complex webpack plugins, the need to calculate translation hashes to get the correct translation files, and ultimately I think would be difficult to maintain without a more in-depth knowledge of webpack.

Therefore, I've created this alternative approach which injects translations before the blocks script is output to the page.

Where #4392 required a list of $translated_chunks, this one just needs a list of webpackChunkName as defined when initializing the lazy components. Everything else is derived from that.

Fixes #4019
Closes #4392

Screenshots

Screenshot 2021-10-05 at 14 17 49

Testing

  1. Switch to Brailian Portuguese translation.
  2. Find the file wp-content/languages/woo-gutenberg-products-block-pt_BR-e330894bce4582a6969137e88a76105c.json
  3. Note that e330894bce4582a6969137e88a76105c is generated from the path to the chunk script. This PR changes the chunk name, so change e330894bce4582a6969137e88a76105c to bff28bb492f099ecaf7494b1201c4e46. This is the md5 hash of build/atomic-block-components/sale-badge.chunk.js.
  4. View the all products block. Confirm sale badges are translated like in the screenshot above.

Changelog

Fixed string translations within the All Products Block.

@mikejolley mikejolley self-assigned this Oct 5, 2021
@nerrad nerrad requested review from a team and opr and removed request for a team October 5, 2021 13:30
@github-actions
Copy link
Contributor

github-actions bot commented Oct 5, 2021

Size Change: 0 B

Total Size: 1.23 MB

ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.35 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 23.1 kB
build/all-products.js 37.2 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js 332 B
build/atomic-block-components/add-to-cart-frontend.js 8.52 kB
build/atomic-block-components/add-to-cart.js 7.84 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 875 B
build/atomic-block-components/category-list-frontend.js 472 B
build/atomic-block-components/category-list.js 476 B
build/atomic-block-components/image-frontend.js 1.88 kB
build/atomic-block-components/image.js 1.35 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 567 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 869 B
build/atomic-block-components/sku-frontend.js 392 B
build/atomic-block-components/sku.js 392 B
build/atomic-block-components/stock-indicator-frontend.js 612 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 472 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.29 kB
build/attribute-filter-frontend.js 18.6 kB
build/attribute-filter.js 12.2 kB
build/blocks-checkout.js 21.1 kB
build/cart-blocks/checkout-button-frontend.js 2.38 kB
build/cart-blocks/empty-cart-frontend.js 327 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 781 B
build/cart-blocks/items-frontend.js 254 B
build/cart-blocks/line-items-frontend.js 5.52 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.31 kB
build/cart-blocks/totals-frontend.js 269 B
build/cart-frontend.js 91.5 kB
build/cart-i2-frontend.js 52.5 kB
build/cart-i2.js 47.8 kB
build/cart.js 46.5 kB
build/checkout-blocks/actions-frontend.js 1.47 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.88 kB
build/checkout-blocks/express-payment-frontend.js 1.92 kB
build/checkout-blocks/fields-frontend.js 290 B
build/checkout-blocks/order-note-frontend.js 1.56 kB
build/checkout-blocks/order-summary-frontend.js 12.7 kB
build/checkout-blocks/payment-frontend.js 4.58 kB
build/checkout-blocks/shipping-address-frontend.js 3.04 kB
build/checkout-blocks/shipping-methods-frontend.js 5.55 kB
build/checkout-blocks/terms-frontend.js 1.64 kB
build/checkout-blocks/totals-frontend.js 271 B
build/checkout-frontend.js 54.4 kB
build/checkout.js 52.7 kB
build/featured-category.js 7.73 kB
build/featured-product.js 9.42 kB
build/handpicked-products.js 6.26 kB
build/mini-cart-component-frontend.js 36.7 kB
build/mini-cart-frontend.js 2.29 kB
build/mini-cart.js 2.34 kB
build/price-filter-frontend.js 14.3 kB
build/price-filter.js 9.66 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.13 kB
build/product-search.js 2.66 kB
build/product-tag.js 6.58 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.7 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.96 kB
build/single-product-frontend.js 26.2 kB
build/single-product.js 9.76 kB
build/stock-filter-frontend.js 8.76 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.2 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.1 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.6 kB
build/wc-blocks-editor-style.css 15.6 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.47 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.75 kB
build/wc-blocks-style-rtl.css 20.5 kB
build/wc-blocks-style.css 20.4 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.5 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

Copy link
Contributor

@opr opr left a comment

Choose a reason for hiding this comment

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

This is much cleaner than the first try. To me the code looks good, and it works as advertised. 👍🏼

Thanks for the detailed code comments too, really helpful!

@gziolo
Copy link

gziolo commented Oct 6, 2021

@youknowriad, i18n is an interesting challenge when using lazy loading for JavaScript in general, but it gets even more fun to reason about in the ES Modules world.

@mikejolley mikejolley force-pushed the fix/4019-inject-lazy-translations branch from 18318c0 to c5bd552 Compare October 11, 2021 10:56
@mikejolley mikejolley force-pushed the fix/4019-inject-lazy-translations branch from c5bd552 to f0179e8 Compare October 11, 2021 13:58
@mikejolley
Copy link
Member Author

After fixing the vendors file, I have tests running and passing locally now. Merging.

@mikejolley mikejolley merged commit 7e340cb into trunk Oct 11, 2021
@mikejolley mikejolley deleted the fix/4019-inject-lazy-translations branch October 11, 2021 15:32
@opr opr added focus: i18n The issue/PR is related to internationalization. type: bug The issue/PR concerns a confirmed bug. labels Oct 11, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
…age (woocommerce#4897)

* Formalise chunk names

* register_chunk_translations()

* Rename handle

* Include fileSuffix

* Remove .chunk prefix- it broke the vendors chunk
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: i18n The issue/PR is related to internationalization. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Sale" Not Being Translated on the All Products Block
3 participants