Lazy Blocks | Repeaterブロックの使い方をFAQリストを作りながら解説

こんにちは。
Web制作者のhikaruです。

先日、Lazy Blocksのリピータ機能を使用したところ、
かなり使えそうだと感じたので、紹介しようと思います。

ちなみにここでは、Repeaterブロックを使った簡単なFAQリストを
作成しながら、使い方を説明していきます。

Repeaterブロック作成

新規ブロックを作成します。

• Title: 「よくある質問」
• Slug: 「block-faq」
• Icon: 「はてなマーク」
• Category: 「フォーマット」

Add Controlボタンを選択して、Repeaterブロックの設定をします。

• Label: 「よくある質問」
• Name: 「faq-list」
• Type: 「Repeater」
• Row Label: 「よくある質問{{#}}」
• Minimum Rows: 「1」
• Maximum Rows: 「10」

見出しブロック作成

Show Child Controlsを選択して子ブロックを表示します。

Add Child Control を選択して、見出しブロックの設定をします。

• Label: 「見出し」
• Name: 「faq-title」
• Type: 「Text」

本文ブロック作成

Add Child Control を選択して、本文ブロックの設定をします。

• Label: 「本文」
• Name: 「faq-body」
• Type: 「Classic Editor」

Code作成

次のコードをFrontendフィールドに入力します。

<dl class="faq-list">
  <?php foreach ( $attributes [ 'faq-list' ] as $inner ) : ?>
  <div class="faq-list__inner">
    <dt class="faq-list__head faq-list__js-btn">
      <?php echo $inner [ 'faq-title' ]; ?>
    </dt>
    <dd class="faq-list__body faq-list__body-js">
      <?php echo $inner [ 'faq-body' ]; ?>
    </dd>
  </div>  
  <?php endforeach;  ?>
</dl>

Output Methodで、PHPを選択。

公開する、を選択します。

エディタで表示を確認をします

エディタ画面で、ブロックの追加 > フォーマットを選択。

すると、よくある質問ブロックが存在するはずです。

どんな状況でRepeaterブロックを使うの？

次のようなコードがあります。

<dl>
  <dt>タイトル</dt>
  <dd>本文</dd>
　<dt>タイトル</dt>
  <dd>本文</dd>
</dl>

dtとddのセットですが、
コンテンツによって増減する可能性があるとします。

そういったときに、ボタン一つでdtとddのセットを増減できる、
Repeaterブロックは力を発揮します。

今日はここまで。