Fix Currency Switcher Block flag rendering on Windows platform #6832

eduardoumpierre · 2023-07-20T21:53:31Z

WP Emoji replaces the flag emoji with an image if it's not natively supported by the browser. This behavior is problematic on Windows because it renders an <img> tag inside the <option>, which can lead to crashes.

List of country flag emojis. 🇯🇵 🇰🇷 🇩🇪 🇨🇳 🇺🇸 🇫🇷 🇪🇸 🇮🇹 🇷🇺 🇬🇧 Emoji flags are supported on all major platforms except Windows, which displays two-letter country codes instead of emoji flag images.

Emojipedia - https://emojipedia.org/flags/

Exception

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at removeChild (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:11109:20)
    at commitDeletionEffectsOnFiber (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24038:17)
    at commitDeletionEffects (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:23986:7)
    at recursivelyTraverseMutationEffects (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24269:11)
    at commitMutationEffectsOnFiber (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24356:11)
    at recursivelyTraverseMutationEffects (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24283:9)
    at commitMutationEffectsOnFiber (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24586:11)
    at recursivelyTraverseMutationEffects (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24283:9)
    at commitMutationEffectsOnFiber (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24356:11)
    at recursivelyTraverseMutationEffects (wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:24283:9)

Changes proposed in this Pull Request

Checks if the OS supports emoji flags before rendering it.

Testing requirement

Windows 10 platform

Testing instructions

Before checking out to this branch

Setup jurassic tube by running npm run tube:setup
Start the jurassic tube npm run tube:start
Open your test site on your jurassic tube domain
Go to Appearance > Widgets
On the sidebar, add the block "Currency Switcher Block"
Click on the block and check "Display flags" on the side panel
Unfocus the block by clicking anywhere, click on the block again, and uncheck "Display flags"
The block should crash

Checkout to this branch

Repeat the steps above
The block shouldn't crash anymore
I tested it on different environments and browsers, but feel free to test on the ones you have access
Stop the jurassic tube npm run tube:stop

Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
Covered with tests (or have a good reason not to test in description ☝️)
Tested on mobile (or does not apply)

Post merge

Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
Add or update critical flows and testing instructions for critical flows, if applicable.
Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

Check if the browser supports flag emojis before rendering it.

botwoo · 2023-07-20T21:57:57Z

Test the build

Option 1. Jetpack Beta

Install and activate Jetpack Beta.
Use this build by searching for PR number 6832 or branch name fix/6192-currency-switcher-block-on-windows in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

Build info:

Latest commit: 1050ca7
Build time: 2023-07-20 21:57:56 UTC

Note: the build is updated when a new commit is pushed to this PR.

github-actions · 2023-07-20T22:02:28Z

Size Change: +32 B (0%)

Total Size: 1.25 MB

Filename	Size	Change
`release/woocommerce-payments/dist/multi-currency-switcher-block.js`	60.5 kB	+32 B (0%)

ℹ️ View Unchanged

