WordPress 6.9が12月2日にリリースされます。今回の主な改良点は以下のとおりです。

  • 新たなコアブロック(アコーディオン、数式など)の導入でコンテンツ作成の柔軟性が向上
  • エディターの大幅な改良による、流動的で直感的なビルドエクスペリエンス
  • Abilities API、Interactivity API、Block Bindings APIなどの開発者向けAPIのアップデート
  • ノート機能、ブロックの表示/非表示、コマンドパレットの拡張による、ワークフローや共同作業の効率化

今回のリリースでは、強力な編集とコラボレーションツールによる恩恵を受けることができます。また開発者は、APIの強化により、より高度な統合機能を利用することができます。

今回も、WordPress 6.9注目の機能を一挙ご紹介します。

新コアブロック

このGitHub Issueに続き、WordPress 6.9では新たな6つのブロック、アコーディオンタームクエリー所要時間数式コメント数コメントリンクが導入されます。これによりブロックエディターでできることが広がり、プラグインをインストールしなくても済むようになります。

長年にわたり、コントリビューターの間で新しいブロックをコアに取り込むべきか、プラグイン領域にとどめるべきかの議論が行われていましたが、今回のWordPress 6.9で前者が選ばれました。以下はMathias Ventura氏の言葉です(以下、英語原文の日本語訳)。

コアライブラリにこれらのブロックが存在しないことは、テーマビルダー(そしてユーザー)が優れたデザインを構築するために頼れる表現力を大きく制限してしまい、全体的な体験を分断させることにもつながります。その結果、より充実したブロックライブラリを選ばざるを得なかったり、広く公開する予定がある場合はそもそも断念してしまうかもしれません

それでは以下、WordPressコアに追加された新たなブロックを詳しくご紹介します。

アコーディオン

アコーディオンブロックは、多くのユーザーが待っていたブロックでしょう。単一のブロックではなく、ネストしたブロック構造になっており、ブロックインスペクターで簡単に調べることができます。

投稿エディターでのアコーディオンブロック構造
投稿エディターでのアコーディオンブロック構造

各アコーディオンブロックは、以下の内部ブロックで構成されます。

  • アコーディオン:入れ子になったアコーディオン項目のコンテナ
  • アコーディオン項目:直接入れ子になった要素で、見出しとパネルで構成される
  • アコーディオン見出し:パネルを開閉するクリック可能な見出し
  • アコーディオンパネル:アコーディオン項目のコンテンツが含まれ、あらゆるタイプのブロックを含めることが可能
コードエディターのアコーディオンブロック
コードエディターのアコーディオンブロック

このブロックはシンプルで整ったスタイルですが、Justin Tadlock氏による解説記事『Styling accordions in WordPress 6.9』を確認すると、アコーディオンの外観をカスタマイズするための知識を身につけることができます。

アコーディオンブロックの詳細は、PR#64119#71222#71388をご覧ください。

タームクエリー

タームクエリーブロックは、クエリーループと同様、投稿の代わりにクエリを表示します。クエリの名前と数を持つ行ブロックを含むクエリテンプレートです。

タームクエリーブロックの構造
タームクエリーブロックの構造

タームクエリーブロックにはいくつかの設定オプションがあり、タクソノミー、並び順、選択したターム、空タームおよび入れ子のタームの表示・非表示を調整することができます。また、表示するターム数の設定も可能です。

Terms Query block settings
用語クエリブロックの設定

リスト表示とグリッド表示の2種類があり、グリッド表示ではグリッド要素の位置とカラム数を調整できます。

タームクエリーブロックはリスト表示またはグリッド表示が可能
タームクエリーブロックはリスト表示またはグリッド表示が可能

ブロック要素のタグを変更することもでき、例えばターム名ブロックにh2要素を使うことができます。また、要素間にブロックを挿入することも可能です。以下は、行と行の間に区切りブロックを挿入した例です。

タームクエリーブロックのカスタマイズ
タームクエリーブロックのカスタマイズ

タームクエリーブロックの詳細は、PR #70720およびIssue #49094をご覧ください。

所要時間

