$30 off During Our Annual Pro Sale. View Details »

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.

Pascal Birchler

April 15, 2018
Tweet

More Decks by Pascal Birchler

Other Decks in Technology

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