MTブロックエディタでカスタムスクリプトを使用する

以前にMTブロックエディタでカスタムブロックを作成する記事を投稿しましたが、今回はカスタムブロックを使用する際に実行できるカスタムスクリプトについて試してみます。

設定方法

以前のカスタムブロックを作成する記事で、以下のようなHTML構造のカスタムブロックを作成しました。

<div class="custom02">
  <div class="custom02-card">
    <h4 class="custom02-card-ttl">タイトル</h4>
    <div class="custom02-card-img">
      <img>
    </div>
    <div class="custom02-card-categories">
      <p class="custom02-card-category">カテゴリA</p>
      <p class="custom02-card-category">カテゴリB</p>
      ...
    </div>
    <div class="custom02-card-tags">
      <p class="custom02-card-tag">タグA</p>
      <p class="custom02-card-tag">タグB</p>
      ...
    </div>
    <p class="custom02-card-body">本文</p>
  </div>
  ...
</div>

実際に作成したカスタムブロックで出力されたHTMLは以下の通りで、概ね問題ない形になっていますが、.custom02-card-imgがpタグになっているなど一部異なる点があります。

<div class='custom02'>
<div class='custom02-card'>
<h4 class="custom02-card-ttl">タイトルA</h4>
<p class="custom02-card-img"><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p>
<div class='custom02-card-categories'>
<p class="custom02-card-category">カテゴリA</p>
<p class="custom02-card-category">カテゴリB</p>
</div>
<div class='custom02-card-tags'>
<p class="custom02-card-tag">タグA</p>
<p class="custom02-card-tag">タグB</p>
</div>
<p class="custom02-card-body">本文A<br/>サンプルサンプル</p>
</div>
<div class='custom02-card'>
<h4 class="custom02-card-ttl">タイトルB</h4>
<p class="custom02-card-img"><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"/></p>
<div class='custom02-card-categories'>
<p class="custom02-card-category">カテゴリB</p>
<p class="custom02-card-category">カテゴリC</p>
</div>
<div class='custom02-card-tags'>
<p class="custom02-card-tag">タグC</p>
<p class="custom02-card-tag">タグD</p>
</div>
<p class="custom02-card-body">本文B<br/>テキスト</p>
</div>
</div>

こういった場合の調整に便利なのがカスタムスクリプトで、カスタムブロックを使用することでカスタムブロックの内容を編集し終わった後(プレビューのiframeが読み込まれた際)に実行されるようです。

以前に作成した「カスタム02」のカスタムブロック(カスタムスクリプトを追加したいカスタムブロック)の編集画面を開いて、カスタムスクリプトの項目に下記を追記します。

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

  // 画像のラッパー要素変更
  const imgWraps = document.querySelectorAll('p.custom02-card-img');
  imgWraps.forEach((imgWrap) => {
    // ラッパー要素のdivを生成
    const newImgWrap = document.createElement('div');
    newImgWrap.className = imgWrap.className;
    newImgWrap.innerHTML = imgWrap.innerHTML;
    // 既存の要素を置き換え
    imgWrap.parentNode.replaceChild(newImgWrap, imgWrap);
  });
  const card = document.querySelector('.custom02').innerHTML;
  MTBlockEditorSetCompiledHtml(`<div class="custom02">${card}</div>`);
});
</script>

MTBlockEditorSetCompiledHtml()によって、出力されるHTMLを指定できます。

記事の投稿を試してみると、画像のラッパー要素をpタグからdivタグに変更できました。

<div class="custom02">
<div class="custom02-card">
<h4 class="custom02-card-ttl">タイトルA</h4>
<div class="custom02-card-img"><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"></div>
<div class="custom02-card-categories">
<p class="custom02-card-category">カテゴリA</p>
<p class="custom02-card-category">カテゴリB</p>
</div>
<div class="custom02-card-tags">
<p class="custom02-card-tag">タグA</p>
<p class="custom02-card-tag">タグB</p>
</div>
<p class="custom02-card-body">本文A<br>サンプルサンプル</p>
</div>
<div class="custom02-card">
<h4 class="custom02-card-ttl">タイトルB</h4>
<div class="custom02-card-img"><img src="https://XXXXXXXX/XXX/test.jpg" alt="" width="800" height="534" class="asset asset-image" style="max-width:100%;height:auto;display:block"></div>
<div class="custom02-card-categories">
<p class="custom02-card-category">カテゴリB</p>
<p class="custom02-card-category">カテゴリC</p>
</div>
<div class="custom02-card-tags">
<p class="custom02-card-tag">タグC</p>
<p class="custom02-card-tag">タグD</p>
</div>
<p class="custom02-card-body">本文B<br>テキスト</p>
</div>
</div>

今回はscriptタグの追加をしていますが、styleタグを追加して編集画面での表示設定なども行えるようです。