雑記ブログ

WordPress 7.1 新機能ガイド

WordPress 7.1 新機能ガイド レスポンシブスタイルからタブブロックまで
miya

|

レスポンシブスタイル、ホバー状態、ブラウザー側の画像処理、タブ／プレイリストブロック、強化されたノート、常設ツールバー──7.1 の変更点を「どこにあるか」と実際の画面つきで整理しました。

WordPress 7.1 2026年8月19日リリース予定 · RC3 で実機確認（本記事は RC3 時点の情報です）

スタイル設定

CSSを書かずに、画面幅と状態ごとにデザインする

7.1最大の目玉。ブロック単位でもグローバルスタイルでも、タブレット／モバイル向けの上書きスタイルと、ボタンなどのホバー／フォーカス状態を編集画面から設定できます。

レスポンシブスタイル（ビューポート別スタイル）

場所: エディター右上「表示」メニュー → レスポンシブスタイルをON → 表示をタブレット／モバイルに切替 → 通常どおりブロック設定を変更

モバイル表示中：ブロックカードに「モバイル」バッジ、キャンバスは幅ドラッグ可
モバイル表示中：ブロックカードに「モバイル」バッジ、キャンバスは幅ドラッグ可
「表示」メニューの新項目「レスポンシブスタイル」
「表示」メニューの新項目「レスポンシブスタイル」
トグルON後は「モバイル表示のみに適用」といった説明に変わる
トグルON後は「モバイル表示のみに適用」といった説明に変わる
  • 「表示」メニューにレスポンシブスタイルトグルが追加。ONの状態でタブレット／モバイル表示に切り替えると、そこで行ったスタイル変更はそのビューポートにだけ適用されます。
  • ブロックカードに 「モバイル」バッジが出て、いま何を編集しているか分かります。実機確認では段落のフォントサイズを S にすると style["@mobile"].typography.fontSize に保存されました（既定の値には影響なし）。
  • キャンバスは左右のハンドルで任意の幅にドラッグしてプレビュー可能。既定ブレークポイントは @mobile ≤480px、@tablet 481–782px。テーマは settings.viewport（theme.json）で変更できます。
  • グローバルスタイル（サイトエディター）でも同じトグルが「表示」メニューにあり、ブロック種別ごとにモバイル専用スタイルを持たせられます。
  • 無効化: block_editor_settings_all で responsiveEditingEnabled = false。

疑似状態（ホバー／フォーカス）のスタイル

場所: ボタン／ナビゲーションリンクを選択 → ブロックカード右上の ⋮（状態） → デフォルト／ホバー／focus／focus-visible／有効。グローバルスタイル → ブロック → ボタン の「状態」ドロップダウンでも同じ

ボタンのブロックカード ⋮ から開く「疑似状態」ドロップダウン
ボタンのブロックカード ⋮ から開く「疑似状態」ドロップダウン
ホバー編集中のブロックカード（キャンバスに状態を表示／ホバーバッジ）
ホバー編集中のブロックカード（キャンバスに状態を表示／ホバーバッジ）
ホバー用の背景色を設定するとキャンバスで即プレビュー
ホバー用の背景色を設定するとキャンバスで即プレビュー
グローバルスタイル（ボタン）にも同じ「状態」ドロップダウン
グローバルスタイル（ボタン）にも同じ「状態」ドロップダウン
  • ボタンのホバー色を変えるのにカスタムCSSが不要に。状態を選ぶと「キャンバスに状態を表示」トグルと状態バッジが出て、その状態の色・タイポグラフィなどを設定できます。
  • 保存先はブロック属性 style[":hover"]（theme.json も同じキー）。@mobile の中に :hover を入れ子にすることも可能。
  • 現状の対象は ボタン と ナビゲーションリンク。カスタム状態 -current（現在のメニュー項目）は theme.json 専用。無効化は blockStatesEditingEnabled = false。

背景グラデーション ＋ 背景画像の重ね合わせ

場所: グループ等を選択 → サイドバー「背景」パネル → 画像／色／グラデーション

背景画像＋グラデーションを重ねたグループと、「背景」パネル（画像／色／グラデーション）
背景画像＋グラデーションを重ねたグループと、「背景」パネル（画像／色／グラデーション）
  • 新ブロックサポート background.gradient。背景画像の上にグラデーションを重ねられるので、ヒーロー画像上の文字を読みやすくする用途に最適。
  • グループ／アコーディオン／プルクオート／投稿コンテンツ／引用でデフォルト有効。他ブロックは block.json の supports.background.gradient でオプトイン。

