カスタムGutenbergブロックを翻訳可能にする

開発したカスタムGutenbergブロックのうち、どれを翻訳可能にするかを指定する方法について説明します。これは、テストプラグインであるMultilingual Toolsを使用してwpml-config.xmlファイルを設定することで実行できます。

このガイドは、Gutenberg用のカスタムブロックを独自に作成する開発者向けです。プラグイン開発者でない場合は、Gutenbergエディタで作成したコンテンツを翻訳する方法をご覧ください。

はじめに

はじめるには、以下をインストールして有効化します。

WPMLコアプラグイン
WPML文字列翻訳
Multilingual Tools

Multilingual Toolsプラグインは、本番サイトでは使用しないでください。テスト目的でのみ使用してください。

翻訳用にGutenbergブロックを登録するためのXMLコードの生成とテスト

1. 新規投稿またはページを作成し、登録するGutenbergブロックを追加します。翻訳可能にするすべてのフィールドにテストコンテンツを追加し、公開します。

WPML: Gutenberg Blocksセクションまでスクロールし、生成されたXMLコードをコピーします。

重要: 自動生成されたXMLコードをそのまま使用しないでください。ユーザーに提供する前に、テストおよび編集する必要があります。次のステップをご覧ください。

2. WPML → 設定に移動し、カスタム XML 設定タブの下に生成されたXMLを貼り付けます。

自動生成されたコードを十分に確認してください。特定の値を持つ設定フィールドなど、翻訳を意図していない一部のフィールドを削除する必要がある場合があります。

準備ができたら保存をクリックします。

3. 公開したページに戻り、ボタンのテキストや見出しの編集など、小さな更新を行います。

言語セクションの下にあるプラスアイコンをクリックして、高度な翻訳エディタを開きます。Gutenbergブロックのフィールドがエディタに表示され、翻訳できるようになります。

翻訳可能にするGutenbergブロックを登録したら、言語設定ファイルを作成できます。すでにファイルがある場合は、それを編集して最終的なXMLコードを追加するだけです。

Gutenbergブロックを翻訳可能として登録する例

画像の翻訳

以下のコードを使用して表示される画像があるとします。

翻訳が必要な画像の例

<!-- wp:image {"id":3} -->
<figure class="wp-block-image"><img src="http://example.com/wp-content/uploads/2018/07/figure-2.png" alt="Image alt text" class="wp-image-3"/><figcaption>Image Caption</figcaption></figure>
<!-- /wp:image -->

この画像のfigcaptionおよびalt属性の値を翻訳するとします。

これを実現するには、以下のコードをwpml-config.xmlに挿入する必要があります。

Gutenbergブロックの翻訳設定の例

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/image" translate="1">
        <xpath>//figure/figcaption</xpath>
        <xpath>//figure/img/@alt</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

typeはwp:imageではなくcore/imageであることに注意してください。これはブロックAPIによって返される値であるためです。

リンクの翻訳

どのGutenbergブロックフィールドがリンクであるかを指定できます。これにより、WPMLはリンクの翻訳が利用可能な場合、リンクをその翻訳に置き換えます。

Gutenbergブロック内のリンクの翻訳

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="core/some-block" translate="1">
        <xpath type="link">//a/@href</xpath>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

ブロック属性の翻訳

以下は、エディタブロックの定義フォーマットの例です。

エディタブロックの定義フォーマット

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <xpath label="My Block">//p</xpath>
        <key name="title" />
        <key name="foo">
            <key name="bar1" />
            <key name="bar2" />
        </key>
        <key name="/^[^_]\S+$/" search-method="regex" />
        <key name="something" search-method="wildcards" />
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

key要素は、管理テキスト / wp_optionsの設定で使用されるのと同じ方法で使用できます。これは、親key要素の内部にkey要素を含めることができることも意味します。

label属性を使用して、高度な翻訳エディタでブロック要素の横に表示されるオプションのカスタムラベルを追加できます。label属性がgutenberg-blockタグの一部である場合、特定のラベルが定義されていないブロックの要素に対するフォールバックラベルとして使用されます。

フォールバックラベルの例

<wpml-config>
    <gutenberg-blocks>
        <gutenberg-block type="my-plugin/mybutton" translate="1" label="My fallback block label">
            <xpath>//span</xpath>
            <xpath>//a@href</xpath>
        </gutenberg-block>
    </gutenberg-blocks>
</wpml-config>

search-method属性には、次の2つの値のいずれかを指定できます。

wildcards（デフォルト）
regex

管理テキストと同じ方法でワイルドカードを使用できます。つまり、name属性でアスタリスク（*）を使用できます。以下は1つのブロックの例です。

ブロックの例

<!-- wp:my-plugin/my-block
    {
        "myp": {
            "mypTitle":"The title",
            "mypContent":"The Content",
            "_mypSystem:"Meta attribute to not translate"
        }
    }
/-->

ワイルドカードを使用してブロック定義を設定できます。

ワイルドカードを使用したブロック定義

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
      <key name="myp">
          <key name="myp*" />
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

