WordPress 6.6「ドーシー」がリリースされました。今回のリリースは、以前のバージョンで導入された機能の改良と強化に重点が置かれていますが、フェーズ3に従いコアをさらに一歩前進させる追加要素も多数盛り込まれています(WordPress 6.6の日本語翻訳ページはこちら)。

392点の機能強化、462点のバグ修正、46点のブロックエディターのアクセシビリティ改善とともに、合計299のコアチケットが含まれます。

WordPress 6.6に搭載される数多くの新機能の中でも、特に注目したいのはブロックパターンの上書き機能です。WordPress 6.5で導入予定でしたが、今回のリリースに延期された機能であり、Block Bindings APIの2番目の実装です。今後予定される新機能や改善について、より良い理解を得ることができそうです。

パターンの上書きは、あくまでも今回のリリースに導入される注目の機能の1つにすぎません。以下、WordPress 6.6に導入される注目の機能と改善点を一挙ご紹介します。

同期パターンの上書き

Block Bindings APIの最初の実装は、ブロック属性とカスタムフィールドを接続するためのものでした。今回のWordPress 6.6では、2度目の実装で、「Synced Pattern Overrides」(同期パターンの上書き)と名付けられた同期パターンの拡張機能が導入されました。

ブロックパターンには以下の2種類があります。

  • 同期ブロックパターン
  • 標準(非同期)ブロックパターン

この2つのパターンの違いは、前者に加えられた変更はサイト全体のすべてのパターンに適用される点にあります。非同期のブロックパターンへの変更は、特定のパターンにのみ適用されます。

同期パターンの上書きは、この両者の中間に位置します。Block Bindings APIにより、サイト上のどこでも同じ構造を維持し、サイトエディターでパターン構造やスタイルを編集した際にも同期して変更されるブロックパターンを構築することができます。さらに、サイト上の同じパターンの他のインスタンスに影響を与えることなく個々のインスタンスでパターンの内容を変更可能です。

この上書きがどのように機能するか、具体的に見てみましょう。

まず、これを使用するには同期されたパターンが必要になります。投稿エディターでゼロから作成するか、サイトエディターの「パターン」で既存の同期パターンを利用することができます。

パターン」に移動し、デフォルトテーマであるTwenty Twenty-Fourの「Hero」パターンなど、既存のパターンの1つを複製します。名前を追加し、「同期」トグルスイッチをオンにします。

サイトエディターでパターンを複製
サイトエディターでパターンを複製

マイパターン」に移動すると複製した同期パターンが見つかります。これを開いて上書きしたいブロックをすべて選択します。

サイドバーの「ブロック」タブを開き、「高度な設定」を展開して「上書きを有効化」をクリックします。

上書きを有効化
上書きを有効化

表示されるウィンドウで名前を追加して「有効」をクリックします。

上書きが有効化された状態
上書きが有効化された状態

上書きしたいブロックで同じ操作を繰り返します。完了後、作成したパターンを含む投稿または固定ページを作成します。

エディターに同期パターンを追加
エディターに同期パターンを追加

ブロックの内容を上書きして投稿を保存します。最後に、フロントエンドで変更内容を確認します。

上書きを有効化したブロックパターン
上書きを有効化したブロックパターン

このように同期パターンをサイト上のどこにも自由に追加することができます。追加時には同じコンテンツが表示されますが、もちろんそれぞれ自由に編集可能です。

この同期パターンのコードを見てみます。サイトエディターの「パターン」に戻り、「マイパターン」からパターンを開きます。右上の3つの点(オプション)を展開して「コードエディター」を選択します。

今回の例では、以下のようなコードが表示されます。

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

ブロックデリミタ(区切り文字)の中に、metadata.bindingsプロパティがあるのがわかります。これは「見出し」ブロックを編集可能にするものです。__defaultは、"core/pattern-overrides"という特定のソースにサポートされているすべての属性を接続するように指示します。

同じプロパティは、編集を可能にする必要があるすべてのブロックに適用されます。例えば、「ボタン」ブロックは以下のようになります。

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">会社概要</a>
	</div>
	...
</div>

