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

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
      }
    }
  }
}
Code language: JSON / JSON with Comments (json)

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

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

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

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

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

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

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

設定	HTML
ブロック全体を非表示	出力されない
Mobileだけ非表示	出力される
Tabletだけ非表示	出力される
Desktopだけ非表示	出力される

全体を非表示にした場合

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

• ブロック：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の基準となる画面幅は固定されていました。

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

Viewport	画面幅
モバイル（Mobile）	480px以下
タブレット（Tablet）	480px超～782px以下
デスクトップ（Desktop）	782px超

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"
    }
  }
}
Code language: JSON / JSON with Comments (json)

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

• モバイル（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"
  }
}Code language: JavaScript (javascript)

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

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

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

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

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

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

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

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

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

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	Mobile・Tablet・Desktopごとの表示設定	HTMLを残してCSSで非表示
WordPress 7.1	ブレークポイントをtheme.jsonで変更可能	設定したViewportをVisibilityにも使用

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 の関係は、ぜひ押さえておきたいポイントになりそうです。