Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPress Internationalization Workflows

WordPress Internationalization Workflows

With WordPress 5.0 and its new block editor on the horizon, I've updated this talk with new information regarding the JavaScript internationalization functionality in WordPress core.

In this presentation I'm explaining how internationalization and localization work in WordPress and how one can leverage the powers of WordPress, GlotPress, and WP-CLI to improve the translation workflow in their WordPress projects.

Pascal Birchler

November 24, 2018
Tweet

More Decks by Pascal Birchler

Other Decks in Technology

Transcript

  1. WordPress
    Internationalization
    Workflows
    WordCamp Sofia 2018

    View Slide

  2. Pascal Birchler

    @swissspidy

    View Slide

  3. What This Talk is About

    View Slide

  4. Making a Plugin
    Translation-Ready

    View Slide

  5. Gutenberg
    +
    Internationalization

    View Slide

  6. Workflow
    Improvements

    View Slide

  7. WordPress Plugin Internationalization
    WordPress.org

    View Slide

  8. Writing a Plugin

    View Slide

  9. my-plugin/
    my-plugin.php
    readme.txt

    View Slide

  10. /**
    * Plugin Name: My Super Awesome Plugin
    * Plugin URI: https://wordpress.org/plugins/my-plugin/
    * Description: My WordPress plugin that does nothing.
    * Version: 1.0.0
    * Author: Pascal Birchler
    * Author URI: https://pascalbirchler.com
    */
    __( 'Translate me', 'my-plugin' );

    View Slide

  11. === My Super Awesome Plugin ===
    Contributors: swissspidy
    Requires at least: 4.6
    Stable tag: 1.0.0
    License: GPLv2 or later
    My WordPress plugin that does nothing.

    View Slide

  12. WordPress.org
    Plugin Directory

    View Slide

  13. wordpress.org/plugins/my-plugin

    View Slide

  14. translate.wordpress.org

    View Slide

  15. View Slide

  16. View Slide

  17. wp-content/
    languages/
    my-plugin-de_DE.mo
    my-plugin-de_DE.po

    View Slide

  18. 1. Write Plugin
    2. Submit to WordPres.org
    3. Translate
    4. Done!

    View Slide

  19. WordPress Plugin Internationalization
    Private Plugin

    View Slide

  20. Writing a Plugin

    View Slide

  21. String Extraction

    View Slide

  22. /**
    * Plugin Name: My Super Awesome Plugin
    * Plugin URI: https://wordpress.org/plugins/my-plugin/
    * Description: My WordPress plugin that does nothing.
    * Version: 1.0.0
    * Author: Pascal Birchler
    * Author URI: https://pascalbirchler.com
    */
    __( 'Translate me', 'my-plugin' );

    View Slide

  23. View Slide

  24. makepot
    grunt-wp-i18n
    WP-CLI

    View Slide

  25. my-plugin/
    my-plugin.php
    languages/
    my-plugin.pot

    View Slide

  26. Manual Translation

    View Slide

  27. my-plugin/
    my-plugin.php
    languages/
    my-plugin.pot
    my-plugin-de_DE.po
    my-plugin-de_DE.mo

    View Slide

  28. load_plugin_textdomain(
    'my-plugin',
    false,
    plugin_basename( __DIR__ ) . '/languages'
    )

    View Slide

  29. 1. Write Plugin
    2. String Extraction
    3. Translate
    4. Load Translations
    5. Done!

    View Slide

  30. Comparison

    View Slide

  31. WordPress.org Private Plugin
    - Very easy to use
    - Translation Platform
    - Just-in-time Translation
    Loading
    - Complicated process
    - String Extraction
    - No Translation
    Community
    - Manual Translation
    Loading

    View Slide

  32. Gutenberg

    View Slide

  33. JavaScript
    Internationalization

    View Slide

  34. // my-block.js
    wp_enqueue_script( 'my-block' )
    // editor-integration.js
    wp_enqueue_script( 'editor-js' )
    // hacks.js
    wp_enqueue_script( 'other-stuff' )

    View Slide

  35. const { __ } = wp.i18n
    __( 'Hello World', 'my-plugin' )

    View Slide

  36. load_plugin_textdomain()

    View Slide

  37. wp_set_script_translations(
    'editor-js', // script handle
    'my-plugin', // text domain
    '/path/to/translations'
    )

    View Slide

  38. languages/
    my-plugin-de_DE.mo
    my-plugin-de_DE.po
    my-plugin-de_DE-editor-js.json
    my-plugin-de_DE-my-block.json
    my-plugin-de_DE-other-stuff.json

    View Slide

  39. npm install po2json
    po2json
    my-plugin-de_DE.po
    my-plugin-de_DE-editor-js.json
    -f jed1.x

    View Slide

  40. View Slide

  41. Workflow
    Improvements

    View Slide

  42. WP-CLI
    Helpers

    View Slide

  43. wp i18n po2json

    View Slide

  44. Introducing
    Traduttore

    View Slide

  45. translate.wordpress.org
    For Everyone

    View Slide

  46. View Slide

  47. View Slide

  48. How it Works

    View Slide

  49. 1. Write Plugin
    2. Translate
    3. Done!

    View Slide

  50. View Slide

  51. \Required\Traduttore_Registry\add_project(
    'plugin',
    'my-plugin',
    'https://translate.example.com/api/translations/my-plugin/'
    );

    View Slide

  52. View Slide

  53. WordPress.org &
    Traduttore
    Private Plugin
    - Very easy to use
    - Translation Platform
    - Just-in-time Translation
    Loading
    - JSON Translation Files
    - Complicated process
    - String Extraction
    - No Translation
    Community
    - Manual Translation
    Loading

    View Slide

  54. View Slide

  55. View Slide

  56. github.com/wearerequired/traduttore
    wearerequired.github.io/traduttore

    View Slide

  57. SaaS?

    View Slide

  58. View Slide

  59. Thank You.

    View Slide