このブロックはその名の通り、投稿や固定ページの閲覧にかかる時間を表示します。所要時間と単語数の2つのモードがあり、読了時間を範囲または特定の値で表示することができます。

所要時間ブロック
所要時間ブロック
単語数モードの所要時間ブロック
単語数モードの所要時間ブロック

数式

数式ブロックはコンテンツに数式を挿入します。LaTeXの構文で数式を書くと、対応する数学記号に自動変換されます。

数式ブロックでは投稿や固定ページに数式を挿入可能
数式ブロックでは投稿や固定ページに数式を挿入可能

インラインで数式を挿入することも可能です。

インラインで数式を追加することも
インラインで数式を追加することも

コメントリンクとコメント数

実験的なブロックであったコメントリンクとコメント数ブロックも、サイトエディターと投稿エディターで使用することができます。

既存ブロックの改善

WordPress 6.9では、多くの既存ブロックにもマイナーアップデートおよびメジャーアップデートが導入されており、機能や使い勝手が改善されています。

見出しブロックの背景パディング問題を修正

WordPress 6.9では、見出しブロックの背景余白(パディング)に関する CSSの特異性の問題が修正されています。今回のリリース以前は、見出しブロックに適用されたパディングのスタイルが、アコーディオンブロックなど見出しを内部で使用している他のブロックにも影響してしまうという問題がありました。

:where()疑似クラスの使用により、背景を使用するヘッダーのCSSセレクタがより具体的になっています。

h1, h2, h3, h4, h5, h6 {
	&:where(.wp-block-heading).has-background {
		padding: ...;
	}
}

テーマが見出しブロックではない見出し要素で.has-backgroundクラスを使用する場合、これらの要素にはデフォルトの背景の内側の余白(パディング)が適用されなくなりました

ボタンブロックと区切りブロックでHTML要素が選択可能に

アクセシビリティ向上のため、ボタンおよび区切りブロックのHTML要素を選択できるようになりました

ボタンブロックでは、ブロックの詳細設定で<a><button>のいずれかを選択可能です。

ボタンブロックの高度な設定
ボタンブロックの高度な設定

区切りブロックでは、<hr><div>のどちらかを選択することができます

区切りブロックの高度な設定
区切りブロックの高度な設定

コンテンツブロックのtagNameセレクタ

WordPress 6.9では、コンテンツブロックのセマンティックに適切なラッパーを選択できるようになります。<main><section><article>のいずれかを選択可能です。

コンテンツブロックのHTML要素オプション
コンテンツブロックのHTML要素オプション

ソーシャルリンクのカスタムリンクアイコン

block_core_social_link_get_servicesフィルターの導入により、開発者はブロックバリエーションを使ってソーシャルリンクブロックに独自のリンクアイコンを追加できます。ソーシャルリンクブロックのカスタマイズ性が向上し、コアが多数のサービス一覧を管理する必要もなくなりました。

技術的な詳細とソーシャルリンクのバリエーションを登録するコードは、PR #70261で確認できます。以下は投稿エディターでの例です。

WordPress 6.9のカスタムリンクアイコン
WordPress 6.9のカスタムリンクアイコン

クエリーループブロックでメニュー順による並べ替えが可能に

投稿タイトルや日付に加えて、ページ属性をサポートする投稿タイプであれば、クエリーループブロックでメニュー順を使って並べ替えできるようになりました。この機能を試すには、複数の固定ページを作成し、それぞれを「クイック編集」で編集してみてください。

固定ページ画面でメニューの並び順を変更
固定ページ画面でメニューの並び順を変更

各固定ページを編集して、メニュー項目の順序を変更することもできます。右側の固定ページ名の横にある3つの点をクリックし、ドロップダウンから「順序」を選択すると、メニュー順を設定するためのポップアップが表示されます。

ドロップダウンから「順序」を選択
ドロップダウンから「順序」を選択
メニュー順序の変更
メニュー順序の変更

ページの順番を設定した後、新規固定ページを作成して、クエリーループブロックを追加します。投稿タイプに「固定ページ」を選択し、「メニュー順」で並べ替えます。

menu_orderの値はデータベース内のすべての投稿タイプで利用可能ですが、カスタム投稿タイプでこの設定を使えるようにするには、page-attributes機能のサポートを登録する必要があります。

