Uczę się tworzyć wtyczki i dzięki Sally CJ udało się uzyskać tłumaczenie działające na plikach PHP i Gutenberg Block… (Jeśli potrzebujesz pomocy, sprawdź tutaj) Ale nie mogę sprawić, by to działało na stronie ustawień wtyczki za pomocą React.

Nie znalazłem informacji jak to zrobić. Sprawdziłem także bibliotekę @wordpress/react-i18n , ale jeśli ją załaduję, wszystko przestanie działać.

To jest część kodu. To prosta wtyczka do nauki. Ładuje się dobrze, dodaje blok do edytora, a blok jest zlokalizowany, dodaje stronę menu administratora z elementem div, który React zastępuje, ale lokalizacja wewnątrz tego Reacta nie działa.

Dzięki.

Struktura:

/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
       - ...

Główny 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>;
   },
});