最小幅（minWidth）

場所: サイドバー「サイズ」パネル → ⋮ → 最小幅

「サイズ」⋮ メニューに「最小幅」
「サイズ」⋮ メニューに「最小幅」
最小幅コントロールを表示したところ
最小幅コントロールを表示したところ
  • 高さ・最小の高さ・幅に加えて最小幅がサポート。theme.json の settings.dimensions.minWidth: true、block.json の supports.dimensions.minWidth で有効化。
  • デフォルトではパネルに出ないため ⋮ メニューから追加します（グローバルスタイルではデフォルト表示）。
  • 関連: グローバルスタイルで テキストシャドウ（typography.textShadow）を theme.json から指定できるようになりました。UIはまだ無く theme.json 専用。

ブロック

新ブロック2つと、既存ブロックの改善

タブとプレイリストがコアブロックに。カスタムHTMLの中に編集可能ブロックを置けるようになり、アイコン・画像・ギャラリー・クエリーループにも実用的な改善が入っています。

タブブロック（新規）

場所: インサーター → デザイン → タブ

タブブロック：概要／仕様／FAQ の3タブとブロックツールバー
タブブロック：概要／仕様／FAQ の3タブとブロックツールバー
  • クリックで切り替わるタブUIをプラグインなしで作成。各タブパネルには任意のブロックを配置できます。
  • ツールバーにタブを追加／タブを削除、RC1でタブの並び替えボタンが追加。構造は core/tabs > core/tab-list ＋ core/tab-panels > core/tab-panel(label)。
  • フロントは Interactivity API で動作（viewScriptModule）。

プレイリストブロック（新規）

場所: インサーター → メディア → プレイリスト

プレイリストブロック：波形付きプレイヤーとトラックリスト、ツールバー「トラックを追加」
プレイリストブロック：波形付きプレイヤーとトラックリスト、ツールバー「トラックを追加」
  • 複数の音声ファイルを1つのプレイヤーにまとめて埋め込み。トラック番号／アーティスト／再生時間／アートワークの表示切替、波形スタイル（bars / mirror / line / blocks / dots / seekbar）を選べます。
  • WordPress が扱える全音声MIMEに対応。ポッドキャストや音楽サイト向け。子ブロックは core/playlist-track。

カスタムHTMLブロック内の編集可能ブロック

場所: カスタムHTMLブロック内に <!-- wp:paragraph --> 等のブロックを直接書く／「コードを編集」で確認

HTMLブロック内の段落を選択すると段落ツールバーが出て、その場で編集できる
HTMLブロック内の段落を選択すると段落ツールバーが出て、その場で編集できる
「コードを編集」ではHTMLとブロックコメントが混在した全マークアップを確認・編集できる
「コードを編集」ではHTMLとブロックコメントが混在した全マークアップを確認・編集できる
  • 静的HTMLと通常ブロックを1つのHTMLブロック内で混在可能。エディターではHTML部分は固定表示、内側のブロックだけがその場で編集できます（移動・削除・兄弟追加はロック）。
  • AIが生成したHTMLレイアウトを、そのまま「編集可能な部分だけ差し替えられる部品」として扱える点がねらい。
  • ブロックバリエーションに innerContent（null がスロット）を渡すと「編集スロット付きの高レベルブロック」をインサーターに登録できます（core/html 限定）。

アイコンブロックの強化と Icon API

場所: アイコンブロック → ツールバーの左右反転／上下反転／回転、「置換」→ アイコンライブラリ

アイコンブロックのツールバー：反転／回転／置換
アイコンブロックのツールバー：反転／回転／置換
アイコンライブラリ：左のコレクション一覧に独自コレクションが表示される
アイコンライブラリ：左のコレクション一覧に独自コレクションが表示される
  • 挿入直後から「情報」アイコンが入るように（空のプレースホルダーを廃止）。ツールバーで反転・回転可能。
  • アイコンライブラリの左にコレクション一覧が表示。プラグイン／テーマが wp_register_icon_collection() と wp_register_icon() で登録した独自アイコンがそのまま並びます（スクショは検証用 mu-plugin で登録した「マイアイコン」）。
  • SVG は wp_kses でサニタイズされ、現状 <svg> <path> <polygon> のみ許可。読み取り専用 REST: /wp/v2/icon-collections, /wp/v2/icons/<collection>/<name>。

