2018 年リリース予定の WordPress v5.0 でコアに取り込まれる「Gutenberg」。
「プラグインでこの機能を有効化したら編集画面が真っ白になっている」というサイトがあったのでトラブルシューティングをしました。

状況

確認したところ以下のような状況で編集ができません。

Gutenberg を有効化したら編集画面が真っ白になっている。
カスタム HTML ウィジェットのテキストエリアが表示されない。

調査

概ね察しが付いたのですが念のため調査を行い、以下を確認しました。

標準テーマでは編集できる。
DevTools で確認すると JavaScript エラーが出ている。

既にリリースから日がたっているウィジェットを調べて裏付けをとります。

wp.mediaWidgets.init(); というエラーが表示されていますので、これを手がかりに調査します。

Fixed it: remove “defer parsing of javascript” functions in functions.php

Topic: Cannot edit widgets after updating to 4.9 | WordPress.org

下記にも同じような質問がありました。

javascript - Wordpress 4.8 - ReferenceError: Can't find variable: wp - Stack Overflow

いずれも JavaScript を非同期で動かすために async や defer 属性を付与していることが原因とされています。

また [Health Check & Troubleshooting] (https://ja.wordpress.org/plugins/health-check/) を利用して調査した結果、プラグインは影響していないことが確認できました。

つまりテーマの functions.php 等の中で async や defer 属性を JavaScript に付与している処理があり、これが WordPress の機能とぶつかっている事が推測できます。

対処

問題の起きているテーマの functions.php から読み込まれているファイルを調査し、以下のような記述を見つけました。

script_loader_tag をフックして async 属性を付与しているようです。

add_filter( 'script_loader_tag', 'replace_script_tag' );
function replace_script_tag( $tag ) {
	return str_replace( "type='text/javascript'", 'async', $tag );
}

ここが該当箇所ですので add_filter 行をコメントアウトするか、下記のように管理画面を対象から除外します。

add_filter( 'script_loader_tag', 'replace_script_tag' );
function replace_script_tag( $tag ) {
    if ( ! is_admin() ) {
        return str_replace("type='text/javascript'", 'async', $tag);
    }

    return $tag;
}

以上でエラーは解消されました。