WordPressのブロックエディターが真っ白・使えない時の対処法

投稿の編集画面を開くと真っ白。あるいは枠だけ出て中身が表示されない。 「エディターの読み込みに失敗しました」と出ることもある。

サイトの表示は正常。他の管理画面も使える。編集画面だけが開かない。

ブロックエディターは大量の JavaScript と REST API に依存しています。 どちらかが欠けると、画面は白いまま止まります。順に確認します。

前提: エディターが読むものの規模

実測した主なファイルのサイズです。

1 ファイルで 1.4MB あります。これが 1 つでも欠けると、 エディターは初期化に失敗して何も描画しません。

そして重要な点として、これらはログインしていなくても取得できます。

つまり 管理画面に入れなくても、外からアセットの生死を確認できます。

curl -s -o /dev/null -w '%{http_code}\n' \
  https://example.com/wp-includes/js/dist/block-editor.min.js

エディタのアセットを塞いだ状態です。

管理バーだけが残り、編集領域には何も描画されない

原因 1: セキュリティ設定でアセットが塞がれている

いちばん多い構成ミスです。「WordPress のセキュリティ強化」として wp-includes へのアクセスを拒否する設定が配られていますが、 範囲が広すぎるとエディターが死にます。

実測しました。.htaccess に wp-includes を丸ごと拒否する規則を入れた状態です。

サイトも管理画面も正常で、エディターのアセットだけが 403 です。

wp-includes 配下を制限する意図は「PHP ファイルを直接実行されないようにする」 ことですが、JS と CSS も同じディレクトリにあります。 制限するなら拡張子で絞ります。

# 悪い: ディレクトリごと塞ぐ(JS/CSS も死ぬ)
RewriteRule ^wp-includes/ - [F,L]

# 良い: PHP だけ塞ぐ
RewriteRule ^wp-includes/[^/]+\.php$ - [F,L]
RewriteRule ^wp-includes/theme-compat/ - [F,L]

nginx 側が無影響なのは .htaccess を読まないためです。 2 台構成で「片方のサーバーでだけエディターが開かない」場合は、 この非対称性を疑います。

セキュリティプラグインや WAF（ModSecurity）でも同じことが起きます。 .htaccess に何も無いのに 403 が返るなら、そちらです。

原因 2: REST API に到達できない

ブロックエディターは、記事の読み書きを REST API で行います。 アセットが読めても REST が死んでいると、枠は出るが中身が入らない、 あるいは「更新に失敗しました」になります。

curl -s -o /dev/null -D - https://example.com/wp-json/ | grep -iE '^HTTP|^content-type'

application/json 以外が返っていたら原因はこちらです。 詳しくは 「返答が正しい JSON レスポンスではありません」。

ログイン中でも curl で 401 が返るのは正常（nonce が無いため）なので、 そこで混乱しないようにします。

原因 3: JavaScript のエラーで初期化が止まる

アセットも REST も正常なら、プラグインやテーマが出した JS エラーで エディターの初期化が中断しています。

ブロックエディターは 1 つの JS エラーで全体が止まります。 コンソールの一番上のエラーを見ます。

エラーの出どころのファイル名が、そのまま原因のプラグインです。

原因 4: エディターが無効化されている

「真っ白」ではなくクラシックエディターの画面が出る場合は、 壊れているのではなく無効化されています。

• Classic Editor プラグインが有効
• テーマやプラグインが use_block_editor_for_post フィルタで無効化している
• 投稿タイプが show_in_rest に対応していない（カスタム投稿タイプで多い）

カスタム投稿タイプだけブロックエディターが使えないのは、 register_post_type に 'show_in_rest' => true が無いためです。 これは不具合ではなく設定です。

切り分けの順番

# 1. エディターのアセットが生きているか(ログイン不要)
for f in /wp-includes/js/dist/block-editor.min.js \
         /wp-includes/css/dist/block-editor/style.min.css \
         /wp-admin/load-scripts.php /wp-admin/load-styles.php; do
  printf '%s %s\n' "$(curl -s -o /dev/null -w '%{http_code}' "https://example.com$f")" "$f"
done

# 2. REST API が JSON を返すか
curl -s -o /dev/null -D - https://example.com/wp-json/ | grep -i content-type

応急処置

Classic Editor プラグインを入れると、REST API と大量の JS に依存せずに 編集できます。原因を直すまでの時間を稼げます。

ただし REST API はスマホアプリや外部連携でも使うので、 遮断が原因だった場合は放置すると別の場所で問題が出ます。

# .htaccess に(WordPress ブロックより前に)入れる
# RewriteRule ^wp-includes/ - [F,L]

curl -o /dev/null -w 'front %{http_code}\n' http://localhost:8082/
curl -o /dev/null -w 'asset %{http_code}\n' http://localhost:8082/wp-includes/js/dist/block-editor.min.js
# → front 200 / asset 403