WordPress 7.1 を操作する上で「これだけはおさえておきたい」変更・新機能まとめ

WordPress 7.1 がリリースされまして、様々な変更や新機能が追加されました。このページでは、普段から WordPress を使っている方が「知っておくと便利」「これなら使ってみたい」と思えるものを中心にピックアップして紹介します。

「後でいいんじゃない？」と思う内容や、比較的開発者向けの内容は、あえて除外しています。

リリースの全容が知りたい場合は、公式サイトのドキュメントをご参考ください。

WordPress 7.1 “Mary Lou” – WordPress Newswordpress.org

エディター関連

タブブロックの追加

タブ切り替えコンテンツを作成するときに役立ちます。X でもポストしたのですが、当社製品の Nishiki Pro や Hakoniwa にもかなり前からタブブロックがあるんですが、コアにも似たようなことができるブロックが実装されました。

7.1 から使える予定のタブブロックを試してみた。自社製品（Nishiki Pro や Hakoniwa）ではもう随分前からあるブロックで、コア実装される形になると。タブの追加・削除、コンテンツの切り替え、カラー適用など、基本的な操作を確認 pic.twitter.com/mpo1m8Slqb
— Imamura (@s56bouya) August 18, 2026

サンプル

プレイリストブロックの追加

Podcast とかで過去配信したものをプレイリストにする、とか使えそうですかね。トラックの追加やリストの並び替えもできます。

サンプル

音声素材はフリー、商用利用無料、クレジット表記・リンク不要の効果音ラボさんで配布されているものを使用しました。ありがとうございます！

↓の再生ボタンを押すと音声が流れます。

プレイリストブロックを選択し、サイドバー（インスペクター）から次のような全体の設定ができます。

トラックリストを表示
トラックリストにアーティスト名を表示
トラックリストにトラック番号を表示
トラックリストにトラックの番号を表示
トラックリスト画像を表示
再生ボタンにトラック画像を表示

プレイリストトラックを個別に選択し、サイドバー（インスペクター）から次のような情報編集もできます。

アーティスト
アルバム
タイトル
トラック画像

背景画像とグラデーションを重ねられるようになった

X のポストではグループブロックで試してみましたが、WordPress 7.1 で背景画像とグラデーションの両方指定した場合の CSS の出力の仕方が変わったため、重なる表現が可能になりました。（対応しているコアのブロック：グループ／アコーディオン／プルクオート／コンテンツ／引用）

以前は、背景画像とグラデーション、両方設定しても背景画像のみ表示されていました。

WordPress 7.1-RC4 を触っているんだけど、背景画像とグラデーションを併せて指定した際に重なるようになった。これまでは併せて指定しても背景画像が勝っていたので CSS の出力を変えた、って感じやね pic.twitter.com/7j2jYwFMUo
— Imamura (@s56bouya) August 18, 2026

サンプル

「最小幅」の指定が可能に

グループブロックで試しました。他のブロックでもできるのかな？まだ調べきれてないので、詳しい方は情報提供ぜひ・・・！

7.1 から使える予定のブロックの最小幅の設定を試してみた。前からあった最小高さと同じような調子で設定できることを確認 pic.twitter.com/SUiVdbAvvK
— Imamura (@s56bouya) August 18, 2026

カスタム HTML ブロック内で編集可能なブロックを操作できるようになった

カスタム HTML ブロック内に編集可能なブロックがあった際、カスタマイズしやすくなったと思います。ただし、ブロックの移動／削除はできません（他にもできないことあるけど、一部だけ紹介）。

WordPress 7.1-RC4 を触っているんだけど、カスタム HTML ブロック内で編集可能なブロックを操作できるので試した。
動画は段落ブロックを編集している様子で、ブロックスタイルの適用もできる。サイドバーから、どのブロックが編集できるのか、エディター内から辿るよりかは比較的わかりやすい pic.twitter.com/fg8aosTDu9
— Imamura (@s56bouya) August 18, 2026

サイドバー（インスペクター）から編集可能なブロックが見つけやすくなっていることもポイントですね。

ちなみに、公式ドキュメントには以下のような文があります。

This also makes block markup a friendlier target for AI tools: a model can generate one Custom HTML block mixing arbitrary markup with editable slots — no custom block, no build step — and the output is immediately safe to edit.

↑を Google 翻訳で和訳しても意味がわかるようでわからなかったんですが、例えば AI で生成したコードの中に、ブロックエディターの作法に沿ったもの、そうでないものが混在していた場合でも、直感的な編集が可能な箇所があるだけでも結構助かりますし、編集が可能だとしても、移動／削除はできないので HTML 構造を壊しづらいメリットもあるな、と思いました。

グローバルスタイル

レスポンシブスタイル

レスポンシブスタイルを活用すると、デスクトップ／タブレット／モバイルそれぞれでスタイルの指定ができます。

WordPress 7.1-RC4 で使えるレスポンシブスタイルを試してみた。動画では、まずレスポンシブスタイルを ON にして、デスクトップ、タブレット、モバイルそれぞれでフォントサイズを指定後、レスポンシブスタイルを OFF。で、ビューポートをプレビューして変化を確認。個人的に嬉しい機能の一つ pic.twitter.com/eXknHe7uvd
— Imamura (@s56bouya) August 18, 2026

