WordPress Logo Create Block で作成したカスタムブロックの国際化対応（翻訳の作成）

Create Block ツールで作成したカスタムブロックの翻訳を作成する方法についての覚書です。

国際化とは、他の言語に簡単に翻訳できるようなコードを開発するプロセスを意味しますが、以下では翻訳ファイルの作成とそれらの読み込みについてのみ扱っています。

更新日：2025年01月11日

作成日：2024年12月19日

概要（前提）

プラグインとして作成したカスタムブロックの翻訳では、翻訳ファイルテンプレートの POT や PO ファイル、PHP ファイル翻訳用 MO ファイル（または .l10n.php ファイル）、JavaScript ファイル翻訳用 JSON ファイルを作成します。

これらのファイルは、WordPress の開発者向けコマンドラインツール WP-CLI を使うと簡単に作成することができます。以下はすでに WP-CLI をインストールしてあることを前提にしています。

また、JSON ファイルを作成するコマンド（wp i18n make-json）を使用するには WP-CLI 2.2.0 以上が必要で、.l10n.php ファイルを作成するコマンド（wp i18n make-php）を使用するには WP-CLI 2.10.0 以上が必要です。WP-CLI のバージョンは以下で確認できます。

% wp cli version

WP-CLI のバージョンをアップデートするには以下を実行します。

% wp cli update

WP-CLI（日本語ページ）：アップデート

翻訳の作成方法は ブロックエディターハンドブックの「国際化」に掲載されています。

但し、Create Block ツールで作成したブロックの場合、対象の JavaScript ファイル（editor_script）を個別に登録していないので、翻訳ファイルをロードする wp_set_script_translations 関数の第1引数に指定する登録ハンドル名を generate_block_asset_handle 関数を使って取得する必要があります。

Create Block ツールで作成したブロック

この例で使用するブロックは、以下のように create-block コマンドでスラッグ（slug）に sample-block を指定して作成しています（自動的に生成されたひな型のままです）。

% npx @wordpress/create-block@latest sample-block

以下は自動的に生成されたプラグインファイル sample-block.php です。

register_block_type() の引数には、block.json ファイルがあるディレクトリへのパスが指定されていて、block.json のメタデータを基にブロックが登録されています（ブロックの登録）。

<?php
/**
* Plugin Name:       Sample Block
* Description:       Example block scaffolded with Create Block tool.
* Requires at least: 6.6
* Requires PHP:      7.2
* Version:           0.1.0
* Author:            The WordPress Contributors
* License:           GPL-2.0-or-later
* License URI:       https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain:       sample-block
*
* @package CreateBlock
*/

if ( ! defined( 'ABSPATH' ) ) {
  exit;
}

function create_block_sample_block_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_sample_block_block_init' );

以下は自動的に生成された block.json です。

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/sample-block",
  "version": "0.1.0",
  "title": "Sample Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "example": {},
  "supports": {
    "html": false
  },
  "textdomain": "sample-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js"
}

以下は自動的に生成された edit.js です。

1行目で翻訳テキストを取得する関数 __ がインポートされ、8行目で使用されています（第2引数には block.json の textdomain プロパティの値 sample-block を指定します）。

import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
  return (
    <p { ...useBlockProps() }>
      { __( 'Sample Block – hello from the editor!', 'sample-block' ) }
    </p>
  );
}

翻訳作成の手順

以下が翻訳を作成する大まかな手順です。

  1. 翻訳関連のファイルを格納する languages ディレクトリ を作成
  2. POT ファイルを作成してプロジェクトからすべての翻訳可能文字列を抽出
  3. POT ファイルファイルから PO ファイルを作成
  4. PO ファイルに翻訳を作成
  5. PO ファイルから JSON ファイルを作成
  6. PO ファイルから MO ファイルを作成
  7. PO ファイルから PHP（.l10n.php ファイル）を作成
  8. プラグインファイルで MO ファイルと JSON ファイルをロード

以下で使用している環境

  • WordPress 6.7.1
  • WP-CLI 2.11.0
  • macOS Sonoma 14.7.1

関連ページ：複数ブロックを1つのプラグインとして作成（国際化対応）

languages ディレクトリを作成

