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
   

   View Slide

2. Pascal Birchler

   @swissspidy
   

   View Slide

3. View Slide

4. Internationalisation
   

   View Slide

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)
   

   View Slide

6. The process of adapting a product or
   service to a particular language,
   culture, and desired local
   “look-and-feel.”
   Localisation (L10N)
   

   View Slide

7. “Localisation is like translation
   but with a cultural twist”
   Localisation (L10N)
   

   View Slide

8. Language + Culture
   Locale
   

   View Slide

9. Internationalisation
   in WordPress
   

   View Slide

10. my-plugin/my-plugin.php
    slug / text domain
    

    View Slide

11. /*
    * Plugin Name: My Plugin
    * Author: Plugin Author
    * Text Domain: my-plugin
    */
    

    View Slide

12. load_plugin_textdomain(
    'my-plugin',
    false,
    'languages'
    )
    

    View Slide

13. __( 'Hello World', 'my-plugin' )
    

    View Slide

14. my-plugin.pot
    my-plugin-es_ES.po
    my-plugin-es_ES.mo
    

    View Slide

15. wp i18n make-pot
    github.com/wp-cli/i18n-command
    

    View Slide

16. WordPress.org
    

    View Slide

17. Requires at least: 4.6
    

    View Slide

18. Photo: Kyle Sudu
    Internationalising
    JavaScript
    

    View Slide

19. wp_localize_script(
    'my-plugin-script',
    '_myPluginL10n',
    [
    'helloWorld' => __( 'Hello World','my-plugin' ),
    'goodbye' => __( 'Goodbye', 'my-plugin' ),
    ...
    ]
    );
    

    View Slide

20. <br/>var _myPluginL10n = {<br/>helloWorld = 'Hallo Welt'<br/>};<br/>
    

    View Slide

21. // Do something
    ...
    alert( _myPluginL10n.helloWorld );
    

    View Slide

22. Disadvantages
    

    View Slide

23. 1.
    

    View Slide

24. 2. Context
    

    View Slide

25. 1 Post
    2 Posts
    

    View Slide

26. 1 Post
    2 Posts
    

    View Slide

27. Posts (1)
    Posts (2)
    

    View Slide

28. 3. Bloat
    

    View Slide

29. Photo: Kyle Sudu
    Internationalising
    JavaScript: 2.0
    

    View Slide

30. Internationalisation
    in Gutenberg
    

    View Slide

31. @wordpress/i18n
    

    View Slide

32. npm install
    @wordpress/i18n
    

    View Slide

33. import { __ } from '@wordpress/i18n'
    __( 'Hello World', 'my-plugin' )
    my-plugin/my-plugin.js
    

    View Slide

34. my-plugin.pot
    my-plugin-es_ES.po
    my-plugin-es_ES.mo
    

    View Slide

35. @wordpress/
    babel-plugin-makepot
    

    View Slide

36. wp i18n make-pot
    babel-plugin-makepot
    

    View Slide

37. WordPress.org
    

    View Slide

38. pot-to-php my-plugin.pot fake.php my-plugin
    

    View Slide

39. wp_add_inline_script(
    'wp-i18n',
    'wp.i18n.setLocaleData( … );'
    )
    

    View Slide

40. View Slide

41. github.com/swissspidy/gutenberg-i18n-block
    

    View Slide

42. Disadvantages
    

    View Slide

43. 1. Tools
    

    View Slide

44. wp i18n make-pot
    @wordpress/i18n
    @wordpress/babel-plugin-makepot
    pot-to-php
    

    View Slide

45. 2. Size
    

    View Slide

46. Internationalisation
    Improvements
    

    View Slide

47. wp_localize_script()
    vs.
    @wordpress/i18n
    

    View Slide

48. 1. Tools
    

    View Slide

49. 2. Size
    

    View Slide

50. View Slide

51. github.com/WordPress/gutenberg/issues/6015
    

    View Slide

52. Internationalisation
    Resources
    

    View Slide

53. developer.wordpress.org
    

    View Slide

54. wordpress.org/gutenberg
    

    View Slide

55. github.com/wordpress/packages
    

    View Slide

56. github.com/swissspidy/gutenberg-i18n-block
    

    View Slide

57. Thank You.
    

    View Slide