MTブロックエディタでカスタムブロック(親ブロック)を作成する際、ブロックの項目ですでに作成したカスタムブロック(子ブロック)を使用することができます。この時、子ブロックに対して変更を行っても親ブロック内で使用しているブロックには変更が反映されないようだったので、備忘録としてメモしておきます。
設定内容
以前の記事で作成した、ボタンのカスタムブロックを例に試してみます。
このボタンをラップするカスタムブロックを作成してみます。
- 名前:ボタンラップ
- 識別子:button_wrap
- ブロック
- ボタン
- カスタムスクリプト:未設定
- コンテナ要素で包む:チェック
- クラス名:button-wrap
- ブロックの追加と削除:チェックを外す
- プレビューの表示:チェック
記事投稿画面でのボタンラップの表示は以下のようになります。
この状態でボタンラップを使ってみると、以下のように想定した形で出力されました。
<div class='button-wrap'> <a class="c-btn--sm" href="https://www.google.co.jp/" target="_blank">Google</a> </div>
次にボタンのカスタムブロックを変更してみます。
まずはブロックに入力フィールドを1つ追加します。
- ブロック
- テキスト
- ラベル:サブテキスト
- クラス名:button-subtext
- ブロック要素:p
- テキスト
カスタムスクリプトで上記追加したサブテキストの出力と、ボタンのclassをc-buttonに変更します。
<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 subtext = document.querySelector('.button-subtext')?.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-button${size}" href="${link}" ${target}>${text}-${subtext}</a>`); }); </script>
記事投稿画面を確認したところ、既に登録しているボタンのカスタムブロックでは「サブテキスト」を確認できませんでしたが、新しくボタンのカスタムブロックを追加した場合には「サブテキスト」のフィールドを確認できました。
ボタンラップのカスタムブロックの場合、既に登録しているブロックの場合も新しく追加したブロックの場合も「サブテキスト」のフィールドを確認できませんでした。
ただ、新しく登録したブロックの場合、カスタムスクリプトの変更については反映されているようでした。
以上の確認した範囲での結論ですが、カスタムブロック内で使用しているカスタムブロックを変更しても、基本的には他で使用しているカスタムブロックには反映されないようです。
コメントが承認されるまで時間がかかります。