WordPress7.0からはPHPだけでカスタムブロックが登録できるようになりました。これまではオリジナルのブロックを用意しようと思ったら、Reactの知識が必要でした。
ACF Proの機能を使えばPHPの知識だけでもカスタムブロックを作成できましたが、有料版限定の機能ですしね…WordPress標準機能で提供されるのはうれしいです。
ただ結論から言うと、まだ実用的ではないと感じました。現時点で追加できるフィールドがstring(文字列)/integer(数値)/boolean(真偽値)のみとなっていて、テキストエリアやメディアライブラリを使った画像の追加・選択などはできません。
そのため、まだ簡易的なブロックの作成しかできません。今後に期待ですね。
PHPだけでカスタムブロックを作成する方法
PHPだけでカスタムブロックを作成するには、下記のコードを適用しているテーマのfunctions.phpや自作プラグイン、スニペット系プラグインのコード入力画面などに追加します。
add_action('init', function () {
register_block_type(
'custom/example', // 名前空間/ブロック名
array(
'title' => 'My Example Block', // ブロックの表示名
'category' => 'text', // ブロックカテゴリ(指定なしの場合は未分類に入る。text/media/design/widgets/theme/embedのいずれか、もしくは後述するカスタムカテゴリを指定)
'icon' => 'heart', // アイコン(Dashiconsの名称)
'attributes' => array(
'title' => array(
'type' => 'string', // テキスト入力
),
'animal' => array(
'type' => 'string',
'enum' => array('犬', '猫', 'うさぎ'), // enumで選択肢を指定することでセレクトボックスになる
'default' => '猫', // 初期値
),
'number' => array(
'type' => 'integer', // 数値入力
'default' => 5, // 初期値
),
'check' => array(
'type' => 'boolean', // チェックボックス
'default' => true, // 初期値
),
),
'render_callback' => function ($attributes) {
$title = $attributes['title'] ? esc_html($attributes['title']) : '';
$animal = $attributes['animal'] ? esc_html($attributes['animal']) : '';
$number = $attributes['number'] ? $attributes['number'] : '';
$check = $attributes['check'] ? '頭' : '匹';
$title_html = $title ? '<div class="my-example-block__text">' . $title . '</div>' : '';
$animal_html = $animal ? '<div class="my-example-block__animal">' . $animal . '</div>' : '';
$number_html = $number ? '<div class="my-example-block__number">' . $number . $check . '</div>' : '';
return sprintf(
'<div %s>%s%s%s</div>',
// 1つ目の%sにget_block_wrapper_attributes()の返り値を挿入
// これを入れることで、ブロックエディターで設定した「追加のクラス」や「HTMLアンカー」が反映されるようになる
get_block_wrapper_attributes(
array(
'class' => 'my-example-block' // ブロック全体に付与する追加のクラス名(array以下はなくしてget_block_wrapper_attributes()としてもOK。クラスを追加しても「wp-block-名前空間-ブロック名」は自動で付与される)
)
),
$title_html, //2つ目の%sに$title_htmlを挿入
$animal_html, //3つ目の%sに$animal_htmlを挿入
$number_html, //4つ目の%sに$number_htmlを挿入
);
},
'supports' => array(
'autoRegister' => true, // PHPのみでブロックを登録する場合に指定
),
)
);
});
コードの解説
おおよそコメントで入れていますが、コードの詳細について解説いたします。
まず、register_block_type()でブロックを登録します。’custom/example’のところは識別子なので適宜変更してください。
categoryはどのブロックカテゴリに分類するか指定します。今回は一番上にあるテキストカテゴリを指定しています。オリジナルのカテゴリを追加して分類することも可能です(※後述します)
iconは、Dashiconsから好きなものを選びます。
attributesで入力フィールドを作成します。以下4つを登録しています。
- title：テキスト入力
- animal：セレクトボックス
- number：数値入力
- check：チェックボックス
typeは、string(文字列)/integer(数値)/boolean(真偽値)が指定可能で、stringと合わせてenumを設定するとセレクトボックスに変わります。
render_callbackで出力側の処理を記述します。$titleや$animalなどの変数に入力値を代入し、値が空でなければHTMLを出力しています。数値は値を消しても初期値が入るので、0を入力することで空扱いにできます。
※内容が複雑な時は出力側は分けて書いた方がわかりやすいかもしれません。出力側を別関数に分けて記述する方法は、よしあかつきさんのこちらの記事が大変参考になります。
supportsの「’autoRegister’ => true」は、PHPだけでブロックを登録する際に指定します。これを指定することでPHPだけでブロック登録ができるようになります。
作成したカスタムブロックはこんな感じです
ブロック一覧から作成した「My Example Block」を挿入します。
右側のブロック設定で各種値を入力します。
フロント側はこんな感じで表示されます。
カスタムブロックカテゴリを作成する
ブロック登録時にcategoryでブロックカテゴリを指定できますが、既存のカテゴリではなくオリジナルのカスタムブロックカテゴリに分類する方法をご紹介いたします。
以下のコードでカスタムブロックカテゴリを追加できます。
add_filter('block_categories_all', function ($categories) {
return array_merge(
$categories,
array(
array(
'slug' => 'my-custom-category',
'title' => 'カスタムブロックカテゴリ',
),
)
);
});
上記コードを追加したら、register_block_type()内のcategoryでslug(今回はmy-custom-category)を値に入れます。
'category' => 'my-custom-category',
ブロック一覧を開くと、カスタムブロックカテゴリに分類されています。
あとがき
カスタムブロックの追加はややこしいイメージでしたが、PHPだけでサクッと作成できるのは良いですね。
ただ、本当に必要なのはテキストエリアや画像周りだったりするので、今後に期待したいところです。
コメントを残す