WordPressのGutenbergでオリジナルブロック（カスタムブロック）を作ってみたくて、 Block Lab プラグインを使ったときの簡単なメモ。

Block Lab 入手の仕方

WordPressの公式ディレクトリーから入手できます。
管理画面の【新規追加】からインストールして、有効化します。

https://ja.wordpress.org/plugins/block-lab/

Block Lab の使い方

管理画面の左メニュー【Block Lab】が追加されているので「Add New」からブロックを新規作成。

ブロックの名前とプロパティ情報を入力

Block Labに元から登録されているサンプルブロックがあるのでそれを使って説明します。

• Enter block name here: ブロックの名前。（ex,Example Block）
• Slug: ブロックのスラッグ。テンプレートファイルの名前にもなります。(ex,example-block)
• Icon:ブロックのアイコン。一覧で使用します。
• Category: ブロックのカテゴリー。(ex,一般ブロック)
• Keywords: ブロックの一覧にある検索機能で使用します。最大3語をカンマ区切りで登録できます。（ex,sample, tutorial, template）

フィールド設定

サンプルブロックの「Title」を使って各設定を説明。

• Field Label : フィールドラベル（ex,Title）
• Field Name : フィールド名。テンプレで使用する名前になります。スペースは使用不可。ハイフンのみ。（ex,title）
• Field Type : フィールドタイプを指定します。テキストやURLやImageなど。（ex,Text）
• Field Location : 編集画面でのフィールドの表示箇所を指定。「Editor」はエディタ内、 「Inspector」 右側のサイドエリア。（ex,Editor）
• Field Width : フィールの幅を指定（ex,100%）
• Help Text : 説明文（ex,The primary display text）
• Default Value : デフォルトの値
• Placeholder Text : プレースホルダー文
• Character Limit : 最大文字数

上記の様に必要な情報を入力後、【公開】します。

タイトル以外の他のフィールド（Description、Button Text、Button Link）の設定については省略。

オリジナルブロックのテンプレの作成

オリジナルブロックを公開するとタイトル下のエリアにオリジナルブロックを表示させるテンプレのパスが表示されます。
該当の場所（通常なら右記の場所 /wp-content/themes/テーマ名/blocks/ block-スラッグ名.php ）テンプレを作成して格納します。

上記のパス場所にスラッグと同じファイル名でテンプレファイルを作成します。（今回の場合は「block-example-block.php」）

Block Labの ドキュメントサイトにあるコードを用いてテンプレを作成します。

https://getblocklab.com/docs/fields/

今回のサンプルブロックのコード。（ CSSは別途用意してください。 ）

<h2><?php block_field( 'title' ); ?></h2>
<p><?php block_field( 'description' ); ?></p>
<a href="<?php block_field( 'button-link' ); ?>"><?php block_field( 'button-text' ); ?></a>

新規投稿してみる

投稿画面のエディタで作成したExample Blockのアイコンを選択。
情報入力→公開すると、入力した内容が表示されます。

※その際に通常のsingle.phpもテーマ内に用意しておくのを忘れずに。