WordPress7.0以降で、PHPを書くと独自ブロックを作成可能になりました。その方法を解説します。
サンプルということで、単に入力したデータを画面に表示する例です。
まずは全体のコードです。
add_action('init', 'mysample_blocks');
function mysample_blocks()
{
register_block_type(
'mysample/php-only-block',
array(
'title' => 'Sample block',
'description' => 'サンプルブロック',
'supports' => array(
'autoRegister' => true,
),
'attributes' => array(
'title' => array(
'label' => '見出し',
'type' => 'string',
'default' => 'Hello World',
),
'size' => array(
'label' => '大きさ',
'type' => 'string',
'enum' => array( 'small', 'medium', 'large' ),
'default' => 'medium',
),
'ratio' => array(
'label' => '割合',
'type' => 'number',
),
'count' => array(
'label' => '数',
'type' => 'integer',
'default' => 5,
'min' => 1,
'max' => 10,
),
'enabled' => array(
'label' => '有効にする',
'type' => 'boolean',
'default' => true,
),
),
'render_callback' => 'mysample_render_callback',
)
);
}
function mysample_render_callback($attributes) {
ob_start();
?>
<div <?php echo get_block_wrapper_attributes(); ?>>
<?php echo esc_html($attributes['title']); ?>
<?php echo esc_html($attributes['size']); ?>
<?php echo esc_html($attributes['ratio']); ?>
<?php echo esc_html($attributes['count']); ?>
<?php echo esc_html($attributes['enabled']); ?>
</div>
<?php
return ob_get_clean();
}
register_block_type()
WordPress では register_block_type() 関数を使用してブロックを登録します。このとき、
'supports' => array(
'autoRegister' => true,
)
と書くと、登録した属性 attributes が管理画面で入力・編集可能になります。
attributes の候補
※WordPress7.0 時点で利用可能なものです。将来は増える可能性があります。
まずは 文字列 string です。
'attributes' => array(
'title' => array(
'label' => '見出し',
'type' => 'string',
'default' => 'Hello World',
),
'size' => array(
'label' => '大きさ',
'type' => 'string',
'enum' => array( 'small', 'medium', 'large' ),
'default' => 'medium',
),
)
のように書きます。title や size となっている部分はプログラム内部の名称です。画面に表示される名称は 'label' => '●●●' のとろこに書きます。
選択式にしたい場合は enum を設定します。この場合編集画面ではセレクトボックスになります。
初期値を指定したい場合は default を設定してください。
続いて数値 number と、 整数 integer です。
'attributes' => array(
'ratio' => array(
'label' => '割合',
'type' => 'number',
),
'count' => array(
'label' => '数',
'type' => 'integer',
'default' => 5,
'min' => 1,
'max' => 10,
),
)
number は数字を受け入れます。 integer にすると整数のみになります。
最小値を設定したい場合は ‘min’ を、最大値を設定したい場合は max を指定します。
最後は 真偽値 boolean です。
'attributes' => array(
'enabled' => array(
'label' => '有効にする',
'type' => 'boolean',
'default' => true,
),
)
編集画面ではチェックボックスになります。
表示を行う関数
表示を行う関数を 'render_callback' => 'mysample_render_callback', のように指定します。関数 mysample_render_callback は引数として attributes のデータを受け取ります。
function mysample_render_callback($attributes) {
ob_start();
?>
<div <?php echo get_block_wrapper_attributes(); ?>>
<?php echo esc_html($attributes['title']); ?>
<?php echo esc_html($attributes['size']); ?>
<?php echo esc_html($attributes['ratio']); ?>
<?php echo esc_html($attributes['count']); ?>
<?php echo esc_html($attributes['enabled']); ?>
</div>
<?php
return ob_get_clean();
}
コールバック関数では(画面出力ではなく)データを返す必要があります。このため出力バッファリング ob_start() と ob_get_clean() を使っています。
get_block_wrapper_attributes() 関数は、スタイル設定用のクラスを出力します。ブロック編集で「高度な設定」欄でスタイル設定した場合、この関数がスタイル用のクラスを出力します。
※ $attributes['enabled'] は内部では trueかfalseです。単純にechoした場合、trueは1を表示し、falseは何も表示しないです。
活用例: ショートコードの置き換え
WP7.0時点では、PHPだけでブロックを作った場合、比較的単純なものになります。とはいえ、旧来はショートコードで作っていたものを置き換える、といった用途には十分役立ちそうです。
ショートコードだと、↑の画像のように、コードを直接書いていかないといけないですし、プレビューもされません。
一方、PHPブロックで作った場合は、↓の画像のようになります。
画面右側のサイドバーで編集できます。ショートコード中の変更したい部分だけを編集する形にできるため、編集しやすくなります。また編集ミスが生じにくくなります。
またプレビューもしてくれます。(編集画面内で綺麗にプレビューさせるには編集画面用のCSSが必要になります)
公開日:
