WordPress 7.0のリリースが間近に迫っています。今回のアップデートにより、WordPressは新たな時代へと踏み出しそうです。ここ数年で最大級の進化と言っても過言ではありません。

今回のアップデートは、バージョン7.0では管理画面がさらに洗練され、iframe化された投稿エディターやPHP-onlyブロックなど、新しいブロックや開発者向けツールも多数追加されています。

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

AIとの統合

WordPress 7.0では、AIとの連携機能が大幅に強化されています。かつての「ブログ作成プラットフォーム」としてのWordPressは、もはや過去のもの。現在は、AIとの連携を前提としたコラボレーションプラットフォームへと進化しています。

今回の大規模なアップデートでは、WordPressユーザーやプラグイン開発者が、大規模言語モデル(LLM)と標準化された方法でやり取りできる、安全かつ信頼性の高いインフラの構築が目指されています。

この新たなアーキテクチャにより、「エージェント型 WordPress(Agentic WordPress)」への道が開かれます。これはつまり、WordPressが標準化された機械向けインターフェースを通じて、外部のAIエージェントと標準連携できるようになることを意味します。

AI統合の詳細に入る前に以下、基本的な用語をご紹介します。

WordPressのAIアーキテクチャ基本概念

WordPress 7.0のAIアーキテクチャを理解するうえで、重要となるのは以下の4つのコンポーネントです。

  • AIクライアントプロバイダに依存しないAIインフラで、WordPressのPHPおよびJavaScriptコードから、生成AIモデルと標準化された方法でやり取りできる仕組みを提供。特定のAIプロバイダに依存しない設計のため、システムは柔軟かつ独立して動作できる。
  • AIプロバイダ:Anthropic、Google、OpenAIなど、大規模言語モデル(LLM)の開発・提供・運用を行う企業や組織を指す。
  • コネクタWordPressとAIプロバイダを接続するためのコンポーネント。WordPress 7.0には、OpenAI、Anthropic、Google向けの3種類のコネクターが標準搭載されていて、「設定」>「コネクタ」から利用可能。
  • Abilities API:プラグイン、テーマ、そしてWordPressコア機能の能力を、人間にも機械にも理解しやすい形式で公開するための新しいインターフェース。これにより、AIエージェントは「投稿を作成する」「抜粋を追加する」といったWordPress機能を構造化された形で操作できるように。WordPress 7.0が、AIエージェントと直接連携できる”エージェント型プラットフォーム”となった背景には、まさにこの仕組みがある。
WordPress 7.0の「コネクタ」画面
WordPress 7.0の「コネクタ」画面

コネクタ

これまでのWordPressでは、利用したいAIプロバイダごとに専用プラグインを導入する必要がありました。WordPress 7.0では、「設定」>「コネクタ」にAI コネクタを一元管理できる統合インターフェースが追加されています。

これにより、APIキーを複数の場所に入力する必要がなくなり、「コネクタ」画面で一度設定を行えば、対応プラグインはAIクライアントを通じてその接続を利用できるようになります。

さらに、この新しいインターフェースでは、AIプロバイダの切り替えも一箇所から簡単に行えます。設定変更によってサイトや機能に影響が出る心配もありません。

コネクタ」画面では、利用したいAIプロバイダの「インストール」をクリックし、APIキーを入力するだけで設定完了です。保存後すぐに、WordPressサイト上でAI機能を利用できるようになります。

「コネクタ」画面でAPIキーを追加
「コネクタ」画面でAPIキーを追加

どこから始めればいいかわからない場合は、まずAI Experimentsプラグインをインストールして有効化してみてください。このプラグインを使えば、AIによるアイキャッチ画像、altテキスト、抜粋の生成など、さまざまな機能を利用できます。

AI Experimentsプラグインの設定
AI Experimentsプラグインの設定

今回のAI統合では、ユーザーインターフェースの導入に加えて、開発者がConnectors APIを通じてAIプロバイダを登録できるようにもなっています。

開発者は、新たに追加されたコアクラスやメソッドを使って、コネクタの登録・管理を行えます。登録されたコネクタは、それぞれ「コネクタ」画面上にカード形式で表示されます。

また関連して、Connectors APIでは以下3つの公開関数も利用できます。

  • wp_is_connector_registered():コネクタが登録済みかを確認
  • wp_get_connector():特定のコネクタ情報を取得
  • wp_get_connectors():登録済みのすべてのコネクタを取得

さらに、アクションフックwp_connectors_initを使用することで、登録済みコネクタのメタデータを上書きすることも可能です。

AIクライアントを用いた開発

「コネクタ」画面がAI機能のインターフェースだとすれば、AIクライアントはその裏側で動作するエンジンです。これは、WordPressとAIとのやり取りを標準化するための統一抽象レイヤーとして機能します。OpenAI、Anthropic、Google Geminiなど、どのAIプロバイダを利用する場合でも、開発者側のコードは基本的に変わりません。プロバイダごとの差異はWordPress側で処理されるため、アプリケーションのロジックに集中できます。

この仕組みの中心となるのが、新しいwp_ai_client_prompt() 関数です。

以下は、PHPでのシンプルな実装例です。

$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
	->generate_text();

if ( is_wp_error( $ai_response ) ) {
	wp_die( $ai_response->get_error_message() );
}

echo wp_kses_post( $ai_response );

以下、レスポンススキーマを定義して、取得したデータをそのまま利用しやすい形に整える方法をご紹介します。

$taxonomy_schema = array(
	'type'       => 'object',
	'properties' => array(
		'category' => array( 'type' => 'string' ),
		'tags'     => array( 
			'type'  => 'array',
			'items' => array( 'type' => 'string' )
		),
	),
	'required'   => array( 'category', 'tags' ),
);

$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";

$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
	->using_temperature( 0.1 )
	->as_json_response( $taxonomy_schema )
	->generate_text();

if ( is_wp_error( $json ) ) {
	return $json;
}

$suggested_taxonomies = json_decode( $json, true );

このコードでは、以下のような仕組みを利用しています。

  • as_json_response():WordPressが、指定したスキーマ($taxonomy_schema)に準拠した純粋なJSON形式でレスポンスを返すようにする。
  • using_temperature():AIの応答の“ランダム性”を調整します。温度(temperature)が低い値( 0.1など)の場合は、より正確で安定した結果になり、高い値ではより創造的な応答が生成される。
  • $suggested_taxonomies:AIが生成したカテゴリやタグを格納する配列です。これらを投稿へ自動的に割り当てることもできる。

構造化された出力を利用することで、予測しやすく安定した結果を得られるだけでなく、Abilities APIとも連携しやすくなります。例えば、上記のコードを利用して、AIが生成したカテゴリーやタグを含む投稿を自動作成することも可能です。

また、このAPIが対応しているのはテキストだけではなく、generate_image()を使ってAIによる画像生成も行えます。

さらに、1回の呼び出しで複数の結果を取得することも可能です。たとえば、generate_text()generate_image()に数値を渡すことで、複数の候補を生成できます。generate_image( 3 )を実行すると、同じプロンプトから生成された3種類の画像バリエーションが返されます。

APIには、追加情報を取得できる各種メソッドも用意されています。これらのメソッドは GenerativeAiResultオブジェクトを返し、トークン使用量、利用したプロバイダ、レスポンスに使用されたモデルなど、詳細なメタデータを確認できます。

  • generate_text_result()
  • generate_image_result()
  • convert_text_to_speech_result()
  • generate_speech_result()
  • generate_video_result()

このように、APIはテキスト生成だけでなく、音声読み上げ、音声生成、動画生成など、幅広い機能に対応しています。

そのほか、以下のようなAPIメソッドも利用できます。

  • using_max_tokens():レスポンスの最大長を制限(例:->using_max_tokens( 500 )
  • using_model_preference():使用するモデルを指定(例:->using_model_preference( 'gemini-2.5-flash' )

より詳しい解説やコード例については、WordPress AIクライアントのGitHubプロジェクトページおよび、WordPress 7.0に向けた変更内容をご覧ください。

新ブロックとデザインツール

WordPress 7.0では、編集体験を大きく向上させる新しいブロックやデザインツールが追加されています。ここでは、新機能と、それによって変わる制作ワークフローを紹介します。

パンくずリストブロック

WordPress 7.0では、新たにパンくずリストブロックが追加されています。このブロックは、表示中のページ階層を自動的に反映します。

動的コンポーネントが組み込まれており、WordPressのデータ構造を参照して、固定ページ階層(親子関係)や投稿のタクソノミー情報に基づき、閲覧中ページの位置を自動的に判別します。

以下の例では、通常のブログ投稿におけるカテゴリ階層がパンくずブロックによって表示されています。

投稿のカテゴリ階層を表示するパンくずリストブロック
投稿のカテゴリ階層を表示するパンくずリストブロック

クエリループにも対応しており、パンくずブロックをクエリループブロック内に追加すると、クエリで取得された各投稿の階層パスを表示できます。

パンくずブロックには、以下の設定オプションも用意されています。

  • ナビゲーションの開始地点としてホームページへのリンクを表示/非表示
  • 現在のページのパンくずを表示/非表示
  • パンくず区切り文字の変更
  • ホームページ上でのパンくず表示
  • 投稿階層(デフォルト)またはタクソノミー階層を優先

また、パンくずブロックはGutenbergのデザインツールにも対応しており、開発者向けにパンくず表示をプログラム側から制御できる2つのフィルターも追加されています。

新たに導入されたblock_core_breadcrumbs_post_type_settingsフィルターを使うことで、投稿に複数のタクソノミーやタームが存在する場合、パンくずにどのタクソノミータームを使用するか指定できます。

以下の例では、このフィルターを利用して、カテゴリの代わりにタグを表示しています。

add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
	if ( 'post' === $post_type ) {
		$settings['taxonomy'] = 'post_tag';
	}
	return $settings;
}, 10, 2 );