さらに、次の画像のように、サイトエディターから「スタイル」→「ブロック」を選択し、任意のブロックスタイルを選ぶと・・・「状態」が追加され、ビューポートの選択が可能になっています。

投稿や固定ページ単位だけではなく、サイト全体で使用するブロックに対して、レスポンシブスタイルの適用ができるので、大きな機能追加だなと思います。

しかしこのレスポンシブスタイル、便利ではあるけど、サイト管理が煩雑になる原因にもなりそうですよね。

例えば「タブレットの時に表示するボタンブロックのフォントサイズは小さくしとこう」とか、カジュアルに設定したとするじゃないですか。

そして、時は経ち・・・そんなカジュアルに設定したことなんて忘れて当然じゃないですか。で「あれ？なんでタブレットの時だけボタンブロックのフォントサイズ小さいんだ？どこかで設定したっけ？」なんてことが起こりそうです。

なので、きっちり管理するのであれば、現時点では「どのブロックに、いつ、どれくらいの範囲でどのスタイルを指定したのか」を把握しておく必要がありそうです。

ビューポートのカスタマイズ

構築するウェブサイトによってブレークポイントを変えたい、なんて要望はよくあります。そんな時に役に立ちますね。いい機能だなと思いました。

WordPress 7.1 で導入予定のビューポイントのカスタマイズを試してみた。公式ドキュメントを参考に、タブレット時 45rem、モバイル時 30rem を theme.json に追記。
レスポンシブスタイルとも連動している。これは強い機能・・・覚えといた方がいいな pic.twitter.com/gUCmLoVdNz
— Imamura (@s56bouya) August 18, 2026

擬似要素のスタイル適用が可能に

今のところ、ボタンブロックとナビゲーションリンクブロックに限定されますが、擬似要素にスタイル適用できるようになりました。

まとめると、次のことが可能です。

theme.json 内で :hover、:focus、:focus-visible、:active のようにコロン(:)接頭辞付きのプロパティとして定義可能
7.1 でできるようになったレスポンシブスタイル(@mobile や@tablet)の中に入れ子にすることも可能
ブロックインスタンス単位でも、style 属性内に同様の構造で個別指定が可能

擬似要素のスタイル適用は前からできていて、例えば、今まで当社開発の公式ディレクトリ掲載のブロックテーマ Hakoniwa では、theme.json の styles.elements に次のように擬似要素を指定していました。

"button": {
 ":hover": {
  "color": {
   "background": "color-mix(in srgb, var(--wp--preset--color--primary) 80%, #222)"
  }
 }
}

出力される CSS セレクタは次のようになります。

:root :where(.wp-element-button, .wp-block-button__link){

これが、WordPress 7.1 からは次のように theme.json の styles.blocks で指定できるようになった、ってことです。

"core/button": {
 ":hover": {
  "color": {
   "background": "color-mix(in srgb, var(--wp--preset--color--primary) 80%, #222)"
  }
 }
}

出力される CSS セレクタは次のようになります。.wp-block-button .wp-block-button__linkに適用されるので、違いがハッキリしてますね。

:root :where(.wp-block-button .wp-block-button__link){

この擬似要素は、ブロックインスタンスの style 属性にも指定できます。「ブロックインスタンス」って、あまり見慣れない字面だと思う方もいると思いますが・・・例えば、ブロックエディターでコードエディターを表示し、ボタンブロックに対して次のように擬似要素に関するコードを追加できるよ、ってことです。

<!-- wp:button
{
    "style": {
        ":hover": {
            "color": {
                "background": "var:preset|color|contrast"
            }
        }
    }
}
-->

なので、ブロックインスタンス単位、つまりブロック単位で個別に指定できるってことですね。

さらに、次の画像のように、サイトエディターから「スタイル」→「ブロック」を選択し、ボタンのブロックスタイルを選ぶと「状態」の中に「擬似状態」の設定が追加されています。（あえて日本語に訳さず hover とか active にするか、hover:ホバーとか併記するほうがいい気がしますが・・・）

グローバルスタイルで擬似状態の存在確認できたのは、いまのところボタンブロックのみでした

Custom style states

ナビゲーションリンクブロックのみ限定ですが、現在表示しているページのリンクのスタイルを theme.json で以下のように -current をつけることで指定できます。

以下は公式ドキュメントに掲載されているコードです。

"styles": {
	"blocks": {
		"core/navigation-link": {
			"-current": {
				"color": {
					"text": "var:preset|color|contrast"
				},
				":hover": {
					"color": {
						"text": "var:preset|color|accent-1"
					}
				}
			}
		}
	}
}

text-shadow

theme.json でテキストにシャドウを入れる text-shadow が指定できるようになりました。

以下は公式ドキュメントに掲載されているコードです。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"styles": {
		"typography": {
			"textShadow": "1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue"
		},
		"blocks": {
			"core/paragraph": {
				"typography": {
					"textShadow": "1px 1px 2px red, 0 0 1em red, 0 0 0.2em red"
				}
			}
		},
		"elements": {
			"link": {
				":hover": {
					"typography": {
						"textShadow": "none"
					}
				}
			}
		}
	}
}

ブロックのインスペクターを使った直感的な操作、ブロックインスタンスからの設定、theme.json のプリセットの設定、使用可能ブロック（段落／見出しが先行予定）は今後対応予定とのことです。