WordPressでは、ブロックエディターの機能強化が続いています。その中でもWordPress 6.9以降、大きく進化しているのが「ブロックの表示・非表示」に関する機能です。

WordPress 6.9では、ブロックを削除せずに一時的に公開ページから隠せるようになりました。

WordPress 7.0ではさらに、画面幅に応じた表示・非表示が可能になっています。

そしてWordPress 7.1では、その画面幅の基準となるブレークポイントを theme.json から変更できるようになり、レスポンシブスタイルの仕組みとも連携するようになりました。

一見すると「非表示機能が少しずつ便利になった」だけにも見えますが、内部の仕組みまで確認すると、

• WordPress 6.9：ブロックそのものを非表示にする
• WordPress 7.0：画面幅ごとに表示・非表示を切り替える
• WordPress 7.1：画面幅の基準をテーマ側で設定し、レスポンシブデザイン全体へ広げる

という段階的な進化が見えてきます。

今回はWordPress 6.9・7.0・7.1で、ブロックの表示・非表示機能がどのように変わってきたのかを、初心者向けに整理します。

公式情報（英語）

• Ability to Hide Blocks in WordPress 6.9 – Make WordPress Core
• Block Visibility in WordPress 7.0 – Make WordPress Core
• Roadmap to 7.1 – Make WordPress Core
• Responsive block styles and configurable viewports in WordPress 7.1 – Make WordPress Core
• WordPress 7.1: Block visibility configurable breakpoints and theme.json integration · Issue #75707 · WordPress/gutenberg

WordPress 6.9：ブロックを削除せず「非表示」にできるようになった

最初の大きな変更は、WordPress 6.9です。

WordPress 6.9では、ブロックを削除せずに公開ページから隠せるブロックの非表示機能がWordPress本体に追加されました。

使用例

例えば、次のような文章があるとします。

キャンペーンが一時的に終了したとき、以前であれば文章を削除したり、下書きとして別の場所に保存したりする必要がありました。

WordPress 6.9以降は、ブロックのメニューから「非表示」にすることで、編集画面には残したまま、公開ページには表示しないという使い方ができます。再び使いたくなった場合は、リストビューなどから「表示」に戻せます。

なお、リストビュー内には、当該ブロックが非表示であることが分かるよう、専用のマークが付きます。

どのような場面で便利？

例えば、以下のような使い方が考えられます。

• 一時的にキャンペーンのお知らせを隠す
• 公開準備中の文章を残しておく
• 後日再利用するセクションを保管しておく
• A案・B案のレイアウトを編集画面内に残しておく

つまりWordPress 6.9の非表示機能は、削除せずに一時保管する機能として考えると分かりやすいでしょう。

WordPress 6.9の「非表示」はHTML自体が出力されない

ここで重要なのが、WordPress 6.9の非表示が単なるCSSの display:none ではないことです。

WordPress 6.9の機能でブロック全体を非表示にすると、公開ページではそのブロックのHTML自体が出力されません。

公式の開発者向け資料でも、非表示にされたブロックは公開時のマークアップから除外されると説明されています。

つまり、通常は「HTMLを出力する→ブラウザに表示される」のに対し、「ブロックを非表示→HTMLを出力しない→公開ページには存在しない」という処理になります。関連するスクリプトやスタイルも、原則として非表示ブロックだけのためには読み込まれません。

ブロックはエディター内で非表示になり、フロントエンドで公開されるマークアップからも除外されます。リストビュー (Shift+Alt+O) で選択して、再度設定を変更できます。

この点は、後述するWordPress 7.0の「モバイルでは非表示」などと大きく異なる部分です。

内部ではBlock Supportsの「visibility」が使われている

少し技術的な話になりますが、この機能はWordPressのBlock Supports（ブロックサポート）という仕組みの一つとして実装されています。

Block Supportsとは簡単に言えば、「このブロックは余白を設定できる」「このブロックは文字色を設定できる」「このブロックは表示・非表示を設定できる」といった、ブロックが利用できる機能を定義する仕組みです。

表示・非表示についてはsupports.visibility という設定が使われます。例えばテーマ・プラグイン開発者は、特定のブロックについてVisibility機能を無効にすることもできます。