block_core_breadcrumbs_itemsフィルターを使うと、最終的に表示されるパンくずリストの項目を、レンダリング前に追加・削除・変更できます。主な用途には以下のようなものがあります。

  • ホームアイコンを画像(SVGや企業ロゴなど)に置き換え、スペースを削減したり、サイトのブランドデザインに合わせたりする
  • パンくず内で投稿タイトルが長すぎる場合に短縮表示する
  • カスタムカテゴリやタームを追加し、パンくずの経路を強制的に変更する

以下のコードでは、このフィルターを使用して、20文字を超えるパンくずラベルを省略表示する例です。

add_filter( 'block_core_breadcrumbs_items', function( $items ) {
	foreach ( $items as $key => $item ) {
		if ( mb_strlen( $item['label'] ) > 20 ) {
			// Truncate the string to 17 characters and append '...'
			$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
		}
	}
	return $items;
}, 10, 1 );

パンくずブロックのフィルターや、その他のコード例についてさらに詳しく知りたい場合は、開発者向けノートをご覧ください。

アイコンブロック

アイコンブロックを使うと、コンテンツ内にSVGアイコンを追加できるようになります。このブロックは、数個のアイコンを追加するためだけにサードパーティ製プラグインを導入しなくても、マークアップ管理やアクセシビリティの一貫性を保てる、標準機能としてのソリューションを提供することを目的としています。

現在、アイコンブロックにはデフォルトのアイコンセットが用意されており、その中からアイコンを選択できます。今後は、サードパーティ製アイコンセットをユーザーが登録できる機能も追加される予定です。

WordPress 7.0のアイコンライブラリ
WordPress 7.0のアイコンライブラリ

このブロックは、新しいサーバーサイドSVG Icon Registration APIを基盤として構築されています。これにより、アイコンレジストリへの更新内容を、すべてのユーザーへ安全かつ一貫して反映できるようになります。また、アイコンブロックの導入にあわせて、新しい/wp/v2/iconsAPIエンドポイントも追加されています。

新しいアイコンブロックを使えば、コンテンツへのアイコン追加も簡単
新しいアイコンブロックを使えば、コンテンツへのアイコン追加も簡単

カスタマイズ可能なナビゲーションオーバーレイ

WordPress 7.0以前のモバイル向けナビゲーションメニューは固定仕様で、デザインやレイアウト、初期コンテンツを変更することはできませんでしたが、新たにカスタマイズ可能なナビゲーションオーバーレイが導入され、ナビゲーションメニューを自由に設計できるようになっています。ブロックやパターンを使ってメニューオーバーレイを作成できるほか、「ナビゲーションオーバーレイを閉じる」ブロックを使えば、オーバーレイ内の好きな場所に閉じるボタンを配置できます。

ナビゲーションオーバーレイは、技術的にはテンプレートパーツとして扱われます。作成したオーバーレイは、サイトエディターのサイドバーにある「パターン」セクションに表示されます。各オーバーレイはナビゲーションブロックに紐づけられますが、複数のナビゲーションブロックで同じオーバーレイを共有することも可能です。

ナビゲーションオーバーレイは、基本的にあらゆるブロックを配置できる「ブロック用キャンバス」になります。ナビゲーションブロックを追加することもできますが、配置するブロックに制限はありません。たとえば、ソーシャルアイコン、検索フィールド、サイトロゴなども自由に追加できます。

なお、ナビゲーションオーバーレイは、ナビゲーションブロック専用機能です。テンプレート内の他の場所で誤って使用されないよう、ブロックインサーターには表示されないようになっています。

WordPress 7.0のナビゲーションオーバーレイ
WordPress 7.0のナビゲーションオーバーレイ

サイトエディターでは、ナビゲーションブロックのサイドバーにある「オーバーレイ」セクションから、カスタムオーバーレイメニューを作成できます。

ナビゲーションブロックを選択すると、テンプレートパーツ用サイドバーに「ナビゲーションオーバーレイ」の設定が表示されます。設定は「コンテンツ」と「デザイン」の2つのセクションに分かれており、「コンテンツ」ではオーバーレイに含まれるブロックの種類を確認でき、「デザイン」ではあらかじめ用意されたデザインを選択できます。

