MTブロックエディタで複数の入力項目があるブロックを作る方法（特殊な見出し）
複数のブロックを使うカスタマイズ
MTブロックエディタで入力項目が複数ある場合にブロックを判別する方法を考えました。 基本機能では同じ種類のブロックが混在する場合に判別する方法がないからです。（2021年4月時点）
例えば、見出しブロックの中にサイズ（ドロップダウン）、カラー（ドロップダウン）、タイトル（テキスト）とある場合に同じブロックタイプのドロップダウンを個別に判定する機能がありません。（あったら教えて欲しい）
サンプルテンプレート
準備
- MTブロックエディタをインストールしてください。
- 左メニューのMTブロックエディタからカスタムブロックを選択し、新規作成を選択します。
- カスタムブロックの作成ページにブロック名を見出し、識別子をsampleとし、ブロックを追加のリンクから下記のブロックを登録します。
- ドロップダウンメニューを選択しラベルをサイズ、クラス名をsize、ブロック要素をP、オプションをH1,H2とします。
- ドロップダウンメニューを選択しラベルをカラー、クラス名をcolor、ブロック要素をP、オプションを黒,赤とします。
- テキストを選択しラベルをタイトル、クラス名をtext、ブロック要素をPとします。
- 最後にブロックの追加と削除を許可するのチェックボックスを外し、保存ボタンを押下してください。
テンプレート
<mt:BlockEditorBlocks tag="ContentFieldValue">
<mt:If name="type" eq="custom-sample">
<mt:ignore>見出し</mt:ignore>
<mt:BlockEditorBlocks>
<mt:ignore>ブロック要素を有効にしクラス名を指定する</mt:ignore>
<mt:SetVarBlock name="field_regex">/<.* class="(.*?)">(.*)<\/.*>/mg</mt:SetVarBlock>
<mt:SetVarBlock name="field_classname"><mt:var name="__value__" regex_replace="$field_regex","$1"></mt:SetVarBlock>
<mt:SetVarBlock name="field_contents"><mt:var name="__value__" regex_replace="$field_regex","$2"></mt:SetVarBlock>
<mt:ignore>クラス名からブロックを判別し個別の設定を定義する</mt:ignore>
<mt:if name="field_classname" eq="size">
<mt:ignore>ドロップダウンメニュー：サイズ</mt:ignore>
<mt:setvars>
<mt:if name="field_contents" eq="H1">
is_classname=classname-main
<mt:elseif name="field_contents" eq="h2">
is_classname=classname-sub
</mt:if>
</mt:setvars>
<mt:SetVarBlock name="view_class"><mt:var name="is_classname" cat=" "></mt:SetVarBlock>
<mt:elseif name="field_classname" eq="color">
<mt:ignore>ドロップダウンメニュー：カラー</mt:ignore>
<mt:setvars>
<mt:if name="field_contents" eq="黒">
is_classname=classname-black
<mt:elseif name="field_contents" eq="赤">
is_classname=classname-red
</mt:if>
</mt:setvars>
<mt:SetVarBlock name="view_class" append="1"><mt:var name="is_classname"></mt:SetVarBlock>
<mt:elseif name="field_classname" eq="text">
<mt:ignore>テキスト：タイトル</mt:ignore>
<mt:SetVarBlock name="view_contents"><mt:var name="field_contents"></mt:SetVarBlock>
</mt:if>
</mt:BlockEditorBlocks>
<mt:ignore>ブロックから出力されるHTMLを定義する</mt:ignore>
<mt:if name="view_contents">
<p class="<mt:var name="view_class">"><mt:var name="view_contents"></p>
</mt:if>
</mt:If>
</mt:BlockEditorBlocks>
解説
MTブロックエディタからは下記のようにHTMLが出力されます。
<p class="size">H1</p>
このHTMLを正規表現で分解し、htmlのclassをfield_classname に、htmlタグの中身をfield_contentsに格納します。
field_classnameはブロックの作成で指定したクラス名、field_contentsは入力した値が設定されます。
<mt:ignore>ブロック要素を有効にしクラス名を指定する</mt:ignore>
<mt:SetVarBlock name="field_regex">/<.* class="(.*?)">(.*)<\/.*>/mg</mt:SetVarBlock>
<mt:SetVarBlock name="field_classname"><mt:var name="__value__" regex_replace="$field_regex","$1"></mt:SetVarBlock>
<mt:SetVarBlock name="field_contents"><mt:var name="__value__" regex_replace="$field_regex","$2"></mt:SetVarBlock>
field_classnameからどのブロックの処理かを判別し、field_contentsの値からどのような処理を行うか定義しています。
この場合はH1が指定されている場合に、CSSで定義したH1レイアウト用のクラスが設定されます。
<mt:ignore>クラス名からブロックを判別し個別の設定を定義する</mt:ignore>
<mt:if name="field_classname" eq="size">
<mt:ignore>ドロップダウンメニュー：サイズ</mt:ignore>
<mt:setvars>
<mt:if name="field_contents" eq="H1">
is_classname=classname-main
<mt:elseif name="field_contents" eq="h2">
is_classname=classname-sub
</mt:if>
</mt:setvars>
省略
</mt:if>
こちらはタイトルの場合の処理です。
<mt:elseif name="field_classname" eq="text">
<mt:ignore>テキスト：タイトル</mt:ignore>
<mt:SetVarBlock name="view_contents"><mt:var name="field_contents"></mt:SetVarBlock>
</mt:if>
最後にブロックエディタのHTMLとして出力したい内容を定義します。
<mt:ignore>ブロックから出力されるHTMLを定義する</mt:ignore>
<mt:if name="view_contents">
<p class="<mt:var name="view_class">"><mt:var name="view_contents"></p>
</mt:if>
あとがき
今回]は同じブロック要素が複数ある場合に判別する方法についてでした。
サンプルのようなシンプルな見出しをブロックにする場合は、テキストブロック（リッチテキスト）を使用したほうが良いです。
MTブロックエディタは新しいブロックの追加や、更新（例えばドロップダウンメニューに選択肢を追加）した場合に、既にブロックを利用して更新したコンテンツに追加した要素が反映されません。
新しい要素を使う場合はブロックを新しく追加し内容を差し替える必要があります。
今回のサンプルのような仕様で見出しを作る場合は、複雑なHTML要素を持つ場合や、複数のテキストフィールドをセットで入力されるものに限定したほうが良いと思います。
もしくはこちらの記事のようにブロック要素に変動のないものです。