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.

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