WordPress 7.1で『最新の投稿』のグリッド表示が崩れた原因と対処法
WordPress 7.1へのアップデート後、「最新の投稿」ブロックをグリッド表示していたはずなのに、突然1カラムになってしまう現象を確認しました。
私が管理している70以上のWordPressサイトを確認したところ、同じ現象が複数のサイトで発生していました。
テーマや個別サイトだけの問題ではないと考え、原因を調べました。
結論からいうと、慌ててCSSを書き換える必要はありません。
WordPress 7.1へのアップデート後に突然1カラムに
今回の現象に気づいたのは、WordPress 7.1へアップデートしたサイトのトップページを確認していたときでした。
これまで「最新の投稿」は3カラムのグリッド表示になっていたのですが、アップデート後に確認すると、なぜか1カラムで縦に並んでいます。
最初は、テーマのCSSが何かの影響を受けたのかと思いました。
ところが、管理画面で確認すると「最新の投稿」の設定は以前と変わっていません。「グリッド表示」も有効になっています。
さらに、特定のブラウザだけで起きているわけでもありませんでした。
そこで、実際に出力されているHTMLとCSSを確認してみました。
WordPress 7.1で「最新の投稿」のレイアウト処理が変わった
調べてみると、WordPress 7.1では「最新の投稿」ブロックに、レイアウト関連の新しいサポートが追加されています。
WordPress公式の開発者向け情報でも、WordPress 7.1でLatest Postsブロックに「layout」と「block spacing」のサポートが追加されたことが案内されています。
つまり、今回の現象は単純に「CSSがおかしくなった」という話ではなく、WordPress 7.1で「最新の投稿」ブロックのレイアウト処理が変更されたことが関係しているようです。
実際、アップデート後のHTMLを確認すると、以前とは異なるレイアウト関連のクラスが付加されていました。
そして、ここからが少しややこしいところです。
新しく追加した「最新の投稿」は3カラムになる
原因を調べるため、自分のサイトで「最新の投稿」ブロックを新しく追加してみました。
すると、新しく追加した「最新の投稿」は、同じ「グリッド表示」であるにもかかわらず、正常に3カラムで表示されました。
さらに不思議なことに、新しいブロックを追加して保存すると、それまで1カラムになっていた既存の「最新の投稿」まで3カラムに戻りました。
「新しく追加したブロックだけが正常なのでは？」と思ったのですが、追加したブロックを削除しても、既存の「最新の投稿」は3カラムのままです。
そこで、今度は新しいブロックを追加せず、既存のページにほんの少しだけ変更を加えて保存してみました。
例えば本文の末尾にスペースを1文字入れ、すぐに削除してから保存します。
すると、それだけで既存の「最新の投稿」が3カラムに戻りました。
「保存」するだけではなく、本文を更新することがポイント
ここでさらに確認したところ、単純に保存ボタンを押すだけではレイアウトは変わりませんでした。
固定ページのタイトルを変更して元に戻し、保存しても変化はありません。
一方、本文中に何か変更を加えてから保存すると、3カラムに戻ります。
ウィジェットでも同じでした。
例えば「フッターウィジェット1」を更新しても、「フッターウィジェット3」に入っている「最新の投稿」には変化がありません。
ところが、「最新の投稿」が入っているフッターウィジェット3自体に何か変更を加えて保存すると、3カラムに戻ります。
このことから、少なくとも今回確認したケースでは、単純なCSSの問題というより、WordPress 7.1へのアップデート後、既存のブロックが、WordPress 7.1で追加された新しいレイアウト処理に対して、正常な表示状態になっていないケースがあるようです。
該当するブロックを含むコンテンツを再保存することで、正常な表示状態に戻ることが確認できました。
対処方法
今回確認できた対処方法は非常に簡単です。
「最新の投稿」が1カラムになってしまった場合は、まずその「最新の投稿」が含まれているページやウィジェットを編集します。
本文などに一時的にスペースを入れます。
変更前
WHAT’S NEW
変更後
WHAT’S NEW␠
その後、そのスペースを削除して元の状態に戻し、ページやウィジェットを保存します。
これで、私が確認したサイトでは「最新の投稿」が3カラムに戻りました。
サイトのデザインを変更する必要も、CSSを追加する必要もありません。
もちろん、すべての環境で同じ結果になることを保証するものではありませんが、少なくとも今回確認した複数のサイトではこの方法で復旧できています。
慌ててCSSを書き換えなくても大丈夫
今回、最初に原因を調べた際には、
.wp-block-latest-posts.is-grid:not(.is-layout-grid) {
flex-wrap: nowrap;
}といったCSSを追加すれば、とりあえず3カラムに戻せることも確認しました。
しかし、これはあくまで表示を強制的に戻すための応急処置です。
WordPress 7.1では「最新の投稿」ブロックそのもののレイアウト処理が変更されています。そのため、今回のようなケースでは、まず既存のブロックを7.1の環境で再保存することを試した方がよいでしょう。
特に、WordPress 7.1へアップデートした直後に突然「最新の投稿」が1カラムになったのであれば、「自分のサイトのCSSが壊れた」「テーマを修正しなければならない」と慌てる必要はありません。
まず該当する「最新の投稿」を含んだページやウィジェットを一度編集し、内容を変更して元に戻してから保存してみてください。