WordPress 5.9は当初2021年12月14日にリリースされる予定でした。未解決の問題がいくつか残っているため、最終リリース日程は遅れており、現在のリリース予定は2022年1月25日となっています。

WordPress 5.9は「何が違うのか」を一言で言うと、フルサイト編集（FSE）です。

そして、WordPress 5.9の機能の大半はフルサイト編集に対応したテーマでないと利用できません。その一例が、最新のデフォルトテーマである「Twenty Twenty-Two」です。

新しいWordPressデフォルトテーマ「Twenty Twenty-Two」のプレビュー
新しいWordPressデフォルトテーマ「Twenty Twenty-Two」のプレビュー（画像引用元: WordPress.org)

WordPress 5.9では、Gutenbergのロードマップにおける二つ目のフェーズの中心である、カスタマイズフェーズに突入します。このフェーズでは、フルサイト編集、ブロックパーン、ブロックディレクトリ、ブロックベースのテーマに重きを置いています。

来月リリースされるWordPress5.9は、Gutenbergのカスタマイズフェーズにおける「MVP（Minimum Viable Product：実用最低限の製品）」とでも言うべき段階です。

こちらの2021 State of the Wordにおけるマット・マレンウェッグ氏の発言は、これからリリースされるWordPress5.9の主要な機能を端的に表しています。

Gutenbergのロードマップ
Gutenbergのロードマップ（画像引用元: Matt Mullenweg: 2021 State of the Word)

とは言え、この2022年最初のWordPressのアップデートではどのような機能が利用できるのでしょうか？

詳しく見ていきましょう。

theme.json用のグラフィカルインターフェース「グローバルスタイル」

2021年のWordPress 5.8のリリースに伴い、テーマ開発者がエディタの設定やスタイルをカスタマイズするのに、theme.jsonファイルを編集する手法が標準的となりました。

WordPress 5.9ではさらに一歩進んで、グラフィカルインターフェースの導入により、サイトのスタイルのプリセット（サイト共通、およびブロック毎）を、コードを一切使用せずにカスタマイズできるようになりました。

グローバルスタイルの仕組みにより、これまで慣れ親しんできたサイトの外観の変更方法が大きく変わるでしょう。これは、グローバルスタイルがWordPressサイトデザインの複数の側面に影響を及ぼすからです。

まず、グローバルスタイルインターフェースはカスタマイザーの代わりに導入されたもので、今後はこちらがブロックテーマにおける設定やスタイルを変更する唯一の手段となります。同じく、複雑なテーマ設定画面は今後必要なくなります。テーマの設定とスタイルの編集方法の新たな標準となり、テーマ開発のワークフローが効率的になるでしょう。

グローバルスタイルの導入により、個別のページや投稿毎だけでなく、サイト全体、もしくはブロックタイプ毎により細かにサイトの外観を調整できるようになります。

サイトエディタにサイドバーが追加されており、その上部にちいさなプレビューパネルと4つの項目が次の順番で表示されます。

今後新たな項目も追加されると思われます。

Automattic社によるテーマ「Blockbase」のグローバルスタイルサイドバー
Automattic社によるテーマ Blockbase のグローバルスタイルサイドバー

新しいインターフェースをもう少し詳しく見ていきましょう。

Style Preview

グローバルスタイルサイドバーの最初の要素はプレビューパネルです。こちらのパネルでは、編集の結果を確認することができ、サイトエディタでは見えない要素を変更した場合に特に便利です。

次の画像では、3つのスタイルの組み合わせを比較しています。

グローバルスタイルのプレビュー（比較）
グローバルスタイルのプレビュー（比較）

Typography

「Typography」パネルでは、サイトのフォントを編集できます。もちろん、このパネルで設定できる内容はtheme.jsonの設定によって異なります。

例えば、テーマ「Twenty Twenty-One Blocks（TT1 Blocks）」では、次のフォントに関するプロパティが宣言されています。

"settings": {
	"typography": {
		"customLineHeight": true,
		"fontSizes": [],
		"fontFamilies": []
	}
}

次の画像は、上記コードが反映されたグローバルスタイルサイドバーの「Typography」設定画面です。

「TT1 Blocks」グローバルスタイルの「Typography」設定
「TT1 Blocks」グローバルスタイルの「Typography」設定

もう少し深掘りして、テーマ「TT1 Blocks」でfontFamiliesがどのように定義されているか見てみましょう。

"fontFamilies": [
	{
		"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
		"slug": "system-font",
		"name": "System Font"
	},
	{
		"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
		"slug": "helvetica-arial"
	},
	{
		"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
		"slug": "geneva-verdana"
	},
	{
		"fontFamily": "Cambria, Georgia, serif",
		"slug": "cambria-georgia"
	},
	{
		"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
		"slug": "hoefler-times-new-roman"
	}
]

これらのフォントファミリーをグローバルスタイルのプレビューパネルで確認できます。

「Twenty Twenty-One Blocks」で利用可能なフォントファミリー
「Twenty Twenty-One Blocks」で利用可能なフォントファミリー

Colors

「Colors」では、カラーパレットの閲覧、編集と、いくつかのサイト要素の色の編集ができます。