すべての言語ファイルはプラグインの languages ディレクトリに配置するのが一般的です。

プラグインディレクトリ（この例の場合は sample-block ディレクトリ）で以下を実行して直下に languages ディレクトリを作成します。

% mkdir languages

POT ファイルを作成

WP-CLI の wp i18n make-pot コマンドを使って、プロジェクトからすべての翻訳可能文字列を抽出して POT ファイルを作成します。

wp i18n make-pot コマンドの第1引数には文字列抽出のためにスキャンするディレクトリを指定し、第2引数には結果の POT ファイルの名前（パス）を指定します。

wp i18n make-pot <スキャンするディレクトリ> <POTファイルのパス> [オプション]

以下では第1引数に ./ を指定して、ルートディレクトリ以下のすべてのファイルを対象にしています。

但し、この例の場合、src ディレクトリの edit.js や save.js は index.js に統合されるため、ビルド後の build/index.js が対象になればいいので、--exclude=src オプションを指定して src ディレクトリを文字列抽出の対象から除外しています。

この除外指定をしないと、JSON ファイル生成の際に src/edit.js と build/index.js の２つの翻訳ファイルが生成されてしまいます。この例では src/save.js には翻訳関数の記述がないので対象外ですが、翻訳関数が記述されていると、src/save.js の翻訳ファイルも生成されて3つのファイルができてしまいます。

第2引数には出力する POT ファイルのパス languages/sample-block.pot を指定しています。ファイル名は任意ですが、textdomain の値（slug）を使うのが一般的なようです（拡張子は .pot）。

% wp i18n make-pot ./ languages/sample-block.pot --exclude=src

上記コマンドにより、以下のような POT ファイル（sample-block.pot）が生成されます。

JavaScript ファイルに記述された __() 関数による翻訳テキストだけでなく、プラグインファイルのヘッダー情報や、block.json のいくつかのプロパティも翻訳用テキストとして抽出されています。

必要に応じて --skip-block-json などのオプションを指定して、特定のファイルからの文字列抽出を除外することもできます。

msgid は翻訳対象の文字列（原文）で msgstr は翻訳文字列です。

POT ファイルでは msgstr は常に空（""）になっています。この POT ファイルをテンプレートとして、翻訳する言語の PO ファイルと MO ファイルを作成します。

また、翻訳対象の文字列の上には出現場所を表す行番号（例 build/index.js:29）が表示されています。

この行番号は開発ビルド（npm start）の場合と、本番ビルド（npm run build）の場合では異なりますが、どちらでも問題ありません。本番ビルドの場合は圧縮されているので、行番号は常に 1 になります。

# Copyright (C) 2024 The WordPress Contributors
# This file is distributed under the GPL-2.0-or-later.
msgid ""
msgstr ""
"Project-Id-Version: Sample Block 0.1.0\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/sample-block\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2024-12-17T08:12:28+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.11.0\n"
"X-Domain: sample-block\n"

#. Plugin Name of the plugin
#: sample-block.php
msgid "Sample Block"
msgstr ""

#. Description of the plugin
#: sample-block.php
msgid "Example block scaffolded with Create Block tool."
msgstr ""

#. Author of the plugin
#: sample-block.php
msgid "The WordPress Contributors"
msgstr ""

#: build/index.js:29
#: build/index.js:8
msgid "Sample Block – hello from the editor!"
msgstr ""

#: build/block.json
msgctxt "block title"
msgid "Sample Block"
msgstr ""

#: build/block.json
msgctxt "block description"
msgid "Example block scaffolded with Create Block tool."
msgstr ""

PO ファイルを作成

POT ファイル（sample-block.pot）をコピーして PO ファイル（sample-block-ja.po）を作成します。

コピーする際に、翻訳する言語の言語コードをファイル名の最後に追加し、拡張子を「.po」にします。

この例の場合、日本語（ja）の翻訳を作成するので、「-ja」をファイル名に追加します。

% cp languages/sample-block.pot languages/sample-block-ja.po

PO ファイルに翻訳を作成

コピーして作成した PO ファイルをエディターで開きます。

言語の設定を追加

翻訳する言語（この場合は日本語 ja）を設定する、"Language: ja\n" の行を追加します（9行目）。