この機能の詳細については、PR #68781をご覧ください。

ナビゲーションブロックの改善

ナビゲーションブロックにはいくつかの改善点がありますが、主要なものを簡単にご紹介します。

ナビゲーションブロックのリンクUIに「ページを作成」ボタンが追加されています。ここからすぐに固定ページを公開することも可能です。

ナビゲーションブロックのリンクUIからページを作成
ナビゲーションブロックのリンクUIからページを作成
「今すぐ公開」オプション
「今すぐ公開」オプション

この機能は、ナビゲーションメニューに含まれている場合でも、ボタンブロックでも利用可能です。

ボタンブロックのリンクUIでページを作成するコマンド
ボタンブロックのリンクUIでページを作成するコマンド

Block Bindings APIにより、ナビゲーションリンクブロックのURL属性は、リンク先が固定ページや投稿などのエンティティであれば、元のURLが変更された際、動的に更新されます。

同期されたリンクURL
同期されたリンクURL

また、設定サイドバーに新たなトグルオプションが追加され、ナビゲーションリンクを新規タブで開くように設定することができます。このオプションは、これまでコンテキストメニューのモーダルリンクでのみ利用可能でした。サイドバーの他のすべての設定の横に配置されているため、すぐに見つかります。

ナビゲーションブロックのリンクUIに新規タブで開くオプションが追加
ナビゲーションブロックのリンクUIに新規タブで開くオプションが追加

加えて、エディターからナビゲーションメニューブロックの背景を透明に設定できます。WordPress 6.9以前では、この効果を得るためにカスタムCSSコードを使用する必要がありました。

伸縮する見出しと段落ブロックのバリエーション

伸縮する見出しと伸縮する段落ブロックは、コンテナの幅いっぱいにテキストを自動的に伸ばす新たなバリエーションです。

このバリエーションは、ブロックインサータから直接、または見出し・段落ブロック・ツールバーのドロップダウンメニューから挿入できます。

伸縮する見出しと段落ブロックのバリエーション
伸縮する見出しと段落ブロックのバリエーション
伸縮段落に変形
伸縮段落に変形

カバーブロックのポスター画像サポート

poster-imageコンポーネントにより、カバーブロックがポスター画像に対応しました。これは、大容量の動画や通信速度が遅いユーザーにとって特に有用で、ユーザー体験の向上につながります。

主要なコアブロックに続いて、役割に応じたコンテンツ制作のチームコラボレーションを改善する機能をご紹介します。WordPress 6.9では、エディター内での共同作業やワークフローを大きく強化するノート可視性が導入されています。

ノート機能によるブロックへのコメント追加

投稿エディターで、ブロックに対してノート(コメント)を追加できるようになりました。この機能により、チームメンバー間で非同期的に協力し合えるようになり、アクティビティの把握や編集ワークフローの効率化が可能になります。

この機能は投稿エディター専用のため、ノートを追加するにはその投稿に対する編集権限が必要になります。

  • ログインしている 管理者と編集者はすべての投稿のすべてのノートを閲覧可能
  • 投稿者と寄稿者は、自分が作成したノートのみ閲覧・編集可能
  • 購読者はノートの閲覧不可

ノートは、ブロックツールバーにある「ノートを追加」をクリックして作成することができます。

ブロックツールバーから「ノートを追加」を選択してノートを作成可能
ブロックツールバーから「ノートを追加」を選択してノートを作成可能

すると、以下のようなノートサイドバーとノートを追加するためのパネルが表示されます。

WordPress 6.9でブロックにメモを追加
WordPress 6.9でブロックにメモを追加

最初のノートを追加した後に表示される「すべてのノート」をクリックすると、ノートサイドバーのオン/オフを切り替えることができます。

エディター設定ツールバーのノート設定
エディター設定ツールバーのノート設定

ノートは解決、修正、削除可能です。

WordPress 6.9でノートを編集
WordPress 6.9でノートを編集

ノートは投稿と固定ページでデフォルトで有効になっていますが、notesサポートにより、カスタム投稿タイプに対しても有効にすることができます。以下は、カスタム投稿タイプにノートを追加する簡単な例です。