「Twenty Twenty-One Blocks」の「Colors」パネル
「Twenty Twenty-One Blocks」の「Colors」パネル

これらの要素をクリックすると、3つのカラーパレットから色を選べる新たなパネルが開きます。カラーパレットは「Core」「Theme」「Custom palette」の3つです。（詳細はデフォルトカラー、テーマカラー、カスタムカラーをご覧下さい）

「Twenty Twenty-One Blocks」の「Color」設定
「Twenty Twenty-One Blocks」の「Color」設定

こちらのパネルでは、選択中の要素の色の設定や変更ができます。

グローバルスタイルでリンクの色を変更
グローバルスタイルでリンクの色を変更

Layout

最後の項目はレイアウトの編集用です。共通（グローバル）設定では、サイトコンテナに限定されます。

「Twenty Twenty-One Blocks」の「Layout」設定
「Twenty Twenty-One Blocks」の「Layout」設定

Blocks

グローバルスタイルの導入により、段落（「typography」、「colors」）、ボタン（「layout」）、カラム（「colors」、「layout」）など、特定のブロックの外観の変更もできるようになりました。

ブロックのスタイルをグローバルスタイルインターフェースからカスタマイズできるのは、ブロックが対応するblock.jsonファイルで特定の機能のサポートを宣言している場合のみなのでご注意下さい。例えば、core/post-titleブロックは現在次のスタイルをサポートしています。

"supports": {
	"align": [ "wide", "full" ],
	"html": false,
	"color": {
		"gradients": true,
		"link": true
	},
	"spacing": {
		"margin": true
	},
	"typography": {
		"fontSize": true,
		"lineHeight": true,
		"__experimentalFontFamily": true,
		"__experimentalFontWeight": true,
		"__experimentalFontStyle": true,
		"__experimentalTextTransform": true,
		"__experimentalLetterSpacing": true,
		"__experimentalDefaultControls": {
			"fontSize": true,
			"fontAppearance": true,
			"textTransform": true
		}
	}
},

core/post-title ブロックは、「colors（色）」「spacing（余白）」「typography（フォント）」をサポートしているため、記事タイトルのブロックのグローバルスタイルの設定では対応した項目の設定が可能です。

次の画像は「typography」の設定画面で、上記のコードをサポートしていることが分かります。

記事タイトルの「typography」設定を編集
記事タイトルの「typography」設定を編集

なおWordPress 5.9はグローバルスタイルインターフェース導入の第一段階に過ぎません。Matias Ventura氏が指摘しているとおり、この新しい編集機能は今後さらに発展することが予想されます。

将来的には、個別のスタイルを全体に適用できるようなフローがシステムに組み込まれるでしょう。例えば、ボタンブロックに変更を加えた後に、そのタイプのボタン全てに同じ変更を適用できるといった具合です。

このように、大きな改善が近いうちに見られるかもしれません。次の画像は将来的な機能の一例です。

将来的にはリンクの状況毎に色を指定できるように
将来的にはリンクの状況毎に色を指定できるように（画像引用元 : GitHub)

他にも、別のカラーパレットの利用や複数のグローバルスタイルのバリエーションなどのテーマに関する新機能の改善が適用される可能性があります。

グローバルスタイルの仕組みについてもっと詳しく知りたい開発者の方は、グローバル設定とスタイル（theme.json）というサポート記事をご覧下さい。「Twenty Twenty-TwoとWordPressのブロックテーマを徹底解説」でも追加で例をご紹介しています。

ナビゲーションブロック

ナビゲーションブロックは「最もインパクトのあるテーマブロック」と言われており、私たちも同感です。

このブロックはしばらく開発途上の段階でした（ナビゲーションブロックの追問題ログ、問題ログi2もあわせてご覧下さい）。しかし、WordPress 5.9で避けることのできない、未解決の問題点とバグが全て解決された今、WordPress 5.9に組み込まれたこの非常に便利な機能をようやく使えるようになりました。

ナビゲーションブロックインターフェースの概要

新しいブロックを初めて利用する際は戸惑うかもしれませんが、一度慣れてしまえば、非常に便利に感じるでしょう。

ナビゲーションブロックのプレースホルダー
ナビゲーションブロックのプレースホルダー

ナビゲーションブロックを追加すると、ブロックのプレースホルダーに「既存のブロックベースのメニューを選択する」、「全てのページを含むメニューを作成する」、「メニューを一から作成する」という3つの選択肢が表示されます。

既存のナビゲーションメニューを選択
既存のナビゲーションメニューを選択

新しいナビゲーションメニューでは、従来のテーマで利用できる「外観」＞「メニュー」画面から作成したメニューをインポートすることもできます。

そのため、従来のテーマからブロックテーマへ移行した場合でも、既存のメニューを一から作り直す必要はありません。従来のメニューの内から利用したいものを選ぶだけで、自動的にブロックベースのナビゲーションメニューに変換されるのです。

従来のメニューを選択
従来のメニューを選択

ナビゲーションブロックはページの好きなところに自由に配置できます。例えば、長文記事では、目次を作成し、訪問者が特定の章に直接ジャンプできるようにするといいかもしれません。

ナビゲーションメニューにアンカーリンクを追加
ナビゲーションメニューにアンカーリンクを追加

