WordPress 6.5では、新機能としてBlock Bindings APIが導入されました。これはブロックエディタを使いやすくするツールで、ウェブサイトのさまざまな部分にあらゆる種類のデータを追加することをより簡単にします。これは、編集時に書くカスタムコードが大幅に減ることを意味します。

Block Binding APIとは何ですか？

記事の詳細やPHPコードで作成されたカスタムルールなど、特定のソースからの情報を表示するためにウェブページで使用する必要がある基本的なブロックがあるとします。どのようにするのでしょうか？ここでは、それを単純明快にする方法を紹介します。

WordPressの以前のバージョンでは、投稿の詳細やPHPロジックによってカスタマイズされたコンテンツなど、特別な情報をウェブページに表示したい場合、通常はまったく新しいカスタムブロックを作成する必要がありました。この作業は複雑で時間がかかるものでした。

しかし、WordPress 6.5からは、より簡単になりました。Block Binding APIを使えば、段落やタイトルなどの既存の標準ブロックを、自分でまったく新しいブロックを作ることなく、別のソースから直接データを取得できるようになりました。つまり、Reactプログラミングやブロック登録、新しいカスタムブロックをゼロから作成することなく、段落ブロックに投稿のメタデータを直接表示させたり、タイトルブロックにプラグインが生成したPHPロジックを表示させたりできるのです。

WordPress 6.5のブロックバインディングAPIは、エディタとブロックの拡張をより簡単にするメジャーアップデートです。実際、この新しい API を使って、投稿のカスタムフィールドをコアブロックにリンクする方法を実演しました。

もう少し高度になると、この機能を使ってブロックをカスタマイズしたり、設定した特別なソースからデータを取得することもできる。

ブロックバインディングの作成と使用方法の詳細については、WordPress 開発者ブログの入門チュートリアル.

ブロック・バインディングの仕組みは？

中抜き

ブロックバインディングAPIを使ってカスタムデータソースにリンクする方法を説明する前に、このAPIがどのように動作するかを簡単に説明します。それから、標準のブロックを記事のカスタムフィールドにリンクする方法について詳しく説明します。

以下は、リンクできるようになったブロックとそのプロパティを示した表である：

現在、この新機能で使用できるブロックや属性は多くないが、多くの一般的なニーズをカバーするには十分だ。将来的には、この機能をより多くのコア・ブロックやカスタム・ブロックに拡張する予定だ。

ブロックバインディングを使用するには、WordPressに特定のタグを使用して、選択したデータソースから情報を取得するように設定する必要があります。一度設定すれば、ページのフロントエンドに表示されるとき、それらのデータソースからのロジックを使用してコンテンツを表示します。

いったんプロパティがバインドされると、エディターでそれを変更することはできず、エディターには、プロパティがすでに何らかのデータ・ソースに接続されていることを示すフラグが表示される。

組み込みのカスタム・フィールド・サポートを活用する方法の例です。

カスタムフィールド

Block Binding APIの最初のバージョンでは、プロパティをカスタムフィールドにリンクする直接的なインターフェースがありませんでした。これは、Gutenbergのコードエディタに手動で特定のコードを追加する必要があることを意味します。

サポートされている属性を記事のカスタムフィールドにリンクしたい場合、以下のフォーマットでコードを追加できます：

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"core/post-meta",

"args":{

"key":"book-genre"

}

}

}

}

} -->

<p></p>

<!-- /wp:paragraph -->

これを機能させるには、テーマのfunctions.phpファイルまたはプラグインにコードを追加して、カスタムフィールドが投稿メタデータに正常に登録されたことを確認できるようにする必要があります。

register_meta(

'post'、

'book-genre'.

配列(

'show_in_rest' => true、

'single' => true、

'type' => 'string', 'single' => true, 'type' => 'string', 'single' => true

'default' => 'デフォルトのテキストフィールド'、

)

);

安全のために、一時的にショー・イン・レストプロパティが真の.

未来のためにデータソースを増やす

投稿メタデータのサポートは最初のステップにすぎません。WordPress 6.6では、サイト情報、ユーザー情報、クラシファイドなど、より多くのデータソースを追加する予定です。

また、Block Binding APIでは、独自のデータソースを登録することができます。これは、記事のメタデータを登録するのに使っているのと同じ機能です。

