block bindings APIを試してみた【WordPress】

こんにちは。武林です。

最近WordPressの勉強をしているのですが、便利なAPIを発見したので今回はそれを試してみたいと思います。その名も「block bindings API」。実は数年前に実装されていたAPIで、試してみるのは今回が初めてです。

block bindings APIとは

WordPressの公式ページによると、block bindings APIは次のように書かれています。

The Block Bindings API lets you “bind” dynamic data to the block’s attributes, which are then reflected in the final HTML markup that is output to the browser on the front end.

Bindings – WordPress Developer Resources

この説明を読むと「動的なデータをブロックの属性にバインド（紐付ける）するためのAPI」という理解でよさそうです。どうやらWordPressのブロックはあらかじめ属性を持っており、その属性に色々なデータを紐付けることができるようです。

block bindings APIの活用方法

実は少し前に「hook_wp」というYouTubeチャンネルでblock bindings APIを知りました。そのため、どのように使うかというのはすでに知っています。以下の動画では、ブロックとカスタムフィールドを紐づける方法が紹介されていました。

また、ネット上の記事を見ると他にも天気のAPIから気温や湿度などを引っ張ってきてブロックに紐づける方法もあるようです。カスタムフィールドとブロックを紐づけるためのAPIかと思っていましたが、実際は幅広いデータをブロックと紐づけるAPIみたいですね。

状態
結果
時間
計算
環境
他者（ユーザー・API・プラグイン）

AIに質問すると、他にも上のようなデータをブロックに紐づけられるようです。

実践：カスタムフィールドとブロックを”バインド”してみた

以前からカスタムフィールドの値をブロックに直接入れられたらいいのにな、と思っていました。block bindings APIを使えばそれが実現できるということなので、試してみました。

使用したプラグイン

カスタムフィールドは定番のACFで作ります。

Advanced Custom Fields (ACF®)

カスタムフィールドを用意

今回は名前を入力するためのテキストフィールドを作りました。フィールド名は「name」です。

カスタムフィールドとブロックをバインドする

それでは、カスタムフィールドと段落ブロックをバインドします。

つまずいたポイント

カスタムフィールドとブロックを用意するだけではバインドできないようです。てっきり管理画面から簡単にバインドできるものと思っていましたが、バインドするには少しコードを書かないといけません。

テキストフィールドと段落ブロックをバインドするために以下のコードをfunctions.phpに書きます。

add_action('init', 'rooted_register_meta');

function rooted_register_meta() {
  register_meta(
    'post',
    'name',  // 登録するメタキー（カスタムフィールド名）
    array(
      'show_in_rest'      => true,
      'single'            => true,
      'type'              => 'string',
      'sanitize_callback' => 'wp_strip_all_tags',
    )
  );
}

resigter_meta関数を使うことで、カスタムフィールド（name）をGutenbergに認知させることができるそう。これによって、正式にカスタムフィールドと段落ブロックを紐づけられました。