新しいナビゲーションリンクは、メニューに既に他の種類のブロックが追加されていない限り、右側の+のアイコンをクリックするとナビゲーションブロックにすぐに追加できます（Gutenberg 11.7 のリリースノートも合わせてご覧ください）。

ナビゲーションリンクが表示されたナビゲーションブロックのアペンダー
ナビゲーションリンクが表示されたナビゲーションブロックのアペンダー

ナビゲーションリンクブロックにあるツールバーの「編集」ボタンをクリックすると、メニューアイテムをカスタムリンクに変換できます。これによりアイテムを個別に追加、編集、並び替え、削除することが可能です。

ナビゲーションメニューを個別のページリンクに変換
ナビゲーションメニューを個別のページリンクに変換

ブロックのツールバーの「Transform」ボタンをクリックするとリンクをブロックに変換することもできます。これにより特定のブロックを直接ナビゲーションメニューに追加することができます。

ナビゲーションリンクをブロックに変換
ナビゲーションリンクをブロックに変換

ブロックをナビゲーションメニューに追加するとカスタムリンク、スペーサー（空白）、サイトロゴ、ホームへのリンク、SNSアイコン、検索ブロックが訪問者に表示されます。

設定のサイドバーからはナビゲーションメニューに関するいくつかの要素を編集することができます。

レイアウトパネルでは「justification（配置）」、「orientation（方向）」、「wrapping（折り返し）」の設定が可能です。

ナビゲーションブロックのレイアウト設定
ナビゲーションブロックのレイアウト設定

また、ナビゲーションブロックには改良された表示設定パネルが備わっており、ハンバーガーメニューを常時表示する設定ができます。

ナビゲーションブロックの改良された表示設定パネル
ナビゲーションブロックの改良された表示設定パネル

メニューとサブメニューのテキストと背景の色も変更できます。

ナビゲーションブロックの色の設定
ナビゲーションブロックの色の設定

ナビゲーションブロックに最近追加されたもう一つの便利な機能はブロックギャップです。これを使って、メニューアイテムの間隔を調整できます。

ナビゲーションブロックのブロックの間隔調整
ナビゲーションブロックのブロックの間隔調整

「Typography」パネルでは「font family（フォントファミリー）」、「appearance（書体）」、「line height（行の高さ）」、「decoration（装飾）」、「letter case（大文字/小文字）」の設定ができます。これらの設定は全て、右側の三点リーダーをクリックすると表示されるドロップダウンメニューからオンオフ切り替えられます。

ナビゲーションブロックの「typography」設定
ナビゲーションブロックの「typography」設定

ナビゲーションブロックの仕組み

ナビゲーションブロックのデータはwp_navigationの専用の投稿タイプを用いてデータベースに保存されています。

これにはどのような利点があるのでしょうか？またその仕組みはどのようになっているのでしょうか？

仮に、二つのカスタムリンクと検索ボックスで構成されたナビゲーションメニューを作成したとします。Twenty Twenty-Twoがインストールされている場合、次の画像のようなメニューが表示されます。

ナビゲーションブロックの一例
ナビゲーションブロックの一例

上記のナビゲーションブロックは次のようなwp_navigation投稿タイプとしてデータベースに保存されています。

<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->

<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

データベースにナビゲーションブロックのコンテンツを保存することで、異なるブロックテーマ間で同じナビゲーションメニューを使用することができます。メニューがすぐに表示されない場合は、メニューセレクターから好きなナビゲーションメニューを選びましょう（#36087とPR #36178もご覧下さい）。

次の画像は、上記メニューをTwenty Twenty-One Blocksで使用した例です。

Twenty Twenty-One Blocksでメニューを選択
Twenty Twenty-One Blocksでメニューを選択

ナビゲーションブロックはこれまで何度も改良されてきました。詳しい実装に関する説明はGutenberg 11.7、11.8、11.9のリリースノートでご覧頂けます。

また、新しいナビゲーションブロックに関する開発者メモとナビゲーションブロックに関するサポート記事でもナビゲーションブロックの詳しい説明をご覧頂けます。

画像ギャラリー、アイキャッチ画像、サイトアイコン

様々なコンテクストでの画像の挙動に一貫性を持たせるために、WordPress 5.9ではいくつかのブロックに関する新機能や改良が加えられました。ギャラリーブロックは完全に見直され、アイキャッチ画像とサイトアイコンブロックの改良により、それぞれの画像をより細かく調整できるようになりました。

リファクタリング型ギャラリーブロック

WordPress 5.8では、ギャラリー内の画像の外観を調整する手段は限られていました。画像のスタイルを変更したり、デュオトーンフィルターを適用したりすることはできませんでした。

さらに、ギャラリー内の個別の画像へのリンク追加など、重要な機能が欠けていました。

単一の画像とギャラリー内の画像という、二つの異なるコンテクストでの画像間の挙動の不一致について、その理由を理解しやすいように、ギャラリーブロックをWordPress 5.8のコードビューで見てみましょう。

WordPress 5.8のコードビューで見たギャラリーブロック
WordPress 5.8のコードビューで見たギャラリーブロック

画像情報は、ギャラリーブロックのデリミタ内にしか保存されません（「Gutenbergブロックとは？」も合わせてご覧下さい）。

