Add numberFormatI18n Port to `@wordpress/i18n` by USERSATOSHI · Pull Request #71214 · WordPress/gutenberg

USERSATOSHI · 2025-08-14T16:41:34Z

What?

This PR adds numberFormatI18n function to the @wordpress/i18n package that formats numbers according to the current locale settings, providing a JavaScript equivalent to WordPress's PHP number_format_i18n function

Why?

WordPress translation functions have had number_format_i18n for formatting numbers in a locale-appropriate way for some time. This functionality was missing from the JavaScript @wordpress/i18n package, making it difficult for developers to format numbers consistently with the site's locale in JavaScript/React components.

How?

The implementation adds a numberFormatI18n function that:

Leverages locale information from the i18n system: Uses the lang property from existing locale data rather than adding dependencies on other packages
Converts WordPress locales to JavaScript-compatible format: Transforms WordPress locale format (e.g., de_DE) to JavaScript BCP 47 format (e.g., de-DE)
Uses native Intl.NumberFormat: Utilizes the browser's built-in internationalization API for consistent formatting
Handles edge cases:
- Falls back to en-US for invalid or unrecognized locales
- Clamps decimal places to 0-20 range for Node.js compatibility
- Supports domain-specific locale settings

Syntax

// CreateI18n
numberFormatI18n(number: number, decimals?: number, domain?: TextDomain): string

// DefaultI18n
numberFormatI18n(number: number, decimals?: number): string

Testing Instructions

Unit Tests for this function in create-i18n test file should suffice.

Screenshots or screencast

swissspidy · 2025-08-18T08:05:26Z

packages/i18n/src/create-i18n.ts

+		const wpLocale = localeData.lang || 'en_US';
+		let jsLocale;
+		if ( ! I18N_WP_LOCALE_REGEXP.test( wpLocale ) ) {
+			// If the locale is not in the expected format, default to 'en-US'.
+			jsLocale = 'en-US';
+		} else {
+			jsLocale = wpLocale.replace( '_', '-' );
+		}


Let's make sure this works for all the locales listed at https://make.wordpress.org/polyglots/teams/

I just tested them with Intl.getCanonicalLocales() and here are my findings:

de-DE-formal are actually supported (I thought it wasn't), so we should make it work too.

art-xemoji is supported too

pt-PT-ao90 doesn't work, and Intl.getCanonicalLocales() throws

So a regex is too overkill, maybe simply replacing the underscores is enough. And then perhaps try { Intl.getCanonicalLocales() } catch ... to prevent errors.

We should have tests for such "special" locales too.

Oh, thanks for informing, updating to reflect this.

pt-PT-ao90 doesn't work, and Intl.getCanonicalLocales() throws

Seems likes this is not yet supported in both browsers and Node.js Intl so either we have to make it fallback to en-US ( current behaviour ) or write an if statement to make it fallback to pt-PT.

Other than that, I have changed to use getCanonicalLocales() to test locale and I have updated the tests to include both special locales and all the wp Locales mentioned in make.wordpress.org/polyglots/teams

cc: @swissspidy

- added tests for special locales and all polygot locales - switched form regex to a getCanonicalLocale() test to check locale validity

github-actions · 2025-08-19T07:33:27Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: USERSATOSHI <tusharbharti@git.wordpress.org>
Co-authored-by: swissspidy <swissspidy@git.wordpress.org>
Co-authored-by: pedro-mendonca <pedromendonca@git.wordpress.org>
Co-authored-by: Clorith <clorith@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

packages/i18n/src/test/create-i18n.ts

Co-authored-by: Pascal Birchler <pascal.birchler@gmail.com>

swissspidy · 2025-08-19T09:02:13Z

packages/i18n/src/create-i18n.ts

+		/**
+		 * Range limit of `maximumFractionDigits` in Node.js is 0-20
+		 * Max limit of `maximumFractionDigits` in Browsers is 0-100 ( {@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits} )
+		 *
+		 * Hence we limit the decimals to 20 to ensure compatibility across environments.
+		 */
+		const validDecimals = Math.max( 0, Math.min( decimals, 20 ) );


What's the motivation for this? Is it really our responsibility to clamp this value? Seems more like the consumer's job.

The reason behind this was that during testing I found out that while Browser supported upto 100 decimals , Nodejs was limited to around 20 decimal points and anything above that it would throw an error saying invalid range.
Hence I thought of adding clamp to this to prevent this error.

feat: add numberFormatI18n port to @wordpress/i18n

19a2f4a

USERSATOSHI changed the title ~~Add numberFormatI18n Port to @wordpress/i18n~~ Prototype numberFormatI18n Port to @wordpress/i18n Aug 14, 2025

swissspidy reviewed Aug 18, 2025

View reviewed changes

USERSATOSHI added 2 commits August 18, 2025 18:35

refactor: switch to a more leaner locale check and added test

15f449b

- added tests for special locales and all polygot locales - switched form regex to a getCanonicalLocale() test to check locale validity

tests: fix tests according v20.19.4

7429a18

USERSATOSHI marked this pull request as ready for review August 19, 2025 07:33

USERSATOSHI requested a review from swissspidy August 19, 2025 07:33

USERSATOSHI changed the title ~~Prototype numberFormatI18n Port to @wordpress/i18n~~ Add numberFormatI18n Port to @wordpress/i18n Aug 19, 2025

swissspidy added [Type] Enhancement A suggestion for improvement. Internationalization (i18n) Issues or PRs related to internationalization efforts [Package] i18n /packages/i18n labels Aug 19, 2025

swissspidy reviewed Aug 19, 2025

View reviewed changes

packages/i18n/src/test/create-i18n.ts Outdated Show resolved Hide resolved

tests: refactor polygot test to use test.each

5b45046

swissspidy reviewed Aug 19, 2025

View reviewed changes

packages/i18n/src/test/create-i18n.ts Outdated Show resolved Hide resolved

tests: remove unnecessary tests

4dbe22f

Co-authored-by: Pascal Birchler <pascal.birchler@gmail.com>

swissspidy reviewed Aug 19, 2025

View reviewed changes

swissspidy requested review from SergeyBiryukov and ocean90 August 19, 2025 09:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add numberFormatI18n Port to `@wordpress/i18n`#71214

Add numberFormatI18n Port to `@wordpress/i18n`#71214
USERSATOSHI wants to merge 5 commits intoWordPress:trunkfrom
USERSATOSHI:add/port-number-format-i18n-to-js

USERSATOSHI commented Aug 14, 2025 •

edited

Loading

Uh oh!

swissspidy Aug 18, 2025

Uh oh!

USERSATOSHI Aug 18, 2025

Uh oh!

USERSATOSHI Aug 18, 2025

Uh oh!

github-actions bot commented Aug 19, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

swissspidy Aug 19, 2025

Uh oh!

USERSATOSHI Aug 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

USERSATOSHI commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Syntax

Testing Instructions

Screenshots or screencast

Uh oh!

swissspidy Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

USERSATOSHI Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

USERSATOSHI Aug 18, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

swissspidy Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

USERSATOSHI Aug 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

USERSATOSHI commented Aug 14, 2025 •

edited

Loading

github-actions bot commented Aug 19, 2025 •

edited

Loading