Lazy BlocksでRepeaterブロックの作り方
今まで WordPress で ACF(Advanced Custom field)を多く使ってきましたが、gutenberg になってからはプラグインのLazy Blocksを使い始めています。Lazy Blocks は簡単にブロックを作成できる便利なプラグインです。今回初めて Lazy Blocks の Repeater ブロックを使い「スタッフ紹介」のブロックを作成したので、その手順について詳しく紹介していきます。
目次
1.ブロックの作成方法
基本的な構成は ACF と同じで、リピーターブロック（リピーターフィールド）の中に子ブロック（サブフィールド）を入れて入れ子の状態にします。
ACF と違うのは、出力用のコードをテンプレートに直接書くのではなく、Lazy Blocks の設定の入力欄に記入します。
また利用できる記述が複数あり、PHP の他に「HTML + Handlebars」が使えます。Handlebars は Javascript のテンプレートエンジンで、記述がシンプルで管理しやすいのが特徴です。
今回はよくあるスタッフ紹介のブロックを作成していきます。
完成すると下記のようになります。
では、最初に大枠のブロック（スタッフ紹介）から作成していきます。
2.Repeater ブロックの作成
下記の内容でブロックを追加します。
- Title: スタッフ紹介
- Slug: block-staff
- Icon: 人のマーク
- Category: 埋め込み
最初に大枠のブロックを登録したので、次はそのブロックで表示させる中身を登録します。
content の＋ボタン(Add Control)をクリックして、Repeaterブロックを設定していきます。
下記の内容でブロックを設定します。
- Title: スタッフ紹介
- Slug: staff-list
- Type: Repeater
- Row Label: スタッフ
- Minimum Rows: 「1」
- Maximum Rows: 「10」
Maximum Rows 最大値は 10 にしましたが、必要に応じて変更してください。
これで Repeater ブロックの作成は完了です。
次に Repeater ブロックに子ブロックを作成していきます。
3.子ブロックの作成
スタッフ紹介の下の「Show Child Controls」をクリックし、子ブロックを追加していきます。
最初に「名前」を下記のように設定します。
- Label: 名前
- Name: staff-name
- Type: Text
続けて「写真」の設定を行います。
- Label: 写真
- Name: staff-image
- Type: Image
最後に「詳細」の設定を行います。
- Label: 詳細
- Name: staff-detail
- Type: Classic Editor(WYSIWYG)
Type を Classic Editor(WYSIWYG)にし、いろいろ入力できるようにしています。
これで子ブロックの作成は完了です。
ブロックは下記のようなカタチになっています。
4.ブロックを出力する設定
入力された内容を記事に出力するには、code の欄に入力します。
code の作成には下記の 3 種類から選べます。
- HTML + Handlebars
- PHP
- Theme Template
通常は「HTML+Handlebars」か「PHP」を利用します。
次に、今回のブロックを「HTML+Handlebars」と「PHP」の 2 つの方法で記載してみました。
HTML + Handlebars の場合
Code の Output Method で「HTML + Handlebars」を選択し、 Frontend フィールドに下記のコード入力します。
Lazy Blocks の記述方法はLazy Blocks のマニュアルをご覧ください。php と Handlebars 両方の記載が掲載されています。
今回参考にしたのは下記のページです。
- Lazy Blocks(テキストの出力)
- Lazy Blocks(画像の出力)
- Lazy Blocks(Repeater の出力)
- Lazy Blocks(Classic Editor(WYSIWYG)の出力)
PHPの場合
Code の Output Method で「PHP」を選択し、Frontend フィールドに下記のコード入力します。
これでブロックの作成は完了です。 最後に画面右上の公開ボタンを押してください。
Lazy Blocks の一覧を見ると、「スタッフ紹介」が登録されています。
5.ページでブロックを利用する
スタッフ紹介のページを作成し、ブロックを追加します。 ブロックの中でスタッフ紹介を選択してください。
下記のブロックが追加されています。
ブロックの入力画面はこのようになるので、入力していきます。
表示画面で確認すると、下記のように表示されます。
6.まとめ
Lazy Blocks を使うことで手軽にブロックを作成できますが、Repeater ブロックを使うことで Lazy Blocks で出来る範囲が大きく広がります。いろんな形に活用できそうです。これでようやく ACF を使わなくて済みそうですね。