画像を「装飾用」としてマーク

場所: 画像ブロック → サイドバー「メディア」→ 装飾用としてマーク

画像ブロックのメディアパネルに追加された「装飾用としてマーク」
画像ブロックのメディアパネルに追加された「装飾用としてマーク」
  • ONにするとスクリーンリーダーが画像を読み飛ばします（isDecorative 属性）。意味の無い alt を入れがちだった問題への、手軽なアクセシビリティ改善。

動的ギャラリー（投稿に添付されたメディアを自動表示）

場所: ギャラリーブロックのプレースホルダー → 添付画像を使用

ギャラリーのプレースホルダーに「添付画像を使用」ボタン
ギャラリーのプレースホルダーに「添付画像を使用」ボタン
動的ギャラリー化した状態と「ソース」パネル
動的ギャラリー化した状態と「ソース」パネル
  • ギャラリーが「動的ギャラリー」モードになり、その投稿に添付された画像を自動で取得して表示。並び順（投稿順／A→Z）を選べ、「ギャラリーを切り離す」で通常ギャラリーに戻せます。
  • 属性は dynamicContent: { source: "core/attached-media" }。手動で画像を選び直す手間を削減。

クエリーループ：現在の投稿を除外

場所: クエリーループ → サイドバー「絞り込み」→ 現在の項目を除外

「絞り込み」パネルの「現在の項目を除外」
「絞り込み」パネルの「現在の項目を除外」
  • 「関連記事」でいま見ている記事自身が混ざる問題をトグル1つで解決（Trac #65373）。
  • 他のブロック改善: 埋め込みショートコードを貼ると埋め込みブロックに自動変換／カラム・ギャラリーをグリッドに変換／リスト項目に Block Bindings 対応／ナビゲーションのフォントサイズが子項目に伝播しなくなる、など。

メディア

ブラウザーで画像処理、専用エディター、無限スクロール

アップロード前にブラウザー側でリサイズ・変換・サムネイル生成を行う仕組みが入り、サーバー負荷と失敗が減ります。画像編集は専用モーダルに。

クライアントサイドのメディア処理

場所: 画像をアップロードするだけ（Chrome／Edge 137+ でフル動作。設定UIは無し）

  • @wordpress/vips（libvips の WebAssembly 版）が Web Worker でリサイズ／フォーマット変換／EXIF回転／各サイズ生成を実行し、生成済みファイルを個別リクエストで送信。PHPのメモリ不足エラーやCPU負荷を回避し、ファイルは平均約15%小さくなるとされています。
  • 対応形式が拡大: HEIC（iPhone）、UltraHDR、AVIF、WebP。アニメーションGIFは MP4／WebM 動画に自動変換。回線が切れてもキューが一時停止→復帰後に再開、進行状況インジケーター付き。
  • Safari は HEIC→JPG 変換のみ、Firefox はサーバー処理にフォールバック。無効化: add_filter('wp_client_side_media_processing_enabled','__return_false')。REST に sideload / finalize / replace_file エンドポイントと generate_sub_sizes / convert_format パラメータが追加。
  • 検証環境（RC3）でも wp-includes/js/dist/upload-media.js と Document-Isolation-Policy ヘッダーの実装を確認済み。ヘッドレスChromiumではUIの差分が撮れないためスクショは省略。

新しいメディアエディター（モーダル）

場所: 画像ブロック／カバー／サイトロゴ → ツールバーの切り抜き

「メディアを編集」モーダル：切り抜き／回転／反転／ズーム／アスペクト比
「メディアを編集」モーダル：切り抜き／回転／反転／ズーム／アスペクト比
  • 従来のインライン切り抜きに代わり、切り抜き・回転・反転・ズーム・アスペクト比・角度スライダーと「詳細」（メタデータ編集）を1つにまとめたモーダル「メディアを編集」が開きます。
  • カバーブロックの背景画像もその場でトリミング可能。

インサーターの「添付画像」

場所: ブロックインサーター → メディアタブ → 添付画像

インサーターの「メディア › 添付画像」
インサーターの「メディア › 添付画像」
  • 投稿にアップロードした画像がインサーターの「添付画像」セクションにまとまり、メディアライブラリ全体を探さずに再利用できます。

メディアライブラリの無限スクロール（既定でON）

場所: メディア › ライブラリ（グリッド表示）／ユーザー › プロフィール → 無限スクロール

