How to make Gutenberg Block Translation work? - wordpress

Question

I've just built a Gutenberg block, and I'd like to have it translated into different languages. I am using my WordPress in Portuguese and I've made a Portuguese translation. I followed all the steps available in the documentation https://developer.wordpress.org/block-editor/developers/internationalization/ and it still didn't work.
My plugin is called spoiler-alert.
I have created a .pot file named spoileralert.pot in the /spoiler-alert/languages folder. Then, I've generated the md5 files and even created a new file with all my strings using a script handler. My languages folder structure looks like this:
languages
- spoileralert.pot
- spoileralert-pt_BR.po
- spoileralert-pt_BR-<HASH-CODE-1>.json
- spoileralert-pt_BR-<HASH-CODE-2>.json
- spoileralert-pt_BR-<HASH-CODE-3>.json
- spoileralert-pt_BR-spoileralert.json
And here is my PHP file spoiler-alert.php:
function spoiler_alert_spoiler_alert_block_init() {
$dir = dirname( __FILE__ );
$script_asset_path = "$dir/build/index.asset.php";
if ( ! file_exists( $script_asset_path ) ) {
throw new Error(
'You need to run `npm start` or `npm run build` for the "spoiler-alert/spoiler-alert" block first.'
);
}
$index_js = 'build/index.js';
$script_asset = require( $script_asset_path );
wp_register_script(
'spoiler-alert-spoiler-alert-block-editor',
plugins_url( $index_js, __FILE__ ),
$script_asset['dependencies'],
$script_asset['version']
);
$editor_css = 'build/index.css';
wp_register_style(
'spoiler-alert-spoiler-alert-block-editor',
plugins_url( $editor_css, __FILE__ ),
array(),
filemtime( "$dir/$editor_css" )
);
$style_css = 'build/style-index.css';
wp_register_style(
'spoiler-alert-spoiler-alert-block',
plugins_url( $style_css, __FILE__ ),
array(),
filemtime( "$dir/$style_css" )
);
register_block_type( 'spoiler-alert/spoiler-alert', array(
'editor_script' => 'spoiler-alert-spoiler-alert-block-editor',
'editor_style' => 'spoiler-alert-spoiler-alert-block-editor',
'style' => 'spoiler-alert-spoiler-alert-block',
) );
wp_set_script_translations( 'spoileralert', 'spoiler-alert', plugin_dir_path( __FILE__ ) . '/languages' );
}
add_action( 'init', 'spoiler_alert_spoiler_alert_block_init' );
In my .js files I've imported the translation package using: import { __ } from '#wordpress/i18n';
And I am using the translations like: title: __( 'Spoiler Alert', 'spoiler-alert' ),
How can I make the translation display correctly?

Answer 1

It's been a while already, but it might still be useful to you or someone else out there. I'm simply copying and pasting what I've already answered here.
I've been through this process quite a few times already, so I'm 100% sure this is working properly. Carefully go through each one of the steps and you should manage to solve any issues you might be running into ;)
Translation has finally been properly developed and documented: https://developer.wordpress.org/block-editor/developers/internationalization/
Basically, you need to:
Use the wp-i18n package to define which are the strings in your project to be translatable.
Compile your code (wp i18n make-pot will search for translation strings in your compiled code, not in your source).
Use the WP-CLI (wp i18n make-pot) to create a .pot file, just like we've always used with WP themes and plugins.
Generate a .po file based on our previously created .pot and translate its content.
Use the WP-CLI again (wp i18n make-json) to convert our .po file to the JSON format needed.
Use the wp_set_script_translations PHP function to load the translation files.