3

I'm trying to set localization for a Gutenberg block. After scaffolding a basic block with wp-cli command npx @wordpress/create-block, I need to set localization. I've create my pot file and localization using wp-cli generating all json files needed.

Now how can I set up this in my plugin?

I'm registering block using metadata from block.json, where I have set up correctly textdomain.

I'm using this code to register block and load textdomain on PHP.

function create_block_gutenpride_block_init() {
   load_plugin_textdomain( 'gutenpride', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' );

   register_block_type( __DIR__ );

}

add_action( 'init', 'create_block_gutenpride_block_init' );
3
  • "I'm trying to set localization for a Gutenberg block" - you meant, your code (e.g. the edit function) is using the wp.i18n functions like __()? Can you show more of your code, e.g. the edit function and the PHP code which enqueues the editor/block scripts?
    – Sally CJ
    Sep 2, 2021 at 13:45
  • 1
    The code I use to register the block is posted. This is a new syntax that load block.json metadata to register all block attributes and more. In my JS I use wp.i18n functions correctly, but for some reason translations are not loaded. Here's reference: developer.wordpress.org/block-editor/reference-guides/block-api/… Sep 3, 2021 at 0:08
  • Ah yes, sorry, I just got confused with the render_callback.. :p Anyway, I hope my answer helps?
    – Sally CJ
    Sep 3, 2021 at 9:50

1 Answer 1

3

Summary: Perhaps like me, you just need to rename, relocate and/or manually load your script/JSON translations files?


So I created a block using the npx @wordpress/create-block gutenpride command, then I created the translation stuff (POT, PO, MO and JSON/JED files) and my plugin structure was like so (but some files like src/* were not included):

gutenpride/
    build/
        index.asset.php
        index.css
        index.js
        style-index.css
    languages/
        gutenpride-de_DE-1b3034803df8a21550db0d04471ea571.json
        gutenpride-de_DE.mo
        gutenpride-de_DE.po
        gutenpride.pot
    block.json
    gutenpride.php
  • 1b3034803df8a21550db0d04471ea571 is the MD5 hash of relative path to the built editor script at build/index.js, i.e. in PHP, md5( 'build/index.js' ).

  • In my block metadata file (block.json), I got these lines:

    "name": "create-block/gutenpride",
    ...
    "textdomain": "gutenpride",
    "editorScript": "file:./build/index.js",
    

And after debugging, I found out that if textdomain is not empty (i.e. a text domain is specified), then WordPress will automatically run the final step here: https://developer.wordpress.org/block-editor/how-to-guides/internationalization/#how-to-use-i18n-in-javascript, and in my case, WordPress called wp_set_script_translations( 'create-block-gutenpride-editor-script', 'gutenpride' ) — see register_block_script_handle(), but the script handle is basically <block name>-editor-script ( without any slashes (/) ).

So it's cool that the script translations are loaded automatically, but my JSON file was placed in the languages in my plugin folder, therefore I had to re-load the translations manually like so, which I called after the register_block_type( __DIR__ ):

// ** first param = script handle; second param = text domain
wp_set_script_translations( 'create-block-gutenpride-editor-script', 'gutenpride',
    plugin_dir_path( __FILE__ ) . '/languages/' ); // ** use a full absolute path

Alternatively, move/copy your JSON/JED files to the wp-content/languages/plugins folder and then you would not need to manually load the script translations. =) (so for example, you'd have wp-content/languages/plugins/gutenpride-de_DE-1b3034803df8a21550db0d04471ea571.json)

Additionally, I also removed the ./ in the editor script path, i.e. I used "editorScript": "file:build/index.js" instead, because otherwise, then WordPress would load the wrong file because the MD5 hash will be dfbff627e6c248bcb3b61d7d06da9ca9 ( i.e. md5( './build/index.js' ) ) and not 1b3034803df8a21550db0d04471ea571 (which is what wp i18n make-json and plugins such as Loco Translate would use).

Or if you don't want to change the editorScript value, then you'd need to edit the MD5 hash in the JSON file's name..

2
  • 1
    Many thanks for this! It's working now. So basically I have two choice: remove ./ from block.json or put the translations in main plugins folder. I was struggling to this for some days. This should be reported on documentation. Thanks Sep 3, 2021 at 17:58
  • Yes, your 3rd sentence is basically correct, but more precisely, whether or not you put the translations in the languages/plugins folder, if the MD5 hash in your JSON/JED file names is not using the ./, then you would still need to remove it from the editorScript. :)
    – Sally CJ
    Sep 4, 2021 at 8:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.