ブロックエディタでリストタグ（li）を利用する場合は、基本的にはテキストブロック内の装飾ボタンで実現します。

ただ、テキストブロック内のリストタグ内に画像を挿入する、ということはできないため今回はそれを実現できるカスタムブロックを紹介します。

カスタムブロックのサンプル

今回のブロックは、追加したブロック1つ1つが li タグで囲まれる、といったシンプルなものになっています。

実際のカスタムブロックは以下から zip ファイルをダウンロードし、中身の .json ファイルをカスタムブロックの新規作成画面から読み込み利用してください。

カスタムブロックの読み込みに関しては以下のマニュアルをご覧ください。

カスタムブロックの読み込み / 書き出し - マニュアル | MovableType.net

カスタムスクリプトの内容は以下になっています。

<script>
document.addEventListener("DOMContentLoaded", () => {
  if (document.body.dataset.hasCompiledHtml) {
    return;
  }

  const list = document.createElement('ul');
  const container = document.body.firstElementChild;
  [...container.children].forEach((e) => {
    const li = document.createElement('li');
    li.appendChild(e);
    list.appendChild(li);
  });

  MTBlockEditorSetCompiledHtml(list.outerHTML);
});
</script>

使い方

リストというブロックが追加されたので、それを利用するとブロックを追加ボタンのみ表示されるので、テキストや画像など好きなボタンを利用します。

利用したブロックそれぞれが li タグで囲まれるようになっていて、このカスタムブロック全体は ul タグで囲まれています。

細かなサイト運用もできるカスタムブロックを是非ご活用ください。