2026年5月20日
2026年5月20日
WordPressのブロックエディタがクラッシュする場合の解決方法
はじめに
投稿編集画面を開いたらブロックエディターが真っ白になる、「このエディタで問題が発生しました」と表示される、ブロックを追加しようとするとJavaScriptエラーが出る。ブロックエディターのクラッシュはJavaScriptエラーが原因であることが多く、ブラウザのコンソールを確認することが診断の第一歩です。
症状・原因
ブロックエディタークラッシュの主な原因:
- プラグインのJS競合:
wp.blocksやwp.elementと競合するJavaScript - テーマのJSエラー:カスタムJSがブロックエディターの初期化を妨げている
- 古いブロックデータ:保存済みのブロックHTMLが現在のブロック定義と一致しない
- ブラウザの拡張機能:広告ブロッカーやスクリプトブロッカーが干渉
- メモリ不足:大量のブロックを含む記事でJSがメモリを消費しすぎる
解決手順
ステップ1:ブラウザのコンソールでエラーを確認する
1. F12 → コンソール タブ
2. 赤いエラーメッセージを確認
3. エラーが指しているファイル名・プラグイン名を特定
よくあるエラーパターン:
// プラグイン競合の例
TypeError: Cannot read properties of undefined (reading 'registerBlockType')
// 古いブロックデータの例
Block validation: Expected token of type `StartTag` with attribute `class`
of value `wp-block-paragraph`...
ステップ2:プラグインを順に無効化して特定する
# 全プラグインを無効化してブロックエディターが動くか確認
wp plugin deactivate --all
# 動いた場合は一つずつ有効化して原因を特定
wp plugin activate plugin-slug
管理画面からプラグイン → 「一括操作」→「無効化」でまとめて無効化できます。
ステップ3:テーマをデフォルトテーマに切り替える
# Twenty Twenty-Fourに切り替えてブロックエディターを確認
wp theme activate twentytwentyfour
テーマのJSが原因の場合はカスタムJSをブロックエディター用に修正します。
// functions.php — 管理画面ではテーマのJSを読み込まない
add_action('wp_enqueue_scripts', function() {
if (!is_admin()) {
wp_enqueue_script('my-theme-js', get_template_directory_uri() . '/js/main.js', [], '1.0', true);
}
});
ステップ4:古いブロックデータを修復する
「ブロックの回復」ダイアログが表示される場合:
1. 「ブロックの試行を回復」をクリック
2. うまくいかない場合は「クラシックブロックに変換」を選択
3. クラシックブロックで保存後、再度ブロックに変換
または記事をHTMLモードで確認:
# WP-CLIで記事の内容を確認
wp post get POST_ID --field=post_content
ステップ5:wp-config.phpでJSデバッグを有効化する
// wp-config.php — スクリプトの非minified版を使用
define('SCRIPT_DEBUG', true);
define('WP_DEBUG', true);
SCRIPT_DEBUGをtrueにするとminifiedでないJSが読み込まれ、エラーの特定がしやすくなります。
ステップ6:ブロックエディターのJSエラーを修正する
プラグインのJSがグローバル変数を汚染している場合:
// functions.php — ブロックエディター画面では不要なJSを除外
add_action('enqueue_block_editor_assets', function() {
// ブロックエディター専用のアセットを登録する場所
}, 999);
add_action('admin_enqueue_scripts', function($hook) {
// post.php と post-new.php 以外のページでのみ読み込む
if (!in_array($hook, ['post.php', 'post-new.php'])) {
wp_dequeue_script('conflicting-script');
}
});
ステップ7:Classic Editorに切り替える(最終手段)
どうしても解決できない場合はClassic Editorプラグインで旧エディターに戻せます。
wp plugin install classic-editor --activate
注意事項
- ブロックエディターのクラッシュはユーザーごとのブラウザ設定が原因の場合があります。別ブラウザ・シークレットモードで試してください。
SCRIPT_DEBUGはデバッグ後にfalseに戻してください。
まとめ
ブロックエディターのクラッシュはブラウザコンソールのJSエラーを確認し、プラグイン・テーマの切り分けを行うことで特定できます。古いブロックデータは「ブロックの回復」機能で修復し、解決しない場合はClassic Editorへの切り替えも選択肢です。関連記事:メタボックスが表示されない場合、WordPressのJSエラー対処法