ナビゲーションオーバーレイテンプレートパーツの設定画面
ナビゲーションオーバーレイテンプレートパーツの設定画面

ブロックサイドバーは、ナビゲーションオーバーレイテンプレートパーツ用の「設定」と「スタイル」の2つのタブに分かれています。

ナビゲーションオーバーレイの設定ブロック
ナビゲーションオーバーレイの設定ブロック

ナビゲーションオーバーレイブロックの「スタイル」タブでは、色、背景画像、タイポグラフィ、サイズ、枠線、影などを設定し、オーバーレイのデザインをカスタマイズできます。

ナビゲーションオーバーレイのスタイル設定
ナビゲーションオーバーレイのスタイル設定

テーマ開発者は、あらかじめ作成したナビゲーションオーバーレイをテーマに簡単に追加することができます。デフォルトのオーバーレイテンプレートパーツ(オーバーレイ本体)だけでなく、オーバーレイ編集時に表示されるオーバーレイパターン(デザイン済みレイアウト)も用意できます。

テンプレートパーツの「デザイン」セクションでは、既存のパターンを利用できる
テンプレートパーツの「デザイン」セクションでは、既存のパターンを利用できる

より詳しい解説やコード例については、公式の開発者向けノートおよび、関連プルリクエストをご覧ください。

ナビゲーションオーバーレイを閉じるブロックの設定
ナビゲーションオーバーレイを閉じるブロックの設定

段落ブロックの改善

段落ブロックには、テキストスタイルをより柔軟に調整できる新機能がいくつか追加されています。

まず、タイポグラフィ設定にオプションが追加され、1行目のインデントを設定できるようになりました。

WordPress 7.0の行頭インデント設定
WordPress 7.0の行頭インデント設定

個別の段落ごとにインデントを設定できるほか、「エディター」>「スタイル」>「ブロック」>「段落」のグローバルスタイル設定から、すべての段落に一括適用することも可能です。

グローバルスタイルでの行頭インデント設定
グローバルスタイルでの行頭インデント設定

テーマ開発者は、新しいtextIndentプロパティを使って、theme.jsonファイル内で行頭インデント機能の有効/無効を切り替えたり、細かく制御したりできます。

また、「幅広」と「全幅」配置にも対応しました。以下は、新たに追加された配置設定です。

段落ブロックが幅広および全幅配置に対応
段落ブロックが幅広および全幅配置に対応

段落ブロックには、テキストの段組み機能も新たに追加されています。ブロックサイドバーの段落設定から利用できます。

段落ブロックはテキストの段組みにも対応
段落ブロックはテキストの段組みにも対応

カバーブロックで埋め込み動画を背景に設定可能に

WordPress 7.0では、YouTubeやVimeoなどの埋め込み動画を、カバーブロックの背景動画として使用できるようになりました。これまでは、アップロードした動画しか利用できませんでした。

この機能は、動画を外部プラットフォームでホスティングすることで、帯域幅の消費を抑えたい場合に特に便利です。

WordPress 7.0でURLから動画を埋め込み可能に
WordPress 7.0でURLから動画を埋め込み可能に

外部でホスティングしている動画を追加するには、カバーブロックのツールバーで「メディアを追加」をクリックし、「URLから動画を埋め込む」を選択します。

カバーブロックで動画のURLを貼り付け
カバーブロックで動画のURLを貼り付け

出現するフィールドに動画のURLを貼り付けます。

埋め込み動画をカバーブロックの背景動画として使用
埋め込み動画をカバーブロックの背景動画として使用

埋め込み動画は、エディター上でもフロントエンド上でも、カバーブロックの背景動画として表示されます。

レスポンシブ対応したグリッドブロック

グリッドブロックが、ネイティブでレスポンシブ対応になりました。以前のWordPressでは、「自動」と「手動」の2つのモードしか選択できませんでした。前者では最小カラム幅を設定することでレスポンシブレイアウトを実現できましたが、後者ではカラム数を指定できるものの、その数は固定されていました。

WordPress 6.9のグリッドブロック設定
WordPress 6.9のグリッドブロック設定

WordPress 7.0からは、グリッドブロックが標準でレスポンシブ対応になりました。カラム数は「最大数」として扱われるようになり、レスポンシブ性を維持したまま、最小カラムサイズや最大カラム数を細かく調整できます。

大画面でのグリッドブロック
大画面でのグリッドブロック
小さい画面でのグリッドブロック
小さい画面でのグリッドブロック

個別ブロックごとのカスタムCSS対応

ブロックの「高度な設定」から、特定のブロックインスタンスにカスタムスタイルを追加できるようになりました。

WordPress 7.0で個別ブロックごとのカスタムCSSに対応
WordPress 7.0で個別ブロックごとのカスタムCSSに対応

