【WordPress】Block LabはGutenbergの独自ブロックを手軽に導入できてオススメ

WordPress5.0から導入された新エディター「Gutenberg」活用されていますでしょうか？

最近携わった案件でガッツリGutenbergを導入してみたのですが、コーディング知識のない人でも直感的にページを編集・構築できるので、担当者さんが頻繁に情報を更新するサイトなどで活躍しそうだなという印象でした。

特に旧エディタであれば、カスタムフィールドだったりショートコードだったりで実現していたようなことも、Gutenbergの独自ブロックを自作すれば代替できたりするのが良いですね。

しかし自作の独自ブロック開発するとなると、（手段は色々とあるのですが）ReactのJSXでビルドしなくてはならなかったりと、初級者やJavaScriptが苦手な人にとってはなかなか複雑でとっつきにくいと思いました。

そこでオススメしたいのが「Block Lab」というプラグインです。
Block Labならば、手軽にPHPだけで独自ブロックを作ることができます。

今回はこちらの使い方を簡単に紹介していきます。

Block Labを使ってGuternbergに「説明リスト」ブロックを追加してみる

HTMLの「説明リスト」は何かの用語などを説明をマークアップする際に、下記のように<dl>・<dt>・<dd>などのタグを組み合わせて使われます。

<dl>
	<dt>ここに用語などが入ります</dt>
	<dd>ここに用語の説明が入ります</dd>
</dl>

Guternbergのデフォルトのブロックには「箇条書きリスト（ul）」や「順序付きリスト（ol）」は存在するのですが、説明リストは存在しません。
またGuternbergはマークダウン記法にも対応しているのですが、説明リストの記述には対応していません。

ですので説明リストを入力したい場合、通常はHTMLブロックを追加して、そこにタグをマークアップしなくてはなりません。

もしここに「説明リスト」のブロックがあればもっと気軽に説明リストを使うことができますよね。

というわけでプラグイン「Block Lab」を使って、独自ブロックを作っていきたいと思います。

1. インストール

まずはBlock LabをWordPressにインストールしましょう。

2. 管理画面からブロックの設定を入力する

インストールするとサイドメニューに「Block Lab」の項目が表示されますので、「Add New」を選択し設定していきます。

ブロックの名前や、ブロック内に表示されるフィールドを設定していきます。

フィールドの追加ができたら「Block Properties」の設定をしていきます。

「Slug」は次の工程でphpのファイル名と合わせるため英語で入力しましょう。

表示されるアイコンの設定や、どのカテゴリーのブロックとして表示するかなどを入力していきます。

3. ブロックのテンプレートファイルを作成しテーマフォルダ内にアップロードする

次にテンプレートファイルを作成します。

テンプレートファイルはテーマディレクトリに「Blocks」というディレクトリを作り、その中に入れていきます。

テンプレートの適用ルールは色々とあるのですが、下記のようにブロック名でフォルダをまとめるやり方が管理しやすいのでオススメです。

#表示用のテンプレート
/wp-content/themes/テーマ名/blocks/ブロック名/block.php

#プレビュー用のテンプレート
/wp-content/themes/テーマ名/blocks/ブロック名/preview.php

#ブロックに適用するスタイルシート
/wp-content/themes/テーマ名/blocks/ブロック名/block.css

プレビュー用やCSSが不要であれば、block.phpだけでもOKです。

その他のルールや細かい仕様が知りたければ公式サイトのドキュメントを読んでみてください。
https://getblocklab.com/docs/get-started/add-a-block-lab-block-to-your-website-content/

今回は、「blocks/description-list/block.php」というファイルに下記のように記述し、アップロードします。

<?php
	$dt = block_value( 'dt' );
	$dd = block_value( 'dd' );
?>
<dl>
	<dt><?php echo $dt; ?></dt>
	<dd><?php echo $dd; ?></dd>
</dl>

4. エディタでブロックを挿入してみる

ここまでできたら準備完了です。

作った独自ブロックを実際にエディタで挿入してみましょう。

下記、実際にBlock Labで追加してみたブロックです。
（見た目はCSSで整えています）

ここに用語などが入ります

ここに用語の説明が入ります。ここに用語の説明が入ります。
ここに用語の説明が入ります。ここに用語の説明が入ります。

まとめ

以上、Block Labの使い方の簡単な説明でした。

今回作った説明リストブロックの場合、あらかじめ決まったフォーマットでの入力となってしまうため、<dt>や<dd>を複数入力したい場合などには対応することはできません。

有料のPro版には「リピーターフィールド」などの高度な機能がついているので、より自由にカスタマイズしたい場合は、導入を検討しても良いと思います。
（ACFのPro版みたいな感じですね）

今回のようなシンプルなブロックであれば、無料版でも十分に対応できますし、何より他の方法と比べて手軽に導入できるので、Gutenbergの使い勝手を良くするために是非使ってみてはいかがでしょうか。

それではまた。