投稿エディターに戻り「コードエディター」に切り替えると、以下のようなコードになっています。

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"WordPress専用マネージドホスティング"
		},
		"Hero body":{
			"content":Kinstaは単なるレンタルサーバーの枠を超え、お客様の「ビジネスの一員」に。高速で安全、そして機能豊富なホスティング環境を提供し日々の負担を軽減。世界中のWordPressサイトと代行業を支えるのが私たちの使命です。"
		},
		"Hero button":{
			"text":"機能を見る",
			"url":"https://kinsta.com/jp/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"料金プランを見る",
			"url":"https://kinsta.com/jp/wordpress-hosting/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

ここにはブロックは表示されず、ブロックパターンへの参照と、編集可に設定された各ブロックのプロパティセットのみが表示されます。

ブロックパターンはサイト上の任意の場所に追加できることはすでに触れたとおりです。これらのパターンは、サイトエディターで構築したものと同じ構造とデザインを反映します。

サイトエディターで上書きを使用してパターンのスタイルと構造を編集
サイトエディターで上書きを使用してパターンのスタイルと構造を編集

構造はそのままに、編集可能なブロックの内容を個別に変更することができます。

フロントサイトで上書きを使用したパターン
フロントサイトで上書きを使用したパターン

なお、パターンの上書きはBlock Bindings APIの実装であるため、サポートされている「見出し」「段落」「画像」「ボタン」ブロックのみで使用できます。

画像のURL、代替テキスト、タイトルは上書き可能
画像のURL、代替テキスト、タイトルは上書き可能

英語のリソースになりますが、WordPress.tvの動画またはNick Diego氏のブログ記事で同期パターンの上書きに関する詳細を確認することができます。

この機能は今後改良・拡張される可能性があり、現在もGitHubのこちらおよびこちらでディスカッションが行われています。

接続したブロックからカスタムフィールドの値を編集

WordPress 6.5では、ブロック属性のデータソース(core/post-meta)としてカスタムフィールドが導入され、カスタムフィールドの値をブロックに接続できるようになりました。今回のWordPress 6.6では、接続したブロックからカスタムフィールドの値を直接編集できるようになるなど、この機能が拡張されています。

プラグインまたはテーマの関数ファイルからカスタムフィールドの新たなセットを登録し、投稿メタを追加する際、show_in_resttrueに設定して試すことができます。例を見てみましょう。

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field'
	)
);

投稿または固定ページを作成し、同じ名前のカスタムフィールドを追加します。キャンバスにサポートされているブロック(見出しブロックなど)を追加してコードエディターに切り替えて、以下のようにブロックを編集します。

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

投稿または固定ページを保存して、更新内容を確認します。これで、ブロックから見出しコンテンツを直接編集できるようになります。カスタムフィールドの値には変更が反映されているはずです。

接続したブロックからカスタムフィールドを編集
接続したブロックからカスタムフィールドを編集

さらに、カスタムフィールドに接続したブロック属性に関する情報を表示するパネルが導入され、カスタムフィールドに接続されたブロック属性を確認できます。

ブロックバインディングによる画像属性
ブロックバインディングによる画像属性

この機能では、以下のようなことも可能になります。

  • クエリループからカスタムフィールドの値を更新
  • 複数のブロックが同じカスタムフィールドに接続されている場合、同じカスタムフィールドの値を共有し、値が変わると一斉に同期して変更される
  • 許可された投稿でのみカスタムフィールドを編集可能

先にも触れましたが、Block Bindings APIに対応しているブロックは現時点で以下に限られます。

ブロック 属性
画像 urlalttitle
見出し content
段落 content
ボタン urltextlinkTargetrel

データビューの改善

WordPress 6.5で導入されたデータビューは、テンプレート、パターン、投稿、メディアなどのコレクションのための改良されたUIです。このインターフェースは、開発ロードマップのフェーズ3である「コラボレーション」において重要な役割を担っており、今後のリリースでは、「投稿をレビューする担当者を割り当てたり、カスタムビューを作成してプロセスを合理化したりするワークフローの改善を含む」(英語原文の日本語訳)さらなる機能の強化が期待されています。WordPress 6.6では、このインターフェースはサイトエディターのみに搭載されますが、将来のリリースではおそらくより多くのセクションに拡張されます。

WordPress 6.6では管理ページのレイアウトが変更され、テンプレートパーツの管理が「パターン」セクションに統合されました。サイトエディターの「パターン」は2つのセクションに分かれ、テンプレートパーツが上に、パターンが下に配置されています。

レイアウトが変更したWordPress 6.6のパターンメニュー
レイアウトが変更したWordPress 6.6のパターンメニュー

固定ページについては、パネルにページ一覧が表示され、クリックして任意のページのプレビューを確認できます。

WordPress 6.6のプレビューページ
WordPress 6.6のプレビューページ