ブロックにカスタムスタイルを追加すると、WordPressは自動的にhas-custom-cssクラスを付与します。コードエディターでブロックを確認すると、以下のようなコードが追加されているのがわかります。

<!-- wp:image {
	"id":848,
	"sizeSlug":"large",
	"linkDestination":"none",
	"style":{ "css":"border: 4px solid blue;" }
} -->
	<figure class="wp-block-image size-large has-custom-css">
		<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
	</figure>
<!-- /wp:image -->

カスタムスタイルは、WordPressのデフォルトスタイルやグローバルスタイルの後に読み込まれるため、同じブロックの他のインスタンスのデザインへ影響を与えることはありません。

ビューポートに応じたブロック表示制御

WordPress 7.0ではモバイル、タブレット、PCといったデバイスごとに、ブロックの表示・非表示を個別に切り替えられるようになっています。

今回の初期実装では、blockVisibilityに新しいviewportプロパティが追加されています。

{
	"metadata": {
		"blockVisibility": {
			"viewport": {
				"mobile": false,
				"tablet": true,
				"desktop": true
			}
		}
	}
}

コードエディターでブロックへ直接上記のJSONオブジェクトを追加するか、コマンドパレットを使用することで、表示制御を有効化できます。

コマンドパレットからブロック表示制御を有効化
コマンドパレットからブロック表示制御を有効化

ブロック表示制御を有効化すると、ブロックツールバー、ブロックインスペクターサイドバー、またはコマンドパレットからモーダルを開き、表示設定へアクセスできるようになります。

WordPress 7.0のブロック表示制御モーダル
WordPress 7.0のブロック表示制御モーダル

今後のリリースでは、ブロック表示制御に対するブレークポイントのカスタマイズ機能や、theme.jsonとの連携も追加される予定です。

数式ブロックのスタイル設定オプション

WordPress 7.0以前では、数式ブロックのデザインをカスタマイズすることはできませんでした。今回の新バージョンでは、数式ブロックに対して、色、タイポグラフィ、サイズ、枠線のスタイル設定オプションが追加されています。

数式ブロックのスタイル設定
数式ブロックのスタイル設定

HTMLブロックのアップデート

HTMLブロックが全面的に刷新されました。コンテンツ内にHTMLブロックを追加すると、HTML、CSS、JavaScriptをそれぞれ入力できる3つのタブを備えたモーダルウィンドウが表示されるようになっています。

WordPress 7.0のHTMLブロック用コード入力モーダル
WordPress 7.0のHTMLブロック用コード入力モーダル

より広い作業スペースが必要な場合は、モーダルウィンドウ右上のボタンから、全画面モードのオン/オフを切り替えられます。

全画面モードで表示したHTMLブロックのモーダル
全画面モードで表示したHTMLブロックのモーダル

画像ブロックの改善

画像ブロックには、カスタマイズ性を高める複数の改善が加えられています。