register_post_type( 'book', array(
	'label' => 'Books',
	'public' => true,
	'show_in_rest' => true,
	'supports' => array(
		'title',
		'editor' => array( 'notes' => true ),
		'author',
		'excerpt',
	),
) );

カスタム投稿タイプの登録時にノートサポートを追加するのは非常にシンプルですが、既存の投稿タイプにノートサポートを追加するのはまだ少し面倒です。幸い、コア開発者によってこの機能の効率化が進められているため、今後のリリースでこの機能が改善されることが予想されます。

技術的には、ノートはコメント機能であり、comment_typeフィールドがnoteに設定されたwp_commentsテーブルに保存されます。プラグインからノートにアクセスするには、以下のようにget_comments()を使用します。

$args = array(
	'post_id' => $post_id,
	'type'    => 'note',
);
$notes = get_comments( $args );

なお、プラグインからノートを取得するには、noteタイプを指定する必要があります。これはノート式のコメントはデフォルトではクエリ結果から除外されるためです。

ユーザーがブロックにノートを追加すると、その投稿の作者が通知メールを受け取ります。この通知メールはデフォルトで有効になっていますが、WordPress管理画面から「設定」>「ディスカッション」に移動し、「自分宛のメール通知」の「誰でもノートを投稿する」の選択を解除することで、無効にすることも可能です。

WordPress 6.9でのメール通知設定
WordPress 6.9でのメール通知設定

開発者はnotify_post_authorフィルターを使用すると、この通知を自動制御することができます。

今回のこの機能は初期バージョンであり、開発チームはすでにWordPress 7.0用の次のバージョンを構築しています。

またWordPress 6.9では、ノートはブロック単位でのみ利用可能で、インラインノートは今後のバージョンで実装される予定です。

ノート機能の詳細は、開発者ノートWordPress 6.9 のブロックコメントの反復をコード例とあわせてご覧ください。

ブロックの表示制御

WordPress 6.9では、フロントエンドとエディター内でブロックの表示・非表示を制御できる、新たなブロック APIとインターフェースが導入されました。

この機能は、まだ公開する準備ができていないブロックを一時的に非表示にしたい場合に便利で、先ほどのノート機能とも相性抜群です。チームはページ作成の過程で共同作業を進めながら、各セクションが完成し承認されたタイミングでのみ公開できるようになります。

この新機能を試すには、新規投稿や固定ページを作成し、1つ以上のブロックやパターンを追加します。次に、ブロック設定ドロップダウンまたはリストビューからブロックまたはパターンを非表示にすると、エディターとフロントエンドの両方で確認できます。

WordPress 6.9でブロックを非表示に
WordPress 6.9でブロックを非表示に
The new block visibility control
新しいブロック表示コントロール

コマンドパレットが管理画面に拡張

コマンドパレットが、サイトエディターとWordPress管理画面の両方で利用できるようになりました(Ctrl+K または Command+K)。これにより、ナビゲーションをより簡単かつ迅速に行えます。パレットに文字を入力すると、検索したり、管理画面内を移動したり、アクションを直接実行したりできます。たとえば「追加」と入力すると、「投稿を追加」「メディアファイルを追加」「固定ページを追加」などのアクションのメニューが表示されます。

投稿ページのコマンドパレット
投稿ページのコマンドパレット

現在、コマンドパレットのさらなる拡張・改善案が出ており、今後も新たなコマンドが追加される予定です。コマンドパレットの最新情報はこちらをご覧ください。

開発者向け新機能

最後に、開発者向けの新機能をご紹介します。今回新たに導入されたAPI群により、プラグインをAIシステムから利用できるようにすることが可能になります。さらに、Interactivity API、Block Bindings、DataViews APIなど、既存のAPIに対しても多くの改善が加えられています。

Abilities API

まず、WordPress 6.9にはAbilities APIが導入されます。これは新しい機能的インターフェースで、標準化されたレジストリを提供し、プラグイン、テーマ、そしてWordPressコアが、人間にも機械にも読み取れる形式で機能を公開できるようにします。

この中央レジストリは、すべての機能を正式に登録し、PHP、REST API、そしてAIソリューションを通じて、一貫した方法で発見・検証・実行できる場所です。

