今回も新しいAPIを触ってみました。次はBlock Bindings API！
これは動的なデータをブロックにもたせることができるようになる機能です。
動的なデータって言うとあんまりピンとこないですが、カスタムフィールドがわかりやすいと思います。（現状その他はどうやって使うのかあまりよくわかってない）
WordPress6.5では、以下のブロックで使うことができます。
| ブロック | 属性 |
|---|---|
| 画像 | url, alt, title |
| 段落 | content |
| 見出し | content |
| ボタン | url, text, linkTarget, rel |
それぞれのブロックの属性に対して割り当てることができるので、「段落タグを表示する内容は、company_nameというカスタムフィールド」という使い方ができます。
使い方
プラグイン等でカスタムフィールドを用意します。
add_action( 'init', 'chiilog_register_meta_fields' );
function chiilog_register_meta_fields() {
register_meta(
'post',
'company_name',
array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'sanitize_callback' => 'wp_strip_all_tags'
)
);
}現時点では show_in_rest が true じゃないとだめな模様。
*Note that the show_in_rest property must be set to true for the time being due to security considerations, though there are plans to explore how to remove this requirement in the future.
https://make.wordpress.org/core/2024/03/06/new-feature-the-block-bindings-api/
とあるので、将来的には不要にしたいようですね。
これをどう編集するかは個人の開発の意向によると思いますが、今回は特に作り込む予定ではなかったので、パネルでカスタムフィールドを表示して作業しました。
こんな感じです。
あとはAPIをサポートしているブロックに紐づけるだけ！
ビジュアルエディタではmetadataの追加はまだサポートしていないので、コードエディターに切り替えます。
<!-- wp:paragraph {
"metadata":{
"bindings":{
"content":{
"source":"core/post-meta",
"args":{
"key":"company_name"
}
}
}
}
} -->
<p></p>
<!-- /wp:paragraph -->ちなみに本文部分が空っぽのままだと段落ブロックがない状態ので、適当に文字を入力して wp:paragraph を表示させてから metadata を追加しました。
この状態でビジュアルエディターに戻すと、company_name で入力した値が表示されます。
カスタムフィールドを更新してもブロック側で即時反映はされないですが、「更新」を押して記事自体を更新すると値が入り直します。
あくまでカスタムフィールドの値を表示させるだけなので、段落ブロックからカスタムフィールドを編集することはできません。
ですが、ガワは段落ブロックであることに代わりはないので、通常の段落ブロックと同じように背景色をつけたり、フォントサイズを変えたりというスタイルの編集は可能です。
詳細ページで表示できるものは当然アーカイブページでも表示できます。
以下のビデオキャプチャはテーマエディターでインデックスページを触ってみたときのキャプチャです。
使い所は？
基本的に投稿はブロック内で完結できるようになっていますが、アーカイブページに特定の文言（会社名とか人名とか）やアイキャッチ以外の画像を出したいというときに、別途カスタムブロックを作らなくてもよくなったという感じでしょうか。
とは言え、不要なカスタムフィールドを量産するとかえって使いにくい管理画面になってしまうと思うので、設計周りはより慎重に行ったほうが良さそうだと胸に刻んでおきます……。こういうの、不用意にいらないところで使ってしまいがち。
カスタムブロックにBlock Bindings APIを使う方法なんかも紹介されているので、ぜひ紹介記事は一読してみてくださいね！