これにより、「The title」と「The content」を翻訳できるようになります。これらはmypで始まる唯一の属性であるためです。

regexを使用すると、name属性に正規表現を含めることができます。これは複雑な設定に非常に役立ちます。以下は1つのブロックの例です。

複雑な設定の例

<!-- wp:my-plugin/my-block
    {
        "data": {
            "title":"The title",
            "_title":"e980759463943209f6f1ae09a239e353",
            "content":"The Content",
            "_content":"1502a7b825dfe7b789c63830609f1701"
        }
    }
/-->

正規表現を使用してブロック定義を設定できます。

正規表現を使用したブロック定義

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin/my-block" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

これにより、「The title」と「The content」を翻訳できるようになります。これらはアンダースコア（_）で始まらない唯一の属性であるためです。

一部のブロックプラグインは、データをURLエンコードされたJSON文字列としてブロックの属性内に保存します。encoding属性を使用すると、文字列をデコードし、そのサブキーを翻訳用に登録できます。

例えば、LazyBlocksプラグインは、リピーターフィールドのコンテンツをエンコードされたJSON文字列として保存します。

URLエンコードされたJSON文字列を含むLazyBlocksブロックの例

<!-- wp:lazyblock/testwpml {"name":"%5B%7B%22firstname%22:%22Shekhare%22,%22lastname%22:%22Bhandari%22%7D,%7B%22firstname%22:%22Compatibility%22,%22lastname%22:%22Escalation%22%7D%5D","blockId":"Z169b0O","blockUniqueClass":"lazyblock-testwpml-Z169b0O"} /-->

以下のXML設定を使用して、firstnameおよびlastnameサブキーを登録できます。

ブロックの属性内のURLエンコードされたJSON文字列を登録する例

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="lazyblock/team" translate="1">
      <key name="name" encoding="json">
        <key name="*">
          <key name="firstname" />
          <key name="lastname" />
        </key>
      </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

ブロック属性リンクの翻訳

WPMLがURLを自動的に翻訳できるようにするには、Gutenbergブロック属性をリンクとして宣言できます。

以下は、クリック可能なリンクを持つカスタムGutenbergブロックの例です。

<!-- wp:foo/link {"label":"Click here!","url":"https://example.com/some-page/"} /-->

labelおよびurl属性を翻訳可能にするには、wpml-config.xml ファイルに以下を追加します。

<gutenberg-block type="foo/link" translate="1">
	<key name="label" />
	<key name="url" type="link" />
</gutenberg-block>

この設定で、url属性にtype="link"を指定すると、WPMLがURLを自動的に翻訳できるようになります。

ブロック名前空間

ブロック名前空間のグローバル設定を含めることができます。

ブロック名は定義の必須要件ではなくなりました。

ブロック設定が名前空間内のすべてのブロックで同じである場合、次のように記述できます。

名前空間内のブロック

<wpml-config>
  <gutenberg-blocks>
    <gutenberg-block type="my-plugin" translate="1">
        <key name="data">
            <key name="/^[^_]\S+$/" search-method="regex" />
        </key>
    </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

ブロック内のIDの自動変換

ID変換は汎用性が高く、考えられるほとんどのIDフォーマット（単一のID、IDのリスト、シリアル化された配列、JSONエンコードされた配列）に適応しようとします。

以下のブロックについて考えてみましょう。

ブロック内のIDの自動変換 – ブロックの例

<!-- wp:foo/form {"ids":[27,28]} -->
<div class="wp-block-foo-form-wrap">
  <form class="foo-form" action="" method="post">
    <input type="hidden" name="foo_form_post_ids" value="27,28" />
    <input type="submit" />
  </form>
</div>
<!-- /wp:foo/form -->

投稿IDとして、ブロック属性のIDとHTMLタグ属性値foo_form_post_idsを以下のように宣言できます。

ブロック属性のIDとHTMLタグ属性値

<gutenberg-block type="foo/form" translate="0">
  <key name="ids">
      <key name="*" type="post-ids" sub-type="post" />
  </key>
  <xpath type="post-ids" sub-type="post">//*[@name="foo_form_post_ids"]/@value</xpath>
</gutenberg-block>

ブロックは、以下のようにrender_block_dataフィルターで最も高い優先度で変換されます。

render_block_dataフィルターによって変換されたブロック

<!-- wp:foo/form {"ids":[42,43]} -->
<div class="wp-block-foo-form-wrap">
    <form class="foo-form" action="" method="post">
        <input type="hidden" name="foo_form_post_ids" value="42,43" />
        <input type="submit" />
    </form>
</div>
<!-- /wp:foo/form -→

以下の設定属性を使用できます。

type – post-idsまたはtaxonomy-idsを指定可能
sub-type（オプション）: すでに判明している場合は、typeの特定のエンティティを指定できます。例えば、Productカスタム投稿タイプの場合はproductです。定義されていない場合、特定のエンティティが推測されます。

追加リソース

wpml-config.xml ファイルの詳細については、言語設定ファイルのガイドをご覧ください。

wpml-config.xmlファイルを使用して他の要素をカスタマイズするには、以下の追加ガイドをご覧ください。