はじめに
WordPress 7.0から導入された「ブロック非表示」機能は、ノーコードでレスポンシブ制御ができる非常に便利なアップデートです。
しかし、実際に運用してみると、WordPress標準の「カラム」ブロックが折り返されるタイミングと、この非表示機能が切り替わるタイミング、さらには利用しているテーマ独自のレイアウトブロックとの間で、画面幅の判定（ブレークポイント）に微妙なズレが生じることが分かりました。
このズレを放置すると、「タブレット表示なのに、カラムは縦並びになり、タブレット用ブロックも消えてしまう」といった意図しない表示崩れの原因になります。
この記事では、この方法について説明します。
WordPress 7.0の非表示機能と標準カラムの仕様差
WordPressのGutenbergエディターが出力するCSSを解析すると、出力する標準CSSを解析すると、一見同じに見える782pxの境界線（ブレイクポイント）において、機能ごとに判定基準の不一致（1pxのズレ）が存在することが分かります（表1参照）。
| 区分 | ブロックの非表示 | 「カラム」ブロック |
|---|---|---|
| デスクトップ | 782px ＜ 表示幅 | 782px ≦ 表示幅（横並び） |
| タブレット | 480px ＜ 表示幅 ≦ 782px | 表示幅 ＜ 782px（縦並び） |
| モバイル | 表示幅 ≦ 480px | – |
ブロックを非表示
非表示機能では、以下のように3つのセグメントに分かれています。
/* デスクトップで非表示 */
@media (width > 782px) {
.wp-block-hidden-desktop {
display: none;
}
}
/* タブレットで非表示 */
@media (480px < width <= 782px) {
.wp-block-hidden-tablet {
display: none;
}
}
/* モバイルで非表示 */
@media (width <= 480px) {
.wp-block-hidden-mobile {
display: none;
}
}標準「カラム」ブロックの「モバイルでは縦に並べる」
一方で、標準のカラムブロック（.wp-block-columns）の折り返し判定は以下のようになっています。
/* モバイルでは縦に並べる */
.wp-block-columns {
display: flex;
flex-wrap: wrap;
}
/* 782px以上で横並び */
@media (width >= 782px) {
.wp-block-columns {
flex-wrap: nowrap;
}
}参考：Cocoonの仕様
ブロックを非表示とレスポンシブスタイル
WordPress 7.1から、レスポンシブスタイル（ブレークポイント）に応じたスタイルをtheme.jsonで設定できるようになりました（図3参照）。
これにより、「ブロックを非表示」の機能にもそれが反映されます。
そのため、Cocoon 2.5.9ではレスポンシブスタイルに独自のブレークポイントを反映させています（表2参照）。
| 区分 | Cocoonのブレークポイント |
|---|---|
| デスクトップ | 834px ＜ 表示幅 |
| タブレット | 480px ＜ 表示幅 ≦ 834px |
| モバイル | 表示幅 ≦ 480px |
「カラム」ブロック
Cocoonの場合、テーマ独自の「2カラム」「3カラム」ブロック（.column-wrap）は、以下のブレークポイントで制御されています。
/* Cocoon独自の「カラム」ブロック */
@media (width <= 834px) {
.container .column-wrap {
flex-direction: column;
}
}さいごに
WordPress 7.0のブロック非表示機能、標準「カラム」ブロック、そしてCocoonの独自「カラム」ブロックは、それぞれが異なるブレークポイントのロジックで動いているため、レイアウトの不整合（表示崩れ）を引き起こす原因となります。
これらの機能やテーマの間で発生する画面幅の解釈のズレ（仕様差）を防ぐためには、必要に応じて各条件を統一するのが望ましいかと思います。
