MTブロックエディタでボタンのカスタムブロックを作成する

以前にMTブロックエディタでカスタムブロックを作成する記事を投稿しましたが、今回はボタンのカスタムブロックを作成する例で試してみます。

設定方法

今回作成想定のボタンは、以下のようなコンポーネントのボタンになります。

<a class="c-btn" href="#" >ボタン</a>

カスタムブロックを追加するサイト内で、MTブロックエディタ > カスタムブロック を選択します。
カスタムブロックを新規作成して、各項目を以下のように設定します。

• 名前：ボタン
• 識別子：button
• ブロック
  • テキスト
    • ラベル：リンク
    • クラス名：button-link
    • ブロック要素：p
  • テキスト
    • ラベル：テキスト
    • クラス名：button-text
    • ブロック要素：p
• カスタムスクリプト：未設定
• コンテナ要素で包む：チェックを外す
• ブロックの追加と削除：チェックを外す
• プレビューの表示：チェック

本文入力画面では以下の表示になります。

現時点で項目を入力すると、以下のような出力になります。

<p class="button-link">https://www.google.co.jp/</p>
<p class="button-text">Google</p>

先ほど未設定にしたカスタムスクリプトを使って、ボタンを作成します。
カスタムスクリプトを以下の内容にします。

<script>
document.addEventListener('DOMContentLoaded', () => {
  if (document.body.dataset.hasCompiledHtml) return;
 
  const link = document.querySelector('.button-link').innerText;
  const text = document.querySelector('.button-text').innerText;
  MTBlockEditorSetCompiledHtml(`<a class="c-btn" href="${link}">${text}</a>`);
});
</script>

入力したリンクとテキストを5〜6行目で取得して、7行目でボタンの要素を生成しています。
これで入力を試してみると、以下のような出力になりました。

<a class="c-btn" href="https://www.google.co.jp/">Google</a>

機能追加

先ほどのボタンに追加で、別ウィンドウで開く(target=”_blank”)設定と、ボタンのサイズを選択できるようにしてみます。
ブロックの項目に下記を追加します。

• ブロック
  • ドロップダウン
    • ラベル：リンクの開き方
    • クラス名：button-target
    • ブロック要素：p
    • オプション
      • 同じウィンドウ
      • 新規ウィンドウ
    • 規定値：同じウィンドウ
  • ドロップダウン
    • ラベル：サイズ
    • クラス名：button-size
    • ブロック要素：p
    • オプション
      • 小
      • 中
      • 大
    • 規定値：中

カスタムスクリプトを以下のように変更します。

<script>
document.addEventListener('DOMContentLoaded', () => {
  if (document.body.dataset.hasCompiledHtml) return;
 
  const link = document.querySelector('.button-link').innerText;
  const text = document.querySelector('.button-text').innerText;
  const targetData = document.querySelector('.button-target').innerText;
  const sizeData = document.querySelector('.button-size').innerText;

  let target = '';
  switch(targetData) {
    case '新規ウィンドウ':
      target = 'target="_blank"'
      break;
    case '同じウィンドウ':
      target = ''
      break;
    default:
      target = ''
      break;
  }

  let size = '';
  switch(sizeData) {
    case '小':
      size = '--sm'
      break;
    case '中':
      size = '--md'
      break;
    case '大':
      size = '--lg'
      break;
    default:
      size = '--md'
      break;
  }

  MTBlockEditorSetCompiledHtml(`<a class="c-btn${size}" href="${link}" ${target}>${text}</a>`);
});
</script>

入力を試してみると、以下のように別ウィンドウやサイズの設定が追加できました。

<a class="c-btn--md" href="https://www.google.co.jp/" >Google</a>
<a class="c-btn--lg" href="https://www.google.co.jp/" target="_blank">Google 大 新規ウィンドウ</a>