画像ブロックは新たに、幅広および全幅配置時のアスペクト比設定に対応しました(PR #74519)。この機能は、ブロック設定サイドバーの「スタイル」タブから利用できます。

WordPress 7.0の画像ブロックに追加されたアスペクト比設定
WordPress 7.0の画像ブロックに追加されたアスペクト比設定

もうひとつ便利な追加機能が、フォーカルポイント設定です。この新機能により、画像がトリミングされる際に、どの部分を表示の中心にするか調整できるようになりました(PR #73115)。

WordPress 7.0の画像フォーカスポイント設定
WordPress 7.0の画像フォーカスポイント設定

エディター内の画像トリミングコンポーネントは専用パッケージへ移行され、ブロックエディター内だけでなく、アプリ全体で利用できるようになりました(PR #73277)。

管理画面エクスペリエンスの向上

WordPress 7.0では、管理画面が全面的に再設計・モダン化されました。サイト内のナビゲーションをよりスムーズで一貫性のあるものにし、視覚的にも使いやすくすることを目的とした、大幅な改善となっています。

ビジュアル面の改善

WordPress 7.0の管理画面を開くと、まずインターフェース要素の見た目が大きく変わったことに気づくはずです。これらの変更は以前から広く議論されており、従来の管理画面とブロックエディター間のデザインの不一致を解消し、管理画面をよりモダンにするために必要な改善とされていました。

今回の目的は、管理画面のデザインを刷新し、旧来の画面と新しいブロックエディター/サイトエディターとの一貫性を高めること、そしてWordPress全体のデザインシステムとの統一感を向上させることにあります

ビジュアル刷新では、WordPress管理画面全体で使用される主要コンポーネントを中心に改善が行われました。Fabian Kaegy氏も言及している通り、これらはあくまで視覚面の変更であり、アーキテクチャや機能自体に変更はありません。

WordPress 7.0で導入された新しいメニュー、ボタン、UIアニメーションについては、Figma上の公式WordPress Design Systemから確認できます。

WordPress 7.0で刷新された管理画面ボタンのデザイン(画像出典:WordPress Design System)
WordPress 7.0で刷新された管理画面ボタンのデザイン(画像出典:WordPress Design System

リビジョン表示の改善

リビジョンは、変更内容を視覚的に確認できるエディター風インターフェースで表示されるようになりました。これにより、変更箇所を確認するために記事全体を読み返す必要はありません。同じコンテンツのバージョン間の差分が、ブロック単位でハイライト表示されます。また、スタイル変更も検出できるようになり、カラーパレット、タイポグラフィ、サイズ設定などの変更点も簡単に確認できます。

リビジョンでブロック単位の変更内容を視覚的にプレビュー可能に
リビジョンでブロック単位の変更内容を視覚的にプレビュー可能に

変更内容は色分けで表示されます。

  • 黄色:変更されたブロックまたはテキスト
  • 赤色:削除されたブロックまたはテキスト
  • 緑色:追加されたブロックまたはテキスト

リビジョン機能では、Yjsの強力な機能も活用されています。以前のバージョンを復元する際、システムはコンテンツ全体を巻き戻すのではなく、ドキュメント内で変更されたブロック単位のみを復元します。

この仕組みは今後さらに改善される予定で、より高度な機能の追加も期待されています。これまでの進捗や今後の展望について詳しく知りたい場合は、Mathias Ventura氏による2023年の投稿、およびissue #60096#61161をご覧ください。

View Transitions

WordPress 7.0では、エディター初期化や管理画面間の遷移を担当するbootパッケージが大幅にアップグレードされました。これにより、管理画面間の移動時にページ全体を再読み込みする必要がなくなり、スムーズなアニメーション付き遷移が実現されています。

技術的には、bootパッケージへView Transitions APIを実装することで、状態変更時にズームやスライドアニメーションを制御できるようになりました。これにより、ルート変更時にもキャンバスを再マウントする必要がなくなり、より滑らかな画面遷移を実現しています。

開発者向けの変更点

WordPress 7.0は単なる視覚的なアップデートだけではなく、開発ワークフローを大幅に簡素化する構造的な変更も導入されています。主なポイントとしては、より強力になった theme.jsonによるカスタムCSS削減、iframe利用拡張によるより予測しやすいレイアウト管理、そして改善されたDataViews、DataForm、Field APIによる宣言的な管理画面UI構築があります。さらに、JavaScript経由でアプリケーション機能を標準化して公開・操作できる、新しいClient-side Abilities APIも追加されています。

続いて、WordPress 7.0で導入される技術的な変更点をご紹介します。

theme.jsonで疑似クラスに対応

テーマ開発者にとって嬉しいアップデートです。WordPress 7.0からは、疑似クラスセレクター:hover:focus:focus-visible:active)をtheme.json内でブロックやスタイルバリエーションに直接適用できるようになりました。

WordPress 7.0以前では、疑似クラスはボタンやリンクなどのHTML要素に対してのみ利用可能で、ブロック単位で使用するにはカスタムCSSを書く必要がありました。

ブロックレベルで疑似クラスを使用するには、theme.jsonstyles セクションへスタイル設定を追加します。以下は、ボタンブロックに疑似クラスを適用するシンプルな例です(PR #71418も参照)。

{
	"version": 3,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"width": "2px",
					"style": "solid",
					"color": "#000000"
				},
				":hover": {
					"border": {
						"color": "#ff4400"
					},
					"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
					"typography": {
						"textDecoration": "underline"
					}
				},
				":active": {
					"filter": "brightness(0.8)",
					"shadow": "none"
				}
			}
		}
	}
}

以下は、ボタンブロックの各状態を示しています。

ボタンブロックで:hoverと:activeの疑似クラスを使用した例
ボタンブロックで:hoverと:activeの疑似クラスを使用した例

以下は、theme.json内でブロックバリエーションに疑似クラスを適用する方法を示す例です。

{
	"version": 3,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"neon": {
						"border": {
							"width": "2px",
							"style": "solid",
							"color": "#00ff00"
						},
						"color": {
							"text": "#00ff00",
							"background": "transparent"
						},
						":hover": {
							"border": {
								"color": "#ffffff"
							},
							"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
							"color": {
								"text": "#ffffff"
							},
							"typography": {
								"textDecoration": "none"
							}
						},
						":active": {
							"filter": "brightness(1.5) blur(1px)",
							"shadow": "0 0 10px #ffffff"
						}
					}
				}
			}
		}
	}
}

iframe化された投稿エディター

