LabはGutenbergの独自ブロックを手軽に導入できてオススメTips2019.09.30WordPress5.0から導入された新エディター「Gutenberg」活用されていますでしょうか?最近携わった案件でガッツリGutenbergを導入してみたのですが、コーディング知識のない人でも直感的にページを編集・構築できるので、担当者さんが頻繁に情報を更新するサイトなどで活躍しそうだなという印象でした。旧エディタであれば、カスタムフィールドだったりショートコードだったりで実現していたようなことも、Gutenbergの独自ブロックを自作すれば代替できたりするのが良いですね。自作の独自ブロック開発するとなると、(手段は色々とあるのですが)ReactのJSXでビルドしなくてはならなかったりと、初級者やJavaScriptが苦手な人にとってはなかなか複雑でとっつきにくいと思いました。Lab」というプラグインです。Labならば、手軽にPHPだけで独自ブロックを作ることができます。今回はこちらの使い方を簡単に紹介していきます。Labを使ってGuternbergに「説明リスト」ブロックを追加してみるHTMLの「説明リスト」は何かの用語などを説明をマークアップする際に、下記のように<dl>・<dt>・<dd>などのタグを組み合わせて使われます。<dl><dt>ここに用語などが入ります</dt><dd>ここに用語の説明が入ります</dd></dl>Guternbergのデフォルトのブロックには「箇条書きリスト(ul)」や「順序付きリスト(ol)」は存在するのですが、説明リストは存在しません。Guternbergはマークダウン記法にも対応しているのですが、説明リストの記述には対応していません。説明リストを入力したい場合、通常はHTMLブロックを追加して、そこにタグをマークアップしなくてはなりません。ここに「説明リスト」のブロックがあればもっと気軽に説明リストを使うことができますよね。Lab」を使って、独自ブロックを作っていきたいと思います。LabをWordPressにインストールしましょう。New」を選択し設定していきます。ブロックの名前や、ブロック内に表示されるフィールドを設定していきます。Properties」の設定をしていきます。「Slug」は次の工程でphpのファイル名と合わせるため英語で入力しましょう。表示されるアイコンの設定や、どのカテゴリーのブロックとして表示するかなどを入力していきます。ブロックのテンプレートファイルを作成しテーマフォルダ内にアップロードする次にテンプレートファイルを作成します。テンプレートファイルはテーマディレクトリに「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」というファイルに下記のように記述し、アップロードします。エディタでブロックを挿入してみるここまでできたら準備完了です。作った独自ブロックを実際にエディタで挿入してみましょう。Labで追加してみたブロックです。(見た目はCSSで整えています)ここに用語などが入りますここに用語の説明が入ります。ここに用語の説明が入ります。ここに用語の説明が入ります。ここに用語の説明が入ります。Labの使い方の簡単な説明でした。今回作った説明リストブロックの場合、あらかじめ決まったフォーマットでの入力となってしまうため、<dt>や<dd>を複数入力したい場合などには対応することはできません。有料のPro版には「リピーターフィールド」などの高度な機能がついているので、より自由にカスタマイズしたい場合は、導入を検討しても良いと思います。(ACFのPro版みたいな感じですね)今回のようなシンプルなブロックであれば、無料版でも十分に対応できますし、何より他の方法と比べて手軽に導入できるので、Gutenbergの使い勝手を良くするために是非使ってみてはいかがでしょうか。