How does Gutenberg handle translations in React?

In the Gutenberg’s GitHub repository you can see the source of the i18n package that is used. In this source, you’ll see Jed getting imported (line 4 of gutenberg/packages/i18n/src/index.js) and then being used for most of the translation tasks under the hood.

Jed introduces the “Gettext Style i18n for Modern JavaScript Apps” (or at least so it says on their site).

Your question is for the .po files. Jed explains on their site:

There are quite a few available .po to .json converters out there. Gettext .po files are standard output from most decent translation companies, as it’s an old standard.

I currently use: po2json

However, I’d like to add this functionality to a separate Jed module in a future version.

However, this does not seem to apply here.

Further digging turns out, setLocaleData( data: Object, domain: string ) is used to pass the translations, in a manner like so:

$locale_data = gutenberg_get_jed_locale_data( 'gutenberg' );
wp_add_inline_script(
    'wp-i18n',
    'wp.i18n.setLocaleData( ' . json_encode( $locale_data ) . ' );'
);

(gutenberg_get_jed_locale_data( $domain ) being more or less a wrapper for get_translations_for_domain( $domain ) )

So it seems WordPress retrieves the translation data via PHP and then passes it to Jed. Jed itself does not seem to load any translation files.

The package’s readme also explains how to properly generate the .pot file containing the localized strings.

The package also includes a pot-to-php script used to generate a php files containing the messages listed in a .pot file. This is useful to trick WordPress.org translation strings discovery since at the moment, WordPress.org is not capable of parsing strings directly from JavaScript files.

npx pot-to-php languages/myplugin.pot languages/myplugin-translations.php text-domain