必要に応じて、Last-Translator や Language-Team、PO-Revision-Date などの値を編集します。

# Copyright (C) 2024 The WordPress Contributors
# This file is distributed under the GPL-2.0-or-later.
msgid ""
msgstr ""
"Project-Id-Version: Sample Block 0.1.0\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/sample-block\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: ja\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2024-12-17T02:02:42+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.11.0\n"
"X-Domain: sample-block\n"

翻訳を作成

翻訳する msgstr に翻訳の文字列を追加します（空にすると、原文のまま表示されます）。

# Copyright (C) 2024 The WordPress Contributors
# This file is distributed under the GPL-2.0-or-later.
msgid ""
msgstr ""
"Project-Id-Version: Sample Block 0.1.0\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/sample-block\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
"Language: ja\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"POT-Creation-Date: 2024-12-17T08:12:28+00:00\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"X-Generator: WP-CLI 2.11.0\n"
"X-Domain: sample-block\n"

#. Plugin Name of the plugin
#: sample-block.php
msgid "Sample Block"
msgstr "サンプルブロック"

#. Description of the plugin
#: sample-block.php
msgid "Example block scaffolded with Create Block tool."
msgstr "Create Block ツールで作成したサンプルブロックです。"

#. Author of the plugin
#: sample-block.php
msgid "The WordPress Contributors"
msgstr ""

#: build/index.js:29
#: build/index.js:8
msgid "Sample Block – hello from the editor!"
msgstr "サンプルブロック – エディターからのハロー！"

#: build/block.json
msgctxt "block title"
msgid "Sample Block"
msgstr "サンプルブロック"

#: build/block.json
msgctxt "block description"
msgid "Example block scaffolded with Create Block tool."
msgstr "Create Block で作成したサンプルブロック"

JSON ファイルを作成

JavaScript ファイル用の翻訳ファイル（JED 1.x JSON フォーマット）を作成します。

JED 1.x JSON フォーマットの JSON ファイルの作成は、WP-CLI の wp i18n make-json コマンドを使って、PO ファイルを JSON ファイルに変換します。

wp i18n make-json <POファイルへのパス> [保存先ディレクトリへのパス] --no-purge

wp i18n make-json コマンドの第1引数には既存の PO ファイルまたは PO ファイルを含むディレクトリへのパスを指定します。ディレクトリを指定すると、ディレクトリ内の PO ファイルを検出して JSON ファイルが生成されます。

第2引数は、結果の JSON ファイルの保存先ディレクトリへのパスを指定できます。省略するとソースの PO ファイルのディレクトリになります。

また、元の PO ファイルから抽出された文字列を削除されないようにするため、--no-purge オプションを指定します。

以下は、第1引数に PO ファイルへのパスを指定し、第2引数を省略し、--no-purge オプションを指定して、JSON ファイルを同じディレクトリに作成する例です。

% wp i18n make-json languages/sample-block-ja.po --no-purge

または、以下のように第1引数のファイル名を省略すると、languages ディレクトリ内の PO ファイルを検出して、JSON ファイルを作成します。

% wp i18n make-json languages/ --no-purge

上記を実行すると sample-block-ja-{md5}.json という JSON ファイルが生成されます。

{md5} の部分は翻訳対象の JavaScript ファイルの相対パスの MD5 ハッシュ値です。

この例の場合、{md5} の値は以下で求められます。

$md5_index_js = md5( 'build/index.js' );
//dfbff627e6c248bcb3b61d7d06da9ca9

以下が生成された JSON ファイルです。

{"translation-revision-date":"YEAR-MO-DA HO:MI+ZONE","generator":"WP-CLI\/2.11.0","source":"build\/index.js","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","lang":"ja","plural-forms":"nplurals=2; plural=(n != 1);"},"Sample Block \u2013 hello from the editor!":["\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af \u2013 \u30a8\u30c7\u30a3\u30bf\u30fc\u304b\u3089\u306e\u30cf\u30ed\u30fc\uff01"]}}}

wp i18n make-json コマンドに追加で --pretty-print オプションを指定すると、以下のような見やすい形式で出力されます。この例の場合、JavaScript（index.js）の翻訳対象は__() 関数１つのみです。

