カスタムスクリプトをはじめてみる。

MTブロックエディタを1から作ってみたいと思います。
練習練習。

カスタムスクリプト

カスタムスクリプト内に、<style>や<script>を書くことができるので、
ブロックエディタ上でスタイルやDOMを出力状態にして表示することができます。

スタイルを指定する

<style>
p { color:#cc0000;}
</style>

JavaScriptの基本形

以下が基本形です。

<script>
document.addEventListener("DOMContentLoaded", async () => {
    if (document.body.dataset.hasCompiledHtml) {
        return;
    }
    // ここに処理したいスクリプトを。
});
</script>

DOM構築完了後に実行

addEventListener を DOMContentLoadedイベント（DOMツリーの構築が完了したとき）を取得。

// アロー
document.addEventListener("DOMContentLoaded", async () => {

// function
document.addEventListener('DOMContentLoaded', async function() {

DOM構築完了後に実行

「出力されるHTML」で表示された場合には「document.body.dataset.hasCompiledHtml」の値が真になる。

if (document.body.dataset.hasCompiledHtml) {
    return;
}