WordPress 5.8のギャラリーブロックを検証
WordPress 5.8のギャラリーブロックを検証

これにより、個別の画像はギャラリーの画像とは異なる挙動をしていました。

二つの異なるコンテクストで画像が一貫性をもった挙動をするよう、WordPress 5.9では完全リファクタリング型のギャラリーブロックが導入されました。これは、整頓されていない画像の一覧ではなく、図形要素の集合のためのコンテナのような挙動をします。

WordPress 5.9では、ギャラリー画像はコアのinnerBlocksAPI を使ってネストされ、それぞれの画像には、個別の画像と全く同じように、独自の情報が格納されます。

WordPress 5.9のコードビューで見たギャラリーブロック
WordPress 5.9のコードビューで見たギャラリーブロック

これは大変嬉しい改良です。ギャラリーブロックの画像が、コアの画像ブロックで利用可能な機能と同じものに対応するようになったのです。そこには画像の寸法やデュオトーンフィルターや、ドラッグ＆ドロップ、コピー、複製、削除など従来のブロックの機能も含まれます。

WordPress 5.9のギャラリーブロックを検証
WordPress 5.9のギャラリーブロックを検証

新しいギャラリーブロックでは、画像のスタイルを個別に調整できます。これにより幅広いカスタマイズができるようになります。

次のスクリーンショットは、それぞれ別の種類の角の丸みを施した、同じギャラリー内の複数の画像の例です。

新しいギャラリーブロックが、個々の画像ブロックのラッパーとして機能
新しいギャラリーブロックが、個々の画像ブロックのラッパーとして機能

また、同じギャラリー内の複数の画像に、それぞれ異なるデュオトーンフィルターを適用することもできます。

同じギャラリーブロック内の二つの画像に異なるデュオトーンフィルターを適用
同じギャラリーブロック内の二つの画像に異なるデュオトーンフィルターを適用

そしてもちろん、個別の画像に特定のCSSクラスを割り当てることも可能です。これにより、ギャラリー内の画像をさらに自由にカスタマイズすることができます。

新たなギャラリーブロックについて詳しく知りたい方はギャラリーブロックのリファクタリングに関する開発者メモ、次のギャラリーブロックの改良、Gutenberg 11.4のリリースノートもご覧下さい。

アイキャッチ画像の改良

アイキャッチ画像のブロックにもいくつかの改良が加えられました。

基本寸法の設定

アイキャッチ画像のブロックには、高さ、幅、スケールの設定ができる新たな寸法設定パネルが搭載されました。

アイキャッチ画像の寸法パネル
アイキャッチ画像の寸法パネル

寸法の設定は、次の画像のとおり、クエリーループブロックのアイキャッチ画像にも適用されます。

クエリーループブロックのアイキャッチ画像の寸法
クエリーループブロックのアイキャッチ画像の寸法

アイキャッチ画像にデュオトーンフィルターを適用

新しいレファクタリング型のギャラリーブロックに含まれる画像にデュオトーンフィルターを適用できるようになったことは、先ほど触れたとおりです。

さらに、WordPress 5.9では、投稿や固定ページのテンプレートからクエリーループブロックまで、あらゆるコンテクストのアイキャッチ画像のブロックに、デュオトーンフィルターを適用することができるようになりました。

クエリーループブロックのアイキャッチ画像にデュオトーンフィルターを適用
クエリーループブロックのアイキャッチ画像にデュオトーンフィルターを適用

この新機能によって、サイト全体のデザイン性を高め、配色の一貫性を保つことができるようになりました。

サイトロゴの画像トリミング

WordPress 5.9（Gutenberg 11.6）以前は、ロゴ画像はアップロードする前にしか編集できませんでした。WordPress 5.9では、ブロックのツールバーから直接サイトロゴのブロックで使用されている画像をトリミング、拡大、回転することができます。

サイトロゴ画像を編集
サイトロゴ画像を編集

新たなデザイン機能、ブロック、UIの改良

WordPress 5.9本体には11ものGutenbergのバージョンが統合されており、数多くの機能、改良、バグの修正が加えられました。そのため、一つの記事の中でその全てをご紹介することは不可能です。

そこで、私たちがもっとも重要だと思うものを厳選しご紹介します。この機能や改良に関してより詳しく知りたい方は、Gutenberg 10.8、10.9、11.0、11.1、11.2、11.3、11.4、11.5、11.6、11.7、11.8、11.9のリリース記事をご覧下さい。

この章では、次の変更点について解説します。

枠線（ボーダー）サポートUI

WordPress 5.9から、theme.jsonでborder設定を宣言し、ブロックが「ブロックサポート」APIを介して枠線（ボーダー）への対応を宣言している時、枠線の角の丸み、幅、スタイル、色、そして単位の設定に関する設定パネルが利用できます。

コアグループブロックが、この便利なUIの改良を示した好例です。グループブロックのblock.jsonファイルに次のsupports宣言が含まれるようになりました。

