2026年5月20日

2026年5月20日

WordPressのブロックエディタがクラッシュする場合の解決方法

はじめに

投稿編集画面を開いたらブロックエディターが真っ白になる、「このエディタで問題が発生しました」と表示される、ブロックを追加しようとするとJavaScriptエラーが出る。ブロックエディターのクラッシュはJavaScriptエラーが原因であることが多く、ブラウザのコンソールを確認することが診断の第一歩です。

症状・原因

ブロックエディタークラッシュの主な原因:

  • プラグインのJS競合wp.blockswp.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エラー対処法

お気軽にご相談ください

お見積りへ お問い合わせへ