WordPress 6.5の新機能「Block Bindings API」とは？カスタムフィールドとブロックの連携が劇的に簡単に

WordPress 6.5で導入された「Block Bindings API」とは何か？

2024年3月にリリースされたWordPress 6.5で、サイト制作と開発にとって画期的な機能が登場しました。その名も「Block Bindings API」です。この新機能は、カスタムフィールドやその他の動的データソースとWordPressブロックを直接接続できるようにするもので、これまでカスタムブロックの開発を必要としていた多くのケースで、コーディングなしで動的コンテンツを実現できるようになりました。

本記事では、Block Bindings APIの概要から実際の使用方法、そしてこの新機能がWordPressサイト制作や開発にもたらす大きな変化について詳しく解説します。

Block Bindings APIが解決する課題

Block Bindings APIが登場する以前、WordPressで動的コンテンツを扱う場合、いくつかの課題がありました：

カスタムブロック開発の必要性：データとUIを連携させるには専用のカスタムブロックを開発する必要があった
技術的障壁：React.jsやPHPなどの高度な開発知識が求められた
メンテナンスの手間：WordPressの更新に合わせてカスタムブロックを維持する必要があった
柔軟性の制限：カスタムフィールドの変更に合わせてコードの修正が必要だった

Block Bindings APIはこれらの課題を解決し、WordPress開発者とコンテンツ作成者の体験を大幅に向上させます。特に、コア提供の標準ブロックを使いながら、それらに動的データをバインドできるようになったことが最大の革新点です。

Block Bindings APIの基本概念

Block Bindings APIの核となる概念は非常にシンプルです：WordPress標準のブロックに、カスタムフィールドや動的データソースを「バインド（結びつける）」ことができるということ。この「バインディング」によって、以下のようなことが可能になります：

カスタムフィールドの値を段落ブロックに表示
メタデータの画像URLを画像ブロックで表示
ユーザー情報をヘッダーブロックに動的に反映
特定の条件でブロックの表示/非表示を切り替え

基本的に、Block Bindings APIは以下の3つの主要コンポーネントで構成されています：

コンポーネント	説明	例
ソース	データの提供元	カスタムフィールド、投稿メタ、サイト設定など
ターゲット	データの表示先	段落テキスト、画像URL、ボタンリンクなど
バインディング	ソースとターゲットの接続関係	特定のカスタムフィールドを段落のコンテンツに表示するなど

WordPressエディタでのBlock Bindings APIの使用方法

WordPress 6.5でBlock Bindings APIを実際に使用する方法を段階的に説明します。まず、基本的な使い方からみていきましょう。

基本的な使い方：カスタムフィールドをブロックにバインドする

例として、投稿のカスタムフィールドをブロックエディタの段落ブロックに表示する方法を説明します：

前提条件：投稿にカスタムフィールドが設定されていること（例：「company_name」というフィールド名）
バインディングの設定：
1. ブロックエディタで段落ブロックを追加
2. ブロックツールバーの「オプション」（三点アイコン）メニューを開く
3. 「フィールドにバインド」オプションを選択
4. 表示されるパネルから「投稿メタ」を選択
5. 「フィールド名」の入力欄に「company_name」と入力
6. 「適用」をクリック
結果確認：段落ブロックは実際のカスタムフィールド値を表示するようになります

この設定が完了すると、エディタ内では段落ブロックはプレースホルダーとして表示されますが、実際のサイト上ではカスタムフィールドの値が表示されます。カスタムフィールドの値が変更されると、表示も自動的に更新されます。

様々なブロックタイプでのバインディング例

Block Bindings APIは様々なブロックタイプで使用できます。以下にいくつかの実用例を示します：

ブロックタイプ	バインド先属性	用途例
段落	content	製品説明、会社概要など
画像	url, alt, caption	商品画像、プロフィール写真など
ボタン	url, text	動的リンク、CTAボタンなど
見出し	content	動的タイトル、ステータス表示など
カバー	url	背景画像、ヒーローセクションなど
埋め込み	url	動的コンテンツ埋め込み、SNSフィードなど
リスト	values	動的メニュー、カテゴリ一覧など