また、「表示オプション」(以下参照)が新たに追加されました。

WordPress 6.5の表示オプション
WordPress 6.5の表示オプション
WordPress 6.6の新表示オプション
WordPress 6.6の新表示オプション

この大きな変更と並行して他にも細かな変更が施されており、たとえば一括編集機能やフロントページまたは投稿ページのバッジ(アイコンのようなもの)も改善されています。

フロントページを示すバッジ
フロントページを示すバッジ

WordPress 6.6でのデータビューの改良はまだ初期段階にあります。将来的には、開発者がビューを直接操作できるようになる拡張可能なAPIが導入されることが予想されます。データビューの今後の改善については、Anne McCarthy氏による記事をご覧ください。

ブロックエディターのその他の改善

WordPress 6.6 では、17.8から18.5までの8つのGutenbergリリースがコアに導入され、インターフェース、Reactライブラリ、ブロック APIなどに数々の改良が施されています。以下、その一部をご紹介します。

公開フローの改善

投稿および固定ページの設定パネルが整理され、より軽量かつ一貫性のあるものになっています。投稿エディターおよびサイトエディターの統一が進み、公開フローに一貫性がもたらされました。

WordPress 6.5(左)と6.6(右)の固定ページ設定パネルの比較
WordPress 6.5(左)と6.6(右)の固定ページ設定パネルの比較

この改善により、新しくなった「ステータスと公開状態」パネルで投稿および固定ページのステータスをよりわかりやすく設定できるようになっています。

Status & visibility settings in WordPress 6.6
WordPress 6.6のステータスと表示設定

また、アイキャッチ画像の設定と抜粋の管理を設定パネルの上部で行えるようになります。

投稿エディターのアイキャッチ画像と抜粋の設定
投稿エディターのアイキャッチ画像と抜粋の設定

すべてのブロックを表示

以前のバージョンでは、ブロックを選択すると、ブロックインサータでは選択したブロックに追加可能なブロックのみが表示されました。例えば、カラムを選択した場合はカラムしか追加できないため、カラムブロック以外は表示されませんでした。

WordPress 6.5ではカラムブロックを選択すると、ブロックインサータにはカラムブロックしか表示されなかった
WordPress 6.5ではカラムブロックを選択すると、ブロックインサータにはカラムブロックしか表示されなかった

WordPress 6.6からは、ブロックインサーターには、追加可能なブロックに加えて、選択したブロックの下に追加できるブロックも表示されるようになっています。

WordPress 6.6ではカラムブロックを選択すると、ブロックインサータに2つのブロックグループが表示される
WordPress 6.6ではカラムブロックを選択すると、ブロックインサータに2つのブロックグループが表示される

ブロックをグループ化するキーボードショートカット

MacOSでは⌘ + G、WindowsではCtrl + Gブロックをグループ化できるようになりました。

クラシックテーマのブロックパターン

WordPress 6.6以降は、クラシックテーマはブロックテーマと同じパターンインターフェースに対応しているため、WordPressサイトでクラシックテーマを使用する場合、ブロックテーマと同じパターン管理を行うことができます。

以下は、それぞれWordPress 6.5と6.6のパターン管理ページです。

クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.5のパターン管理画面
クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.5のパターン管理画面
クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.6のパターン管理画面
クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.6のパターン管理画面

ブロックテーマと同じように、パターンの編集と複製、名前の変更、JSONとしてエクスポート、削除を行うことができます。

クラシックテーマ「Twenty Twenty-One」を使用したWordPress 6.6のパターン操作
クラシックテーマ「Twenty Twenty-One」を使用したWordPress 6.6のパターン操作

パターンを個別に選択するか、右上にある「一括編集」の文字をクリックすると一括操作も可能です。並び替えやフィルタリング機能も利用できます。

クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.6でのパターンの一括操作
クラシックテーマ「Twenty Twenty-One」を使用するWordPress 6.6でのパターンの一括操作

ブロックテーマと同じようにパターンを作成することも可能で、ページ右上の「新規パターンを追加」をクリックし、名前とカテゴリを選択します。

新規パターンを追加
新規パターンを追加

その後は、サイトエディターで通常通りパターンを作成または編集します。

サイトエディターでパターンを編集
サイトエディターでパターンを編集

この更新により、クラシックテーマの使い心地が向上し、新たな機能が導入され、クラシックテーマとブロックテーマでの編集体験がより一貫したものになります。

