ブロックエディターの翻訳テキストを変更したときのメモ

カスタムブロックを作っていると、ブロック自身の「サイズ」を指定するUIを持たせることがある。そんなときにちょっとモヤっとするのが、「マージン」や「パディング」の設定しているパネルのタイトルが「サイズ」なこと。この「サイズ」の原文は「Dimensions」であり、個人的にもう少しスッキリするワードに変更してみた。

ブロックエディターの翻訳テキスト

WordPressの翻訳トは、PHP側をMOファイル（またはl10n.phpファイル）で対応するものと、JavaScript側をJSONファイルで対応するものに分かれる。ブロックエディターの翻訳テキストを変更するには後者の内容を変更しなければならない。前者ならgettextフィルターなどを使うことで特定の翻訳テキストを変更できるのだが、後者ではこの方法が使えない。

なんだかんだで検索してみると「@wordpress/i18nのsetLocaleData関数」を使うことで、ブロックエディターの翻訳テキストを変更できるとのこと。実際のコードは次のような感じになる。

const __ = wp.i18n.__;
const setLocaleData = wp.i18n.setLocaleData;

wp.domReady( function () {
	const data = {
		'': { 'domain': 'default' },
		'Dimensions': [ __( 'Dimensions', 'my-block-translate' ) ],
	};
	setLocaleData( data, 'default' );
} );

「data」にはJed形式JSONオブジェクトで指定、1行目（先頭）にはテキストドメインの内容を記述する。2行目以降には原文とその翻訳テキストの配列を一対で指定し、一度に複数の翻訳テキストを追加（書き換え）する場合は、この部分を追加すればよい。

はじめは同等のコードを作成しているカスタムブロックに適用することを考えたのだが、メンテナンス性を考慮して別プラグインとした。

enqueue_block_editor_assetsアクション

というわけで、上記のJavaScriptを「my-block-translate.js」という名前で保存し、プラグイン本体のPHPファイルは次のようにした。

add_action( 'enqueue_block_editor_assets', 'my_block_enqueue_script' );

function my_block_enqueue_script() {
		wp_enqueue_script(
			'my-block-translate-js',
			plugins_url( "my-block-translate.js", __FILE__ ),
			array( 'wp-i18n' )
		);
		wp_set_script_translations( 'my-block-translate-js', 'my-block-translate', dirname( __FILE__ ) . '/languages' );
}

ブロックエディター向けのアクションであるenqueue_block_editor_assetsアクションのコールバック関数で「my-block-translate.js」をエンキューし、 wp_set_script_translations関数を使って同ファイルの翻訳テキストを指定している。

このプラグインをアクティブ化し、投稿編集画面を開いて変更した翻訳テキストが反映されていることを確認する。

翻訳テキストは、適用箇所を考えると「余白」の方が直感的でわかりやすいと思うのだが、「Dimensions」の意味から少し離れた感じなので、ここでは「領域」にしてみた。複数の意味がある1ワードの英単語はなかなか悩ましい。