2026年6月17日

WordPressのブロックエディター（Gutenberg）が読み込まれない問題を解決する方法

エラー・白い画面

はじめに

WordPress 5.0以降のブロックエディター（Gutenberg）が読み込まれない・エラーが出る場合、プラグインのJavaScript競合・メモリ不足・REST APIへのアクセス障害が原因であることがほとんどです。

症状・原因

投稿編集画面を開くとグルグルが回り続けて編集できない
ブロックエディターが白い画面になる
「予期しないエラーが発生しました」とエラーブロックが表示される
プラグインを追加した後からエディターが壊れた

解決手順

ステップ1：JavaScriptエラーを確認する

ブラウザの開発者ツールでエラーを確認:
1. 投稿編集画面を開く
2. F12 キーを押して開発者ツールを開く
3. 「コンソール」タブを選択
4. 赤いエラーメッセージを確認
   → 例: "Cannot read property 'registerBlockType' of undefined"
   → 例: "Uncaught TypeError: wp.blocks is undefined"
   → 例: "Failed to load resource: the server responded with 404"
5. エラーのファイル名からどのプラグインが原因か特定

# REST API が正常に動作するか確認
curl https://example.com/wp-json/wp/v2/posts
# 401 Unauthorized または JSON が返れば正常
# 404 または HTML が返る場合は REST API に問題がある

# WP-CLI で REST API を確認
wp eval "echo rest_url();"

ステップ2：プラグイン競合を切り分ける

# 全プラグインを無効化してエディターが動くか確認
wp plugin deactivate --all

# ブラウザでエディターを確認（Ctrl+F5 でキャッシュクリア）
# 動く場合はプラグイン競合が原因

# プラグインを1つずつ有効化して原因を特定
wp plugin activate plugin-name
# エディターを確認 → 壊れたらそのプラグインが原因

# 問題のプラグインを除いて全プラグインを有効化
wp plugin activate --all
wp plugin deactivate problem-plugin

// functions.php: 特定のスクリプトがエディターと競合する場合
add_action('enqueue_block_editor_assets', function(): void {
    // 競合するスクリプトを除去
    wp_dequeue_script('conflicting-script-handle');
    wp_dequeue_style('conflicting-style-handle');
}, 100);

ステップ3：REST API の問題を解決する

# .htaccess の REST API ブロックを確認
grep -i "rest" /var/www/html/.htaccess

# Authorization ヘッダーの問題（Apache）
# .htaccess に追加

# .htaccess: REST API に必要なヘッダーを許可
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule .* - [e=HTTP_AUTHORIZATION:%1]
</IfModule>

// functions.php: REST API が無効化されている場合に再有効化
// ❌ 以下のコードが原因で REST API がブロックされることがある
// remove_filter('rest_authentication_errors', ...);

// REST API のアクセスを確認
add_filter('rest_authentication_errors', function($result) {
    if (!empty($result)) {
        return $result;
    }
    if (!is_user_logged_in()) {
        return new WP_Error('rest_not_logged_in', 'ログインが必要です', ['status' => 401]);
    }
    return $result;
});

ステップ4：PHP メモリとタイムアウトを増やす

// wp-config.php: エディターに必要なメモリを確保
define('WP_MEMORY_LIMIT', '256M');
define('WP_MAX_MEMORY_LIMIT', '512M');

# エディターが使用するメモリを確認
wp eval "
\$post = get_post(1);
\$before = memory_get_usage(true);
// ブロックのパース
parse_blocks(\$post->post_content);
\$after = memory_get_usage(true);
echo round((\$after - \$before) / 1024 / 1024, 2), 'MB for block parsing';
"

ステップ5：Classic Editor に切り替える

# Classic Editor プラグインをインストール・有効化
wp plugin install classic-editor --activate

# または functions.php でブロックエディターを無効化

// functions.php: ブロックエディターを無効化して旧エディターを使う
add_filter('use_block_editor_for_post', '__return_false');
add_filter('use_block_editor_for_post_type', '__return_false');

// 投稿タイプ別にエディターを切り替える
add_filter('use_block_editor_for_post_type', function(bool $use, string $post_type): bool {
    // product 投稿タイプはクラシックエディターを使う
    if ($post_type === 'product') {
        return false;
    }
    return $use;
}, 10, 2);

# Gutenberg プラグインを最新版に更新（コアと競合することがある）
wp plugin update gutenberg

# コアの WordPress を最新版に更新
wp core update
wp core update-db

注意事項

プラグインを全て無効化してもエディターが動かない場合は、テーマが原因の可能性があります。デフォルトテーマ（Twenty Twenty-Four等）に一時的に切り替えて確認してください
REST APIが403 Forbiddenを返す場合、セキュリティプラグイン（Wordfence等）やサーバーのWAFがブロックしている可能性があります。セキュリティプラグインの除外設定にWordPressの管理者IPを追加してください
ブロックエディターは多くのJavaScriptリソースを読み込むため、サーバーのレスポンスが遅いと読み込みタイムアウトすることがあります

まとめ

ブロックエディター読み込み不良の解決は①ブラウザのF12コンソールでJavaScriptエラーを確認しエラーファイルからプラグイン原因を特定、②wp plugin deactivate --all→1つずつ有効化でプラグイン競合を切り分け、③curl https://example.com/wp-json/wp/v2/postsでREST APIの疎通確認と.htaccessのAuthorizationヘッダー許可、④WP_MEMORY_LIMIT='256M'でメモリを確保、⑤緊急回避策としてClassic Editorプラグインまたはuse_block_editor_for_post=__return_falseでクラシックエディターに切り替えます。

Post Views: 5