{
  "translation-revision-date": "YEAR-MO-DA HO:MI+ZONE",
  "generator": "WP-CLI/2.11.0",
  "source": "build/index.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=2; plural=(n != 1);"
      },
      "Sample Block \u2013 hello from the editor!": [
        "\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af \u2013 \u30a8\u30c7\u30a3\u30bf\u30fc\u304b\u3089\u306e\u30cf\u30ed\u30fc\uff01"
      ]
    }
  }
}

内容が重複した JSON ファイルが複数生成される

POT ファイルを作成する際に、重複する内容のファイルを除外していないと、例えば、以下のように重複した内容の JSON ファイルが生成されてしまいます。

この例の場合、これらの2つの JSON ファイルの内容は重複しています（4行目の source だけが異なる）。

{
  "translation-revision-date": "YEAR-MO-DA HO:MI+ZONE",
  "generator": "WP-CLI\/2.11.0",
  "source": "build\/index.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=2; plural=(n != 1);"
      },
      "Sample Block \u2013 hello from the editor!": [
        "\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af \u2013 \u30a8\u30c7\u30a3\u30bf\u30fc\u304b\u3089\u306e\u30cf\u30ed\u30fc\uff01"
      ]
    }
  }
}
{
  "translation-revision-date": "YEAR-MO-DA HO:MI+ZONE",
  "generator": "WP-CLI\/2.11.0",
  "source": "src\/edit.js",
  "domain": "messages",
  "locale_data": {
    "messages": {
      "": {
        "domain": "messages",
        "lang": "ja",
        "plural-forms": "nplurals=2; plural=(n != 1);"
      },
      "Sample Block \u2013 hello from the editor!": [
          "\u30b5\u30f3\u30d7\u30eb\u30d6\u30ed\u30c3\u30af \u2013 \u30a8\u30c7\u30a3\u30bf\u30fc\u304b\u3089\u306e\u30cf\u30ed\u30fc\uff01"
      ]
    }
  }
}

MO ファイルを作成

WP-CLI の wp i18n make-mo コマンドを使って PHP ファイルの翻訳用の MO ファイルを作成します。

wp i18n make-mo <POファイルへのパス> [保存先ディレクトリへのパス]

wp i18n make-mo コマンドの第1引数には、既存の PO ファイルまたは PO ファイルを含むディレクトリへのパスを指定します。ディレクトリを指定すると、ディレクトリ内の PO ファイルを検出して MO ファイルが生成されます。

第2引数は、結果の MO ファイルの保存先ディレクトリへのパスを指定できます。省略するとソースの PO ファイルのディレクトリになります。

以下は、第1引数に PO ファイルへのパスを指定し、第2引数を省略して同じディレクトリに MO ファイルを作成する例です。

% wp i18n make-mo languages/sample-block-ja.po

または、以下のように第1引数のファイル名を省略すると、languages ディレクトリ内の PO ファイルを検出して、MO ファイルを作成します。

% wp i18n make-mo languages/

MO ファイル sample-block-ja.mo が生成されます。

.l10n.php（PHP）ファイルを作成

WordPress 6.4 までは翻訳ファイルは MO ファイルを読み込んでいましたが、6.5 からは PHP ファイル（.l10n.php）があれば、それを読み込むことでパフォーマンスが改善されるようになっています。

この PHP ファイルは拡張子 .php の前に .l10n が付くので、ファイル名の末尾は .l10n.php になります。

i18n は Internationalization の略称ですが、l10n は Localization の略称です。

公式ディレクトリのプラグイン（やテーマ）の場合、この PHP ファイル（.l10n.php）は自動的に生成されるので何もする必要はありませんが、公式ディレクトリ以外の場合、.l10n.php のファイルを自分で作成することができます。

これはプログレッシブエンハンスメントなので、MO ファイルのみがあり PHP（.l10n.php）ファイルがない場合でも、翻訳は期待どおりに読み込まれます。

つまり、PHP（.l10n.php）ファイルがなくても（MO ファイルのみでも）翻訳は読み込まれます。

以下は I18N Improvements in 6.5 からの引用です。

新しい .l10n.php 翻訳ファイル形式