Filename	Size
`release/woocommerce-payments/assets/css/admin.css`	1.03 kB
`release/woocommerce-payments/assets/css/success.css`	158 B
`release/woocommerce-payments/dist/blocks-checkout.css`	1.4 kB
`release/woocommerce-payments/dist/blocks-checkout.js`	39.7 kB
`release/woocommerce-payments/dist/checkout.css`	444 B
`release/woocommerce-payments/dist/checkout.js`	28.4 kB
`release/woocommerce-payments/dist/index.css`	38.8 kB
`release/woocommerce-payments/dist/index.js`	283 kB
`release/woocommerce-payments/dist/multi-currency-analytics.js`	1.05 kB
`release/woocommerce-payments/dist/multi-currency.css`	2.91 kB
`release/woocommerce-payments/dist/multi-currency.js`	55.3 kB
`release/woocommerce-payments/dist/order.css`	730 B
`release/woocommerce-payments/dist/order.js`	40.4 kB
`release/woocommerce-payments/dist/payment-gateways.css`	704 B
`release/woocommerce-payments/dist/payment-gateways.js`	38.7 kB
`release/woocommerce-payments/dist/payment-request.js`	11.6 kB
`release/woocommerce-payments/dist/product-details.js`	777 B
`release/woocommerce-payments/dist/settings.css`	8.73 kB
`release/woocommerce-payments/dist/settings.js`	198 kB
`release/woocommerce-payments/dist/subscription-edit-page.js`	669 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.css`	527 B
`release/woocommerce-payments/dist/subscription-product-onboarding-modal.js`	20.2 kB
`release/woocommerce-payments/dist/subscription-product-onboarding-toast.js`	693 B
`release/woocommerce-payments/dist/subscriptions-empty-state.css`	298 B
`release/woocommerce-payments/dist/subscriptions-empty-state.js`	19.4 kB
`release/woocommerce-payments/dist/tos.css`	236 B
`release/woocommerce-payments/dist/tos.js`	21.7 kB
`release/woocommerce-payments/dist/upe_checkout.css`	444 B
`release/woocommerce-payments/dist/upe_checkout.js`	33.9 kB
`release/woocommerce-payments/dist/upe_split_checkout.css`	444 B
`release/woocommerce-payments/dist/upe_split_checkout.js`	34.4 kB
`release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js`	35.5 kB
`release/woocommerce-payments/dist/upe-blocks-checkout.css`	1.4 kB
`release/woocommerce-payments/dist/upe-blocks-checkout.js`	39.4 kB
`release/woocommerce-payments/dist/upe-split-blocks-checkout.css`	1.41 kB
`release/woocommerce-payments/dist/upe-split-blocks-checkout.js`	40.8 kB
`release/woocommerce-payments/dist/woopay-express-button.js`	16.7 kB
`release/woocommerce-payments/dist/woopay.css`	4.06 kB
`release/woocommerce-payments/dist/woopay.js`	70.4 kB
`release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css`	633 B
`release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js`	720 B
`release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js`	2.43 kB
`release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js`	1.01 kB
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js`	522 B
`release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js`	581 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js`	160 B
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css`	2.32 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js`	13.8 kB
`release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css`	2.32 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css`	1.2 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css`	403 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css`	3.56 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css`	299 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css`	742 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css`	572 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css`	411 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js`	9.55 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js`	6.8 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js`	3.83 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js`	544 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js`	2.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js`	22.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js`	11.6 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js`	1.29 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js`	502 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js`	355 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js`	429 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js`	1.38 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js`	781 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js`	1.1 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js`	1.27 kB
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css`	392 B
`release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js`	3.06 kB

_{compressed-size-action}

tpaksu · 2023-07-21T07:52:11Z

Don't we also list the currencies with flags on the frontend (currency switcher block & widget)? I think removing the flag when it's Windows isn't a solution, maybe we need to find a polyfill or something to fix it. A quick SO search ended up with these solutions: https://stackoverflow.com/questions/62729729/how-do-i-view-country-flags-on-windows-10-through-html

eduardoumpierre · 2023-07-25T14:20:56Z

Don't we also list the currencies with flags on the frontend (currency switcher block & widget)? I think removing the flag when it's Windows isn't a solution, maybe we need to find a polyfill or something to fix it.

The main issue is with WP Emoji which replaces the emoji flag with a <img> tag. The generated HTML is invalid as the <option> shouldn't contain any HTML tags, just plain text (Check the "Permitted content" section on this MDN doc).

We are trying to render the flag that is ignored on Windows due to the WP Emoji replacement, and when we toggle the "Display flags" option, it tries to dismount the never mounted flag throwing the fatal error.

I only have WP Emoji on the admin dashboard locally, and it renders just the country code in the shop pages on Windows, which would be OK to have on the settings page, but I didn't see a way to disable WP Emoji there.

I'll try to find an alternative approach, but for now, I don't see a better way to do it rather than not rendering at all if the emoji flags aren't supported.

Thanks for your input @tpaksu!

tpaksu · 2023-07-31T12:42:38Z

@eduardoumpierre I couldn't get a Windows browser to test it, as I don't have a Windows PC anymore (gave away my Windows desktop 😢) maybe someone else should continue reviewing this.

eduardoumpierre · 2023-07-31T12:48:57Z

Thanks, @tpaksu!

I reviewed the code from docker/wordpress/wp-includes/js/twemoji.js and docker/wordpress/wp-includes/js/wp-emoji.js, and it seems there is a wp-exclude-emoji class that could be used to prevent the emoji replacement, but it's not working correctly for that case. I also discovered that twemoji should ignore <select> tags by default.

tpaksu · 2023-07-31T13:05:41Z

That's a good investigation! So, maybe it's something different running on the admin side?

eduardoumpierre · 2023-07-31T13:15:30Z