プロフィール画面の新しい「無限スクロール」オプション
プロフィール画面の新しい「無限スクロール」オプション
  • media_library_infinite_scrolling フィルターの既定値が true に。「さらに読み込む」を押さずにスクロールで追加ロード。
  • プロフィールに「メディアライブラリのグリッドビューで無限スクロールを無効にする」チェックが追加され、ユーザーごとに戻せます（get_user_option('infinite_scrolling')）。

ノートと共同作業

6.9で入ったノートが本格的なレビュー機能に

リアルタイム共同編集は見送りになりましたが、非同期レビューのためのノートは大幅強化されました。

インラインノート・@メンション・リッチテキスト

場所: テキストを選択 → ブロックツールバー ⋮ → ノートを追加（Ctrl+Alt+M）／ノート内で「@」

選択範囲へのノート作成中：太字と @メンションの候補ポップアップ
選択範囲へのノート作成中：太字と @メンションの候補ポップアップ
作成後：ハイライトされた範囲と、メンション・書式付きのノートスレッド
作成後：ハイライトされた範囲と、メンション・書式付きのノートスレッド
  • インラインノート: ブロック全体でなく、選択したテキスト範囲にノートを付けられ、対象がハイライト表示されます。
  • @メンション: 「@」でサイトのユーザー一覧がポップアップ。メンションされたユーザーには投稿へのリンク付きメール通知が届きます（RC1で追加）。
  • 書式: 太字（Ctrl+B）／斜体（Ctrl+I）／コード／リンク（Ctrl+K）／絵文字。同じブロックに複数スレッドを作成でき、長いノートは「さらに表示／少なく表示」で折りたたみ。
  • ノートはコメントフィードから除外されるようになりました（#65613）。

ビジュアルリビジョンと共有可能なリビジョン

場所: 投稿サイドバー → リビジョン → エディター内で履歴を表示。URL は …&revision=ID

エディター内のリビジョン表示：上部タイムラインと右の履歴リスト
エディター内のリビジョン表示：上部タイムラインと右の履歴リスト
  • エディター内リビジョン画面にタイムライン型のピッカーと、投稿リビジョン一覧（語数・読了時間・作成者）が表示。自動保存もラベル付きで並び、自動保存通知から直接開けます。
  • URLに revision=ID が付くので、特定リビジョンへのリンクをそのまま共有できます（RC1「共有可能なリビジョン」）。従来のリビジョン画面へのリンクも残っています。

管理画面

ツールバーがどこでも見える、統一感のある管理画面へ

エディター内でも管理バーが常時表示になり、サイトエディターも自分の配色に。よく使う設定の置き場所も整理されました。

常設ツールバー（管理バー）と「戻る」ボタン

場所: 投稿エディター／サイトエディターの最上部

投稿エディター上部：管理バー（Ctrl+K 付き）と、その下の「＜」戻るボタン
投稿エディター上部：管理バー（Ctrl+K 付き）と、その下の「＜」戻るボタン
  • 投稿エディター・サイトエディターでも管理バーが常時表示。フロント→管理画面→エディター間の移動が一貫します（集中執筆モードでは非表示）。
  • エディター左上の「W」ロゴは廃止され、明確な「＜」戻るボタンに。サイトアイコンは管理バー側へ移動、アバターは円形、Dashicons は SVG アイコンに置き換え。管理バーにCtrl+K（コマンドパレット）ショートカットも表示されます。

管理画面の配色がサイトエディターにも適用

場所: ユーザー › プロフィール → 管理画面の配色 → サイトエディターに反映

配色「Ocean」を選んだユーザーのサイトエディター（管理バーも表示）
配色「Ocean」を選んだユーザーのサイトエディター（管理バーも表示）
  • これまで固定の黒だったサイトエディターのサイドバーが、プロフィールで選んだ配色（例: Ocean）に追従。エディター全体のコントラストも改善（#65382）。

サイトエディター「識別情報」画面

場所: 外観 › エディター（デザイン）→ 識別情報

デザインメニューに追加された「識別情報」と、その編集パネル
デザインメニューに追加された「識別情報」と、その編集パネル
  • サイトタイトル／キャッチフレーズ／サイトロゴ／サイトアイコンを、サイトエディターを離れずに1画面で設定。設定 › 一般やテンプレートを探し回る必要がなくなります。

コマンドパレットの改善

場所: Ctrl/⌘+K（管理バーからも起動可）