なお、ここは少し紛らわしいところです。

supports.visibility は、そのブロックがVisibility機能に対応しているかを表します。

一方、個々のブロックが実際に表示されるかどうかは、ブロックのメタデータに保存されます。この違いはWordPress 7.0以降を理解するうえでも重要です。

WordPress 7.0：スマートフォン・タブレット・パソコンごとに設定可能に

WordPress 7.0では、6.9のVisibility機能がさらに進化しました。

新しく追加されたのが、Viewport（ビューポート）ごとの表示・非表示です。Viewportとは、ここでは簡単に「ブラウザ上でWebページを表示している領域の幅」と考えてください。

WordPress 7.0では、「モバイル（Mobile）」「タブレット（Tablet）」「デスクトップ（Desktop）」という3種類の画面幅について、ブロックを表示するか非表示にするか指定できるようになりました。

これにより、例えば、

• デスクトップで非表示　→ チェックしない
• タブレットで非表示　→ チェックしない
• モバイルで非表示　→ チェックする

とすれば、スマートフォン程度の画面幅でだけブロックを隠せます。

これによって、「パソコンでは詳しい説明を表示するが、スマートフォンでは省略する」といったレスポンシブなページ設計を、WordPress標準機能で行いやすくなりました。

WordPress 7.0ではVisibilityの保存形式も拡張された

内部的には、例えば次のような情報として保存されます。

{
  "metadata": {
    "blockVisibility": {
      "viewport": {
        "mobile": false,
        "tablet": true,
        "desktop": true
      }
    }
  }
}

この場合、mobile: false tablet: true desktop: trueなので、Mobileでは非表示、それ以外では表示という意味です。

ブロックマークアップでは、例えば次のようになります。

<!-- wp:paragraph {"metadata":{"blockVisibility":{"viewport":{"mobile":false}}}} -->
<p>スマートフォンでは非表示になる文章です。</p>
<!-- /wp:paragraph -->

初心者がこのコードを直接編集する必要はありませんが、WordPress内部ではこのようにVisibilityの情報が保存されています。

6.9と7.0では「非表示」の仕組みが違う

ここは特に重要なポイントです。

同じ「非表示」という言葉でも、WordPress 6.9からある全体非表示と、WordPress 7.0で追加されたViewportごとの非表示では、内部処理が異なります。

全体を非表示にした場合

例えば、「このブロックを公開しない」「公開するコンテンツから除外」という設定の場合、

• ブロック：HTMLは生成されない
• DOMに存在しない

という処理になります。こちらは上述のとおりです。

DOMとは、簡単に言えばブラウザがWebページのHTMLを扱うための構造です。

Mobileだけ非表示にした場合

一方、「モバイルでは非表示」とした場合は、以下のような処理となります。

• ブロック：HTMLは生成される
• DOMにも存在する
• CSSでMobile時だけ隠す

という処理になります。

設定時の注意書きにもその旨が記載されています。

ブロックは選択したビューポートに応じて非表示になります。これはフロントエンドで公開されるマークアップに含まれます。リストビュー (Shift+Alt+O) で選択して、再度設定を変更できます。

なぜHTMLを残す必要がある？

これは考えてみると当然です。

例えば、「Mobile → 非表示」「Desktop → 表示」という設定の場合、同じページをパソコンで表示したときにはブロックが必要です。そのためHTMLそのものを削除することはできません。

HTMLを出力しておき、「画面が狭い→CSSで非表示」「画面が広い→CSSで表示」と切り替える必要があるわけです。

WordPress 7.0のブレークポイントは固定だった

WordPress 7.0では、Mobile・Tablet・Desktopの基準となる画面幅は固定されていました。

標準では、おおむね次の区分です。

WordPress 7.0の段階では、このViewportのブレークポイントをテーマ側から自由に変更する仕組みは用意されていませんでした。公式Dev Noteでも、7.0では固定値であり、7.1での設定可能化が予定されていると説明されています。

例えばテーマ側で、「Mobile = 600px以下」「Tablet = 960px以下」のような独自設計を採用していた場合でも、WordPressのVisibility側は480px・782pxを基準としていました。