WordPress 7.0から、コンテンツ内で使用されているブロックがすべてBlock API version 3以上の場合、投稿エディターがiframe内で読み込まれるようになりました。7.0以前では、コンテンツに含まれていないブロックも含め、登録済みブロックがすべて Block API v3+ を使用している場合にのみ、投稿エディターがiframe化されていました。

投稿エディターをiframe内で読み込む最大のメリットは、エディターUIのスタイルとテーマ側のコンテンツスタイルを分離できる点にあります。iframeを使用しない場合、エディター用スタイルシートとテーマ用スタイルシートが同じドキュメント内で共存するため、互換性問題が発生しやすく、バックエンドとフロントエンド間で視覚的一貫性を保つのが困難でした。

iframe化された投稿エディターには、主に以下のようなメリットがあります。

スタイル分離

  • CSSの干渉を防止:iframeによって、WordPress管理画面のスタイルがエディターキャンバスへ影響したり、その逆が起こったりすることを防げます。これにより、ブロック表示が周囲のUIに左右されなくなります。
  • CSSリセット不要:エディター内容をフロントエンドと一致させるために、管理画面CSSを手動でリセットする必要がなくなります。
  • CSS接頭辞不要:テーマ開発者は、管理画面UIへの影響を避けるために、高い詳細度セレクターや接頭辞付きCSSを書く必要がなくなります。

レイアウトの一貫性

  • ビューポート相対単位への対応:iframeなし環境では、vw(viewport width)や vh(viewport height)は管理画面全体(サイドバー含む)を基準にしていました。iframe化により、これらはエディターキャンバス基準で利用できます。
  • 標準のメディアクエリ対応:メディアクエリが、ブラウザ全体ではなくエディターキャンバスサイズを基準として動作するようになります。

開発体験の向上

  • ワークフロー簡素化:テーマ・プラグイン開発者は、フロントエンド用スタイルをほぼそのままエディターへ適用できるようになります。
  • 選択状態の維持:サイドバー操作中でも、選択中テキストなどの状態を維持できます。
  • 予測しやすい挙動:インストール済みプラグインによってエディターモードが突然切り替わる問題も防止され、表示の一貫性が向上します。

後方互換性

投稿内に旧APIバージョンのブロックが含まれている場合、後方互換性維持のためiframeは自動的に無効化されます。これらの改善を活用するため、ブロック開発者には Block API version 3 以上へのアップデートが推奨されています。

PHP-onlyブロックの登録

WordPress 7.0では、PHP-onlyブロックの登録が可能になりました。さらに、インスペクターコントロールも自動生成されます。この追加機能により、開発ワークフローが簡素化されるだけでなく、ハイブリッドテーマや従来のPHP関数・ショートコードを利用しているサイトでも、ブロックエディター導入・開発を進めやすくなります。

以下は、PHP経由で登録されたブロックの例です。

/**
 * Render callback (frontend and editor)
 */
function my_php_only_block_render( $attributes ) {
	return '<div>
		<h3>🚀 PHP-only Block</h3>
		<p>This block was created with only PHP!</p>
	</div>';
}

/**
 * Register the block on the 'init' hook.
 */
add_action( 'init', function() {
	register_block_type( 'my-plugin/php-only-test-block', array(
		'title'		   => 'My PHP-only Block',
		'icon'			=> 'welcome-learn-more',
		'category'		=> 'text',
		'render_callback' => 'my_php_only_block_render',
		'supports'		=> array(
			// Automatically registers the block in the Editor JS (previously auto_ssr)
			'auto_register' => true, 
		),
	) );
});

本記事執筆時点では、PHP-onlyブロックは動的ブロックには対応しておらず、利用できる設定コントロールも限定されていますが、それでも活用できるシナリオは多数あります。PHP-onlyブロックに焦点を当てた解説記事もご用意しています。PHP開発を行っている方は、ぜひチェックしてみてください。

シンプルなPHP-onlyブロック
シンプルなPHP-onlyブロック

DataViews、DataForm、Field APIの改善

WordPress 7.0では、DataViewsに複数の改善が加えられ、よりモダンでモジュール化された管理インターフェースへ向けた大きな一歩となっています。今回のアップデートにより、データ管理は、宣言的アプローチによる高度にカスタマイズ可能な体験へと進化しました。開発者は、JSON形式でルールを定義するだけで、複雑なカスタムインターフェースを構築できるようになり、コア側が自動的にUIを生成します。

主な追加機能は以下の通りです。

  • データ表示の改善(DataViews)Activityレイアウトでは、アクティビティフィードタイムライン形式の表示に対応しました。また、リスト用の新しいコンパクト表示モードも追加されています。
  • フォーム機能の改善(DataForm)Detailsレイアウトが利用可能になりました。また、Panelレイアウト用の編集アイコンも追加され、必要な場合のみ表示するよう設定できます。
  • データ制御機能の改善(Field API): 自動フィールドバリデーションに対応したほか、数値フィールドや日付フィールド向けの書式設定オプションも強化されています。

