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
2. Pascal Birchler
 @swissspidy
3. What This Talk is About
4. Making a Plugin Translation-Ready
5. Gutenberg + Internationalization
6. Workflow Improvements
7. WordPress Plugin Internationalization WordPress.org
8. Writing a Plugin
9. my-plugin/ my-plugin.php readme.txt
10. <?php /** * 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' );
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.
12. WordPress.org Plugin Directory
13. wordpress.org/plugins/my-plugin
14. translate.wordpress.org
17. wp-content/ languages/ my-plugin-de_DE.mo my-plugin-de_DE.po
18. 1. Write Plugin 2. Submit to WordPres.org 3. Translate 4. Done!
19. WordPress Plugin Internationalization Private Plugin
20. Writing a Plugin
21. String Extraction
22. <?php /** * 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' );
24. makepot grunt-wp-i18n WP-CLI
25. my-plugin/ my-plugin.php languages/ my-plugin.pot
26. Manual Translation
27. my-plugin/ my-plugin.php languages/ my-plugin.pot my-plugin-de_DE.po my-plugin-de_DE.mo
28. load_plugin_textdomain( 'my-plugin', false, plugin_basename( __DIR__ ) . '/languages' )
29. 1. Write Plugin 2. String Extraction 3. Translate 4. Load Translations 5. Done!
30. Comparison
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
32. Gutenberg
33. JavaScript Internationalization
34. // my-block.js wp_enqueue_script( 'my-block' ) // editor-integration.js wp_enqueue_script( 'editor-js' ) // hacks.js wp_enqueue_script( 'other-stuff' )
35. const { __ } = wp.i18n __( 'Hello World', 'my-plugin' )
36. load_plugin_textdomain()
37. wp_set_script_translations( 'editor-js', // script handle 'my-plugin', // text domain '/path/to/translations' )
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
39. npm install po2json po2json my-plugin-de_DE.po my-plugin-de_DE-editor-js.json -f jed1.x
41. Workflow Improvements
42. WP-CLI Helpers
43. wp i18n po2json
44. Introducing Traduttore
45. translate.wordpress.org For Everyone
48. How it Works
49. 1. Write Plugin 2. Translate 3. Done!
51. \Required\Traduttore_Registry\add_project( 'plugin', 'my-plugin', 'https://translate.example.com/api/translations/my-plugin/' );
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
56. github.com/wearerequired/traduttore wearerequired.github.io/traduttore
57. SaaS?
59. Thank You.