こんにちは！エンジニアのjunです。
今回はシンプルな説明リストを例に、グループ化した要素を繰り返し入力できるカスタムブロックを作っていきます！

今回もすぐに試せるファイルをご用意しています。
ファイルをダウンロードして展開したのち、 dl_unit.json → dl.json の順に読み込んでください。

説明リストとは

説明リストは、 <dl>, <dt>, <dd> からなるHTML要素です。
定義リストとも呼ばれるかもしれません。
馴染みのない方は、用語集や2列のテーブルを思い浮かべて頂くとよいと思います。
「dt は ddである」というようにマークアップするイメージです。

<dl>: 説明リスト要素 - HTML: HyperText Markup Language | MDN

カスタムブロックの作成

早速カスタムブロックの作成していきましょう。
今回のポイント！
それは「カスタムブロックを2つ作成する」です！

ひとつは「説明リスト」ブロック。
そしてもうひとつが「説明リストユニット」ブロック。

前者は、全体を囲う <dl> のためのブロック。親ブロックと呼んでも良いかもしれません。
後者は、 <dt> と <dd> を1セットにしたブロック。親ブロックの中で繰り返して利用できる子ブロックです。

親ブロックの「追加可能なブロック」は、「説明リストユニット」だけ許可することをお勧めしています。
そうすることで思わぬスタイル崩れなどを防ぐことができると思います。
これで、「説明リストユニット」は必要な数だけ繰り返し入力可能になります。

カスタムスクリプトの作成

親子それぞれのカスタムスクリプトを登録します。
いずれも、タグを変更するだけのシンプルな内容です。

<script>
document.addEventListener('DOMContentLoaded', async () => {
  if ( document.body.dataset.hasCompiledHtml ) return

  MTBlockEditorSetCompiledHtml(`
    <dl>${document.body.innerHTML}</dl>
  `)
});
</script>

<script>
document.addEventListener('DOMContentLoaded', async () => {
  if ( document.body.dataset.hasCompiledHtml ) return

  const data = {
    dt: document.querySelector('.dt')?.textContent || '',
    dd: document.querySelector('.dd')?.textContent || '',
  }

  MTBlockEditorSetCompiledHtml(`
    <dt>${data.dt}</dt>
    <dd>${data.dd}</dd>
  `)
});
</script>

完成

最後に動作を確認しましょう。

今回はシンプルでプレーンな説明リストを例に、
親と子の2つのブロックに分けることで、セットで入力できる繰り返しフィールドを実現しました。
他にも応用の効く方法だと思うので、ぜひお試しください。