Internationalisation in the Age of Gutenberg

As software engineers and designers we need to make sure that our solutions can be used by as many people as possible. One important factor for this is internationalisation.

With tools and best practices rapidly changing, and new solutions like Gutenberg emerging, it’s time to look at how to properly internationalise and localise modern web applications.

In this presentation, I’m going to explain the concept behind internationalisation, localisation, and why we need to do more than just “making things translatable”.

I will highlight existing tools, interfaces, and best practices to get internationalisation right in the UIs we create and the code we write, no matter if it’s PHP, HTML, CSS, or JavaScript.”

For example, if you want to create a fully internationalised WordPress plugin, including a Gutenberg block, this talk is for you.

Transcript

1. Internationalisation in the Age of Gutenberg
2. Pascal Birchler
 @swissspidy
4. Internationalisation
5. The process of creating a product in such a way that it can be easily adapted to specific local languages and cultures Internationalisation (I18N)
6. The process of adapting a product or service to a particular language, culture, and desired local “look-and-feel.” Localisation (L10N)
7. “Localisation is like translation but with a cultural twist” Localisation (L10N)
8. Language + Culture Locale
9. Internationalisation in WordPress
10. my-plugin/my-plugin.php slug / text domain
11. /* * Plugin Name: My Plugin * Author: Plugin Author * Text Domain: my-plugin */
12. load_plugin_textdomain( 'my-plugin', false, 'languages' )
13. __( 'Hello World', 'my-plugin' )
14. my-plugin.pot my-plugin-es_ES.po my-plugin-es_ES.mo
15. wp i18n make-pot github.com/wp-cli/i18n-command
16. WordPress.org
17. Requires at least: 4.6
18. Photo: Kyle Sudu Internationalising JavaScript
19. wp_localize_script( 'my-plugin-script', '_myPluginL10n', [ 'helloWorld' => __( 'Hello World','my-plugin' ), 'goodbye' => __( 'Goodbye', 'my-plugin' ), ... ] );
20. <script> var _myPluginL10n = { helloWorld = 'Hallo Welt' }; </script>
21. // Do something ... alert( _myPluginL10n.helloWorld );
22. Disadvantages
23. 1.
24. 2. Context
25. 1 Post 2 Posts
26. 1 Post 2 Posts
27. Posts (1) Posts (2)
28. 3. Bloat
29. Photo: Kyle Sudu Internationalising JavaScript: 2.0
30. Internationalisation in Gutenberg
31. @wordpress/i18n
32. npm install @wordpress/i18n
33. import { __ } from '@wordpress/i18n' __( 'Hello World', 'my-plugin' ) my-plugin/my-plugin.js
34. my-plugin.pot my-plugin-es_ES.po my-plugin-es_ES.mo
35. @wordpress/ babel-plugin-makepot
36. wp i18n make-pot babel-plugin-makepot
37. WordPress.org
38. pot-to-php my-plugin.pot fake.php my-plugin
39. wp_add_inline_script( 'wp-i18n', 'wp.i18n.setLocaleData( … );' )
41. github.com/swissspidy/gutenberg-i18n-block
42. Disadvantages
43. 1. Tools
44. wp i18n make-pot @wordpress/i18n @wordpress/babel-plugin-makepot pot-to-php
45. 2. Size
46. Internationalisation Improvements
47. wp_localize_script() vs. @wordpress/i18n
48. 1. Tools
49. 2. Size
51. github.com/WordPress/gutenberg/issues/6015
52. Internationalisation Resources
53. developer.wordpress.org
54. wordpress.org/gutenberg
55. github.com/wordpress/packages
56. github.com/swissspidy/gutenberg-i18n-block
57. Thank You.