Abilities APIは、AIアシスタント、外部アプリ、コマンドパレットのようなUI機能などの外部サービスが、WordPressのアクション(公開や編集など)を標準化された方法で理解し実行できるようにすることで、WordPressユーザーに直接利益をもたらします。

開発者にとってのメリットは、まず明確性にあります。「アビリティ(Abilities)」とは、説明、入力、出力が定義された登録済みの機能を意味します。

2つ目の重要な側面は標準化で、このAPIにより、WordPress管理画面、ブロックエディター、REST API経由の外部アプリ、AIアシスタントなど、どの環境であってもコマンドが一貫した方法で作成・解釈されることが保証されます。

また、ワークフローの自動化も重要なポイントです。Abilities APIを使うことで一連の操作を定義でき、複雑な自動ワークフローを構築することができます。

開発者は、Abilities APIをコマンドパレットの機能拡張、自動化ワークフローの構築など、さまざまな用途で活用可能です。

アビリティが登録されると、ChatGPTやGeminiなどのAI システムから利用できるようになります(以下英語原文の日本語訳)。

APIは機能の登録と権限管理を行い、プロトコルアダプターがそれらを外部のAIシステムが理解できる形式へ変換します。これにより、WordPressの機能とAIアシスタントの間に強固な接続が確立され、公開された機能に関する“正しい情報源”として、一次提供の API がその役割を担うことになります

アビリティは、「入力、出力、権限、実行ロジックが定義された、自己完結型の機能単位」です。

このAPIは、アビリティおよびアビリティカテゴリのあらゆる側面を管理できる一連の関数を提供し、新たなREST API エンドポイント、アクション、フィルターフックも用意されています。

アビリティを登録するには、APIが提供する新たなwp_abilities_api_initアクションとwp_register_ability関数を使用します。関数のシグネチャは次のとおりです。

wp_register_ability( string $name, array $args ): ?WP_Ability

wp_register_abilityは以下のパラメータを受け取ります。

  • $name(string):アビリティを一意に識別するための名前
  • $args(array):引数をまとめた配列

この関数は、登録が成功した場合はWP_Abilityのインスタンスを返し、失敗した場合は nullを返します。

以下は、ドキュメントから抜粋したアビリティ登録方法の一例です。

add_action( 'wp_abilities_api_init', 'my_plugin_register_site_info_ability' );
function my_plugin_register_site_info_ability() {
	wp_register_ability( 'my-plugin/get-site-info', array(
		'label' => __( 'Get Site Information', 'my-plugin' ),
		'description' => __( 'Retrieves basic information about the WordPress site including name, description, and URL.', 'my-plugin' ),
		'category' => 'data-retrieval',
		'output_schema' => array(
			'type' => 'object',
			'properties' => array(
				'name' => array(
					'type' => 'string',
					'description' => 'Site name'
				),
				'description' => array(
					'type' => 'string',
					'description' => 'Site tagline'
				),
				'url' => array(
					'type' => 'string',
					'format' => 'uri',
					'description' => 'Site URL'
				)
			)
		),
		'execute_callback' => function() {
			return array(
				'name' => get_bloginfo( 'name' ),
				'description' => get_bloginfo( 'description' ),
				'url' => home_url()
			);
		},
		'permission_callback' => '__return_true',
		'meta' => array(
			'annotations' => array(
				'readonly' => true,
				'destructive' => false
			),
		),
	));
}

詳細は以下のとおりです。

  • wp_abilities_api_init:アビリティを登録する際にフックするアクションで、登録前にAbilities APIが完全に初期化されていることを保証する
  • wp_register_ability:アビリティを登録する関数で、最初の引数はアビリティの一意の識別子(my-plugin/get-site-infoなど)、2つ目の引数は設定をまとめた配列
  • label:UI(コマンドパレットなど)で使用される、人間が読みやすいラベル
  • description:アビリティの説明
  • category:アビリティのカテゴリ
  • output_schema: アビリティが返すデータを定義する配列
  • execute_callback:アビリティが呼び出されたときに実行されるコールバック関数
  • permission_callback:ユーザーまたはエージェントにそのアビリティを実行する権限があるかどうかを検証するために実行される関数
  • meta:任意のメタデータを含む配列