開発者向け：Block Bindings APIのプログラム的実装方法

WordPress開発者は、Block Bindings APIを使ってカスタム機能を実装することができます。以下に、基本的な実装の手順を示します。

1. カスタムソースの登録

まず、カスタムデータソースを登録する例を示します：

function register_my_custom_source() {
    register_block_bindings_source(
        'my-plugin/custom-source',
        array(
            'label'     => 'カスタムデータ',
            'get_value' => function( $source_args, $block_instance, $attribute_name ) {
                // カスタムロジックでデータを取得
                $data = get_my_custom_data( $source_args['key'] ?? '' );
                return $data;
            },
        )
    );
}
add_action( 'init', 'register_my_custom_source' );

function register_my_custom_source() {

register_block_bindings_source(

'my-plugin/custom-source',

array(

'label' => 'カスタムデータ',

'get_value' => function( $source_args, $block_instance, $attribute_name ) {

// カスタムロジックでデータを取得

$data = get_my_custom_data( $source_args['key'] ?? '' );

return $data;

)

);

}

add_action( 'init', 'register_my_custom_source' );

2. ブロックエディタでのサポート追加

次に、エディタ内でカスタムソースを使用できるようにします：

function enqueue_block_editor_assets() {
    wp_enqueue_script(
        'my-block-bindings',
        plugin_dir_url( __FILE__ ) . 'block-bindings.js',
        array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-block-editor' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings.js' )
    );
}
add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

function enqueue_block_editor_assets() {

wp_enqueue_script(

'my-block-bindings',

plugin_dir_url( __FILE__ ) . 'block-bindings.js',

array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-block-editor' ),

filemtime( plugin_dir_path( __FILE__ ) . 'block-bindings.js' )

);

}

add_action( 'enqueue_block_editor_assets', 'enqueue_block_editor_assets' );

対応するJavaScriptファイル（block-bindings.js）の例：

( function( wp ) {
    const { registerBlockBindingsSource } = wp.blocks;
    
    registerBlockBindingsSource( 'my-plugin/custom-source', {
        label: 'カスタムデータ',
        useSource: function( { key } ) {
            // Reactフックを使用してエディタでプレビュー値を取得
            return { value: '編集中のプレビュー値: ' + key };
        },
        // コントロールの定義
        control: function( { onChange, value, label } ) {
            return wp.element.createElement( wp.components.TextControl, {
                label: label,
                value: value,
                onChange: onChange,
            } );
        },
    } );
} )( window.wp );