カスタムソースの登録

中抜き

新しいブロック・バウンド・データソースを作成するには、ブロック・バウンド・データソースの名前をregister_block_bindings_source()関数の基本的な書式は以下の通りである：

register_block_bindings_source()

文字列 $source_name、

配列 $source_properties

).

新しいブロック・バインディング・ソースを登録するには、2つのパラメータを使用します：

1. 1TP4ソース名これはカスタム・データ・ソースの一意の識別子で、"namespace/name" の形式でなければなりません。すべてのデータ・ソースには一意の名前空間が必要であることを忘れないでください。
2. $source_propertiesこれはデータソースの特徴を定義する配列である：
   • ラベル現在のところ、このラベルはインターフェイスには表示されません。
   • get_value_callbackこれは、ブロックのバインディングソースがデータを使用する必要があるときに呼び出されるPHP関数またはクロージャです。
   • 使用コンテキスト(オプション): これは、データソースが追加情報(例えば、現在の記事のID)を必要とする場合、何を含めるべきかを指定する配列です。

WordPressがブロックを処理し、ロードするカスタムデータソースを見つけるとget_value_callback関数を使用します。関数はこのように設定する：

projectslug_bindings_callback(

配列 $source_args、

WP_Block $block_instance、

文字列 $attribute_name

).

登録メカニズムの利用

実際には、以下の登録関数を使用して、著作権情報の簡単なバインディングを作成することができます：

add_action( 'init', 'projectslug_register_block_bindings' )；

関数 projectslug_register_block_bindings() { を実行します。

register_block_bindings_source( 'projectslug/copyright', array(

'label' => __( 'Copyright', 'projectslug' )、

'get_value_callback' => 'projectslug_copyright_binding'

) );

}

関数のprojectslug_copyright_binding() {。

return '© ' . date( 'Y' ); } function projectslug_copyright_binding() { return '© ' .

}

ここでは、段落ブロックを著作権情報のデータソースにリンクする方法の例を示し、ウェブサイトのフロントエンドでどのように見えるかを示します：

<!-- wp:paragraph {

"metadata":{

"bindings":{

"content":{

"source":"projectslug/copyright"

}

}

}

} -->

<p>著作権ブロック</p>

<!-- /wp:paragraph -->

もちろん、これは基本的な例に過ぎない。関数内で他の引数を使用することで、より複雑な機能を構築することができる。
その他のAPI機能

さらに、現在公開されている他の機能も数多くある：

• unregister_block_bindings_source($source_name)すでに設定されているデータソースの登録を解除するために使用します。
• get_all_registered_block_bindings_sources()登録されているすべてのデータソースのリストを取得します。
• get_block_bindings_source($source_name)特定の登録データソースの詳細を取得するために使用します。

また、コアのデータソースはエディタのユーザーインターフェイスで利用可能ですが、エディタ用のこれらのAPIは現在非公開です。これは、ユーザーインターフェイスにおけるこれらの機能の使用を標準化する方法をまだ議論している段階であることを意味します。

そのため、カスタムフィールドを扱うための使いやすいインターフェイスが欲しい場合は、この機能を自分で開発する必要があります。

さらなる研究と次のステップ

あなたのプロジェクトにブロック・バインディングを使って、もっとインスピレーションを得たいと思いませんか？以下のサイトをご覧ください。ブロックバインディング.phpファイル内の登録コードと内蔵のコア/ポストメタブロック・バインディングもお見逃しなく！入門チュートリアル・シリーズ.

ブロックバインディングはまだ発展途上にある。将来的には、次のことを計画している。以下の機能が実装されている：

• ユーザーインターフェイスでメタフィールドの値を直接編集できるようにする。
• エディターに機能を追加し、ユーザーが簡単にバインディングを追加できるようにする。
• サイトデータ、記事データ、カテゴリーデータなどの新しい内蔵データソースを導入。
• より多くのコアブロックのサポートを拡張。
• 開発者がエディタのユーザーインターフェイスを拡張するためのツールを提供します。

ご意見、ご感想をお待ちしております！私たちの詳細についてはギズブまたは WordPress Slack で、あなたのアイデアや使用例を私たちと共有し、一緒にブロックバインディング API を改良していきましょう。