そのため、テーマのレスポンシブ設計とWordPress標準のVisibilityの基準がずれる可能性があるという問題がありました。

WordPress 7.1：ブレークポイントをtheme.jsonから変更可能に

WordPress 7.1では、この部分が改善されました。

新しく theme.json のsettings.viewportから、MobileとTabletのブレークポイントを指定できるようになっています。

例えば、以下のように設定したといたします。

{
  "version": 3,
  "settings": {
    "viewport": {
      "mobile": "600px",
      "tablet": "900px"
    }
  }
}

その場合、以下のような考え方になります。

• モバイル（Mobile）：600px以下
• タブレット（Tablet）：600px超～900px以下
• デスクトップ（Desktop）： 900px超

なお、指定できる単位は、px em remです。パーセントや単位なしの数値などには対応していません。

settings.viewportはVisibilityにも使われる

重要なのは、settings.viewport が単にエディターのプレビューサイズを変える設定ではないことです。

ここで指定したViewport幅は、

• ブロックのレスポンシブスタイル
• ブロックの表示・非表示
• エディター上のViewportプレビュー

で共通して利用されます。

例えば、以下のように、「モバイルでは非表示」と設定したブロックも、標準の480pxではなく600pxを境界として判定されるようになります。

"settings": {
  "viewport": {
    "mobile": "600px",
    "tablet": "900px"
  }
}

WordPress 7.1ではこのように、Visibilityの画面幅をテーマ設計に合わせやすくなりました。

WordPress 7.1ではスタイルもレスポンシブ化

WordPress 7.1では、Viewportの仕組みがVisibilityだけではなく、ブロックのスタイルそのものへ広げられています。

新しく「Responsive Style States（レスポンシブスタイルステート）」が導入され、MobileやTabletのときだけスタイルを変更できるようになりました。

詳しくは以下の記事で解説しています。

WordPress 7.1でレスポンシブデザインが大きく進化！スマホ・タブレット向けのデザイン調整が簡単に

WP Pilot

「表示／非表示」運用上の注意点

本記事で紹介している機能の注意点についても、下記のとおりまとめておきます。

「カラムをモバイルで縦並び」にする機能とは別

ここで一つ注意しておきたい点があります。

WordPressには以前から「カラム」ブロックなどにレスポンシブ機能があります。

例えば「カラム」ブロックには、「モバイルでは縦に並べる」という設定があります。しかし、これは今回紹介しているViewport VisibilityやResponsive Style Statesと完全に同じ仕組みではありません。

大まかに分類すると、現在のWordPressには、

1. ブロック独自のレスポンシブ処理
2. ViewportによるVisibility
3. Responsive Style States

という複数のレスポンシブ処理が存在しています。

「非表示＝読み込まれていない」とは限らない

もう一つ、実際の運用で重要なポイントがあります。

特にWordPress 7.0以降の、モバイル（タブレット）では非表示については、「スマートフォンでは見えないから、HTMLも読み込まれていない」とは限りません。ViewportによるVisibilityでは、HTMLはDOMに存在し、CSSによって見えなくなっているだけです。

そのため、大きな画像や重いコンテンツをモバイルで非表示にすればスマートフォンの通信量も完全になくなると考えるのは適切ではありません。

Visibilityは基本的に、レイアウトや情報量を画面幅ごとに調整する機能として考えた方がよいでしょう。

パフォーマンス改善を目的とする場合は、画像の最適化や遅延読み込みなど、別の対策も必要です。

一部のブロックではVisibilityを利用できない場合もある

VisibilityはBlock Supportsとして提供されているため、すべてのブロックで必ず使えるとは限りません。ブロック側でVisibilityのサポートが無効化されている場合には、表示・非表示機能が利用できないことがあります。

例えばWordPress 7.0では、カスタムHTMLブロックについてVisibilityのBlock Supportが意図的に無効化されたことが公式記事でも案内されていますし、実際に「表示／非表示」が使用不可となっています。

そのため、「別のブロックでは【表示／非表示】が使えるのに、このブロックには項目がない」という場合、必ずしも不具合とは限りません。