デザイナーとテーマ開発者向けのツールと機能

WordPress 6.6には、デザイナーとテーマ開発者向けの機能も多数導入されています。セクションスタイル、サイト全体の背景画像、影エディター、グリッドレイアウトのバリエーション拡張などにより、ページのスタイリングがより柔軟に。以下、各機能を見ていきます。

Theme.json v.3

WordPress 6.6では、theme.jsonがバージョン3になっています。この新バージョンでは、定義済みのプロパティを上書きする方法が変更されています。fontSizesまたはspacingSizesのデフォルト値を変更するには、defaultFontSizesまたはdefaultSpacingSizessettings.typographyまたはsettings.spacingの下のfalseに設定します。

  • defaultFontSizesまたはdefaultSpacingSizestrueに設定:デフォルトのフォントと余白のサイズがエディターに表示され、テーマでデフォルトのスラッグを使ってプリセットを作成することはできない。defaultFontSizesはデフォルトでtrueに設定されている。
  • defaultFontSizesまたはdefaultSpacingSizesfalseに設定:デフォルトのフォントと余白のサイズはエディターに表示されず、テーマでデフォルトのスラッグを使用できる。

Theme.jsonバージョン3の詳細はこちらをご覧ください。

WordPress 6.6におけるCSSの特異性

WordPress 6.6ではCSSの特異性が変更され、グローバルスタイルのサポートを維持しながら、コアスタイルを上書きすることが容易になりました。

以前のバージョンでは、コアスタイルを上書きすることが面倒なことがあり、テーマ開発者は複雑なCSSルールを作成しなければなりませんでした。6.6では、コアブロックのスタイルとグローバルスタイル(theme.json)が改善され、既存のセレクタを:root :where(...)で囲むことで、コアスタイルの特異性を0-1-0に減らし、新たなセクションスタイルもサポートできるようになりました。

たとえば、.wp-block-image.is-style-rounded imgは、:root :where(.wp-block-image.is-style-rounded img)に更新されています。

(ブロック開発者が)グローバルスタイルを選択する場合、スタイルインターフェースを通じて予測可能な方法でカスタマイズできるよう、スタイルにも同じ変更を加えることが推奨されます。例を見てみましょう。

.wp-block-custom-block {
	padding: 0;
}

上記のようなスタイルのカスタムブロックがある場合は、以下のように:root :where()で囲む必要があります。

:root :where(.wp-block-custom-block) {
	padding: 0;
}

これにより、グローバルスタイルのインターフェースを通じてブロックの余白を上書きできるようになります。

また、テーマ開発者にも同じことが推奨されます。

WordPress 6.6におけるCSSの特異性の詳細はこちらをご覧ください。

セクションスタイル

WordPress 6.6では、複数のブロックに同じスタイルをひとつずつ適用し直さなくても、投稿および固定ページの個々のセクションにスタイルを設定できます。つまり、複数のブロックや子ブロックを選択して、選択範囲全体にスタイルのバリエーションを割り当てることが可能になります。

これはブロックスタイルのバリエーションの拡張により、内側のブロックや要素のスタイリングが可能になり、グローバルスタイルのスタイリングの特異性が低減されたためです。

ブロックスタイルのバリエーションは、以下のいずれかの方法で登録した場合のみ、グローバルスタイルを通じて定義および操作することができます。

  • テーマの/stylesディレクトリ内でtheme.jsonの部分ファイル(パーシャルファイル)を使用する
  • register_block_style関数を使用する
  • theme.jsonstyles.blocks.variationsの下にブロックスタイルのバリエーションを定義する

theme.jsonの部分ファイルを使用したブロックスタイルのバリエーションを定義する

テーマスタイルのバリエーションと同様に、ブロックスタイルのバリエーションも、テーマの/stylesディレクトリ配下に独自のtheme.jsonの部分ファイルを持つことができます。

両者の違いとして、ブロックスタイルのバリエーションには、ブロックタイプを含む空でない配列であるトップレベルのblockTypesプロパティが追加されています。また一貫性を提供し、翻訳可能なtitleプロパティからスラッグを切り離すために、新たなslugプロパティも追加されました。

開発者ノートでは、theme.jsonの部分ファイルを以下のように示しています。

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

register_block_styleを介してブロックスタイルのバリエーションを定義する

register_block_style関数でブロックスタイルのバリエーションを定義することも可能です。テーマのfunctions.phpで以下のように使用します。

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

