Title: JavaScript Internationalization Author: Dominik Schilling Published: October 10, 2016 Last modified: October 11, 2016 --- [ ](https://profiles.wordpress.org/ocean90/) [Dominik Schilling](https://profiles.wordpress.org/ocean90/) 7:28 pm _on_ October 10, 2016 Tags: [i18n ( 37 )](https://make.wordpress.org/core/tag/i18n/), [javascript ( 130 )](https://make.wordpress.org/core/tag/javascript/)    # JavaScript Internationalization ### Prequel Over the last few releases, WordPress has made huge steps in prioritizing internationalization and localization throughout around coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. To name a few highlights: [language packs](https://core.trac.wordpress.org/ticket/18200) for core, language packs for [plugins and themes](https://make.wordpress.org/meta/handbook/documentation/translations/), a [language chooser](https://make.wordpress.org/core/2014/09/05/language-chooser-in-4-0/), [just-in-time loading for translations](https://make.wordpress.org/core/2016/07/06/i18n-improvements-in-4-6/), and a [user-specific language setting](https://core.trac.wordpress.org/ticket/29783). But core isn’t the only place improvements have been made. [translate.wordpress.org](https://translate.wordpress.org) is **the** platform for making WordPress available in as many languages as possible. Did you know that WordPress 4.6 is currently translated into 72 – s e v e n t y t w o – languages? Recently the number of unique translators passed the 10k mark. 🌎🌍🌏 The platform is powered by [GlotPress](https://wordpress.org/plugins/glotpress/), a collaborative, web-based software translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n), [internationalization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#i18n). tool. Internationalization is not a feature, it fixes a usability issue for many users whose primary language is not English. And that’s about [47%](https://wordpress.org/about/stats/#locales) of our users. ### The next big thing As of today, WordPress doesn’t support a proper internationalization APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. in ** JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/)**. There are two, 4-year old tickets, [#22229](https://core.trac.wordpress.org/ticket/22229) and [#20491](https://core.trac.wordpress.org/ticket/20491), which request such an API. (The former one was closed as a duplicate of [#20491](https://core.trac.wordpress.org/ticket/20491) since an internationalization API in JavaScript should provide support for plurals by default.) And that’s what this post is about: JavaScript Internationalization. [@swissspidy](https://profiles.wordpress.org/swissspidy/) and I ([@ocean90](https://profiles.wordpress.org/ocean90/)) have been thinking about and working on this topic, and now is the time to gather feedback on the direction and get help from everyone interested. As you may have noticed in the prequel, internationalization spans more than WordPress core. We’ve split the task into four areas: Core, GlotPress, wp-i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n). Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.-tools, and language packs. #### Jed and wp.i18n (Core) Since we didn’t want to reinvent any wheels, our proposal is to use [Jed](http://slexaxton.github.io/Jed/) as the base library. Jed provides “Gettext Style i18n for Modern JavaScript Apps”. `wp.i18n` will be a wrapper for Jed and should be used by WordPress and plugins/ themes. One of the biggest benefits of leveraging Jed is that the actual implementation is very similar to the one we already have for PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher code. [The latest patch](https://core.trac.wordpress.org/attachment/ticket/20491/20491.6.diff) currently introduces these API functions: * `wp.i18n.getLocale()` * `wp.i18n.loadLocaleData( data )` * `wp.i18n.addTranslations( domain, data )` * `wp.i18n.__( text, domain )` * `wp.i18n._x( text, context, domain )` * `wp.i18n._n( single, plural, number, domain )` * `wp.i18n._nx( single, plural, number, context, domain )` * `wp.i18n.esc_attr__( text, domain )` * `wp.i18n.esc_html__( text, domain )` * `wp.i18n.esc_attr_x( text, context, domain )` * `wp.i18n.esc_html_x( text, context, domain )` * `wp.i18n.numberFormat( number, decimals )` ##### To do * Rethink `WP_Scripts::load_translation_file()` and `get_js_i18n_data()`, add tests. * Get feedback on the proposed API. (That’s this post!) * Apply the new API in our JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. files. - There’s a [POC patch](https://core.trac.wordpress.org/attachment/ticket/20491/20491-applied.diff) that can be worked upon. - Do not forget: Underscore templates. * Include date of jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. files in update requests for language packs. - See `wp_get_installed_translations()`. - See `wp_get_json_file_data()`, maybe `json_decode`() might be enough for this case. - What’s the format for metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. data? See [this GitHub issue](https://github.com/swissspidy/glotpress-json/issues/4) for discussion. * `sprintf()` in JavaScript – useful for core? - Ticketticket Created for both bug reports and feature development on the bug tracker.: [#38147](https://core.trac.wordpress.org/ticket/38147) #### GlotPress (translate.wordpress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. 󠀁[https://wordpress.org/](https://wordpress.org/)󠁿) Jed supports JSON for translation files. GlotPress currently doesn’t support exporting translations in a JSON format. But there is a [pull request](https://github.com/GlotPress/GlotPress-WP/pull/567) which adds the required functionality to GlotPress. The format is going to support“ simple” JSON (key -> value) and a Jed 1.x compatible format. The latter will be used by `wp.i18n`. ##### To do * Get the PR merged. Done. 🎉 * Find a solution for the missing meta data, see [the GitHub issue](https://github.com/swissspidy/glotpress-json/issues/4) mentioned before. * To enable exports like “get all translations for file common.js”, the current filterFilter Filters are one of the two types of Hooks [https://codex.wordpress.org/Plugin_API/Hooks](https://codex.wordpress.org/Plugin_API/Hooks). They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. system in GlotPress needs to be improved to support _search only in file references_ and _search for multiple file references_. #### wp-i18n-tools (Meta) A script named [MakePOT](https://github.com/ocean90/wp-i18n-tools/blob/master/makepot.php) parses PHP files to extract the original strings and their file references. This script needs to be extended to also parse JavaScript files. A POC [has been created](https://github.com/ocean90/wp-i18n-tools/pull/1). ##### To do * Convert the POC into _nice_ code with tests. * Fix [#20881](https://core.trac.wordpress.org/ticket/20881) because it’s important for the GlotPress export that all file references remain. #### Language Packs (Meta) Currently a language pack includes a .po and a .mo file. Support needs to be added so that a .json file gets bundled if a project has translations for JavaScript files. ##### To do * Export Jed files when JS translations exist. * Include JSON file in language packs. * Update API to support version checks for JSON files. - [Translations API](https://meta.trac.wordpress.org/browser/sites/trunk/api.wordpress.org/public_html/translations/lib.php#L251) ### Feedback Thanks for reading, now it’s your turn. 🙂 Do you have any feedback? Are there things we should do differently? Do you have resources to help us? Please let us know in the comments! There are currently no meetings scheduled but we’re happy to discuss any topics in [#core-i18n](https://make.wordpress.org/core/tag/core-i18n/). Just say “Hi”! [#i18n](https://make.wordpress.org/core/tag/i18n/), [#javascript](https://make.wordpress.org/core/tag/javascript/) ### Share this: * [ Threads ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=threads) * [ Mastodon ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=bluesky) * [ X ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=x) * [ Facebook ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=facebook) * [ LinkedIn ](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?share=linkedin) 1. ![](https://secure.gravatar.com/avatar/2f3047dd0ab8cff7995f253c4190f0221dec5bb1d8d376d1c5f5746353521abf? s=32&d=mm&r=g) 2. [Carrie Dils](https://profiles.wordpress.org/cdils/) 7:31 pm _on_ October 10, 2016 3. +1 4. ![](https://secure.gravatar.com/avatar/7c9f1110d4461bea9644f874501cb1bc6e47a136a0d617bd8885708a67af79ee? s=32&d=mm&r=g) 5. [daveshine (David Decker)](https://profiles.wordpress.org/daveshine/) 7:36 pm _on_ October 10, 2016 6. Wow, I feel this will be huge! +1 7. ![](https://secure.gravatar.com/avatar/43e10bdac0c553eccd6b30644312cc245d1d4df3cb04dbc898f44cae8d7d68cf? s=32&d=mm&r=g) 8. [Konstantin Obenland](https://profiles.wordpress.org/obenland/) 7:53 pm _on_ October 10, 2016 9. I noticed [i18n-calypso](https://github.com/Automattic/i18n-calypso) was mentioned in [#20491](https://core.trac.wordpress.org/ticket/20491), was there anything you learned from that project or were able to adopt? 10. * ![](https://secure.gravatar.com/avatar/1718b7c2f2afc31b4e94805b6f1f6ae2b802cc4c696f99b11fde2186006c82c9? s=32&d=mm&r=g) * [Pascal Birchler](https://profiles.wordpress.org/swissspidy/) 8:50 pm _on_ October 10, 2016 * It was especially helpful to see how various projects like Calypso and Jetpack are using the library and how they load the translations from JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. files. So there was definitely some influence. WordPress is a bit more complex though as there is not just a single text domain and there might even be a localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. switching functionality in JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/) in the future which we need to be aware of. * I also pinged some people familiar with JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n). Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. in Jetpack and i18n-calypso in general. Unfortunately I haven’t received any feedback so far. - ![](https://secure.gravatar.com/avatar/12b93d2a2baed035aa99f0cfbc4f00f3ed5d8a59563694910bcdffbccb5fa256? s=32&d=mm&r=g) - [Alex Kirk](https://profiles.wordpress.org/akirk/) 8:16 am _on_ October 14, 2016 - Happy to help with any questions around i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n). Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.-calypso and i18n in Jetpack! - ![](https://secure.gravatar.com/avatar/b53c175116e980f6d6ba067464d6365b34a4c7d76a5c145d26a8663030224d9b? s=32&d=mm&r=g) - [zinigor](https://profiles.wordpress.org/zinigor/) 8:40 am _on_ October 14, 2016 - I have done some of the JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n). Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. work in Jetpack and I’d love to chat about it, let me know if you still haven’t received any response. 11. ![](https://secure.gravatar.com/avatar/8a1e93d3c32da0fd1a1034626977f089cc5690a5584b117689368a119265e13d? s=32&d=mm&r=g) 12. [Mustafa Uysal](https://profiles.wordpress.org/m_uysl/) 8:18 pm _on_ October 10, 2016 13. Finally it’s happening 🙂 💯 14. ![](https://secure.gravatar.com/avatar/c566d3e1db3cef258ba4b931e06f47283f2ec5ac0562e3b9b20dec9ef40e13bb? s=32&d=mm&r=g) 15. [Daniel Dvorkin](https://profiles.wordpress.org/mzaweb/) 8:25 pm _on_ October 10, 2016 16. This makes me so happy! Props to the team working on this. 17. ![](https://secure.gravatar.com/avatar/a5077d59b37f0ea30add728e3230954e734df5beaaa64f953837d5f191fc6bb4? s=32&d=mm&r=g) 18. [Celso Bessa](https://profiles.wordpress.org/celsobessa/) 8:55 pm _on_ October 10, 2016 19. +1 for javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/) i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see [localization](https://make.wordpress.org/core/2016/10/10/javascript-internationalization/?output_format=md#l10n). Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. and +100 props for all the work already done. 20. ![](https://secure.gravatar.com/avatar/b01ec0896d3867ba97ca655f843bce74d396f9018a844d665e5e513297930de1? s=32&d=mm&r=g) 21. [Rami Yushuvaev](https://profiles.wordpress.org/ramiy/) 10:25 pm _on_ October 10, 2016 22. Great news! 23. ![](https://secure.gravatar.com/avatar/4c89dc1bb610b8fe3109a8f396f71c651bb779f7b0f7c3f2bc6d6f2cc3b41fb9? s=32&d=mm&r=g) 24. [Mahesh Waghmare](https://profiles.wordpress.org/mahesh901122/) 6:14 am _on_ October 11, 2016 25. +1 26. ![](https://secure.gravatar.com/avatar/f4ebf9368b7a3af8c3f46bd5b92e0d517eecc3150090e49598271a63ebccb83f? s=32&d=mm&r=g) 27. [Florian TIAR](https://profiles.wordpress.org/mista-flo/) 7:42 am _on_ October 11, 2016 28. +1 29. ![](https://secure.gravatar.com/avatar/956bb728ecd1ab68423a832bcb07323e967b60bf1d0f47ed06226c95d2e1c444? s=32&d=mm&r=g) 30. [mattyrob](https://profiles.wordpress.org/mattyrob/) 9:29 am _on_ October 11, 2016 31. This looks like a great development that will make pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/) or can be cost-based plugin from a third-party. writing with javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. [https://www.javascript.com](https://www.javascript.com/) a lot easier. 32. It’d be very nice to see some code examples using the new functions once they are finalised. 33. It’d also be good to know whether plugin developers are still supposed to use wp_localize_script() or whether these new functions can be accessed. 34. * ![](https://secure.gravatar.com/avatar/1718b7c2f2afc31b4e94805b6f1f6ae2b802cc4c696f99b11fde2186006c82c9? s=32&d=mm&r=g) * [Pascal Birchler](https://profiles.wordpress.org/swissspidy/) 11:35 am _on_ October 11, 2016 * As soon as the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. details are fleshed out, there will be a post on make/coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. to inform developers about how to use it. With this API in its current form, most developers don’t need `wp_localize_script()` anymore. 35. ![](https://secure.gravatar.com/avatar/12b93d2a2baed035aa99f0cfbc4f00f3ed5d8a59563694910bcdffbccb5fa256? s=32&d=mm&r=g) 36. [Alex Kirk](https://profiles.wordpress.org/akirk/) 8:18 am _on_ October 14, 2016 37. This is fantastic, happy to help with dev tasks around this! Comments are closed. # Post navigation [← Customize Update 2016-10-09](https://make.wordpress.org/core/2016/10/09/customize-update-2016-10-09/) [Comment “allowed” checks in WordPress 4.7 →](https://make.wordpress.org/core/2016/10/11/comment-allowed-checks-in-wordpress-4-7/)