「最新」と「提案」に分かれたコマンドパレット
「最新」と「提案」に分かれたコマンドパレット
検索時は「結果」セクションに一致コマンドを表示
検索時は「結果」セクションに一致コマンドを表示
  • 結果が最新（最近使ったコマンド）／提案／結果のセクションに分かれ、最近使ったコマンドは設定に保存されてセッションをまたいで残ります。モーダル幅は512pxに拡大。

コメントの「返信先」を変更

場所: コメント › 編集 → 保存ボックス「◯◯ への返信」→ 親コメントを編集

コメント編集画面：親コメントの選択ドロップダウン
コメント編集画面：親コメントの選択ドロップダウン
  • 間違ったスレッドに付いたコメントを、同じ投稿内の別コメントの下へドロップダウンで付け替えできます。これまではDB直接編集が必要でした（別投稿への移動は不可）。

アクセシビリティ（コア45件・エディター43件）

場所: 管理画面全般

  • コアにアクセシブルなツールチップの共通機構が導入され、ログイン画面「ログイン状態を保存する」やメタボックスの並べ替えボタンで使用。
  • 投稿一覧の行ヘッダーがチェックボックスからタイトルに変更、固定ページの階層を支援技術に伝達、無題投稿は抜粋を表示、フォーカスリング2px以上に統一、管理配色のコントラスト改善、など。

開発者向け

API とアーキテクチャの主な変更

AI連携の土台である Abilities API、アイコン API、デザインシステムのテーマ設定が中心。エディターの iframe 化が完了します。

Abilities API の拡張

場所: PHP／REST

  • 実行ライフサイクルのフィルター: wp_pre_execute_ability（実行の短絡）／wp_ability_normalize_input／wp_ability_permission_result／wp_ability_execute_result。加えて wp_ability_validate_input / _output、wp_ability_invoked アクション。
  • 絞り込み: wp_get_abilities( ['category'=>…, 'namespace'=>…, 'meta'=>…] )、item_include_callback / result_callback、グローバルフィルター wp_get_abilities_item_include / wp_get_abilities_result。
  • 公開フラグ: 登録時の meta.public = true だけで REST／MCP アダプター／AI エージェントなど外部クライアントに公開（show_in_rest の個別指定が不要に）。JSON Schema はクライアント互換のために整形されます。

デザインシステムのテーマ設定（デザイントークン ＋ ThemeProvider）

場所: wp-theme スタイルシート／@wordpress/theme

  • CSS カスタムプロパティによるデザイントークン（例: --wpds-color-background-surface-neutral-strong）を含む wp-theme スタイルを、プラグインの依存として読み込み可能。
  • React の ThemeProvider（color.primary / background、cornerRadius など）で管理画面の一部領域をブランド色に。コントラストを保ったカラースケールを自動生成。

そのほかの開発者向け変更

場所:

  • 投稿エディターは常に iframe 内で動作（レガシーメタボックスがあっても）。Block API v2 以下のブロックは v3 への更新推奨。
  • サイトエディター画面を制御する4つの新フィルター（View Config）／DataViews で Shift+クリック範囲選択／エディター読み込み時の REST リクエストをプリロード（#65636）。
  • 投機読み込み（Speculative Loading）の既定設定を環境変数・定数で指定可能に。
  • jQuery UI 1.14.2 に更新／KSES が <dialog autofocus> と invoker command 属性を許可／notify_post_author フィルターが承認状態チェックの後に最終決定権を持つように／テンプレートに日付フィールド追加（#65049）／マルチサイトの URL サイドロードにアップロード上限を適用（#65517）。
  • Connectors 画面でユーザー名＋アプリケーションパスワードによる認証に対応。

7.1 に入らなかったもの

見送り

7.1 に入らなかったもの

  • リアルタイム共同編集 — Gutenberg プラグインで継続。保存方式や競合処理を検討中。
  • React 19 へのアップグレード — 7.1 以降に延期。Gutenberg で実験継続。
  • 「この日の投稿」ダッシュボードウィジェット — ベータで検討されたが最終的に見送り（Trac #65801）。
  • Unicode メールアドレス対応 — ベータ中に取り下げ、コミュニティプラグインで検証継続。
  • クラシックブロックのインサーター非表示 — 提案は取り消され、引き続き利用可能。
  • Knowledge／Guidelines、Design System Theming のマージ提案 — 一部の基盤のみ導入、本体は継続審議。

参考にした一次情報

出典

参考にした一次情報

最新の記事

その他の記事