Localising a Block

Question

I'm trying to localise my Gutenberg plugin and block, the PHP side is translated but zero luck on the js side.

I tried the official guide, few other blog posts, the solutions posted in this post enter link description here and this one enter link description here but nothing. Not even with the simplest block.

Maybe I'm missing something... Any idea? Thanks in advance.

WordPress version: 6.1.1 , PHP version: 8.0.28 , WP-CLI version: 2.7.1

EDITED as other answers recommendations: Still not working

My structure:

/my-block/
      /build/
          - index.js
          - index.js.map
          - index.asset.php
      /src/
          - index.js
      /languages/
          - my-block-es_ES.mo
          - my-block-es_ES.po
          - my-block-es_ES.pot
          - my-block-es_ES-1fdf421c05c1140f6d71444ea2b27638.json

       - block.json
       - my-block.php
       - package.json
       - ...

The main PHP my-block.php:

<?php
/**
 * Plugin Name:       My Block
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           1
 * Text Domain:       my-block
 */

function create_block_my_block_block_init() {
    register_block_type( __DIR__ );

    // Load MO files for PHP.
    load_plugin_textdomain( 'my-block', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
}
add_action( 'init', 'create_block_my_block_block_init' );


function script_translations(){
    // Load JSON files for JS - this is necessary if using a custom languages path!!
    wp_set_script_translations( 'my-block-local-edit-script', 'my-block', plugin_dir_path( __FILE__ ) . '/languages' );
}
add_action( 'wp_enqueue_script', 'script_translations' );

The block.json

{
   "apiVersion": 2,
   "title": "Test Gutenberg Block Title",
   "name": "my-block/local",
   "category": "layout",
   "textdomain": "my-block",
   "icon": "universal-access-alt",
   "editorScript": "file:build/index.js"
}

And the src/index.js that compiles into build/index.js

/**
 * WordPress dependencies
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Register the block
registerBlockType('my-block/local', {
   title: __('My Block Local', 'my-block'),
   edit: function () {
      return <p> {__('Hello world', 'my-block')} (from the editor)</p>;
   },
   save: function () {
      return <p> {__('Hello world', 'my-block')} (from the frontend) </p>;
   },
});

Answer 1

There are 2 main issues in your code:

1. As stated in my answer, the script handle format is <block name with slashes replaced with hypens>-editor-script, so because your block name is my-block/local, then the script handle is my-block-local-editor-script and not my-block-local-edit-script.

2. The correct action name is wp_enqueue_scripts (note the "s") and not wp_enqueue_script. However, wp_enqueue_scripts would not work because that's for the front-end (non-admin side). For admin use like the post editing screen at wp-admin/post.php, you can use either admin_enqueue_scripts or a hook specific to the block/Gutenberg editor like enqueue_block_editor_assets.

3. Your JSON translation file should also be using dfbff627e6c248bcb3b61d7d06da9ca9 which is the value of md5( 'build/index.js' ) (no ./). So the file name should instead be my-block-es_ES-dfbff627e6c248bcb3b61d7d06da9ca9.json 🙂

   That value/hash is also what you'd get when you run this via WP-CLI: wp i18n make-json my-block-<locale>.po ./ --no-purge after doing a cd languages in your plugin directory.

How to fix the issues 1 and 2:

1. Change the wp_set_script_translations() line (it's line 20 in your code) to:

   wp_set_script_translations(
       'my-block-local-editor-script',           // script handle
       'my-block',                               // text domain
       plugin_dir_path( __FILE__ ) . 'languages' // path to your translation files
   );
   

   Or you can use generate_block_asset_handle() to generate the script handle:

   $script_handle = generate_block_asset_handle( 'my-block/local', 'editorScript' );
   wp_set_script_translations( $script_handle, 'my-block', plugin_dir_path( __FILE__ ) . 'languages' );
   

2. Change the add_action( 'wp_enqueue_script', 'script_translations' ); (line 22 in your code) to:

   add_action( 'enqueue_block_editor_assets', 'script_translations' );
   
   // These also work:
   //add_action( 'admin_enqueue_scripts', 'script_translations' );
   //add_action( 'init', 'script_translations' );
   

   Note about using init: Calling register_block_type() will automatically and immediately register the block editor script — see register_block_script_handle(), so init can be used to set the script translations as long as it's called after calling register_block_type().