{
	...
	"supports": {
		"align": [ "wide", "full" ],
		"anchor": true,
		"html": false,
		"color": {
			"gradients": true,
			"link": true
		},
		"spacing": {
			"padding": true,
			"__experimentalDefaultControls": {
				"padding": true
			}
		},
		"__experimentalBorder": {
			"color": true,
			"radius": true,
			"style": true,
			"width": true,
			"__experimentalDefaultControls": {
				"color": true,
				"radius": true,
				"style": true,
				"width": true
			}
		},
		...
	},
	...
}

この機能により、サイトに簡単に美しいデザインを施せるようになりました。新テーマ「Twenty Twenty-Two」でこれを確認することができます。

新しい投稿または固定ページで、新規のグループブロックを作成し、選択します。ブロックの設定サイドバーに「Border」パネルが表示されます。枠線の幅やスタイルを自由に変更してみましょう。

Twenty Twenty-Twoでグループブロックの枠線設定を変更
Twenty Twenty-Twoでグループブロックの枠線設定を変更

ご自身の作成するテーマにこの機能を活用したい方（開発者）は、theme.jsonファイルを開き、次の通り、枠線のサポートを宣言してみてください。

{
	"version": 1,
	"settings": {
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		}
	}
}

ファイルを保存しWordPressの管理画面に戻ります。新しい投稿もしくは固定ページで新規のグループブロックを作成、選択します。ブロックの設定サイドバーに「Border」パネルが表示されているはずです（こちらのtheme.jsonのテストもご覧下さい）。

リスト表示の改良

WordPress 5.9ではリスト表示が改良され、ドラッグ＆ドロップ、セクションの折りたたみ、アンカーリンクの機能が追加されました。

リスト表示のドラッグ＆ドロップ

プルリクエスト#33320に示されているとおり、リスト表示にドラッグ＆ドロップ機能が実装されたものの、性能の問題により無効になっていました。

WordPress 5.9より、リスト表示のドラッグ＆ドロップ機能が再度実装され、再びリスト表示内でブロックやブロックのグループをドラッグ＆ドロップで自由に移動できるようになりました。これによりエディタが非常に便利になり、ページ内のブロックやブロックのグループを簡単に移動できるようになりました。長文記事や長いページの作成や、ネストしたブロックの複雑な構造を操作するのにも大変便利です。

リスト表示のドラッグ＆ドロップ機能
リスト表示のドラッグ＆ドロップ機能

リスト表示のセクションの折りたたみ

リスト表示に関するもう一つの大きな改良は、ネスト型ブロックのセクションを折りたたみ、展開できる機能の追加です。これにより該当のブロックのグループだけ展開し、残りは折りたたんだままにできるため、複雑なブロックの構造でも簡単に扱えます。

リスト表示のセクションは左右の矢印で折りたたみ／展開できます。

展開したブロックのグループ
展開したブロックのグループ

リスト表示のアイテムへのアンカーリンク

もう一つの改良として、リスト表示内のブロックにアンカーリンクを追加し、一目で確認することができる機能が追加されました。

リスト表示のアンカーリンク
リスト表示のアンカーリンク

ブロックの余白調整

Gutenberg 11.4ではじめて導入され、WordPress 5.9ではコアに統合された新機能であるブロックの余白調整は、ブロック内のアイテムの距離を自由に設定できるというものです。次の画像は、デフォルトテーマ「Twenty Twenty-Two」のカラムブロックで異なるブロックの余白を設定した例です。

WordPress 5.9でカラムブロックの余白を調整
WordPress 5.9でカラムブロックの余白を調整

余白の設定は、最初のうちは、ボタン、画像、カラム、タイトル、ナビゲーションなど、特定のブロックのみで利用可能です。しかし将来的には他のブロックにも適用されるでしょう。

テーマのtheme.jsonの「appearanceTool」プロパティを用いて余白の設定を有効にする必要があります。外観に関するツールについて詳しく知りたい方はTwenty Twenty-Twoの徹底解説記事をご覧下さい。また、プルリクエスト#33991、#34630も合わせてお読みください。

リッチURLプレビュー

新しいREST url-detailsエンドポイントを活用し、リンク先のリソースの情報を表示するリッチURLプレビューが利用できるようになりました。

投稿エディタのリッチURLプレビュー
投稿エディタのリッチURLプレビュー

最初の実装の際、この機能は投稿エディタのrichtextコンポーネントでしか利用できませんでした。この記事の執筆時点では、サイトエディタでも利用可能となっていますが、ナビゲーションエディタとウィジェットエディタでは利用できません。

リンクのポップアップからページを作成

WordPress 5.9では改良されたインラインリンクUIも実装されており、インラインリンクのポップアップから直接新規ページを作成できるボタンが追加されました。この機能が利用できるのは投稿エディタ内のみです。

WordPress 5.9に実装された新たなインラインリンクUI
WordPress 5.9に実装された新たなインラインリンクUI

検索ブロックの改良

検索ブロックのボタンと色の設定が新たに追加されました。

検索ブロックの色の設定
検索ブロックの色の設定

背景とテキストの色と枠線の色と角の丸みも調整できるようになりました。

検索ブロックの枠線の色と角の丸みの設定
検索ブロックの枠線の色と角の丸みの設定

ブロックの寸法についての新たな設定

ページ上でブロックが占めるスペースを指定する新たな寸法の設定パネルが利用できるようになりました。パネルには高さ、幅、余白、マージン、配置の設定が含まれますが、全てのブロックでこれら全ての属性の設定ができるわけではありません。