テーマやプラグインによるカスタムブロックについても、そのブロックがVisibilityに対応しているか確認するとよいでしょう。

WordPress 7.1でレスポンシブデザインは大きく変わり始めた

WordPress 6.9から7.1までの流れを見ると、単に「非表示」という小さな機能が追加されたわけではないことが分かります。

WordPress 6.9では、「ブロックを削除せず、一時的に公開ページから隠す」という仕組みが導入されました。

WordPress 7.0では、「画面幅によって表示・非表示を切り替える」ところまで発展しました。

さらにWordPress 7.1では、「Viewportの基準をテーマ側で設定し、表示・非表示だけでなくスタイル変更にも利用する」という形へ進化しています。

つまり、以下のように整理すると、流れを理解しやすいでしょう。

• WordPress 6.9はVisibility機能の出発点
• WordPress 7.0はVisibilityのレスポンシブ化
• WordPress 7.1はViewportをWordPress標準のレスポンシブデザイン基盤として発展させたバージョン

まとめ

最後に、WordPress 6.9・7.0・7.1の違いを簡単にまとめます。

WordPress 6.9

ブロックを削除せず、公開ページから非表示にできるようになりました。

非表示にしたブロックはHTML自体が公開ページへ出力されません。

WordPress 7.0

「モバイル」「タブレット」「PC」ごとに表示・非表示を設定できるようになりました。

こちらはHTML自体を削除するのではなく、CSSを使って画面幅ごとに隠す仕組みです。

ブレークポイントは以下が基本で、7.0では固定でした。

• モバイル：480px以下
• タブレット：480px超～782px以下
• デスクトップ：782px超

WordPress 7.1

theme.json の settings.viewport によって、モバイル（Mobile）・タブレット（Tablet）のブレークポイントをテーマ側から変更できるようになりました。

さらに同じViewportの仕組みを利用して、「文字サイズ」「色」「背景」「枠線」「サイズ」「余白」「レイアウト」などをモバイル・タブレットごとに変更できるレスポンシブスタイルも追加されています。

WordPressのレスポンシブデザインは、従来は各ブロックやテーマ側で個別に対応する部分が多くありました。WordPress 7.1では、それをViewportという共通の考え方で扱うための土台がかなり整ってきたと言えます。

ただし、「カラム」のモバイル縦並びなど従来から存在するブロック独自のレスポンシブ処理まで、すべてが新しいViewportの仕組みに統一されたわけではありません。

そのため現時点では、「WordPress 7.1ですべてのレスポンシブ処理が統一された」というよりも、WordPress標準のレスポンシブデザインを統一していくための重要な基盤が整ったと捉えるのが適切でしょう。

今後WordPressのブロックエディターを使ってサイトを制作するうえでは、「Visibility」と「Responsive Styles」、そして settings.viewport の関係は、ぜひ押さえておきたいポイントになりそうです。

WordPress 7.1では、ブロックエディターのレスポンシブデザイン機能が大きく強化されました。

これまでWordPressで「パソコンでは文字を大きく、スマートフォンでは小さくする」「スマホだけ余白を狭くする」といった調整を行う場合、テーマ側のCSSや追加CSSを使うことが少なくありませんでした。

WordPress 7.1では、新しく「Responsive Style States（レスポンシブ・スタイル・ステート）」という仕組みが導入され、ブロックごとに「タブレット」「モバイル」向けのデザインを設定できるようになりました。

この記事では、WordPress 7.1で何が変わったのかを、できるだけ専門用語を避けながら紹介します。

公式情報

• WordPress 7.1 “メアリー・ルー” – WordPress.org 日本語
• Responsive block styles and configurable viewports in WordPress 7.1 – Make WordPress Core（英語）

WordPress 7.1では何が変わった？

まず大きなポイントは、WordPress自身が、「通常のデザイン」「タブレット向けのデザイン」「スマートフォン向けのデザイン」を区別して管理できるようになったことです。

例えば、見出しの文字サイズを次のように設定できます。

• 通常：40px
• タブレット：32px
• モバイル：24px

これまでもCSSを書けば同じことはできました。しかしWordPress 7.1では、これをブロックエディターのデザイン設定として扱えるようになっています。

