Локализация блока

Я пытаюсь локализовать свой плагин и блок Gutenberg, на стороне PHP перевод выполнен, но на стороне JS нет никакого успеха.

Я воспользовался официальным руководством, несколькими другими блога постами, решениями, опубликованными в этом посте вставьте описание ссылки здесь и этом вставьте описание ссылки здесь, но ничего. Даже с самым простым блоком.

Может быть, я что-то упускаю…
Есть идеи? Заранее спасибо.

Версия WordPress: 6.1.1 , версия PHP: 8.0.28 , версия WP-CLI: 2.7.1

РЕДАКТИРОВАНО в соответствии с рекомендациями других ответов: все еще не работает

Моя структура:

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

Основной файл PHP my-block.php:

<?php
/**
 * Имя плагина:       Мой Блок
 * Требует как минимум: 6.1
 * Требует PHP:      7.0
 * Версия:           1
 * Текстовый домен:       my-block
 */

function create_block_my_block_block_init() {
    register_block_type( __DIR__ );

    // Загружаем MO файлы для PHP.
    load_plugin_textdomain( 'my-block', false, dirname( plugin_basename( __FILE__ ) ) . '/languages' );
}
add_action( 'init', 'create_block_my_block_block_init' );

function script_translations(){
    // Загружаем JSON файлы для JS - это необходимо, если используется пользовательский путь к языкам!!
    wp_set_script_translations( 'my-block-local-edit-script', 'my-block', plugin_dir_path( __FILE__ ) . '/languages' );
}
add_action( 'wp_enqueue_script', 'script_translations' );

block.json

{
   "apiVersion": 2,
   "title": "Тест заголовка блока Gutenberg",
   "name": "my-block/local",
   "category": "layout",
   "textdomain": "my-block",
   "icon": "universal-access-alt",
   "editorScript": "file:build/index.js"
}

И src/index.js, который компилируется в build/index.js

/**
 * Зависимости WordPress
 */
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Регистрируем блок
registerBlockType('my-block/local', {
   title: __('Мой локальный блок', 'my-block'),
   edit: function () {
      return <p> {__('Привет, мир', 'my-block')} (из редактора)</p>;
   },
   save: function () {
      return <p> {__('Привет, мир', 'my-block')} (с фронтенда) </p>;
   },
});

В вашем коде есть 2 основные проблемы:

1. Как указано в моем ответе, формат дескриптора скрипта – это <имя блока с замененными слешами на дефисы>-editor-script, поэтому, поскольку имя вашего блока my-block/local, дескриптор скрипта — это my-block-local-editor-script, а не my-block-local-edit-script.

2. Правильное имя действия – wp_enqueue_scripts (обратите внимание на “s”), а не wp_enqueue_script. Однако wp_enqueue_scripts не сработает, потому что это для фронтенда (неадминская часть). Для использования в админке, например, на экране редактирования постов на wp-admin/post.php, вы можете использовать либо admin_enqueue_scripts, либо хук, специфичный для блока/редактора Gutenberg, такой как enqueue_block_editor_assets.

3. Ваш JSON файл перевода также должен использовать dfbff627e6c248bcb3b61d7d06da9ca9, который является значением md5( 'build/index.js' ) (без ./). Таким образом, имя файла должно быть my-block-es_ES-dfbff627e6c248bcb3b61d7d06da9ca9.json 🙂

   Это значение/хеш также будет получен, когда вы выполните это через WP-CLI: wp i18n make-json my-block-<locale>.po ./ --no-purge после того, как вы выполните cd languages в каталоге вашего плагина.

Как исправить проблемы 1 и 2:

1. Измените строку wp_set_script_translations() (это строка 20 в вашем коде) на:

   wp_set_script_translations(
       'my-block-local-editor-script',           // дескриптор скрипта
       'my-block',                               // текстовый домен
       plugin_dir_path( __FILE__ ) . 'languages' // путь к вашим файлам перевода
   );
   

   Или вы можете использовать generate_block_asset_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. Измените add_action( 'wp_enqueue_script', 'script_translations' ); (строка 22 в вашем коде) на:

   add_action( 'enqueue_block_editor_assets', 'script_translations' );
   
   // Это также работает:
   //add_action( 'admin_enqueue_scripts', 'script_translations' );
   //add_action( 'init', 'script_translations' );
   

   Примечание о использовании init: Вызов register_block_type() будет автоматически и немедленно регистрировать скрипт редактора блока — смотрите register_block_script_handle(), так что init можно использовать для установки переводов скриптов, если он вызывается после вызова register_block_type().

Я создал блок, и перевод работает нормально через PHP и JS, но только в бэкенде, так ли это? Есть ли способ сделать так, чтобы это также работало на фронтенде?

Я использовал block.json

/**
 * Регистрирует блок, используя метаданные, загруженные из файла `block.json`.
 * Закулисно, он также регистрирует все активы, чтобы их можно было добавить
 * через редактор блока в соответствующем контексте.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
function luxuryconcept_portfolio_block_init() {
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'luxuryconcept_portfolio_block_init' );

/**
 * Перевод JS файла для блока Gutenberg
 * @see JSON файлы в папке плагина /languages
 * @return void
 */
function script_translations() {
    $script_handle = generate_block_asset_handle( 'luxuryconcept/portfolio', 'editorScript' );
    wp_set_script_translations( $script_handle, 'luxuryconcept-portfolio', plugin_dir_path( __FILE__ ) . 'languages' );
}
add_action( 'enqueue_block_editor_assets', 'script_translations' );