WordPress Block Bindings APIを使ってブロックの機能を拡張する方法

これまで、WordPressのブロックエディターでカスタムデータを表示するには、カスタムフィールドやその他のソースからデータを取得するため、カスタムブロックを構築しなければなりませんでした。

これは複雑な作業で、開発経験によっては実現できないこともしばしば。また場合によっては、重複した機能を作成することにもなります。例えば、カスタムフィールドのデータをテキストの見出しに表示するには、本来であればブロックを新たに作成する必要はありません。

そんな課題を解決してくれるのが、WordPress 6.5に組み込まれたBlock Bindings APIです。データソースをWordPressのコアブロックに関連付けることで、動的なWordPressサイトを短時間で構築することができます。また、ブロックテーマの機能をさらに拡張することも。

今回はBlock Bindings APIを取り上げ、簡単なデモでその動作を見ながら、このAPIの可能性を探ります。

革命を起こすBlock Bindings API

カスタムフィールドは何年もの間、WordPressのコアの一部でした。静的な投稿に動的なデータを提供してくれるため、カスタマイズ性が高まりますが、使用するまでのプロセスが複雑です。

カスタムフィールドを使うには、register_meta()関数を使用するか、プラグインをインストールしてフィールドを登録・設定しなければなりません。そしてデータをサイトに表示するにはさらなるステップが必要です。

投稿のカスタムフィールドデータは、投稿メタとして保存されますが、その結果を表示する直接的な方法がなかったため、プラグインやテーマにコードを追加する必要がありました。これはさらに難易度が上がるだけでなく、のちに管理する際にも手間がかかります。

ブロックエディターとブロックテーマの導入後も、この課題は解決されませんでした。カスタムフィールドのデータは、WordPressコアブロックのどれにも表示できず、ブロックテーマにも同じ制限が適用されていました（おそらくこれが一部の開発者がクラシックエディターやクラシックテーマに固執している大きな理由）。

しかし、Block Bindings APIの登場により、データの表示にプラグインをインストールする必要がなくなり、データソースをボタン、見出し、画像、段落のような特定のブロックに関連付けることができるようになりました。これにより、ブロックテーマとブロックエディターのカスタマイズ性が上がります。

PHPを書いたり、カスタムフィールドプラグインを使ったりする機能を完全に複製することはできませんが、着実に進歩しており、特定のシナリオではこれだけで十分でしょう。

Block Bindings APIの基本的な使用例

Block Bindings APIが実際にどのように動作するのか、簡単なプロジェクトを通じてご紹介します。

以下が今回のプロジェクトの概要です。

• WordPressの最新バージョン、テーマはデフォルトのTwenty Twenty-Fourを使用
• いくつかのカスタムフィールドを登録
  • 引用：各固定ページで強調したい名言を段落ブロックに関連付け
  • 写真：各ページで使用する写真のURLで画像ブロックに関連付け
• テーマのページテンプレートを編集して、カスタムフィールドの値を取得するブロックを追加

ブロックエディターでカスタムフィールドを有効にする

WordPressでは、デフォルトでカスタムフィールドが非表示になっているため、まずはブロックエディターでカスタムフィールドを有効にすることから始めます。

ブロックエディターの画面右上にある3つの点をクリックして、「設定」を開きます。

「一般」タブを下にスクロールして、「高度な設定」の「カスタムフィールド」のトグルをオンにします。オンにすると出現する「ページを表示して、リロード」をクリックして変更を保存してください。

カスタムフィールドを登録する

カスタムフィールドを登録するには、テーマのfunctions.phpを開いて、以下のコードを貼り付けます。

// WordPressでregister_meta()を使って固定ページのカスタムフィールドを登録
function kinsta_register_custom_meta_fields_for_pages() {
     // テキストフィールド「kinsta_famous_quote」を固定ページに登録
     register_meta('post', 'kinsta_famous_quote', array(
          'type' => 'string',  // テキストフィールド
          'single' => true,    // フィールドの単一の値
          'sanitize_callback' => 'wp_strip_all_tags',  // 入力をサニタイズ
          'show_in_rest' => true,  // GutenbergのREST APIでこのフィールドを公開
     )); 

// 画像フィールド 「kinsta_photo」をページに登録
    register_meta('post', 'kinsta_photo', array(
          'type' => 'string',  // URLまたは添付ファイルのIDを文字列として格納
          'single' => true,    // フィールドの単一の値
          'sanitize_callback' => 'esc_url_raw',  // 入力をURLとしてサニタイズ
          'show_in_rest' => true,  // GutenbergのREST APIでこのフィールドを公開
     ));
}
add_action('init', 'kinsta_register_custom_meta_fields_for_pages');

以下は次のステップで使用するため、それぞれのスラッグに注目してください。

• kinsta_famous_quote
• kinsta_photo

WordPressのregister_meta()に関するドキュメントに従って、これらのフィールドをさらにカスタマイズすることができます。

また、カスタムプラグインを使用してフィールドの登録も可能で、これにはテーマを変更してもフィールドが機能し続けるという利点があります。

カスタムフィールドの値を固定ページに追加する

続いて、以下の手順でカスタムフィールドの値を固定ページに追加します。

1. 「固定ページ」＞「固定ページ一覧」に移動して、任意のページを選択
2. 「カスタムフィールド」セクションまでページを下にスクロールする。最初のフィールドの下にある「新規追加」をクリックし、「名前」でkinsta_famous_quoteを選択し、引用の内容を「値」フィールドに追加（「未来は美しい夢を信じる人のためにある─エレノア・ルーズベルト」）
3. 「カスタムフィールドを追加」をクリックして、「名前」でkinsta_photoを選択し、使用する画像のURLを「値」フィールドに追加