つまり、「レスポンシブデザイン＝テーマやCSSだけで行うもの」という従来の考え方から、「WordPressのブロック設定としてレスポンシブデザインを管理する」方向へ一歩進んだことになります。

その他の変更点についてはこちらから

WordPress 7.1とは：リリース時点での情報や主な変更点を解説します

WP Pilot

そもそも「レスポンシブデザイン」とは？

レスポンシブデザインとは、パソコン、タブレット、スマートフォンなど、画面の大きさに応じてレイアウトやデザインを変化させる仕組みです。

例えば、パソコンでは、以下のようなレイアウトでも問題ありません。

• 大きな文字を表示する
• 左右に広い余白を取る
• 複数の要素を横に並べる

しかしスマートフォンで同じデザインを使うと、下記のような問題が発生します。

• 文字が大きすぎる
• 余白が広すぎる
• 横並びの要素が窮屈になる

そこで画面幅に応じてデザインを調整するのがレスポンシブデザインです。

WordPress 7.1では「Mobile」と「Tablet」が追加された

WordPress 7.1では、レスポンシブスタイルとして主に次の2つの状態を利用できます。

• Mobile（モバイル）
• Tablet（タブレット）

通常のスタイルを含めると、実質的には3段階です。

WordPress 7.1の標準設定では、Mobileは480px以下、Tabletは480px超～782px以下として定義されています。ただし、テーマ側で設定を変更することが可能のため、必ずしも上記のとおりになるわけではありません。

設定例

ブラウザの幅を縮めたり広げたりすると、以下の文章の文字色や背景色が変わるはずです。

「Desktop」という設定はない

少し注意したいのが、WordPress 7.1には「Desktop」「Tablet」「Mobile」という3つの専用スタイルが用意されているわけではないことです。

正確には、以下のような仕組みとなっています。

• 通常のスタイル
• Tabletで必要な部分だけ上書き
• Mobileで必要な部分だけ上書き

そのため、WordPress内部では@desktopというようなスタイルはありません。メニュー上でも「すべてのビューポートをスタイリング」と説明がございます。

公式の説明でも、通常のスタイルがBase Style（基本スタイル）となり、TabletやMobileでは必要な部分だけを上書きする仕組みになっている、ということになっています。

設定していない項目は通常のデザインを引き継ぐ

ここは初心者の方にも重要なポイントです。

通常の見出しを「文字サイズ：40px、文字色：黒」とします。その後、タブレットで「文字サイズ：32px」だけを変更したとします。

するとタブレットでは「文字サイズ：32px、文字色：黒」になります。文字色についてはTablet側で変更していないため、通常設定の「黒」がそのまま使用されます。

モバイルでも同様です。

つまり、すべての項目をPC・Tablet・Mobileそれぞれで設定し直す必要はありません。変えたいところだけ設定すればよいという仕組みです。

文字サイズだけでなく余白や色も変更できる

WordPress 7.1のレスポンシブ設定は、文字サイズだけに限定されません。

「Core Block Supports」と呼ばれるWordPress標準のスタイル機能に対応した項目で利用できます。公式では、主に次の設定が対象として挙げられています。

• Typography（文字設定）
• Color（文字色など）
• Background（背景）
• Border（枠線）
• Dimensions（サイズ）
• Spacing（余白）
• Layout（レイアウト）

そのため、例えば「グループ」ブロックで「通常 余白：48px」「タブレット 余白：32px」「モバイル 余白：16px」といった調整が可能になります。

これまでCSSを書いて調整していたような部分の一部を、WordPressのデザイン設定として管理できるようになったわけです。

個別のブロックにも設定できる

WordPress 7.1では、サイト全体の設定だけでなく、ページ内に配置した個々のブロックにもレスポンシブスタイルを設定できます。例えば「この見出しだけスマートフォンで小さくしたい」といった調整も可能です。

なお、設定いただくにあたっては、投稿・固定ページ等の「プレビュー」リンクに新たに設置された「レスポンシブスタイル」をチェックいただく必要がございます。

内部的には、ブロックのstyle属性に、@mobileや@tabletという情報が保存されます。