WordPress.org から言語パックをダウンロードすると、すでに使い慣れている .mo ファイルと .po ファイルに加えて、新しい .l10n.php ファイルがあります。.mo 翻訳ファイルに対応する .l10n.php ファイルがある場合は、代わりに後者が読み込まれるため、処理がさらに高速になり、メモリ使用量もさらに少なくなります。

これは段階的な機能強化（プログレッシブエンハンスメント）であるため、.mo ファイルのみがあり PHP ファイルがない場合でも、翻訳は期待どおりに読み込まれます。ただし、その逆も当てはまります。したがって、理論的にはプロジェクトで .l10n.php 翻訳ファイルのみを使用することができ、ジャストインタイム翻訳読み込みなどの機能は引き続き機能します。現在、WordPress は更新チェックなどのために、対応する .po ファイルと .mo ファイルを必要としています。ただし、この制限は将来的に解決される予定です。詳細については、#60554 を参照してください。

以下はあるサンプルサイトのプラグインディレクトリ（/wp-content/languages/plugins）の例です。

.l10n.php ファイルを作成（オプション）

WP-CLI の wp i18n make-php コマンドを使って PHP ファイルの翻訳用の PHP ファイル（.l10n.php）を作成します。書式は wp i18n make-mo コマンドと同じです。

wp i18n make-php <POファイルへのパス> [保存先ディレクトリへのパス]

wp i18n make-php コマンドの第1引数には、既存の PO ファイルまたは PO ファイルを含むディレクトリへのパスを指定します。ディレクトリを指定すると、ディレクトリ内の PO ファイルを検出して .l10n.php ファイルが生成されます。

第2引数は、結果の .l10n.php ファイルの保存先ディレクトリへのパスを指定できます。省略するとソースの PO ファイルのディレクトリになります。

以下は、第1引数に PO ファイルへのパスを指定し、第2引数を省略して同じディレクトリに .l10n.php ファイルを作成する例です。

% wp i18n make-php languages/sample-block-ja.po

または、以下のように第1引数のファイル名を省略すると、languages ディレクトリ内の PO ファイルを検出して、.l10n.php ファイルを作成します。

% wp i18n make-php languages/

.l10n.php ファイル（sample-block-ja.l10n.php）が生成されます。

以下は生成された PHP ファイルの例です。見やすいように改行しています。

<?php
return [
  'domain' => 'sample-block',
  'plural-forms' => NULL,
  'language' => 'ja',
  'project-id-version' => 'Sample Block 0.1.0',
  'pot-creation-date' => '2024-12-17T08:12:28+00:00',
  'po-revision-date' => 'YEAR-MO-DA HO:MI+ZONE',
  'x-generator' => 'WP-CLI 2.11.0',
  'messages' =>
    [
      'Sample Block' => 'サンプルブロック',
      'Example block scaffolded with Create Block tool.' => 'Create Block ツールで作成したサンプルブロックです。',
      'Sample Block – hello from the editor!' => 'サンプルブロック – エディターからのハロー！',
      'block titleSample Block' => 'サンプルブロック',
      'block descriptionExample block scaffolded with Create Block tool.' => 'Create Block で作成したサンプルブロック'
    ]
];

MO ファイルをロード

PHP ファイルの翻訳を適用するため、プラグインファイル（sample-block.php）で load_plugin_textdomain を使って MO（または .l10n.php）ファイルをロードします。

load_plugin_textdomain はプラグイン用の MO（または .l10n.php）ファイルをロードする関数です。

load_plugin_textdomain( $textdomain, $deprecated = false, $plugin_rel_path = false )

第1引数には block.json の textdomain の値を指定し、第2引数は false（デフォルト）を指定します。第3引数は MO（または .l10n.php）ファイルの保存フォルダへのパスを指定します。

第3引数の basename( __DIR__ ) は basename( dirname( __FILE__ ) ) と同じことで、basename() はパスの最後の部分を返すので、いずれもプラグインファイルのあるディレクトリ名を返します。

load_plugin_textdomain は init フックで使うことができますが、場合によっては、plugins_loaded フックや after_setup_theme フックを使うと良いかもしれません。

