Gutenberg I18N Block
This is a proof-of-concept to demonstrate how a fully internationalised an localised Gutenberg block works.
Note: These internationalisation tools used in this sample plugin are still under development. Things will eventually change and get less complex.
To install all
npm dependencies in this repository, run
Plugins hosted on WordPress.org
If you want to build upon this proof-of-concept plugin for a project that is hosted on the WordPress.org Plugin Directory, please check out the pot-to-php branch in the meantime.
Not a fan of Babel?
There are two example branches to demonstrate its use:
In this branch, we don't need
@wordpress/babel-plugin-makepotanymore as we just use WP-CLI for the string extraction. Neat!
- no-babel Since this block is rather simple and we don't actually need Babel's transpiler features, we can use the JS straight away.
If you want to apply the I18N functionality from this block to yours, you need three main scripts:
block/src/block.jsto something more browsers understand in
npm run makepotThis command uses
gutenberg-i18n-block.pot). It also allows us to translate the plugin's name and description.
gutenberg-i18n-block-js.pot and then load these via
load_plugin_textdomain() just when needed. To make things easier, you could use a separate text domain for that.
This really only gets interesting for larger projects where you have many strings to translate in both PHP and JS. Keeping these separated means you don't unnecessarily load multiple KB of translations when you don't need them (e.g. when you're not in the Gutenberg editor).