WordPress 5.9でのグループブロックの余白設定
WordPress 5.9でのグループブロックの余白設定

ブロック開発者の方はGitHubで公開された<DimensionControl />コンポーネントを利用することができます。ただし、こちらはまだ試験的な機能であり、大きな変更が加えられる可能性もあるのでご注意ください。

ウィジェット設定画面に追加されたウィジェットグループブロック

ブロックベースウィジェットエディタで新たなウィジェットグループブロックが利用できるようになりました。このブロックでは、従来のテーマのウィジェットエディタとカスタマイザーのウィジェットにタイトル付きのブロックグループを追加できます。

「Twenty Twenty-One」のウィジェットグループブロック
「Twenty Twenty-One」のウィジェットグループブロック

ウィジェットエディタに関する詳細は「ブロックベースウィジェットエディタとカスタマイザーのブロックウィジェット」をお読みください。

フレックスレイアウトと新しい行ブロック

Gutenberg 11.2で試験的な機能として導入されたフレックスレイアウトは、ソーシャルリンクやグループブロックなどいくつかのブロックにも適用されるようになりました。

ソーシャルリンクブロックなど複数ブロックに、フレックスレイアウトを編集できる、設定用ツールバーとサイドバーが表示されるようになりました。

ソーシャルリンクブロックのツールバーによるレイアウト設定
ソーシャルリンクブロックのツールバーによるレイアウト設定

この機能は、Gutenberg 11.5で新たに追加されたグループブロックであるナビゲーションブロックと行ブロックでも利用できます。

次の画像は行ブロックに表示されたレイアウト設定のサイドバーです。

新たに追加された行ブロックのレイアウト設定
新たに追加された行ブロックのレイアウト設定

次の画像ではフロントエンドとChromeのインスペクターツールで同じ行ブロックが表示されています。

Chromeのインスペクタツールの行ブロック
Chromeのインスペクタツールの行ブロック

ブロックパターンの改良

WordPress 5.5で初めて導入されたブロックパターンは、予めネストされたブロックの複雑な構造をほんの数クリックでコンテンツに挿入できる機能です。

WordPress 5.9ではさらにブロックパターンの仕組みにいくつかの改良がなされ、デザインの敷居は下がり、自由度が高まりました。

それではWordPress 5.9の新たなブロックパターンとはどのようなものなのでしょうか？

パターンディレクトリから選べる注目のパターン

ブロックインサーターにパターンディレクトリから動的に取得した注目のブロックパターンが表示され、コンテンツで使用する人気のパターンを簡単に見つけることができるようになりました。

WordPress 5.9のボタンブロックパターン
WordPress 5.9のボタンブロックパターン

同様に、パターンがWordPressのダッシュボードに直接表示されるようになれば、WordPressの開発者は今後自主的にパターンを作成・公開するようになり、結果的にユーザーによるデザインの自由度がますます高まるでしょう。

新たなフルスクリーンのパターンエクスプローラー

パターンディレクトリのブロックパターンの種類が増加し、多くのテーマで使用されるようになったことに伴い、WordPress 5.9では新たなブロックパターンのナビゲーションインターフェースが導入されました。それがパターンエクスプローラーです。

WordPress 5.9のフルスクリーンパターンモード
WordPress 5.9のフルスクリーンパターンモード

新たに追加された「Explore」ボタンをクリックするとフルスクリーンモードになり、数クリックでブロックパターンを閲覧、検索、挿入できます。これによりユーザーエクスペリエンスが大幅に改善されました。

ブロックインサーターの注目のブロックパターン
ブロックインサーターの注目のブロックパターン

Twenty Twenty-Twoの徹底解説記事では、補足の説明や、ブロックパターンの例もいくつかご紹介しています。

もっと詳しく知りたい方は、Josepha Haden Chomphosy氏のポッドキャストのエピソード16と21を聞くか、Anne McCarthy氏のYouTube動画「Exploring WordPress 5.9」をご覧下さい。

「Twenty Twenty-Two」とWordPressのブロックテーマ

WordPress 5.9では、WordPressサイトのフルサイト編集機能を利用するのにGutenbergプラグインをインストールする必要はもうありません。ブロックテーマを利用するだけで、フルサイト編集機能を活用できます。

しかも、WordPress 5.9には最新のデフォルトテーマ「Twenty Twenty-Two」が搭載されています。「Twenty Twenty-Two」は初めてのブロックテーマであり、大きな変化をもたらしてくれます。

「Twenty Twenty-Two」は非常に柔軟でカスタマイズ性の高いテーマです。新しいテンプレートの編集フロー、新しいブロックやインターフェースの改善、WordPress 5.9でコアに加えられた様々なサイト編集機能を試してみるのにぴったりの選択肢となっています。

新しいWordPressのデフォルトテーマ「Twenty Twenty-Two」
新しいWordPressのデフォルトテーマ「Twenty Twenty-Two」（画像引用元：WordPress.org)

上述のとおり、「Twenty Twenty-Two」などのブロックテーマをインストールし有効化するだけでOKです。テーマを有効化すると、WordPressダッシュボードの管理者メニューに「Editor (beta)」というメニューが追加されます。