So, maybe it's something different running on the admin side?

That's hard to tell because we have the static files with some modifications on our side, but it's definitely not working as it should. It checks each child node and evaluates if it should replace the emojis, but it seems to be checking just the outer nodes. I'll spend some time this week investigating this behavior.

tpaksu · 2023-07-31T13:18:58Z

Thanks! I'll join the investigation if I can spare some time. Looks interesting :)

allie500 · 2023-07-31T14:25:17Z

@eduardoumpierre I have a Windows 10 desktop I can use to test the flag rendering if needed. Just let me know.

eduardoumpierre · 2023-07-31T14:28:46Z

I think we could explore an alternative approach before proceeding with not rendering the flags at all on Windows, but I'll let you know. Thank you @allie500!

jessepearson · 2023-08-03T16:48:39Z

@eduardoumpierre I have Windows 11 on my personal PC if that needs to be tested.

allie500

Thanks for investigating and working on a solution to this issue, Eduardo! The code change is simple and easy to understand. I was able to reproduce the block crashing behavior on my Windows 10 desktop on the develop branch. The block didn't crash on my Windows 10 desktop with this PR branch checked out.

I also ran through the test on my Mac laptop and Google Pixel with the PR branch checked out. The block didn't crash on either device.

LGTM

eduardoumpierre · 2023-08-28T20:48:21Z

@tpaksu I will proceed with merging this PR as it fixes the crashing issue. We can open an issue to investigate the wp-emoji behavior and explore a better solution in the future.

tpaksu · 2023-08-29T06:24:53Z

@eduardoumpierre sure, it would be easier if wp-emoji would really skip rendering on non-supporting platforms. If it's surfaced again, we can discuss it then. Thanks for merging this!

eduardoumpierre added 2 commits July 20, 2023 18:34

Update flag emoji rendering logic

fe850a4

Check if the browser supports flag emojis before rendering it.

Add changelog entry

1050ca7

eduardoumpierre requested a review from a team July 20, 2023 22:01

eduardoumpierre added the pr: needs review label Jul 20, 2023

eduardoumpierre marked this pull request as ready for review July 20, 2023 22:01

allie500 approved these changes Aug 17, 2023

View reviewed changes

dwainm added pr: ready to merge and removed pr: needs review labels Aug 18, 2023

eduardoumpierre added this pull request to the merge queue Aug 28, 2023

Merged via the queue into develop with commit e9baed0 Aug 28, 2023

eduardoumpierre deleted the fix/6192-currency-switcher-block-on-windows branch August 28, 2023 21:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Currency Switcher Block flag rendering on Windows platform #6832

Fix Currency Switcher Block flag rendering on Windows platform #6832

eduardoumpierre commented Jul 20, 2023 •

edited

Loading

botwoo commented Jul 20, 2023

github-actions bot commented Jul 20, 2023

tpaksu commented Jul 21, 2023

eduardoumpierre commented Jul 25, 2023 •

edited

Loading

tpaksu commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

tpaksu commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

tpaksu commented Jul 31, 2023

allie500 commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

jessepearson commented Aug 3, 2023

allie500 left a comment

eduardoumpierre commented Aug 28, 2023

tpaksu commented Aug 29, 2023

Fix Currency Switcher Block flag rendering on Windows platform #6832

Fix Currency Switcher Block flag rendering on Windows platform #6832

Conversation

eduardoumpierre commented Jul 20, 2023 • edited Loading

Exception

Changes proposed in this Pull Request

Testing requirement

Testing instructions

Before checking out to this branch

Checkout to this branch

botwoo commented Jul 20, 2023

Test the build

Option 1. Jetpack Beta

Option 2. Jurassic Ninja - available for logged-in A12s

github-actions bot commented Jul 20, 2023

tpaksu commented Jul 21, 2023

eduardoumpierre commented Jul 25, 2023 • edited Loading

tpaksu commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

tpaksu commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

tpaksu commented Jul 31, 2023

allie500 commented Jul 31, 2023

eduardoumpierre commented Jul 31, 2023

jessepearson commented Aug 3, 2023

allie500 left a comment

Choose a reason for hiding this comment

eduardoumpierre commented Aug 28, 2023

tpaksu commented Aug 29, 2023

eduardoumpierre commented Jul 20, 2023 •

edited

Loading

eduardoumpierre commented Jul 25, 2023 •

edited

Loading