以下のリソースも参考にしてみてください。

Block Bindings APIの改善点

WordPress 6.9 では、Block Bindings API にいくつかの改善が加えられています。

まず、Block Bindings APIのサポートが他のブロックにも拡張されました。

  • 日付ブロックは、投稿の公開日や更新日に関係なく、任意の日付を適用するように。これはcore/post-dataデータソースの追加によって実現されています。この機能を試すには、投稿に日付ブロックを追加して任意の日付を設定してみてください。その後、また別の日付ブロックを追加し、バリエーションを選択します。次に、投稿の公開日を変更して保存し、その違いを確認します。技術的な詳細は、PR #70585をご覧ください。
  • パターンの上書きにおいて、画像ブロックのキャプション属性をサポート

エディターのUIも強化され、異なるBlock Bindingsのデータソースが表示されるようになりました。ユーザーは、数クリックでデータソースを切り替えたり、属性を紐付け・解除したりできます(以下スクリーンショット参照)。

開発者向けの変更点としては、サーバーサイドで利用できるblock_bindings_supported_attributes_{$block_type}フィルターがAPIに追加されました。これにより、どのブロック属性をカスタムデータソースに接続できるかを指定できます。

クライアントサイドでは、ソース登録関数内のgetFieldsListメソッドを使って、カスタムソースを登録できるようになっています。

開発者向けノートには、改良されたBlock Bindings UIをブラウザのコンソールで確認できるコードブロックが掲載されています。

以下は、段落ブロック用の新しいソースセレクターです。

WordPress 6.9のBlock Bindings UI
WordPress 6.9のBlock Bindings UI

DataViewsとDataFormの強化

DataViewsとDataForm APIは、投稿、固定ページ、メディアのリストのような構造化されたデータを表示し、管理するためのモダンで標準化された方法を提供します。

この2つのAPIはそれぞれ異なる目的を果たします。

  • DataViews API:データの表示とナビゲーションのために設計(テーブル、グリッド、リストなどのビューを作成でき、データの検索、フィルター、並べ替えも可能)
  • DataForm API:データセットの要素を変更するために設計
DataViewの例─サイトエディターでのリストレイアウトでのページ表示
DataViewの例─サイトエディターでのリストレイアウトでのページ表示

この2つのAPIの主な改善点は以下のとおりです。

  • DataViewsには、新たなフィールド、コントロール、オペレーターが追加されており、メディア・ブール値・メール・配列といった新たなフィールドタイプの定義、checkboxtoggleGroupの編集コントロール、新しいフィルタ演算子など、さまざまな機能が追加。

  • 検証システムが刷新され、すべてのフィールドがrequiredルールとelementsルールに対応し、custom関数を用いたカスタム検証も定義できるように。
  • datetimeフィールドタイプに加えて、DataViewsがdateフィールドタイプにも対応。これにより日付のみを基準に項目を表示できるように。さらに新たなCalendarコンポーネントを使った日付でのフィルタリングも可能に。

  • DateCalendarDateRangeCalendarコンポーネントが導入
  • テーブルレイアウトが改善され、Control/⌘ + クリック複数の項目を選択可能に。
  • groupByField プロパティにより、フィールド値に基づいてデータを視覚的にグループ化できるようになり、データの整理が容易に。グリッドレイアウトテーブルレイアウトの両方で使用可能。
  • DataViewsのパフォーマンスが改善。以前はFeaturedImageViewコンポーネントが画像をフルサイズで読み込んでいたため、大きなプレビュー画像を多用するサイトでは、数メガバイトの画像を読み込む必要があったが、グリッドレイアウトがレスポンシブ画像を使用するようになったことで、そのようなサイトのバックエンドパフォーマンスが大幅に向上する。

DataViewsに関するその他の変更点は以下のとおり。

  • ロックされたフィルターの導入により、フィルターを変更せずにその効果を確認できるように。あらかじめ設定されたビューに便利。

  • dateフィールドに新たな編集コントロールが実装
  • DataViewsの空の状態がカスタマイズ可能になり、メッセージを編集したり、さらなる調整のためにReactノードを提供したりできるように。