WordPress 5.9の新しい「外観」メニュー
WordPress 5.9の新しい「外観」メニュー

サイトエディタインターフェースのサイト編集フローが刷新されました。編集インターフェースからサイトのトップページ、テンプレート、（テンプレートの）パーツを視覚的に編集することができます。また、グローバルスタイルインターフェースにもアクセスできます。

エディタのナビゲーションメニュー
エディタのナビゲーションメニュー

ブロックテーマを有効化すると、カスタマイザーは表示されなくなります。これは、カスタマイザーはブロックテーマに対応しておらず、サイトエディタしか利用できないためです。無効状態のブロックテーマをプレビューできないのもそのためです。

ライブプレビューはブロックテーマでは利用できない
ライブプレビューはブロックテーマでは利用できない

そのため、WordPress 5.9からは、ブロックテーマを有効化している時には管理者メニューにカスタマイザーの項目が表示されなくなります（それを活用したプラグインを使用しない限り）。

従来のテーマを気に入っていて、互換性の面で不安だという方もご安心ください。テーマは引き続き利用することができます。

現在、4種類のテーマから選ぶことができます。

  • ブロックテーマ：フルサイト編集用に設計されたテーマ
  • ユニバーサルテーマ：カスタマイザーとサイトエディタの両方で編集できるテーマ
  • ハイブリッドテーマ：jsonなどのフルサイト編集機能もサポートした従来のテーマ
  • 従来のテーマ：PHPテンプレート、phpなどを使用したテーマ

ブロックテーマはWordPressのエコシステムに大きな影響をもたらすことから、Twenty Twenty-TwoとWordPressのブロックテーマを完全網羅した記事もご用意しています。詳細はそちらをご覧下さい。

パフォーマンスの改善

Kinstaではサイトのスピードを何より重視しています。そのため、WordPress 5.9のパフォーマンスの改善を大変嬉しく思っています。

これらの改良は、ブロックテーマ、遅延読み込みなどCMSのいくつかの領域に影響を及ぼします。詳しく見ていきましょう。

ブロックインサーターの改良

WordPress 5.9から、ブロックの種類、パターン、カテゴリーはブロックインサーターで遅延読み込みされるようになりました。ブラウザが優先順位の高いコンテンツを最初に読み込むので、編集作業が快適になります。

ブロックエディタに関して言えば、他にも再利用ブロックとリスト表示にもパフォーマンスの改善が見られます。

読み込まれるCSSの削減

フロントエンドに関して言えば、WordPress 5.9ではブロックテーマで読み込まれるCSSを大幅に削減しており、ページの読み込み時間が飛躍的に短くなっています。

これに関連する最も大きな改善点はtheme.jsonの設定とスタイルの仕組みの導入でしょう。これにより、テーマで大量のCSSの宣言など、膨大な量のスタイルシートの使用を防ぐことができるようになりました。現在ではテーマで使用されるCSSコードは、全てのブロックタイプで再利用できる僅かなCSSカスタムプロパティだけで済むようになりました。

遅延読み込みのパフォーマンスの改善

画像の遅延読み込みはWordPress 5.5で初めて導入されました。WordPress 5.7以降、遅延読み込み機能はiframesにも適用されるようになり、読み込み速度のより速いサイトを構築し、SEOも改善できるようになりました。

一方で、Largest Contentful Paint (LCP)の分析を行ったところ、ページ内の全ての画像とiframeにloading="lazy"属性を割り当てると、パフォーマンスが若干低下することが分かりました。

単にloading="lazy"属性をなくすだけでは遅延読み込みによる大きなメリットを得られないことになるため、解決策にはなりません。

最適解は、スクロール無しで表示される画像の loading="lazy" 属性のみ削除することです。しかし、loading="lazy"属性はサーバー側で付与されるため、WordPressは具体的にどの画像が画面に表示されているか特定できません。これは有効になっているテーマに大きく左右されます。

そこで妥協点として、WordPress 5.9以降、loading="lazy"属性は最初のコンテンツの画像またはiframeには適用されないようになりました。人気のWordPressテーマ50個を対象に行われた分析では、この方法によりパフォーマンスは大幅に改善され、ページの読み込み速度は30%速くなっています。

Felix Arntz氏はその仕組みを次のように説明しています。

…開発者による調整無しに、最初から高いパフォーマンスを発揮できるように、WordPressでは一番最初の「コンテンツの画像またはiframe」は遅延読み込みから除外されるようになりました。ここでいう「コンテンツの画像またはiframe」とは、その時のメインクエリループ内のいずれかのコンテンツの投稿、もしくはそれのアイキャッチ画像を意味します。これは、「個別」コンテンツ、「アーカイブ」コンテンツのいずれにも適用されます。「個別」の場合、唯一の記事内の最初の画像またはiframeに遅延読み込みが適用されません。一方で、「アーカイブ」の場合、クエリ内の最初の記事の最初の画像、もしくはiframeに遅延読み込みが適用されません。

テーマ開発者は新たに追加されたwp_omit_loading_attr_thresholdフィルターを利用して遅延読み込みを適用しない画像やiframeの数を変更することができます。

