⚠️
WordPressのブロックエディタが左寄せになってしまったときの話

2025/08/29に公開
 はじめに最近新しく作ったサイトの構築時に、WordPress のブロックエディタで「タイトルやブロックがすべて左寄せになってしまう」という問題に遭遇しました。
なぜか左寄せになっている。本来なら中央寄せされて見やすくなっているはずです。
プラグインを全て無効化しても改善せず、WordPress を再インストールしても直らなかったため、原因究明に少し時間がかかりました。
この情報に関するページこそ検索でヒットするのですが、解決方法を解説してくれている記事がまるでなく、原因になりえそうなことを片っ端からChatGPTに問いかけてようやく解決したので共有します。

 症状投稿編集画面（ブロックエディタ）で、タイトルや段落ブロックがすべて左に寄る
本来は中央寄せになるはずのエディタ表示が「フル幅扱い」になってしまう
応急処置として、次のような CSS をあてると一時的には中央寄せにできました。
.editor-styles-wrapper.block-editor-writing-flow > * > * {
  margin-left: auto;
  margin-right: auto;
}
しかしこれは根本解決ではなく、いつレイアウトが崩壊するかわかりませんし、CSS を追加したことを忘れてしまいそうです。やはり根本的なところを解決すべきでしょう。

 原因の特定結論から言うと、theme.json を新規導入したことが原因でした。
theme.json を配置すると、WordPress は「テーマが提供するグローバルスタイル」に基づいてブロックエディタを描画します。その際、
contentSize
wideSize
といった レイアウトの幅情報が未指定だと、ブロックが「フル幅扱い」になってしまい、結果的にすべて左寄せのように見える状態になっていました。
私が最初に導入した theme.json は以下の内容で、レイアウト設定が抜けていました。
{
  "version": 2,
  "settings": {
    "blocks": {
      "core/image": {
        "lightbox": {
          "enabled": true,
          "allowEditing": true
        }
      }
    }
  }
}
↑ について簡単に解説すると、挿入した画像ブロックにデフォルトでLightboxを適用する設定です。

 解決方法theme.json に layout を追記することで、ブロックエディタの中央寄せが復活しました。
{
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "650px",
      "wideSize": "1200px"
    },
    "blocks": {
      "core/image": {
        "lightbox": {
          "enabled": true,
          "allowEditing": true
        }
      }
    }
  }
}
これで以下のように動作が戻ります。
通常ブロック → 最大幅 650px で中央寄せ
ワイド幅 → 最大幅 1200px
全幅 → 画面いっぱい

 theme.json 導入時の注意点theme.json を置くだけで、WordPress はテーマのスタイルを基準にエディタを描画する
layout（contentSize / wideSize）を必ず指定すること
指定しないと、ブロックがフル幅扱いになり「すべて左寄せ」に見えてしまう
特に既存テーマに theme.json を追加する場合は、この点に注意してください。

 まとめWordPress のブロックエディタが突然左寄せになる場合、theme.json の導入・変更が原因かもしれない

contentSize と wideSize を設定すれば解決できる
theme.json 導入時には「レイアウト設定が必須」と心得ておくこと
同じような症状で悩んでいる方の参考になれば幸いです。
はじめに

症状

原因の特定

解決方法

theme.json 導入時の注意点

まとめ

Discussion
