WordPress 6.5で追加された「Block Bindings API」について

Cocoonカスタマイズ集
この記事は約2分で読めます。
記事内に広告が含まれています。

はじめに

WordPress 6.5からBlock Bindings APIが追加されました。

これを使うと、Gutenbergブロックとカスタムフィールドを簡単に連携させることができます。

これにより、エディター上で直接投稿データを表示・編集できるようになり、これまで必要だったカスタムコードの追加作業を大幅に削減できます。

この記事では、この方法について説明します。

実装手順

以下の手順で実装します。

  • ラベル
    PHPを追加

    以下のコードをfunctions.phpに追加します。

    Gutenbergブロックと連携するカスタムフィールドを定義します。

    add_action('init', function () {
      register_meta(
        'post',                                       // 投稿タイプ
        'my_company_name',                            // メタキー
        [
          'show_in_rest'      => true,                // Block Bindings API
          'single'            => true,                // 単一値
          'type'              => 'string',            // データ型
          'sanitize_callback' => 'wp_strip_all_tags', // 保存時にタグ除去
        ]
      );
    });
  • ラベル
    Gutenbergエディターでの設定
    Gutenbergエディター

    上記のコードを追加すると、Gutenbergブロックに「属性」パネルが表示され、とカスタムフィールドを連携できるようになります。

    Gutenbergエディター

    ブロックの属性から連携するカスタムフィールドを選択すると、「段落」ブロックにそのカスタムフィールドの値が直接表示されます。

さいごに

今回紹介した方法を使えば、Gutenbergブロックとカスタムフィールドを簡単に連携でき、ACFでフィールド値を本文に埋め込むよりも手間を減らすことができます。
これにより、投稿や固定ページごとに異なる情報を直感的に表示・編集できるようになり、編集作業の効率が大幅に向上します。

タイトルとURLをコピーしました