はじめに
WordPress 6.9 へアップデート後、Gutenberg の「カラムブロック」が崩れるという現象に遭遇しました。しばらく応急処置で済ませていましたが、バックアップと見比べて、style.min.cssがない・・・
.wp-block-columnsにdisplay:flexが適用されていない。ということに気づき、色々調べたら問題を解消する「Load Combined Core Block Assets」というプラグインに出会ったという話です。
具体的には、
- 横並びのはずのカラムが縦に落ちる
- PC表示でも1カラム化する
- 特定ページだけで発生する
といった、見た目に大きな影響が出る症状です。
本記事では、
- 何が原因だったのか
- 応急処置として行った対応
- 根本的な解決方法
- 将来（WordPress 7.0）で再発する可能性
について整理します。
実際に起きた症状
発生したのは Gutenberg の「カラム（Columns）ブロック」 を使用している箇所でした。
症状の特徴
.wp-block-columnsがdisplay: block相当の挙動になる- flex が効かず、各カラムが縦並びになる
- テーマ側の CSS は変更していない
つまり、CSSが「当たらなくなった」ような状態でした。
応急処置として行った対応（CSS）
まず、以下のCSSを追加することで表示は復旧しました。
.wp-block-columns {
display: flex;
}この対応により、
- カラムは再び横並びになる
- 見た目上の崩れは解消
しました。
ただし、この方法は あくまで応急処置 です。
なぜ応急処置なのか？
- WordPress コアが本来読み込むべき CSS が読み込まれていない
- テーマ・プラグイン・最適化設定との競合が疑われる
つまり、根本原因を解決していない 状態です。
原因：ブロックCSSの読み込み最適化が影響
調査の結果、原因は
ブロックごとのCSS（Core Block Assets）が正しく読み込まれていなかったことでした。
WordPress 6.9 では、
- ブロックCSSの分割・最適化
- 読み込み制御の挙動調整
が内部的に進んでいます。
その影響で、
- キャッシュ系
- CSS結合・遅延読み込み系
- 最適化系
のプラグイン設定次第では、
必要なブロックCSSが読み込まれないケースが発生します。
根本的な解決策：Load Combined Core Block Assets
最終的に有効だった解決策は、以下です。
Load Combined Core Block Assets を有効化
これにより、
- GutenbergのコアブロックCSSがまとめて読み込まれる
.wp-block-columnsに対するdisplay: flexが正しく適用される- 追加CSSが不要になる
という、本来あるべき挙動に戻りました。
この設定が効いた理由
- ブロック単位のCSS分割による「読み漏れ」を防げる
- テーマ・最適化プラグインとの相性問題を回避できる
特に、制作会社が関わった やや古めのテーマ や独自CSSを多用しているサイト では有効です。
WordPress 7.0 で再発する可能性は？
結論から言うと、再発する可能性はあります。
理由は以下です。
- WordPress 7.0 ではブロックエディタの内部構造がさらに整理される予定
- Core Block Assets の読み込み方式が再調整される可能性
- 「CSSが読み込まれている前提」のテーマは影響を受けやすい
対策として今できること
- 応急処置のCSSに頼らない
- コアのCSS読み込み設定を正しく使う
- 「なぜこのCSSが必要なのか」を把握する
ことが重要です。
まとめ
WordPress 6.9 で起きたカラム崩れは、
- CSSの書き忘れ
- テーマのバグ
ではなく、
ブロックCSSの読み込み最適化と環境依存の問題
である可能性が高い事例でした。
ポイント整理
display:flexの手動指定は応急処置- 根本解決は Core Block Assets の読み込み制御
- 将来の WordPress 7.0 でも同様の問題が起きうる
アップデート後に「突然レイアウトが崩れた」場合、
まずはブロックCSSの読み込み状況を疑うことをおすすめします。