( function( wp ) {

const { registerBlockBindingsSource } = wp.blocks;

registerBlockBindingsSource( 'my-plugin/custom-source', {

label: 'カスタムデータ',

useSource: function( { key } ) {

// Reactフックを使用してエディタでプレビュー値を取得

return { value: '編集中のプレビュー値: ' + key };

// コントロールの定義

control: function( { onChange, value, label } ) {

return wp.element.createElement( wp.components.TextControl, {

label: label,

value: value,

onChange: onChange,

} );

} )( window.wp );

3. ブロックに対するバインディングのサポート

特定のブロックでバインディングをサポートするには、コンテキストを追加します：

function add_binding_context_to_blocks() {
    $blocks_with_bindings = array(
        'core/paragraph' => array( 'content' ),
        'core/image'     => array( 'url', 'alt' ),
        'core/button'    => array( 'url', 'text' ),
    );
    
    foreach ( $blocks_with_bindings as $block_name => $attributes ) {
        foreach ( $attributes as $attribute ) {
            register_block_type_attribute_context(
                $block_name,
                $attribute,
                array(
                    'bindable' => true,
                )
            );
        }
    }
}
add_action( 'init', 'add_binding_context_to_blocks' );

function add_binding_context_to_blocks() {

$blocks_with_bindings = array(

'core/paragraph' => array( 'content' ),

'core/image' => array( 'url', 'alt' ),

'core/button' => array( 'url', 'text' ),

);

foreach ( $blocks_with_bindings as $block_name => $attributes ) {

foreach ( $attributes as $attribute ) {

register_block_type_attribute_context(

$block_name,

$attribute,

array(

'bindable' => true,

)

);

}

add_action( 'init', 'add_binding_context_to_blocks' );

これらのコード例はあくまで基本的な実装の一例です。実際のプロジェクトでは、要件に合わせてさらにカスタマイズが必要になるでしょう。

Block Bindings APIの実践的ユースケース

Block Bindings APIがどのような場面で役立つのか、具体的なユースケースを紹介します：

1. 動的な企業情報表示

サイト全体で使用される企業情報（社名、住所、電話番号など）を一元管理し、複数のページで表示する場合：

従来の方法：ショートコードの作成、またはカスタムブロックの開発
Block Bindings APIを使用：サイト設定やカスタムオプションに企業情報を保存し、標準ブロックにバインド
メリット：情報更新が1箇所で済み、全ページに反映される

2. 不動産・物件リスト

不動産サイトで物件情報をカスタム投稿タイプとメタデータで管理する場合：

従来の方法：複雑なカスタムブロックや投稿テンプレートの開発
Block Bindings APIを使用：価格、広さ、間取りなどのメタデータを標準ブロックにバインド
メリット：データ更新が容易で、表示デザインも管理画面から調整可能

3. 動的な製品仕様表示

ECサイトやカタログサイトで製品仕様を表示する場合：

従来の方法：カスタムメタボックスとテンプレート修正、またはカスタムブロック開発
Block Bindings APIを使用：製品メタデータと標準テーブルブロックの連携
メリット：非開発者でも仕様表の見た目をエディタでカスタマイズ可能

4. ユーザーに応じたコンテンツパーソナライゼーション

ログインユーザーに応じて異なるコンテンツを表示する場合：

従来の方法：条件付きレンダリングのためのPHPコード開発
Block Bindings APIを使用：ユーザーメタデータと標準ブロックの連携
メリット：コンテンツ編集者がユーザーごとのカスタマイズを管理しやすい

Block Bindings APIとACFの連携

Advanced Custom Fields（ACF）は、WordPressでカスタムフィールドを管理するための最も人気のあるプラグインの一つです。ACFとBlock Bindings APIの連携により、より強力な機能を実現できます。

ACFフィールドとBlock Bindingsの基本連携

ACFフィールドをBlock Bindings APIで使用する基本的な方法：

ACFでカスタムフィールド（例：「company_profile」）を作成
ブロックエディタで段落ブロックを追加
ブロックのバインディング設定で「ACF Field」（ACFが対応している場合）または「Post Meta」を選択
フィールド名として「company_profile」を指定

ACFの高度なフィールドタイプ（画像、リピーター、関係性など）を使用する場合は、適切なデータ変換が必要になる場合があります。

ACF対応のカスタムバインディングの実装例

ACFの複雑なフィールドタイプをサポートするカスタムバインディングの例：

function register_acf_image_binding_source() {
    register_block_bindings_source(
        'my-plugin/acf-image',
        array(
            'label'     => 'ACF画像フィールド',
            'get_value' => function( $source_args, $block_instance, $attribute_name ) {
                $field_name = $source_args['key'] ?? '';
                $image_id = get_field( $field_name );
                
                if ( !$image_id ) return '';
                
                // 属性によって返す値を変更
                if ( $attribute_name === 'url' ) {
                    return wp_get_attachment_url( $image_id );
                } elseif ( $attribute_name === 'alt' ) {
                    return get_post_meta( $image_id, '_wp_attachment_image_alt', true );
                }
                
                return '';
            },
        )
    );
}
add_action( 'init', 'register_acf_image_binding_source' );

function register_acf_image_binding_source() {

register_block_bindings_source(

'my-plugin/acf-image',

array(

'label' => 'ACF画像フィールド',

'get_value' => function( $source_args, $block_instance, $attribute_name ) {

$field_name = $source_args['key'] ?? '';

$image_id = get_field( $field_name );

if ( !$image_id ) return '';

// 属性によって返す値を変更

if ( $attribute_name === 'url' ) {

return wp_get_attachment_url( $image_id );

} elseif ( $attribute_name === 'alt' ) {

return get_post_meta( $image_id, '_wp_attachment_image_alt', true );

}

return '';

)

);

}

add_action( 'init', 'register_acf_image_binding_source' );

Block Bindings APIが開発者にもたらすメリット

Block Bindings APIは、WordPress開発者にとって多くのメリットをもたらします：

開発時間の短縮：多くのユースケースでカスタムブロック開発が不要に
メンテナンスの軽減：標準ブロックを使用するため、WordPress更新時の互換性問題が減少
フレキシブルな設計：データソースとUI要素を分離し、より柔軟なアーキテクチャが可能に
コード量の削減：単純なデータ表示のために複雑なReactコンポーネントを作成する必要がなくなる
コンポーザブル（組み合わせ可能）なアプローチ：既存のブロックと新しいデータソースを自由に組み合わせられる

また、Block Bindings APIはエンドユーザー（コンテンツ編集者やサイト管理者）にも大きなメリットをもたらします：

エディター体験の向上：データ入力と表示デザインを別々に管理できる
編集の柔軟性：動的データの表示方法をビジュアルエディタで自由に調整可能
一貫性の確保：同じデータソースを複数の場所で統一されたスタイルで表示
学習コストの低減：新しい専用ブロックの使い方を学ぶ必要がない

Block Bindings APIの制限と課題

Block Bindings APIは素晴らしい機能ですが、いくつかの制限や課題もあります：

限られたブロック属性のサポート：すべてのブロック属性がバインド可能というわけではない
動的な条件分岐のサポート不足：複雑な条件付きレンダリングには別のアプローチが必要
高度なデータ操作の制限：データ変換やフォーマット変更には追加のコードが必要
APIの発展途上：WordPress 6.5で初めて導入された機能のため、今後変更される可能性がある
バックエンドでのプレビュー限界：一部のバインディングはエディタ上で正確にプレビューできない場合がある

これらの課題は、将来のWordPressバージョンで改善されることが期待されますが、現時点では開発者がこれらの制限を理解した上で使用することが重要です。

Block Bindings APIの将来展望

Block Bindings APIは、WordPress 6.5で初めて導入された新機能です。今後のWordPressの進化に伴い、以下のような展開が期待されます：

より多くのブロックとの互換性：標準および人気のサードパーティブロックでのバインディングサポート拡大
より高度なバインディング機能：双方向バインディング、リアルタイム更新など
UIの改善：エディタでより直感的にバインディングを設定できるインターフェース
サードパーティプラグインとの広範な統合：ACF、Meta Box、Pods、CMB2などの人気プラグインとのネイティブ統合
パターンとテンプレートでの活用：バインディングを含むブロックパターンやテンプレートパーツ

まとめ：Block Bindings APIでWordPress開発がより効率的に

WordPress 6.5で導入されたBlock Bindings APIは、WordPressでの動的コンテンツ管理のあり方を大きく変える可能性を秘めた革新的機能です。カスタムブロック開発の必要性を減らし、標準ブロックと動的データを簡単に連携させることで、開発者とコンテンツ編集者の両方にとって大きなメリットをもたらします。

この機能は特に以下のようなケースで威力を発揮します：

カスタムフィールドデータを視覚的に表示したい
サイト全体で共通情報を一元管理したい
データと表示を分離して柔軟な管理を実現したい
カスタムブロック開発なしで動的コンテンツを実装したい

WordPress 6.5へのアップデートとBlock Bindings APIの活用をぜひ検討してみてください。サイト構築のワークフローが効率化され、より柔軟なコンテンツ管理が可能になるでしょう。

当社ではWordPress 6.5の新機能活用サポートや、カスタムデータソースの開発、Block Bindings APIを活用したサイト構築のコンサルティングを行っています。動的コンテンツ管理の最適化についてのご相談は、お気軽にお問い合わせください。

エーデルハーツ

Custom WordPress Support & Development