function create_block_sample_block_block_init() {

  //  MO ファイルをロード（追加）
  load_plugin_textdomain( 'sample-block', false, basename( __DIR__ ) . '/languages' );

  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_sample_block_block_init' );

これで、プラグインページのタイトルと説明部分（sample-block.php のヘッダーの Plugin Name と Description）とブロックを選択した際の説明（block.json の description）が日本語で表示されます。

JSON ファイルをロード

JavaScript ファイルの翻訳を適用するため、プラグインファイルで wp_set_script_translations を使って JSON ファイルをロードします（WordPress に対して翻訳ファイルがどこにあるかを伝えます）。

wp_set_script_translations( $handle, $textdomain, $path )

wp_set_script_translations() の第1引数には JavaScript のハンドル名を、第2引数は block.json の textdomain の値を、第3引数は JSON ファイルの保存フォルダへのパスを指定します。

但し、Create Block ツールで作成したブロックの場合、対象の JavaScript ファイルは自動的に登録されているので、第1引数に指定する JavaScript のハンドル名は、generate_block_asset_handle 関数を使って取得する必要があります。

generate_block_asset_handle( $block_name, $field_name, $index )

generate_block_asset_handle() の第1引数にはブロック名（block.json の name）を指定し、第2引数には、対象の JavaScript を表すメタデータのフィールド（この場合は editorScript）を指定します。

これらの記述は register_block_type() 関数（6行目）の後に記述します。

function create_block_sample_block_block_init() {

  //  MO ファイルをロード
  load_plugin_textdomain( 'sample-block', false, basename( __DIR__ ) . '/languages' );

  register_block_type( __DIR__ . '/build' );

  // editorScript （build/index.js）のハンドル名を取得（追加）
  $script_handle = generate_block_asset_handle( 'create-block/sample-block', 'editorScript' );

  // JSON ファイルをロード（追加）
  wp_set_script_translations($script_handle, 'sample-block', plugin_dir_path(__FILE__) . 'languages');
}
add_action( 'init', 'create_block_sample_block_block_init' );

generate_block_asset_handle() に指定する引数の値は、block.json で確認できます。

第1引数のブロック名は name プロパティの値です。対象の JavaScript ファイルは editorScript プロパティに指定されているので、第2引数には、この場合、editorScript を指定します。

また、wp_set_script_translations() の第2引数には textdomain の値を指定します。

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "create-block/sample-block",
  "version": "0.1.0",
  "title": "Sample Block",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "example": {},
  "supports": {
    "html": false
  },
  "textdomain": "sample-block",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js"
}

name プロパティは「namespace/slug」の形式になっていて、この例の場合、ブロックを作成する際に namespace を指定していないので、デフォルトの create-block が使用されています。

プラグインファイルを保存すると、edit.js（index.js）の翻訳も適用され、ブロックのテキストも日本語で表示されます。

ハンドル名

editorScript のハンドル名は、block.json の name プロパティの「create-block/sample-block」のスラッシュをハイフンに変えた文字列「create-block-sample-block」に、「-editor-script」を付けた値「create-block-sample-block-editor-script」になります。

そのため、generate_block_asset_handle() の第1引数に「create-block-sample-block-editor-script」を直接指定しても機能しますが、generate_block_asset_handle() で取得した方が確実かと思います。

これで翻訳の作成は完了です。

関連ページ：複数ブロックを1つのプラグインとして作成した場合の国際化対応

Poedit 翻訳ツール

この例のような翻訳対象の文字が少ない場合は必要ありませんが、大量の翻訳が必要な場合は、Poedit などの翻訳ツールを利用すると便利かもしれません。

Poedit は無料版があり、https://poedit.net/download からダウンロードして使用することができます。

以下は Poedit（無料版 バージョン 3.5.2）の使用例です。

POT ファイルも作成できるようですが、POT ファルは WP-CLI の wp i18n make-pot コマンドを使って作成してあることを前提にしています。

Poedit を起動して、「新規作成」を選択します。

ファイルの選択画面が表示されるので、WP-CLI で作成した POT ファイルを選択します。

以下が表示されるので言語を選択して「OK」をクリックします。

※ 翻訳言語の選択では、日本語の場合、「日本語」と「日本語（日本）」の2つがあります。

「日本語」を選択すると「 ja.po 」で保存され、「日本語（日本）」を選択すると「 ja_JP.po 」で保存されるので、「日本語」を選択します。