例として、モバイルだけ文字サイズを変更した段落ブロックは、内部的には次のような情報を持つことがあります。

<!-- wp:paragraph {"style":{"@mobile":{"typography":{"fontSize":"1rem"}}}} -->
<p>文章が入ります。</p>
<!-- /wp:paragraph -->

つまり、単にスマートフォン表示をプレビューしているだけではありません。モバイル用のデザインそのものがブロック情報として保存されるのが大きな違いです。

グローバルスタイルからも設定できる

ブロック一つ一つではなく、「サイト内のすべての見出しをスマートフォンでは小さくしたい」という場合には、サイトエディター上のグローバルスタイルを利用することもできます。

例えば、以下のように設定すれば、見出しブロック全体の基本デザインとして利用できます。

見出しブロック
 ├ 通常：40px
 ├ Tablet：32px
 └ Mobile：26px

その上で特定の見出しだけ個別に変更するといった使い分けもできます。

WordPress 7.1の標準ブレークポイント

レスポンシブデザインでは「何pxからデザインを切り替えるのか」という境界が重要です。この境界をブレークポイント（ブレイクポイント）と呼びます。

WordPress 7.1では、標準で次の値が設定されています。

モバイル（Mobile）

@media (width <= 480px)

つまり、480px以下です。

Tablet

@media (480px < width <= 782px)

つまり、480pxより大きく、782px以下です。

全体のイメージ

イメージすると、以下のとおりとなります。

～480px        481～782px        783px～
───────────────────────────────
 Mobile         Tablet           Base

これまでの「プレビュー」と何が違う？

WordPressには以前から、エディターの表示幅を切り替えてスマートフォン表示を確認する機能がありました。しかし、これは主に、「スマートフォンくらいの幅でどう見えるか」を確認するためのプレビューでした。

WordPress 7.1のレスポンシブスタイルでは、「スマートフォンのときは、この文字サイズにする」という実際のスタイル情報を保存できます。ここが大きな違いです。

WordPress側が必要なメディアクエリを生成し、実際のサイト表示にも反映します。

CSSが完全に不要になったわけではない

WordPress 7.1のレスポンシブ機能は便利ですが、CSSがまったく不要になったわけではありません。

現在利用できるのは、基本的にWordPressのブロック設定に対応したデザイン設定です。そのため、「特殊なレイアウト変更」「複雑なアニメーション」「独自のCSSプロパティ」「細かな要素単位の調整」などでは、引き続きCSSが必要になることがあります。

また、自由に何個でもブレークポイントを追加できるわけではありません。基本的には、「Base」「Tablet」「Mobile」という構造です。

したがってWordPress 7.1は、「CSSが不要になるアップデート」というより、これまでCSSで対応していたレスポンシブ調整の一部をWordPress標準機能として扱えるようにしたアップデートと考えるのがよいでしょう。

theme.jsonではブレークポイントを変更できる

ここからは少し開発者向けの内容です。

WordPress 7.1では、テーマのtheme.jsonからMobileとTabletのブレークポイントを変更できます。新しく追加されたのがsettings.viewportです。

例えば、以下のように設定できます（分かりやすくするため、かなり極端な値を入れています）。

{
	"settings": {
		"viewport": {
			"mobile": "30rem",
			"tablet": "45rem"
		}
	}
}

この場合、以下のように解釈されます。

• 30rem以下→ モバイル
• 30rem超～45rem以下 → タブレット
• 45rem超→ 通常

pxだけでなくemやremも利用できる

settings.viewportでは、次の単位を利用できます。

• px
• em
• rem

そのため、"mobile": "600px"でも"mobile": "40rem"でも構いません。

一方、以下の値は使用できません。無効な値を指定すると、その設定は利用されません。

• %
• vw
• 単位なしの数値
• calc()
• その他のCSS関数

実例：テーマ Lightning の例

実際、有名な無償テーマ「Lightning」では、theme.json内に以下のとおり設定されています（該当箇所のみ抜粋）。

		"viewport": {
			"mobile": "576px",
			"tablet": "992px"
		},

ブレークポイントの数値はサイトエディターから変更できない

初心者の方が混乱しやすいポイントとして、settings.viewportそのものは、サイトエディターから自由に変更するための設定ではありません。

