Site icon Hip-Hop Website Design and Development

WordPress: After Gutenberg plugin migration to block.json the localization/ translations with PolyGlot in JavaScript does not work anymore

Pixeldust WordPress Developer

I made a plugin with existing localization on WordPress.org for free. I migrated to block.json and made all changes by comparing it to the output of npx @wordpress/create-block todo-list. I read through the Block Editor guide on internationalization but there seem to be a few differences to the way it works in the todo-list example.

The result is that all my __ php functions work and translate all strings. But my __ JavaScript function does not translate any of the translation on translate.wordpress.org

What I tried and checked:

  1. block.json contains "textdomain": "simpletoc"
  2. edit.js contains import { __ } from '@wordpress/i18n';
  3. plugin.php contains Text Domain: simpletoc

I did not change it, but I use the __ function like this:

<ToggleControl
                label={__("Remove heading", "simpletoc")}

The sad thing is that it worked before in version 4.8 without block.json but I want to avoid reverting to that. Amazingly, the description in block.json does get translated but not the __ functions in the code. I tried to use some things before doing that:

In the init hook I tried to use

function register_simpletoc_block()
{

  wp_set_script_translations( 'simpletoc-js', 'simpletoc' );

  register_block_type( __DIR__ . '/build' , [
    'render_callback' => __NAMESPACE__ . '\render_callback'
  ]);
}
add_action( 'init', 'register_simpletoc_block' );

I tried this but it does not work either:

wp_set_script_translations( 'simpletoc', 'simpletoc' );

or

wp_set_script_translations( 'simpletoc-toc-editor-script-js', 'simpletoc' );

since this is the script in the edit page of Gutenberg

But since I do not set "simpletoc-js" anymore, I have no idea if this is necessary. It would be really great if someone could explain or at least help me to debug this.

This is always empty:

<script id='simpletoc-toc-editor-script-js-translations'>
( function( domain, translations ) {
    var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
    localeData[""].domain = domain;
    wp.i18n.setLocaleData( localeData, domain );
} )( "simpletoc", { "locale_data": { "messages": { "": {} } } } );
</script>

If I install my old 4.8 plugin this part contains data from translate.wordpress.org as usual.

What am I missing?