以下は、データをグループ化してコンパクトモードで表示するビューを定義する例です。

const myCompactView = {
	type: 'list',
	layout: { 
		density: 'compact' 
	},
	groupBy: {
		field: 'status',
		direction: 'desc',
		showLabel: true
	}
};

DataViews、DataForm、Field APIの改善についてより詳しく知りたい場合は、開発者向けノートをご覧ください。

Client-side Abilities API

WordPress 6.9では、Abilities APIが導入されました。これは、プラグイン、テーマ、WordPressコアが、自身の機能を人間にも機械にも理解できる形式で公開し、WordPressと標準化された方法で連携できるようにする新しいインターフェースです。

WordPress 7.0では、JavaScriptから直接、コンテンツへのブロック追加や画面遷移などのクライアントサイド機能を安全かつ標準化された方法で実装できるJavaScript APIが追加されています。

Client-side Abilities APIは、2つのパッケージで構成されています。

  • @wordpress/core-abilities:プラグインからサーバーサイドで登録されたAbilitiesへアクセスする場合に使用。このパッケージは、REST API経由で登録済みAbilitiesとカテゴリを取得し、@wordpress/abilitiesストアへ保存する。
  • @wordpress/abilities:サーバーサイドAbilitiesを読み込まず、Abilitiesストアのみを提供。クライアントサイド機能のみを登録するプラグインでは、これをエンキューする。

Client-side Abilities APIの詳細は、開発者向けノートとコード例をご覧ください。

Interactivity APIの変更点

Interactivity APIは、WordPress標準のインタラクティブ機能向けAPIで、サイトへインタラクティブ機能を標準化された方法で追加うることができます。WordPress 7.0では、新たにwatch()が追加され、状態変更をプログラム側から監視できるようになりました。これまでは、状態変更への反応には data-wp-watchディレクティブしか利用できませんでした。

その他にも、core/routerストア関連の変更が行われています。

Interactivity APIの変更内容について詳しくは、開発者向けノートをご覧ください。

その他の開発者向け変更点

そのほか、開発者向けに以下のような変更も加えられています。

  • WordPress 7.0から、Block Bindings対応ブロック属性はパターンの上書きにも対応。これにより、カスタムブロックを含むあらゆるブロックでパターンの上書きを利用できる。
  • 非同期パターンおよびテンプレートパーツは、デフォルトでcontentOnlyに設定されるように。誤ってブロック構造を壊すことなく、まずテキストやメディア編集用コントロールへアクセスできる。カスタムブロックを編集可能なまま維持したい場合は、block.json"role": "contentOnly"を設定。こ機能は、PHPではblock_editor_settings_allフィルター、JavaScriptでは disableContentOnlyForUnsyncedPatternstrueに設定することで無効化も可能。
  • PHP 7.2および7.3のサポートが終了。推奨される最小PHPバージョンは8.3。
  • Dimensionsブロックサポートシステムも大幅に改善。block.jsondimensions内で、widthheightを標準ブロックサポートとして利用できるようになったほか、テーマ側では theme.json内でサイズプリセットを定義できる。

今後のWordPress─7.0が切り開く新時代

WordPress 7.0は単なるアップデートではなく、ユーザーと開発者の双方にとって、大きな転換点となるリリースです。AI統合とAbilities APIによって、AIは管理画面の操作、新規コンテンツの作成、既存投稿の編集まで行えるようになり、歴史的な変化の入り口に立っていると感じます。Kinstaは、これらのAI機能を活用しながら、まったく新しいものを生み出していけることを非常に楽しみにしています。

WordPress 7.0の進化はAIだけにとどまりません。編集体験も全面的に刷新され、ブロック単位の新しいリビジョンアーキテクチャ、新しいコアブロック、そしてデザインシステムの大幅なアップデートが導入されています。

さらに開発者向けには、開発ワークフローを効率化し、新たな可能性を広げる改善も多数追加されています。iframe化されたエディター、theme.jsonの疑似クラス対応、Client-side Abilities API、PHP-onlyブロックなど、WordPress 7.0は、より高度なサイトやアプリケーションを構築するための強力なツール群を提供しています。

そして、WordPress 7.0の可能性を最大限に引き出すには、高速かつ安全な最新サーバー環境が欠かせません。Kinstaなら、WordPressのパフォーマンスを最大限に活用するために必要な環境がすべて揃っています。WordPress専用マネージドクラウドサーバーの詳細はこちらをご覧ください。

Carlo Daniele Kinsta

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