DataViewsとDataForm APIの変更点の詳細は、開発者ノートとPR #70567#70578をご覧ください。

Interactivity APIの強化

Interactivity APIは、ユーザーのインタラクションにリアルタイムで反応するインタラクティブブロックを作成できるようにするものです。優れたユーザー体験を構築し、サイトを動的かつ魅力的にするのに役立つツールです。

WordPress 6.5で導入されたこのAPIは今回大幅に改善されています。以下、その一部をご紹介します。

Interactivity API ディレクティブへのIDの追加

Interactivity API ディレクティブににIDを追加できるようになりました。この機能は、同じHTML要素で同じ名前の属性を複数使えないという制限を回避できるため便利です。

ディレクティブにIDを割り当てるには、以下のようにIDの後にトリプルダッシュ(---)をつけます。

<div
	data-wp-watch---my-unique-id="callbacks.firstWatch"
	data-wp-watch---another-id="callbacks.secondWatch"
></div>

スクリプトモジュールとスタイルシートの読み込み

この変更により、より包括的でスムーズなクライアントサイドナビゲーションが可能になります。WordPressは、クライアントサイドでのページ遷移後に、スタイルシートを差し替え、スクリプトモジュールを読み込むようになりました。これは大きな改善です。

  • 新たなアルゴリズムでは、前のページと共有されているスタイルシートを再利用し、前のページに存在しなかった新しいスタイルシートを読み込み、使われなくなったものは無効化。これにより、ネットワークリクエストを最小限に抑えられる。
  • importmap定義により、スクリプトモジュールもより効率的に管理されるように。
  • 事前取得により、事前読み込みされていないスタイルシートやスクリプトモジュールがすべて事前に読み込まれる。

インタラクティブ要素内のルーターリージョン

インタラクティブ要素内でルーターリージョン(ユーザーがリンクをクリックした際にページ内で更新される領域)がサポートされるように。これまでは、ルーターリージョンはルートのインタラクティブ要素である必要がありました。つまり、ルーターリージョンが別のインタラクティブ要素の内側に配置されている場合、そのコンテンツは更新されませんでした。今回のWordPress 6.9ではこの制限が解消され、インタラクティブ要素の中にルーターリージョンを配置できるようになっています。

ルーターリージョンの新attachToプロパティ

ルーターリージョンは、data-wp-router-regionディレクティブ内で定義できる、新たなattachToプロパティに対応しています。これにより、ルーターリージョンが最初のページに存在していない場合でも表示できるようになります。attachToの値には、ルーターリージョンを挿入する親要素を指すCSSセレクタを指定します。

以下は、開発者向けノートに掲載されている例です。

<div
	data-wp-interactive="example"
	data-wp-router-region='{ "id": "example/region", "attachTo": "body" }'
>
	I'm in a new region!
</div>

getServerStateとgetServerContextの同期

getServerState()getServerContext()改良されました。現在、これらの関数がクライアント側ナビゲーションの間に変更されない値を追跡する際、値はリセットされます。さらに、現在のページのプロパティのみが保持され、以前のページのプロパティは削除されます。

Interactivity APIの詳細は、『Interactivity API’s client navigation improvements in WordPress 6.9』および『Changes to the Interactivity API in WordPress 6.9』をご覧ください。

Interactivity APIの包括的な概要はこちらでご紹介しています。

開発者向けその他のアップデート

WordPress 6.9には、他にも様々な開発者向けのアップデートが行われています。

今後の展望─WordPress 6.9から7.0 へ

WordPress 6.9では、ブロックエディター、API、共同作業ワークフローにわたって、多数の機能や改善が導入されました。そして次のリリースであるWordPress 7.0でも、さらなる進化が期待できます。プラットフォームがより動的になり、AI主導のツール群との連携が深まるにつれて、パフォーマンスを重視したサーバーの重要性がますます高まっています。これからの展開を見据えてプロジェクトを進めたいとお考えの方は、KinstaのWordPress専用マネージドクラウドサーバーをぜひ一度お試しください。

Carlo Daniele Kinsta

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