ムーバブルタイプ（以下MT）のバージョン7から使えるようになったブロックエディタ。その「カスタムスクリプト」という機能を使ってみました。
# カスタムブロックの作成
まず以下のようなFAQをつくるカスタムブロックを作成することにしました。
https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/47/0001.png
ブロック内の各ブロックの詳細は以下で。また「プレビューを表示する」にチェックしておいてください。
###### ■テキストブロック
ラベル：質問
説明：FAQの質問を記入してください。
クラス名：faq_q
###### ■テキストブロック
ラベル：答え
説明：FAQの答えを記入してください。
クラス名：faq_a
###### ■画像ブロック
ラベル：画像
説明：FAQの画像を選択してください。
クラス名：faq_img
このカスタムブロックを記事にアタッチして更新すると、だいたい以下のようなHTMLが生成されます（実際はこの他にコメントや属性がゴチャゴチャ付いています）。ここでは深く触れませんが、ブロックエディタのプレビューは**＜iFrame＞**で読み出されることを覚えておいてください。
###### ■ブロックエディタ
###### ■更新ページ
地球は丸いのですか？
ハイ地球は球体です。
# カスタムスクリプトをつかってみる
上記の出力されたHTMLでは、例えば下記の画像のような横２カラムのレイアウトにするのが若干やっかいです。できればHTMLを、もっとスッキリした構造にしたいものです。
###### ■目標レイアウト
https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/47/0002.png
###### ■目標HTML
-
Q
地球は丸いのですか？
A
ハイ球体です。
###### ■カスタムスクリプト
そんな時に使うのが「カスタムスクリプト」です。
カスタムブロックのカスタムスクリプトを下記のJSにして、記事に新たにアタッチしてみてください。その時、更新ページには下記**「FAQのCSS」**を追記しておく必要があります。更新すると先の目標画像と同じ様に表示されているはずです。
###### ■FAQのCSS
.FAQ{ display: flex; font-size: 24px; }
.FAQ dt{ width: 200px; padding:0; margin: 0; }
.FAQ dt img{ width: 100%; }
.FAQ dd{ padding:0; margin: 0; background: #E7E7E8; }
.FAQ dd p{ padding:0; margin: 0; background: #E7E7E8; }
.FAQ span{ padding:0 20px 0 20px; }
.FAQ em{
display:inline-block;
width: 100px;
height: 100px;
line-height: 90px;
color: #fff;
font-size: 48px;
text-align: center;
}
.FAQ .faq_q em{ background: blue; }
.FAQ .faq_a em{ background: red; }
# カスタムスクリプトの説明
###### ■カスタムスクリプトのJSの基本構文
とりあえず「こういうものだ」と考えていただいて、問題ないと思います。
document.addEventListener("DOMContentLoaded", () => {
if (document.body.dataset.hasCompiledHtml){ return; }
// ココに処理を書く
});
###### ■各ブロックの入力値を取得
ブロックエディタでユーザーが設定した入力値をクラスと同じ名前の変数に格納しています。クラス名は各ブロックに登録したものです。
const faq_q = document.querySelector('.faq_q').textContent;
const faq_a = document.querySelector('.faq_a').textContent;
const faq_img = document.querySelector('.faq_img img').getAttribute('src');
MTの管理画面なので当然jQueryはつかえません。jQueryに慣れている人にとっては、そこが若干やっかいだと思うので、jQueryで書いた場合のコードも書いておきます。（再度書いておきますが、これは動きません）
var faq_q = $('.faq_q').text;
var faq_a = $('.faq_a').text;
var faq_img = $('.faq_img img').attr('src');
###### ■テンプレート
ES6では javaScript でもヒアドキュメントが使えます。**「`」**で囲まれたテキストは改行を入れることができます。また**「${変数}」**を含めることで変数の値を代入することができるので、ちょっとしたテンプレートのように扱えます。１行ごとに「+」で統合していた頃を考えると夢のようです。
const output = `
-
Q
${faq_q}
${faq_a}
`;
###### ■再レンダリング
MTBlockEditorSetCompiledHtml(output, true);
# ブロックエディタのプレビューを公開ページと同等にする
更新ページはこうなのに、
https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/47/0002.png
ブロックエディタのプレビューはこうです。
https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/47/0004.png
あまりにも違います。できればブロックエディタのプレビューも、まったく同じでないにしろ、ある程度同じ印象を得られるものでありたい。ならば、またカスタムブロックの編集に戻ってください。
カスタムスクリプトに書けるのは**＜script＞**だけではありません。公開ページに追記した**「FAQのCSS」**をそのまま、カスタムスクリプトの**＜style＞**として追記してしまいます。
###### ■カスタムスクリプト
ブロックエディタのプレビューでも更新ページと同じ様に表示されました。
先に話してある通り、ブロックエディタのプレビューは**iFrame**で読み出されるので、カスタムブロックのCSSが親ページに影響を与えることはありません。
https://www.chaordic.co.jp/memorandum/user/chaordicdesign/img/47/0003.png
# 最後に
ワードプレスのブロックエディタにはいまだ慣れないですが、同じようなものだろうと期待せずにさわってみたMTのブロックエディタは、ワードプレスのそれとはまったく違い、とても使いやすく高機能だと感じました。特にここで紹介したカスタムスクリプトは、他のフレームワークのコンポーネントを彷彿させるもので、使い方の幅はとても広いと思います。