これで、グループまたはカラムブロックを選択すると、設定パネルの「ブロック」タブにある「スタイル」セクションに定義したセクションスタイルのボタンが表示されます。

WordPress 6.6のセクションスタイルのバリエーション
WordPress 6.6のセクションスタイルのバリエーション

セクションスタイルのバリエーションに関しては、Justin Tadlock氏によるブログ記事Aaron Robertshaw氏による開発者ノート、およびGitHubのプルリクエストをご覧ください。

テーマスタイルのバリエーションを使用してブロックスタイルのバリエーションを定義する

現在、theme.jsonstyles.variationsプロパティを使用することができますが、この方法は一時的なものですぐに非推奨となるため注意が必要です。詳細はこちらをご覧ください。

色とタイポグラフィのプリセット

利用可能なプリセットを選択し、グローバルスタイルのインターフェースからテーマのカラーパレットとフォントファミリーを変更できりようになります。

利用しているテーマが色とタイポグラフィのプリセットをサポートしている場合、設定パネルの「」と「タイポグラフィ」セクションの下に表示されます。

以下は、Twenty Twenty-Fourのカラーパレット例です。

Twenty Twenty-Fourのライトカラーパレット
Twenty Twenty-Fourのライトカラーパレット
Twenty Twenty-Fourのダークカラーパレット
Twenty Twenty-Fourのダークカラーパレット

この機能をテーマに追加するには、色とタイポグラフィのみを含むスタイルバリエーションを作成します。スタイルを定義するとそれが抽出され、プリセットの生成に使用されます。

デザインの改善にまつわるコアエディタの変更、およびタイポグラフィと色のバリエーションの作成方法も参照してみてください。

サイト全体の背景画像

WordPress 6.6から、theme.jsonとサイトエディターでサイト全体の背景画像を定義できるようになりました。

サイト全体の画像は、サイト単位でbody要素に設定されたbackground-imageプロパティの値であり、すべてのサイトページに表示されます。

theme.jsonでサイト全体の背景画像を定義するには、styles.backgroundプロパティの下にあるbackgroundImage.urlを使用します。

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

上の例では画像への絶対パスを設定していますが、以下のようにテーマルートからの相対パスを使用して背景画像を定義することも可能です。

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

この場合、以下のような画像プロパティを使用します。

  • backgroundPosition
  • backgroundSize
  • backgroundRepeat

テーマ開発者でない場合は、サイトエディターのスタイルパネルからサイト全体の背景画像を使用することができます。WordPress 6.6では、「スタイル」>「レイアウト」で設定を行うことができます。

スタイル設定の背景画像パネル
スタイル設定の背景画像パネル

これは背景画像に関する最初のイテレーションであり、背景画像の仕組みや制限、今後の展開についてはこちらを参照してください。

グリッドレイアウトのバリエーション

グループブロックの新たなレイアウトバリエーションでは、グループ内の要素をグリッドとして表示することができます。

エディターのキャンバスにグループブロックを追加し、ブロックの設定パネルでグリッドレイアウトを選択することで試行することができます。

WordPress 6.6のグリッドレイアウト
WordPress 6.6のグリッドレイアウト

グリッドレイアウトには以下2つの種類があります。

  • 自動─グリッドの行と列を自動的に生成
  • 手動─グリッドに追加する列の数を設定可能

グリッド要素にコンテンツを追加し、ハンドルを使用してサイズを変更することができます。また、選択したグリッドの種類に応じて、「最小列幅」や列数を調整することも可能です。

ネガティブマージン

マージン(余白)をサポートするすべてのブロックで、ネガティブマージン(余白を詰めること)を設定できるようになりました。WordPress 6.6以前は、この機能はtheme.jsonでのみ利用可能でしたが、今後はネガティブマージンを要素に適用してオーバーラップ効果を簡単に作ることができます。

なおネガティブマージンは、以下のように手動で値を追加する必要があります。

WordPress 6.6でボタンブロックにネガティブマージンを設定
WordPress 6.6でボタンブロックにネガティブマージンを設定

影のカスタマイズ

WordPress 6.6では、グローバルスタイルのインターフェースで独自の影を作成・編集することができます。影を作成するには、サイトエディターを開き、グローバルスタイルのメニューから「」を選択して、カスタムパネルを開きます。「+」をクリックすると、影のカスタマイズ、名前の変更、影の削除などを行うことができるウィンドウが表示されます。

影のカスタマイズ
影のカスタマイズ

独自のアスペクト比プリセット