言語を選択することで、PO ファイルに言語を設定する "Language: ja\n" が自動的に追加されます。

翻訳対象の文字列が「ソーステキスト」に表示されるので、「対訳」に翻訳を入力していきます。

翻訳の入力が完了したらファイルメニューから「保存」を選択して PO ファイルを保存します。

以下が表示されるので、保存するファイル名を指定します。

ファイル名は、デフォルトでは「ja.po」となっているので、「テキストドメイン-ja.po」として保存します。

以下は保存した PO ファイルをコードエディターで開いて確認したものです。Language や PO-Revision-Date が自動的に入力されています。

# Copyright (C) 2024 The WordPress Contributors
# This file is distributed under the GPL-2.0-or-later.
msgid ""
msgstr ""
"Project-Id-Version: Sample Block 0.1.0\n"
"Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/sample-block\n"
"POT-Creation-Date: 2024-12-17T11:43:33+00:00\n"
"PO-Revision-Date: 2024-12-19 09:25+0900\n"
"Last-Translator: \n"
"Language-Team: \n"
"Language: ja\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Generator: Poedit 3.5\n"
"X-Domain: sample-block\n"

#. Plugin Name of the plugin
#: sample-block.php
msgid "Sample Block"
msgstr "サンプルブロック"

#. Description of the plugin
#: sample-block.php
msgid "Example block scaffolded with Create Block tool."
msgstr "Create Block ツールで作成したサンプルブロック。"

#. Author of the plugin
#: sample-block.php
msgid "The WordPress Contributors"
msgstr ""

#: build/index.js:29 build/index.js:8
msgid "Sample Block – hello from the editor!"
msgstr "サンプルブロック-エディターからのハロー！"

#: build/block.json
msgctxt "block title"
msgid "Sample Block"
msgstr "サンプルブロック"

#: build/block.json
msgctxt "block description"
msgid "Example block scaffolded with Create Block tool."
msgstr "Create Block ツールで作成したサンプルブロックです。"

同時に MO ファイルも作成される

デフォルトでは、PO ファイルを保存する際に、同時に MO ファイルも作成されて保存されます。

この動作は、設定の「一般」タブで確認・変更することができます。

翻訳の警告

保存後、ファイルを確認すると、例えば以下のような翻訳に対する警告が表示される場合があります。

上記の場合、ソーステキストがピリオッド（.）で終了しているのに、対訳が句点「。」で終わっていないので表示されています。

対訳に句点「。」を追加すれば、警告は消えます。また、そのままにして無視することもできます。但し、警告の右にある「無視」の機能は有料版用のようです。

翻訳メモリ

一度作成した翻訳は「翻訳メモリ」という機能に保存されるようです。

右側の「提案」タブに、翻訳の候補が表示され、選択すると「対訳」部分に入力することができます。

有料版では、オンラインの提案や機械翻訳の候補も表示され、事前翻訳機能を使って自動翻訳もできます。

「翻訳メモリ」は設定の「翻訳メモリタブ」で管理できます。

「管理」から「翻訳ファイルのインポート」を使うと、別の PO ファイルから翻訳をメモリにインポートすることができます。また、データ（TMX ファイル）としてエクスポートしたりインポートすることもできます。※ 但し、無料版でどこまでこの機能が利用できるのかは不明です。

「リセット」を選択すると、保存されている翻訳がすべてクリア（消去）されます。

What is Translation Memory?

エクスポート

PO ファイルの内容を HTML ファイルとしてエクスポートすることができます。

例えば、以下のような HTML として保存されます。

但し、Excel にエクスポートする機能は有料版のみで利用できます。

大量の翻訳の編集などには便利

翻訳の量が少ない場合は、敢えて Poedit を使う必要はないと思いますが、大量の翻訳がある PO ファイルを編集する場合などは便利かもしれません。

以下は、WordPress の PO ファイル（/wp-content/languages/ja.po）を開いた例です。単語数は4000以上あり、これを VS Code などの通常のコードエディターで編集するのは大変です。

また、有料版（PRO バージョン）の場合、翻訳候補の表示や事前翻訳という機能で自動的に翻訳することもできるので便利かもしれません。