Gutenberg translation is not working

Question

I have followed the documentation of WordPress on translating Gutenberg block, I have used WP CLI to create the .pot, .po and .json file and uploaded to my langauges folder inside the folder of that plugin, but still it is not working. Can someone tell me whats wrong with my code?

PHP:

function custom_blocks_load_plugin_textdomain() {
    load_plugin_textdomain( 'custom-blocks', FALSE, '');
}
add_action( 'plugins_loaded', 'custom_blocks_load_plugin_textdomain' );

//register block template
function block_registration_template($block_path, $block_handle, $script_handle, $render_callback = false){
    wp_register_script(
        $script_handle,
        plugins_url( $block_path , __FILE__ ),
        [ 'wp-i18n', 'wp-element', 'wp-blocks', 'wp-components', 'wp-editor' ],
        filemtime( plugin_dir_path( $block_path , __FILE__ ) )
    );

    $parameters = array(
        'editor_script' => $script_handle,
    );

    if($render_callback){
        $parameters['render_callback'] = $render_callback;
    }

    register_block_type( $block_handle, $parameters );

}

function block_registration(){
block_registration_template('/ref_block.js', 'custom-blocks/ref', 'CUSTOM-block-ref');

block_registration_template('/ref_holder_block.js', 'custom-blocks/ref-holder', 'CUSTOM-block-ref-holder');
}

add_action('init', 'block_registration');

function custom_blocks_set_script_translations() {
    wp_set_script_translations( 'CUSTOM-block-ref-holder', 'custom-blocks');
}
add_action( 'init', 'custom_blocks_set_script_translations' );

JS

(() => {
    const __ = wp.i18n.__; // The __() for internationalization.
    const el = wp.element.createElement; // The wp.element.createElement() function to create elements.
    const registerBlockType = wp.blocks.registerBlockType; // The registerBlockType() to register blocks.

    const ServerSideRender = wp.components.ServerSideRender;
    const TextControl = wp.components.TextControl;
    const TextareaControl = wp.components.TextareaControl;
    const InspectorControls = wp.editor.InspectorControls;
    const { RichText } = wp.blockEditor;
    const { InnerBlocks } = wp.blockEditor;

    //Custom variable
    const allowedBlocks = [ 'custom-blocks/ref' ] ;
    const blockTemplate = [ [ 'custom-blocks/ref', {} ] ];

    registerBlockType( 'custom-blocks/ref-holder', { // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
        title: __( 'Reference Holder', 'custom-blocks' ), // Block title.

        category: 'custom_block',
        keywords: [ __('ref'), 'custom-blocks'],
        attributes: {

        },
        supports: {
            customClassName: false,
            className: false,
        },

        edit(props) {

            return el(
                'div', { className: 'ref-block-holder'},
                el('h2', {}, __('Reference', 'custom-blocks') ), 
                el ( InnerBlocks,
                {
                    allowedBlocks: allowedBlocks,
                    template: blockTemplate
                } )
            );
        },

        save(props) {

            return el(
                'div', { className: 'ref-block-holder'},
                el('h2', {}, __('Reference', 'custom-blocks') ),
                el ( InnerBlocks.Content,
                {
                    allowedBlocks: allowedBlocks,
                    template: blockTemplate
                } )
            );
        },
    });
})();

JSON:

{ 
   "translation-revision-date":"2020-02-10 15:33+0800",
   "generator":"WP-CLI/2.4.0",
   "source":"ref_holder_block.js",
   "domain":"custom-blocks",
   "locale_data":{ 
      "messages":{ 
         "":{ 
            "domain":"custom-blocks",
            "lang":"zh_HK",
            "plural-forms":"nplurals=1; plural=0;"
         },
         "Reference":[ 
            "\u53c3\u8003\u8cc7\u6599"
         ],
         "Reference Holder":[ 
            ""
         ]
      }
   }
}

Any help would be appreciated. Thanks!

Answer 1

I've spent all day debugging this issue, and by looking at the code I can guess we shared the same problems:

1. assuming $script_handle is CUSTOM-block-ref-holder, the PHP file is almost correct.
2. wp_set_script_translations needs the full path to work. In your case, although you probably need to adjust for your path, it should be something like

wp_set_script_translations(
  'CUSTOM-block-ref-holder',
  'custom-blocks',
  plugin_dir_path(__FILE__) . 'languages/'
);

3. The name of the JSON file should be custom-blocks-zh_HK-CUSTOM-block-ref-holder.json
4. The "domain" fields don't really matter in the JSON (as of today), I left them as messages, as per default from WP CLI, but in my tests they worked even with totally arbitrary and random strings.

Reference: JavaScript i18n support in WordPress 5 | Advanced usage

Answer 2

Ok I found the answer for myself. If you want to make the translation works, you have to register the script with wp_register_script() in init action hook and enqueue scripts in wp_enqueue_scripts hook, if you hook wp_set_script_translations to init.

If you run wp_register_script() wp_enqueue_scripts hook and hook wp_set_script_translations to init, wp_set_script_translations would not be able to get the handle because init fires first!

Finally!