これで固定ページを保存し、他の固定ページでもこの作業を繰り返します。

カスタムフィールドのデータをブロックに関連付ける

続いて、データを固定ページに表示するには、サイトエディターでテーマのページテンプレートを編集します。

「外観」＞「エディター」に移動し、左メニューから「テンプレート」をクリックします。「固定ページ」のテンプレートを見つけてエディターで開きます。

まずは、カスタムフィールドのデータを表示する場所を選択します。今回は各固定ページの下部に追加します。

「グループ」ブロックを追加し、その中に「カラム」ブロックを挿入します。左カラムには「画像」ブロック（写真を表示）を、右カラムには「段落」ブロック（引用文を表示）を配置します。

あとで編集する際に見つけやすいよう、グループブロック名を「Custom Field Data」に変更します。

Block Bindings APIには、値を表示するための視覚的なインターフェースはまだないため（詳しくは後ほど）、カスタムデータを関連付けるには、画像ブロックと段落ブロックのコードを編集する必要があります。

サイトエディターの右上にある3つの点をクリックし、「コードエディター」を選択します。

先ほど追加したグループブロックを探します。コードは以下のようになります。

<!-- wp:group {"metadata":{"name":"Custom Field Data"},"layout":{"type":"constrained"}} -->

下のスクリーンショットでも確認できます。

次に、このグループ内の画像ブロックと段落ブロックを見つけます。デフォルトのコードは以下のようになっています。

画像

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

段落

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

これらのブロックを編集して、カスタムフィールドに関連付けます。

画像

<!-- wp:image {"metadata":{"bindings":{"url":{"source":"core/post-meta","args":{"key":"kinsta_photo"}}}}} -->
<figure class="wp-block-image"><img src="" alt=""/></figure>
<!-- /wp:image -->

keyの値がカスタムフィールドkinsta_photoに設定されていることに注意してください。

段落

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"core/post-meta","args":{"key":"kinsta_famous_quote"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

この場合、keyの値はカスタムフィールドkinsta_famous_quoteに設定されます。

変更を保存したら、コードエディターを終了します。

画像ブロックと段落ブロックをクリックすると、各ブロックの枠が紫色で表示され、データソースに関連付けられていることがわかります。また、右側のパネルには、詳細が表示された属性エリアが表示されます。

注）これらのブロックは、固定ページの編集中には表示されませんが、サイトのフロントエンドには表示されます。

最後にサイトのフロントエンドを開くと、カスタムフィールドの値がある固定ページには、画像と引用文が表示されるようになります。

Block Bindingのその他の使用方法

今回はブロックをデータソースに関連付ける基本的な例をご紹介しましたが、このプロジェクトをさらに拡張する方法もあります。

• alt属性を追加する─写真のalt属性を定義するカスタムフィールドを登録することができます。以下は、kinsta_photo_altというカスタムフィールドをalt属性に関連付ける例です。

  <!-- wp:image {"metadata":{"bindings":{"url":{"source":"namespace/slug","args":{"key":"kinsta_photo"}},"alt":{"source":"namespace/slug","args":{"key":"kinsta_photo_alt"}}}}} -->
  <figure class="wp-block-image"><img src="" alt=""/></figure>
  <!-- /wp:image -->

• カスタムデータソースを使用する─カスタムソースからデータを取得することも可能です。これにはAPI、カスタムデータベーステーブル、プラグイン/テーマオプション、サイトデータ、タクソノミーなどが挙げられます。

カスタムデータをどのようにサイトに取り込みたいかを考えて、そこからメンテナンスが簡単な方法で実装する計画を立てましょう。Block Bindings APIでは多くのことを実現可能です。

Block Bindings APIの今後の進化

Block Bindings APIは、今後もWordPressの新たなバージョンがリリースされるたびに改良されていきます。

たとえば、WordPress 6.7では以下のような改善が予定されています。

• ブロックを利用可能なデータソースに関連付けるためのデフォルトのUI
• 投稿メタラベルによる識別の容易化
• カスタム投稿タイプのテーマテンプレートとの互換性
• Block Bindingの編集権限を制御するデフォルトのユーザー権限
• その他技術的な改良

APIがさらに使いやすく、より強力になる新機能に今後も目が離せません。

また、Gutenbergプラグインをインストールすることで、WordPressコアにマージされる前の機能をいち早く利用することができます（ステージング環境またはローカル環境での使用を推奨）。

Kinstaでは、すべてのサイトに対してテスト用のステージング環境を作成できます。また機能を拡張するプレミアムアドオンもご用意しています。

また、誰でも無料でダウンロード可能なローカルWordPress開発ツール「DevKinsta」では、ワンクリックで新規サイトを立ち上げて、ローカルマシンから開発作業を行うことができます。

まとめ

Block Bindings APIは、WordPressにおけるカスタムデータの扱い方に革命をもたらす存在です。多くの場合、プラグインやカスタムブロックの代替となり、WordPressブロックとブロックテーマにさらなる柔軟性を提供してくれます。

ワークフローに取り入れることで、開発作業をさらに効率化することができます。組み込みの機能であることから、プラグインに頼るよりもパフォーマンスに優れています。

この機会に、ぜひBlock Bindings APIを活用してみてください。

関連して、WordPressではカスタムフィールドの接続、カスタムバインディングソースとの連携、エディターでのブロックバインディング値の取得・設定方法などの詳細も公開しています。