サイトエディターでは、「モバイルでは文字を小さくする」「タブレットでは余白を狭くする」といったスタイル変更を行えます。

一方、「Mobileを480pxから600pxに変更する」「Tabletを782pxから900pxに変更する」といったブレークポイントの数値変更はtheme.json側で行います。

整理すると以下のようになります。

【補足】このブレークポイントは「表示／非表示」にも適用されます

詳しくは以下の記事をご覧くださいませ。

WordPressのブロック表示・非表示機能はどう進化した？　6.9・7.0・7.1の違いを初心者向けに解説

WP Pilot

theme.jsonからレスポンシブスタイル自体も設定できる

ブレークポイントだけでなく、テーマ側からMobile向け、Tablet向けのスタイルをあらかじめ設定することもできます。

たとえば、グループブロックの通常の余白を3rem、Mobileでは1remにする場合は、次のように設定できます。

{
	"styles": {
		"blocks": {
			"core/group": {
				"spacing": {
					"padding": {
						"top": "3rem",
						"right": "3rem",
						"bottom": "3rem",
						"left": "3rem"
					}
				},
				"@mobile": {
					"spacing": {
						"padding": {
							"top": "1rem",
							"right": "1rem",
							"bottom": "1rem",
							"left": "1rem"
						}
					}
				}
			}
		}
	}
}

これまでテーマのCSSファイルに書いていたレスポンシブデザインの一部を、theme.jsonのデザイン設定としてまとめられるようになったわけです。

注意：「カラム」ブロックの「モバイル」とは意味が違う

WordPress 7.1では特に注意しておきたい点があります。

「カラム」ブロックには以前から、「モバイルでは縦に並べる」という設定があります。

しかし、この「モバイル」はWordPress 7.1の新しい@mobileと同じ意味ではありません。

WordPress 7.1の新しいレスポンシブスタイルでは「モバイル → 480px以下」です。一方、カラムブロックは従来から、基本的に782px未満で1列化するCSSを持っています。

現在のGutenbergのソースでも、カラムブロックでは$break-mediumとして782pxが使用され、781px以下ではカラム幅を100%にする処理が残っています。

つまり、以下の状態になることがあります。

～480px       　 481～781px       782px～
───────────────────────────────────────────
 Mobile     　    Tablet
   │      　         │
   └─ カラムは縦一列 ─┘        　　横並び

「モバイル」という言葉が2種類あると考えると分かりやすい

少しややこしいのですが、WordPress 7.1では、新しいレスポンシブ機能のモバイル（480px以下）と、従来のカラムブロックでいう「モバイル」（782px未満）が混在しています。

これはカラムブロックのレスポンシブ機能がWordPress 7.1よりずっと前から存在するためです。そして、カラムブロックの固定ブレークポイントを改善するための修正事項も以前から提案されているようですが、実装には至っていません。

したがって、WordPress 7.1ですべてのレスポンシブ処理が480px・782pxという新しい仕組みに完全統一されたわけではない点には注意しましょう。

settings.viewportを変更してもカラムの縦並び境界は変わらない

ここも重要です。

例えばtheme.jsonで以下のように変更したとします。

{
	"settings": {
		"viewport": {
			"mobile": "600px",
			"tablet": "900px"
		}
	}
}

この場合、新しいレスポンシブスタイルでは「Mobile → 600px以下」「Tablet→ 600px超～900px以下」になります。

しかし、だからといってカラムブロックの「モバイルでは縦に並べる」が900pxを基準に変化するわけではありません。カラムブロックには、現在も従来のbreak-medium、つまり782pxを使った独自のCSSがあります。

そのため、settings.viewportはWordPress内のすべてのブレークポイントを一括変更する設定ではありません。正確にはWordPress 7.1で導入されたレスポンシブスタイルやブロック表示制御で使用する共通のViewport設定と考えるのがよいでしょう。

公式記事でも、設定したviewport幅はレスポンシブ・ブロックスタイルやブロック表示制御、エディターのデバイスプレビューで使用されると説明されています。

少なくとも、完全に統一する必要性を感じたら、現時点ではCSSで追加で補正する必要があるわけです。

