Internationalisation in the Age of Gutenberg

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.

5253258c79d25b02f51e0ac55e30cf69?s=128

Pascal Birchler

April 15, 2018
Tweet

Transcript

  1. Internationalisation in the Age of Gutenberg

  2. Pascal Birchler
 @swissspidy

  3. None
  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( … );' )

  40. None
  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

  50. None
  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.