React Plugin Settings Page Localization

Question

I'm learning how to make plugins, and Thanks to Sally CJ managed to get translation working on the PHP files, and the Gutenberg Block... (If any need help on this check here ) But, I can't make it work on the plugin settings page using React.

Couldn't find any info about how to do it. Also checked the library @wordpress/react-i18n , but if I load it everything stops working.

This is part of the code. It's a simple plugin to learn. It loads well, adds the block to the editor and the block is localized, adds an admin menu page with a div that React replaces, but the localization inside this React doesn't work.

Thanks.

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-dfbff627e6c248bcb3b61d7d06da9ca9.json

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

Main 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()
{
    load_plugin_textdomain('my-block', false, dirname(plugin_basename(__FILE__)) . '/languages');

    register_block_type(__DIR__);
}
add_action('init', 'create_block_my_block_block_init');

function script_translations()
{
    $script_handle = generate_block_asset_handle('my-block/local', 'editorScript');
    wp_set_script_translations(
        $script_handle,
        'my-block',
        plugin_dir_path(__FILE__) . 'languages'
    );
}
add_action('enqueue_block_editor_assets', 'script_translations');

function create_admin_menu()
{
    add_menu_page(
        'my-block',
        __('My Block', 'my-block'),
        'manage_options',
        'my-block',
        'my_menu_page_template',
        'dashicons-buddicons-replies'
    );
}
add_action('admin_menu', 'create_admin_menu');

function my_menu_page_template()
{
    echo '<div id="wrap">';
        echo '<div id="my-block">' . __('My Block Local', 'my-block') . '</div>';
    echo '</div>';
}

function my_enqueue_admin_scripts()
{
    $asset = include plugin_dir_path(__FILE__) . 'build/index.asset.php';

    wp_enqueue_script(
        'my-block',
        plugin_dir_url(__FILE__) . 'build/index.js',
        $asset['dependencies'],
        $asset['version'],
        wp_rand(),
        true
    );
}
add_action('admin_enqueue_scripts', 'my_enqueue_admin_scripts');

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

//Settings page
document.addEventListener('DOMContentLoaded', () => {
   const element = document.getElementById('my-block');
   if (typeof element == 'undefined' || element == null) return;
   // * i18n __ here ISN'T translated *
   ReactDOM.render(<SettingsPage/>, element);
})
const SettingsPage = () => {
   return <div>
      {__('Hello world', 'my-block')}
   </div>
}

// Register the block
// ** i18n __ here IS translated **
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

adds an admin menu page with a div that React replaces, but the localization inside this React doesn't work

Actually, since you are enqueueing the same script (build/index.js), which is automatically registered by register_block_type(), then in your my_enqueue_admin_scripts() function, just do wp_enqueue_script( 'my-block-local-editor-script' ) to enqueue/load the script on your admin menu page.

And secondly, change the add_action('enqueue_block_editor_assets', 'script_translations') to add_action('admin_enqueue_scripts', 'script_translations'), i.e. use the admin_enqueue_scripts action instead to set the script translations. That way, the translations would be loaded both on your custom admin page and core admin pages where the block-based editor is used, e.g. the post editing screen at wp-admin/post.php.

However, I suggest you to use a separate JS file for your admin page's (React) code, and manually call wp_set_script_translations() after you enqueued your script, e.g.

$asset = include plugin_dir_path( __FILE__ ) . 'build/settings-page.asset.php';

wp_enqueue_script(
    'my-settings-page',
    plugin_dir_url( __FILE__ ) . 'build/settings-page.js',
    $asset['dependencies'],
    $asset['version'],
    true
);

wp_set_script_translations(
    'my-settings-page', // script handle
    'my-block',         // text domain
    plugin_dir_path( __FILE__ ) . 'languages'
);

• Note: With the above example, WordPress will try to find the JSON translations file at languages/<text domain>-<locale>-<script handle>.json in your plugin folder, e.g. languages/my-block-es_ES-my-settings-page.json for the Español locale.

  If not found, WordPress will try to find the file at languages/<text domain>-<locale>-<MD5 hash of the relative file path>.json, e.g. languages/my-block-es_ES-3e9997d5fc8385c27402b8531ec46c31.json for the Español locale. ( md5( 'build/settings-page.js' ) equals 3e9997d5fc8385c27402b8531ec46c31 )

• You can see my scripts here and the above example is the actual code I used in my sample plugin.