テーマ制作者にとっても大きな変更

WordPress 7.1以前では、テーマ制作者がレスポンシブデザインを設定するとき、

@media (max-width: 768px) {
	.example {
		font-size: 16px;
	}
}

といったCSSを書くことが一般的でした。

もちろん今後もCSSは必要ですが、WordPress 7.1では、theme.jsonによる仕組みを利用できる場面が増えました。すなわち、WordPressのデザイン設定をよりtheme.jsonに集約しやすくなっています。

特にブロックテーマでは重要な変化でしょう。

レスポンシブ編集自体を無効化することもできる

テーマやサイトによっては、「投稿者にはモバイルやタブレットの設定を変更させたくない」というケースもあります。

WordPress 7.1では、responsiveEditingEnabledというエディター設定が追加されており、レスポンシブ編集のUIを無効化できます。デフォルトはtrueです。

例えば、functions.phpに以下のとおりに記載すれば表示はされなくなります。

function example_disable_responsive_editing( $settings ) {
	$settings['responsiveEditingEnabled'] = false;
	return $settings;
}

add_filter(
	'block_editor_settings_all',
	'example_disable_responsive_editing'
);

ただし、これはレスポンシブ機能そのものを無効化する設定ではありません。すでに保存されているレスポンシブスタイルやtheme.jsonの設定はそのまま利用されます。

あくまで、「ユーザーにレスポンシブスタイルを編集させるUIを表示するかどうか」を決める設定です。

WordPress 7.1以前と比較すると？

今回の変更を簡単に整理すると、次のようになります。

WordPress 7.1は「レスポンシブデザイン完全統一」ではない

WordPress 7.1のレスポンシブ機能は大きな進歩ですが、現時点では「WordPress内のすべてのレスポンシブ処理が一つになった」と考えない方がよいでしょう。

カラムブロックのように、以前から独自のレスポンシブCSSを持つブロックも存在します。

Gutenbergのブレークポイント定義自体にも、現在、分かる範囲だけで以下のような値が残っているようです（今後消去される可能性があります）。

• 1920px
• 1440px
• 1280px
• 1080px
• 960px
• 782px
• 600px
• 480px

したがってWordPress 7.1は、「WordPress全体のレスポンシブデザインが完成した」というよりも、「レスポンシブデザインをWordPress標準のデザインシステムで扱うための共通基盤が本格的に導入された」アップデートと考えると分かりやすいでしょう。

初心者はまず何を覚えればよい？

細かな仕様まで覚える必要はありません。まずは次の3点だけ押さえておけば十分です。

1. WordPress 7.1では「モバイル」「タブレット」ごとにデザインを変更できるようになった
2. 標準では「モバイル」が480px以下、「タブレット」が480px超～782px以下
3. 従来からあるカラムなどのレスポンシブ機能とは、一部仕組みが異なる

特に通常のサイト運営であれば、theme.jsonまで編集する必要はありません。サイトエディターやブロックエディターから必要な部分だけ調整する使い方で十分でしょう。

まとめ

WordPress 7.1では、ブロックのレスポンシブデザイン機能が大きく進化しました。

これまではCSSで対応することが多かった、

• スマートフォンでは文字を小さくする
• タブレットでは余白を減らす
• 画面幅によって背景やサイズを変更する

といった処理を、WordPressのブロックスタイルとして管理できるようになりました。

標準のブレークポイントは、「モバイル：480px以下」「タブレット：480px超～782px以下」「通常：782px超」です。さらにテーマ制作者はtheme.jsonのsettings.viewportを利用して、この境界を変更できます。

一方で、カラムブロックの「モバイルでは縦に並べる」など、従来から存在するレスポンシブ処理までsettings.viewportに統一されたわけではありません。

そのためWordPress 7.1は、レスポンシブ機能の「完成形」というより、WordPress自身がレスポンシブデザインを本格的に管理するための大きな一歩と見るのが適切でしょう。

これまで「スマートフォンだけデザインを変えたいけれどCSSは難しい」と感じていたユーザーにとっても、テーマ開発者にとっても、WordPress 7.1を代表する重要なアップデートの一つといえそうです。