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

2024.12.07

プラグイン

以前にMTブロックエディタを使用する記事を投稿しましたが、今回はカスタムブロックを使ってブロックの追加を行ってみます。

使用方法

例として、1行テキストと画像のセットを登録できるカスタムブロックを作成してみます。
カスタムブロックを追加するサイト内で、MTブロックエディタ > カスタムブロックを選択します。

新規作成をクリックします。

各項目を入力していきます。
名前はカスタム01で、識別子はcustom01とします。

ブロックの項目では、以下のブロックと追加済みのカスタムブロックから選択できます。

テキストブロック
画像
ファイル
HTML
oEmbed
罫線
テーブル
マルチカラム
テキスト
テキスト(複数行)
ドロップダウン

例えば「テキスト」を選択すると、以下のような入力項目が表示されます。

以下の入力値としてみます。

下部にあるブロックを追加から、画像のブロックも追加してみます。
入力項目は以下になります。

以下のように入力しました。

カスタムスクリプトは今回は空にしておきます。
コンテナ要素で包むにはチェックを入れて、クラス名をcustom01にします。
ブロックの追加と削除はチェックを外しておきます。

これで一通りの設定ができたので、保存を行います。
Mtブロックエディタを実際に使用してみると、追加したブロックが表示されるのが確認できました。

ブロックを選択すると、テキストと画像を入力するブロックが表示されました。

入力を試してみると、以下のようなHTMLを出力できました。(改行位置など調整しています。)

<div class='custom01'>
<h3 class="custom01-text">テキストサンプル</h3>
<p class="custom01-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>

入れ子になったカスタムブロックの作成

次に少し複雑なブロックの作成を試してみます。
イメージは以下のような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">本文A</p>
  </div>
  ...
</div>

まずは繰り返しで使用する.custom02-card-tagを作成します。
名前はカスタム02のタグで、識別子はcustom02_tagとします。
ブロックはテキストを選択して、以下の内容で設定します。

コンテナ要素で包むのチェック、ブロックの追加と削除のチェックは外して保存します。

次に上記で作成したブロックを囲う、.custom02-card-tagsのブロックを作成します。
名前はカスタム02のタググループで、識別子はcustom02_tagsとします。
ブロックは上記で作成したカスタム02のタグを選択して、内容はそのままで使用します。

コンテナ要素で包むのチェックを付けて、クラス名をcustom02-card-tagsとします。
ブロックの追加と削除のチェックも付けて、ブロックの選択はカスタム02のタグのみとします。

これでこのブロック内で、カスタム02のタグのブロックのみ追加できるようになりました。
注意点として、これ以降に追加するカスタムブロックはチェックの入った状態でこの一覧に追加されるようなので、カスタムブロック追加時に適宜チェックの状態を確認・変更する必要があります。

この時点でカスタム02のタググループのブロックを使ってみると、以下のようにタグを追加できる形になっていることが確認できます。

HTMLは以下のように出力されました。

<div class='custom02-card-tags'>
<p class="custom02-card-tag">タグA</p>
<p class="custom02-card-tag">タグB</p>
</div>

次に.custom02-card-categoryを作成しますが、基本的な流れはタグの時と同じです。
名前はカスタム02のカテゴリで、識別子はcustom02_categoryとします。
ブロックはドロップダウンを選択して、以下の内容で設定します。

コンテナ要素で包むのチェック、ブロックの追加と削除のチェックは外して保存します。

次に上記で作成したブロックを囲う、.custom02-card-categoriesのブロックを作成します。
名前はカスタム02のカテゴリグループで、識別子はcustom02_categoriesとします。
ブロックは上記で作成したカスタム02のカテゴリを選択して、内容はそのままで使用します。

コンテナ要素で包むのチェックを付けて、クラス名をcustom02-card-categoriesとします。
ブロックの追加と削除のチェックも付けて、ブロックの選択はカスタム02のカテゴリのみとします。

これでカテゴリのブロックも作成できました。
カスタム02のタググループのブロックを使ってみると、以下のようになっています。

HTMLは以下のように出力されます。

<div class='custom02-card-categories'>
<p class="custom02-card-category">カテゴリA</p>
<p class="custom02-card-category">カテゴリB</p>
</div>

次に上記で作成したタグやカテゴリを使って、.custom02-cardを作成します。
名前はカスタム02のカードで、識別子はcustom02_cardとします。

次にブロックを順に追加していきます。
まずは.custom02-card-ttlで、テキストのブロックを追加して以下の内容にします。

次に.custom02-card-imgで、画像のブロックを追加して以下の内容にします。

次に作成済みのカスタム02のカテゴリグループ、カスタム02のタググループを追加します。
内容の変更はなしで、そのまま使用します。

最後に.custom02-card-bodyで、テキスト(複数行)のブロックを追加して以下の内容にします。

コンテナ要素で包むのチェックを付けて、クラス名をcustom02-cardとします。
ブロックの追加と削除のチェックは外します。

最後に.custom02を作成します。
名前はカスタム02で、識別子はcustom02とします。
ブロックはカスタム02のカードを選択して、内容は変更しないでそのまま使用します。
コンテナ要素で包むのチェックを付けて、クラス名をcustom02とします。
ブロックの追加と削除もチェックを付けて、カスタム02のカードのみ選択できるようにします。

これでカスタムブロックの作成ができました。
カスタム02のブロックを使ってみると、以下のように表示されます。

HTMLは以下のように出力され、概ね意図したような内容になりました。

<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>