テーマ開発者は、theme.jsonsettings.dimensions.aspectRatiosを設定することで、独自のアスペクト比プリセットを定義できるようになります。

開発者向けの変更点

開発者向けの変更はテーマだけにとどまらず、ReactライブラリとAPIに関係するさまざまなものがあります。

Options API─大きなオプションの自動読み込みを無効化

WordPress 6.6以前は、ページを読み込むたびに大量のオプションが自動的に読み込まれていました。デフォルトの動作を防ぐため、開発者は"yes"/trueまたは"no"/falseのいずれかをadd_option()またはupdate_option()の3番目のパラメータに渡す必要がありました。このパラメータは任意であり、デフォルト値は"yes"であったことから、各ページに不要なデータが大量に読み込まれ、サイトパフォーマンスに悪影響を与えていました。

これを防ぐため、WordPress 6.6ではOptions APIにいくつか変更が加えられています。

まず、WordPressが各ページでオプションを読み込むかどうかを判断できるようにするため、add_option()update_option()$autoloadパラメータのデフォルト値が"yes"からnullに変更されています。このパラメータは以下の値のいずれかを受け取ります。

  • true:追加のデータベースクエリを避けるため、全ページでオプションを読み込む
  • false:オプションの自動読み込みを無効にし、全ページでデータを読み込まない
  • null:場合によっては自動読み込みを行う(デフォルトでは、大きな値を含まない限り読み込まれる)

これに応じてデータベースの値も変更され、各オプションの自動読み込み値は以下のいずれかになります。

  • on:全ページで自動読み込みされ、明示的にtrueの値で追加する
  • off:自動読み込みされてはならず、単一の管理ページでのみ使用され、明示的にfalseの値で追加する
  • auto:WordPressデフォルトの自動読み込み動作に依存(WordPress 6.6では自動読み込みされるが、将来的には変更される可能性がある)
  • auto-on:自動読み込みされ、値は動的にtrueに設定される
  • auto-off:自動読み込みされず、値は動的にfalseに設定される

また、以下の関数とフィルターも導入されました。

  • wp_autoload_values_to_autoload関数:自動読み込みされるべきすべてのデータベース値を返す
  • wp_autoload_values_to_autoloadフィルター:自動読み込みするオプションのリストを編集可能
  • wp_default_autoload_valueフィルター:明示的な値が設定されていないオプションの値を設定
  • wp_max_autoloaded_option_sizeフィルター:デフォルトでオプションが自動読み込みされないしきい値を変更(デフォルト値は150000/150kb)

この変更は、多くのプラグインを含む複雑なWordPressサイトに特に有用で、プラグイン開発者には朗報です。より詳しい情報はこちらをご覧ください。

Reactライブラリの改善

Reactライブラリには2つの大きな変更が適用されており、1つはReact 18.3の導入。React 19が安定した時点で開発者が準備できるように、非推奨の警告やその他の変更が追加されています。

また、React 17で初めて導入されたJSXトランスフォームを使用できるようになりました。

この変更の詳細については、React 19へのアップグレードの準備、およびWordPress 6.6のJSXに関する開発者ノートを参照してください。

Block APIの改良

WordPress 6.6では、Block APIにも以下のような技術的な変更が加えられています。

まとめ

ブロックパターンの上書きからデータビューの強化、テーマ開発者向け新機能、サイトエディターおよび投稿エディターの一貫性の向上まで、WordPress 6.6注目の新機能と変更点を一挙ご紹介しました。他にも、自動更新のロールバックなど、取り上げきれなかった改善点が多数あります。

英語に抵抗がなければ、WordPressのコアコントリビューターによるリソースを参照して、今回の最新バージョンをさらに深く掘り下げることができます。特にAnne McCarthy氏によるブログ記事MeetupのオンラインワークショップWordPressの開発者ブログ、Make WordPress Coreブログで公開されている開発者ノート、Birgit Pauli-Haack氏によるGutenberg Timesでのブログ記事などがおすすめです。

WordPress 6.6の機能はもう試されましたか?お気に入りの機能や変更点などがありましたら、以下のコメント欄でぜひお知らせください。

Carlo Daniele Kinsta

ウェブデザインとフロントエンド開発をこよなく愛し、WordPress歴は10年以上。イタリアおよびヨーロッパの大学や教育機関とも共同研究を行う。WordPressに関する記事を何十件も執筆しており、イタリア国内外のウェブサイトや雑誌に掲載されている。詳しい仕事情報はXとLinkedInで公開中。