ブロック毎に複数のスタイルシートを設定

ブロックやテーマの開発者はそれぞれのブロックに複数のスタイルシートを登録し、必要に応じて他のブロックからスタイルを読み込むことができます。これにより、ページのコンテンツに応じてスタイルシートを読み込み、テーマの全てのページで大量のスタイルシートを読み込むのを防ぐことができます。

Ari Stathopoulosは次のように説明します。

ブロックに複数のスタイルシートを登録し、必要に応じて他のブロックからスタイルを読み込めるようになりました。テーマで、全ての（大量の）スタイルシートを強制的に読み込むのではなく、個別のブロック単位でスタイルを追加できるようになったのです。これは、ページやレイアウトの内容に応じてスタイルシートの読み込み方を最適化できるブロックテーマで大きな効果を発揮しますが、従来のテーマにも利用できます。

その他の開発者向け機能

これまでご紹介してきた機能やUIの改良以外にも、WordPress 5.9では、開発者向けの機能がいくつか導入されました。

ブロックをロックする新たな属性

ブロック開発者はブロックの設定にlock 属性を追加することでユーザーが個別のブロックを移動したり削除したりするのを防げるようになりました。

{
	...
	"attributes": {
		"lock": {
			"type": "object",
			"default": {
				"move": true,
				"remove": true
			}
		}
	}
}

この機能を有効にすると、ユーザーはブロックのコンテンツは編集できても、ブロックをページ内で移動したり、エディタのキャンバス上から削除したりできません。次の画像は標準的ツールバーを搭載したカスタムブロックです。

通常のツールバーを搭載したカスタムブロック
通常のツールバーを搭載したカスタムブロック

上記のコードのとおり、lock属性を定義すると、ブロックのツールバーからブロックを移動する機能と、「Move to（移動）」および「Remove（削除）」設定が画面に表示されなくなります。

移動と削除の設定が表示されていないカスタムブロック
移動と削除の設定が表示されていないカスタムブロック

また、ブロックパターン内の特定のブロックをロックすることもできます。具体例は「WordPress 5.9でブロックをロックする」をお読みください。

グローバル設定／スタイルにアクセスするための新たなAPI

WordPress 5.9では、theme.json.からデータを読み込むための新たなPHPパブリックAPIが導入されました。

theme.jsonから設定とスタイルを読み出す

theme.jsonで宣言されたsettingsとstylesセクションからデータを読み出すことのできる新たな関数は2つあります。

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );
  • $path は指定した設定へのパスを示した配列です。
  • $context はそれらのデータのコンテクストを設定する配列です。特定のブロックの設定セクションから読み出すことができ、例えば、array( 'block_name' => 'core/paragraph' ). などになります。 baseに設定されたorygin キーにより、ユーザーにより保存されたカスタムデータを無視することができます。

次のサンプルコードはcontentSizeの設定値を返します。Twenty Twenty-Twoでは650pxとなります。

wp_get_global_settings( array( 'layout', 'contentSize' ) );

コンテクストを設定することで、特定のブロックのスタイルを読み出すことができます。次のコードでは、core/buttonブロックの枠線の角の丸み（の値）を扱っています。

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button' )
	);
}

上記の関数は、デフォルトの設定、テーマの設定、ユーザーデータを考慮した上で、必要なプロパティの値を返します。ユーザーがボタンの枠線の角の丸みをグローバルスタイルインターフェースで設定すると、それに応じて個別の値が使用されます。

ユーザーデータを無視する場合は、次のコードを使用します。

function get_global_styles() {
	return
	wp_get_global_styles(
		array( 'border', 'radius' ),
		array( 'block_name' => 'core/button', 'origin' => 'base' )
	);
}

生成されたスタイルシートを取得する

WordPress 5.9では、デフォルトのスタイル、テーマのスタイル、カスタムスタイルにより生成されたスタイルシートを取得する新機能も導入されました。

wp_get_global_stylesheet( $types = array() );

$types には生成されたスタイルが表示されます。

新たなAPIについて詳しく知りたい方は「グローバル設定とスタイルへのアクセスに使える新たなAPI」もお読みください。

その他開発者向け機能

WordPress 5.9における、その他の開発者向け変更点は次の通りです。

まとめ

最後にWordPressの市場シェアについて簡単に触れておきます。WordPressは現在、使用するコンテンツ管理システムが分かっているウェブサイト全体において、その65%以上で利用されており、それ以外のものも含めた全てのウェブサイトでも43%以上で採用されています。

これは驚異的な数字です。Shopifyなど、最もWordPressに「迫る」ライバルでも、その市場シェアは5%以下であることを考えるとなおさらです。

WordPressのコンテンツ管理システムの進化は決して軽視できません。WordPressの最新版リリースでは毎回、新機能やインターフェースの改良、パフォーマンスの改善が加えられ、WordPress 5.9もその例外ではありません。新機能を試してみるのに必要なのは新たなデフォルトテーマ「Twenty Twenty-Two」などのブロックテーマだけです。

さぁ、あとはあなた次第です！ブロックテーマとフルサイト編集を利用する準備はいいですか？WordPress 5.9の新機能の中であなたが最も気に入ったものはなんですか？コメント欄でお聞かせください。

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.