Block Bindings API を試す

概要

Block Bindings APIを試してみた。レイアウトが決まっているページの情報だけを書き換えるなら使えそう。

試すに至った背景

そもそも Block Bindings API とは

ブロックの内容や属性を動的に書き換えるAPI。

Bindings – Japanese Team – WordPress.org 日本語

試したかった理由

当サイトではブロックの内容を書き換えたり、動的に表示させたりしている。現在はブロックの名前をキーにして、ブロックを描画するときに書き換えているが、より公式なやり方があればそれに準拠したい。

試したこと

準備

段落ブロックで試してみた。まずはビジュアルエディターで段落を作った後コードエディターに切り替えてバインド情報を書き込む。

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"listfreak/blockbinings-test","args":{"test_key":"test_value"}}}}} -->
<p>（ブロックバインディング）</p>
<!-- /wp:paragraph -->

バインドする関数とバインドされる関数、つまり表示内容を実際に作る関数を定義する。以下のようなファイルを作って自作プラグインから呼び出してみた。

<?php
class LF_BlockBinings_Test {

	/**
	 * 初期設定をする
	 */
	public static function init() {

		// ブロックと表示ロジックを結び付ける関数を呼び出す
		add_action( 'init', [ __CLASS__, 'bind' ] );
	}

	/**
	 * ブロックと表示ロジックを結び付ける
	 */
	public static function bind() {
		register_block_bindings_source( 'listfreak/blockbinings-test', [
			'label'              => __METHOD__,
			'get_value_callback' => [ __CLASS__, 'get_value' ],
		] );
	}

	/**
	 * 表示する内容を作る
	 */
	public static function get_value( $source_args, $block_instance, $attribute_name ) {

		$value = __METHOD__.' ('.__LINE__.') '.print_r( $source_args, true );
		return $value;
	}
}
LF_BlockBinings_Test::init();

実施

バインドが成功すると、ブロックには「（ブロックバインディング）」でなくregister_block_bindings_source()で指定したラベルである「LF_BlockBinings_Test::bind」が表示された。これによってバインドされていることが示される。

エディタで定義するソース名 (listfreak/blockbinings-test) と、それを使ってバインドする関数の対応関係を管理するのが面倒そうなので、メソッド名をラベルに使うアイディアは悪くないと感じた。

このブロックを含むページを表示させると、ブロック部分には下記が表示された。

LF_BlockBinings_Test::get_value (28) Array ( [test_key] => test_value )

試して学んだこと

  • 思ったより簡単。バインド情報をコードエディターで書き込むので内容を忘れるのではないかと不安だったが、ちゃんとビジュアルエディターでも識別できるようになっている。
  • 対象ブロックの値だけを書き換えるので、get_value()が空文字を出力しても<p></p>は出力される。マージンなどの書式設定を施していればそれも画面に表示される。出力する内容がなければ<p></p>ごと表示させないでおこうと思うと、レンダー時点で書き換える現行方式の方が柔軟。
  • 特定ページでしか発生しないBindingでも、バインド関数をinitフックに登録しなければならない。バインディングをいくつも登録していくにつれてメモリの容量も増えることになる。まあ大きなサイズではないだろうが……。

Posted by

koji

on

in category

«

»