Get With Gutenberg - How to Internationalize Your Block • https://getwithgutenberg.com/2019/04/how-to-internationalize-your-block/

01.php

<?php
function gwg_register_block_type() {

    if ( ! function_exists( 'register_block_type' ) ) {
        // Gutenberg is not active.
        return;
    }

    wp_register_style(
        'gwg-style',
        GWG_ESNEXT_PLUGIN_URL . 'style.css',
        [],
        GWG_ESNEXT_VERSION
    );

    wp_register_style(
        'gwg-editor',
        GWG_ESNEXT_PLUGIN_URL . 'editor.css',
        [],
        GWG_ESNEXT_VERSION
    );

    wp_register_script(
        'gwg-block',
        GWG_ESNEXT_PLUGIN_URL . 'block.build.js',
        [ 'wp-blocks', 'wp-i18n' ],
        GWG_ESNEXT_VERSION,
        true // Enqueue script in the footer.
    );

    register_block_type(
        'gwg/esnext-starter',
        [
            'editor_script' => 'gwg-block',
            'editor_style'  => 'gwg-editor',
            'style'         => 'gwg-style',
        ]
    );
}
add_action( 'init', 'gwg_register_block_type' );

02.php

<?php
wp_register_script(
    'gwg-block',
    GWG_ESNEXT_PLUGIN_URL . 'block.build.js',
    [ 'wp-blocks', 'wp-i18n' ],
    GWG_ESNEXT_VERSION,
    true // Enqueue script in the footer.
);

03.js

const { __ } = wp.i18n;

04.js

registerBlockType('gwg/esnext-starter', {
    title: __('Get With Gutenberg - ESNext Starter', 'gwg'),
    category: 'common',
    edit(props) {
        return <p className={props.className}>{__('Hello editor.', 'gwg')}</p>;
    },
    save(props) {
        return <p className={props.className}>{__('Hello saved content.', 'gwg')}</p>;
    },
 });

05.sh

wp i18n make-pot ./ ./languages/gwg.pot --headers='{"Last-Translator":"JR Tashjian <jr@getwithgutenberg.com>","Language-Team":"Get With Gutenberg <info@getwithgutenberg.com>"}'

06.pot

#: block.js:5
msgid "Get With Gutenberg - ESNext Starter"
msgstr ""

#: block.js:9
msgid "Hello editor."
msgstr ""

#: block.js:13
msgid "Hello saved content."
msgstr ""

07.sh

cp ./languages/gwg.pot ./languages/gwg-en_US.po

08.json

"scripts": {
    "i18n-pot": "wp i18n make-pot ./ ./languages/gwg.pot --headers='{\"Last-Translator\":\"JR Tashjian <jr@getwithgutenberg.com>\",\"Language-Team\":\"Get With Gutenberg <info@getwithgutenberg.com>\"}' && cp ./languages/gwg.pot ./languages/gwg-en_US.po"
}

09.sh

wp i18n make-json languages/

10.sh

mv languages/gwg-en_us-5bd7b3c720e0df736021f834799d5ef3.json languages/gwg-en_US-gwg-block.json

11.sh

wp i18n make-json languages/ && rename 's/(gwg-[a-zA-Z_]+-)[^\.]*(\.json)/$1gwg-block$2/' ./languages/*

12.json

"scripts": {
    "i18n-json": "wp i18n make-json languages/ && rename 's/(gwg-[a-zA-Z_]+-)[^\\.]*(\\.json)/$1gwg-block$2/' ./languages/*"
}

13.sh

for file in `find . -name "*.po"` ; do msgfmt -o ${file/.po/.mo} $file ; done

14.json

"scripts": {
    "i18n-mo": "for file in `find . -name \"*.po\"` ; do msgfmt -o ${file/.po/.mo} $file ; done"
}

15.json

"scripts": {
    "i18n": "npm run i18n-pot && npm run i18n-json && npm run i18n-mo"
}

16.php

<?php
function gwg_init() {
     load_plugin_textdomain( 'gwg', false, GWG_ESNEXT_PLUGIN_DIR . '/languages' );
}
add_action( 'init', 'gwg_init' );

17.php

<?php
if ( function_exists( 'wp_set_script_translations' ) ) {
    wp_set_script_translations( 'gwg-block', 'gwg', GWG_ESNEXT_PLUGIN_DIR . '/languages' );
}

18.html

<script type='text/javascript'>
( function( domain, translations ) {
    var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
    localeData[""].domain = domain;
    wp.i18n.setLocaleData( localeData, domain );
} )( "gwg", {"translation-revision-date":"YEAR-MO-DA HO:MI+ZONE","generator":"WP-CLI\/2.1.0","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"en","plural-forms":"nplurals=2; plural=(n != 1);"},"Get With Gutenberg - ESNext Starter":[""],"Hello editor.":[""],"Hello saved content.":[""]}}} );
</script>