WordPress 6.7の新機能（ズームアウトモード、メタボックス、ブロックパターンAPIなど多数）

WordPress 6.7のリリースが間近に迫る今、今回も注目の新機能や変更点、改善点を一挙ご紹介します。

今回のリリースには、87のコア機能強化、機能リクエスト、200以上のバグ修正が含まれています。

Gutenbergに関しては、18.6から19.3までの8つのバージョンがコアに含まれます。ブロックエディターには、445の改善、464のバグ修正、55のアクセシビリティ改善と、多数の更新が行われています。

また、開発者向けの新たなAPIも。エディターインターフェースは、これまでコードでのみアクセス可能だった機能を含む、いくつかの改良点が見られます。ユーザビリティの改善と新しいデザインツールによって、デザインプロセスの効率化が期待されます。

さらに、WordPress 6.7では、新デフォルトテーマの「Twenty Twenty-Five」も登場し、新バージョンに搭載される最新機能の恩恵を受けています。

WordPress 6.7の新機能や変更点の中から、特に開発者や一般ユーザーにとって注目に値するものを厳選してご紹介していきます。

ズームアウトモード

WordPress 6.7には、個々のブロックではなく、パターンに焦点を当てたコンテンツの作成と編集に役立つズームアウトモードが搭載されます。これにより、より高度な作業が可能になり、作成中のページの全体像を把握することができます。

上部のツールバーに新たに追加された「ズームアウト」をクリックすることで、ズームアウトを有効化することができ、パターンまたは個々のブロックを交互に操作することができます。

ズームアウトを有効にすると、選択したパターンに対していくつかの操作を実行できます。ブロックツールバーには、ドラッグ、上下移動、シャッフル、リストビューでは、選択したパターンの編集、複製、削除などの操作を実行可能です。

ズームアウトを有効にして作業すると、ブロックインサーターのデフォルトは「パターン」タブになります。リストビューにも反映され、ブロックの代わりにパターンが表示されます。

ズームアウトモードに関連する機能と変更点の詳細は、「Zoom Out mode iteration issue」（GitHub）および「Developer Notes for Zoom Out in WordPress 6.7」（WordPress）をご覧ください。

投稿エディターのメタボックス

6.7より以前のバージョンでは、メタボックスが投稿エディターのキャンバスをiframeで読み込むことを妨げていました。これにより、エディターUIからブロックおよびテーマCSSを分離したり、メディアクエリおよびビューポートの相対CSSユニットを正確にしたりといった、操作が行えませんでした。つまり、エディターとフロントエンドのビューで同じCSSを使用することができませんでした。

この点が改善され、WordPress 6.7からは、エディターのコンテンツとメタボックスがエディターのインターフェースで共存できるように。スプリットビューの導入により、現在の投稿/固定ページに1つ以上のメタボックスがある場合でも、投稿エディターキャンバスはiframeで読み込まれます。開発者ノートでは以下のように記されています（日本語訳）。

この変更により、エディタビューとフロントエンドビューの間で一貫したWYSIWYG体験（「What You See Is What You Get」の略で、見たままの結果を得られることを意味する）が保証されます。メタボックスも以前より使いやすくなり、投稿内容のどの部分でも視覚的に参照しながら、任意のメタボックスを操作できるようになっています（その逆も然り）

この実装では、flexを使用することで、コンテンツビューとメタボックスエリアのスクロールが可能になります。

この機能強化に伴い、インターフェースにも以下のような変更が加えられました。

• メタボックスエリアの高さは、デフォルトで50%に制限
• メタボックスエリアは、ビューポートの高さに応じて折りたたみまたはサイズ変更可能
• リサイズされた高さと開閉の状態は、ユーザー設定で永続化される

メタボックスエリアは、ビューポートの高さに応じて折りたたんだり閉じたりすることができます。

開発者向けの詳細はこちらをご覧ください。

Block Bindings APIの改善

WordPress 6.5で初めて登場したBlock Bindings（ブロックバインディング）APIは、ブロックの属性を外部データソースに結びつけることができます。最初のBlock Bindings APIでは、カスタムフィールドの値を見出し、段落、ボタン、画像ブロックの属性に結びつけることができました。WordPress 6.6では、これを利用した強力な機能、同期パターンの上書きが可能になりました。

WordPress 6.7では、Block Bindings APIによって実現された新機能と改善点、そして投稿メタソースを管理するための新たなデフォルトインターフェースが搭載されます。

ブロックバインディング用の新UI

見出し、段落、ボタン、画像ブロック用の組み込みの投稿メタブロックバインディングソースを使用して、設定サイドバーからブロックバインディングを管理するためのインターフェースです。

カスタムフィールドを登録し、サポートされているブロックの1つを選択すると、ブロックの設定サイドバーに「属性」パネルが表示されます。カスタム投稿フィールドを1つ以上追加すると、このパネルがインタラクティブになり、ブロック属性をカスタムフィールドに接続できるようになります。

これは、コードエディターにコードを書くことなく、ブロックを結びつけるのに役立ちます。

デフォルトでは、管理者のみが作成・変更できますが、開発者は、block_editor_settings_allまたはmap_meta_capフィルターを使用してデフォルトの動作を上書き可能です。

開発者ノートでは、この属性インターフェースに関する2つの制限について言及されています。

• ブロック属性をカスタムソースに接続することはまだできない。将来のリリースで機能が拡張される予定。
• 「属性」パネルに表示されるカスタムフィールドのタイプは、現状文字列またはリッチテキストのみをサポート。今後は他のタイプも順次サポートされる予定。

カスタム投稿テンプレートを利用したBlock Bingings APIの使用例はこちらをご覧ください。

新たな投稿メタラベル属性

label属性が実装され、プラグイン開発者が登録時に投稿メタフィールドのカスタムラベルを追加できるようになりました。以下のコードを使用して登録可能です。

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field',
		'label' => __('書籍のタイトル')
	)
);

設定すると、ブロックバインディングのUIでメタキーの代わりにラベルが表示されます。以下は、カスタムラベルを設定した「属性」パネルです。

ブロックバインディングの編集機能

ブロックバインディング用のインターフェースとともに、canUpdateBlockBindingsエディター設定を使用すると、ユーザーが操作可能かどうかを指定することができます。この設定はデフォルトでedit_block_binding権限に依存し、管理者はtrue、その他のユーザーはfalseとなります。

デフォルトの動作は、block_editor_settings_allフィルターを使って変更することができます。

開発者向け機能とAPI

WordPress 6.7では、開発者がエディターでブロックバインディングを行うための機能も追加されています。

エディターAPIでは、サーバー上で定義されたカスタムソースを初期設定値で登録できるように。つまり、サーバーAPIを使って外部ソースを登録し、UIでレンダリングすることができることを意味します。

新デフォルトテーマのTwenty Twenty-Fiveでは、著作権（Copyright）パターンを使ったソースの初期設定の好例が見られます。functions.phpには以下のようなコードがあります。

// ブロックのバインディングソースを登録
if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) :
	/**
	 * 著作権ブロックのバインディングソースを登録
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return void
	 */
	function twentytwentyfive_register_block_bindings() {
		register_block_bindings_source(
			'twentytwentyfive/copyright',
			array(
				'label'              => _x( '© YEAR', 'エディターの著作権プレースホルダーのラベル', 'twentytwentyfive' ),
				'get_value_callback' => 'twentytwentyfive_copyright_binding',
			)
		);
	}
endif;

// 著作権ブロックのバインディングコールバック関数を登録
if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) :
	/**
	 * 著作権ブロックのバインディングソースのコールバック関数
	 *
	 * @since Twenty Twenty-Five 1.0
	 *
	 * @return string Copyright text.
	 */
	function twentytwentyfive_copyright_binding() {
		$copyright_text = sprintf(
			/* translators: 1: Copyright symbol or word, 2: Year */
			esc_html__( '%1$s %2$s', 'twentytwentyfive' ),
			'©',
			wp_date( 'Y' )
		);

		return $copyright_text;
	}
endif;
add_action( 'init', 'twentytwentyfive_register_block_bindings' );

このコードは、以下のようにデフォルトでUIに「©YEAR」をレンダリングします。

なお、ブロック キャンバスの段落は動的ではなく、ソースラベルのみが表示されています。

このブロックのマークアップを確認するには、Twenty Twenty-Fiveの著作権パターンのコピーを作成し、コードエディターで開きます。

<!-- wp:paragraph {
	"metadata":{
		"bindings":{
			"content":{
				"source":"twentytwentyfive/copyright"
			}
		}
	},
	"className":"copyright",
	"textColor":"primary",
	"fontSize":"small"
} -->
<p class="copyright has-primary-color has-text-color has-small-font-size"></p>
<!-- /wp:paragraph -->

ブロックバインディングに関する新機能の詳細はこちらをご覧ください。

データビューの追加

データビューは、テンプレート、パターン、ページなどのコレクションの表示に有用な機能です。テーブル、グリッド、リストなどの様々なタイプのレイアウトを使用して、サイトエディターでデータセットをレンダリングするためのコンポーネントとAPIでもあります。

このデータビューは、WordPress 6.5で初めて導入され、WordPress 6.6で改良されています。今回のリリースでは、より柔軟で機能的な改善が加えられています。

まず、グリッドビューの右上に歯車のアイコンが表示されるようになっています。歯車のアイコンをクリックすると、「外観」パネルに一連の表示オプションが表示されます。ビュー内の要素の並べ替え、グリッド密度の調整、ページごとの要素数の設定、プレビューに表示する要素のプロパティの選択などの操作が実行可能です。

プレビューで表示される要素のプロパティを選択することができます。

トグルボタンでビューフィルター表示を切り替えることができるため、狭い画面上での体験が向上します。

1つ以上のフィルタを設定すると、フィルター表示のトグルボタンに有効なフィルター数が表示されます。

データビューは、他にもアスペクト比の設定、メニューからのデータビュー機能のような多数の改良が行われています。

クエリーループブロックの改良

クエリーループブロックは、最も強力で複雑なブロックの1つで、使いやすさと機能性、カスタマイズ可能性などのバランスが問われます。WordPress 6.7では、クエリループにいくつかの改良点が加えられており、より機能性と使いやすさが向上しています。

これまでの「テンプレートからクエリーを継承」の設定が変更され、より直感的でわかりやすくなりました。

テンプレートを編集すると、クエリループの設定サイドバーに「クエリータイプ」パネルが表示されます。以下のスクリーンショットは、それぞれ「デフォルト」と「カスタム」を選択した際の見え方です。

また、コンテキストの検出も改善されています。クエリーブロックにはinherit設定があり、デフォルトではtrueに設定されています。単一の固定ページでは、これはクエリー結果には影響せず、対応するコントロールは削除されています。

一方、アーカイブやインデックステンプレートでは、クエリーブロックの内容はリクエストの種類に依存します。特定のカテゴリーのアーカイブページでは、投稿数などユーザーが明示的に指定した他の設定に関係なく、デフォルトでそのカテゴリーに割り当てられたコンテンツが表示されます。

クエリーループブロックに関する詳細はこちらをご覧ください。

メディア管理の改良点

WordPress 6.7では、メディア管理がより機能的かつ効率的になっています。遅延読み込み画像の自動サイズ設定から背景画像の広範なサポートまで、メディア管理の改善点の一部をご紹介します。

遅延読み込み画像の自動サイズ設定

sizesにデフォルト値を設定すると、ブラウザがsrcset属性の値から使用する画像ファイルを特定します。これにより、ブラウザはページレイアウトが判明する前に、事前に画像の幅を把握することができます。

HTML仕様では、画像はsizes属性を省略するか、明示的にautoかautoで始まる文字列を設定します。

キーワードである『auto』は、 sizes属性の解析で計算される幅である。存在する場合は最初のエントリでなければならず、<source-size-list>の値全体は、文字列auto （ASCIIの大小文字は区別しない）であるか、文字列auto （ASCIIの大小文字は区別しない）で始まらなければならない

WordPress 6.7では、遅延読み込みされる画像に対して、auto属性がsizes属性の先頭に自動的に追加されるため、ページ読み込みのパフォーマンスが向上します。

開発者は新たに追加されたwp_img_tag_add_auto_sizes()関数を使用して、sizes 属性の値を修正することができます。

フォントライブラリの強化

WordPress 6.7では、フォントライブラリにも便利な改良点が見られます。まず、フォントがソースごとにグループ化（「テーマ」と「カスタム」）され、各フォントの出所を一目で把握できるように。

また、Google Fontsでフォントを選択する際、「すべて選択」チェックボックスが導入され、一つ一つのバリアントを選択するちょっとした手間を省くことができます。

その他の変更点として、フォントが利用できない場合の「フォントがインストールされていません（No fonts installed）」メッセージ、フォントがインストールされているが有効化されていない場合の「フォントがインストールされていません（No fonts installed）」状態の改善もあります。

HEIC形式のサポート

HEIC（High Efficiency Image Container）は、HEIF（High Efficiency Image Format）の改善版で、iOS 11以降を搭載したすべてのiPhoneとiPadに使用されています。この形式により、iOSユーザーは4Kカメラを最大限に活用し、ファイルサイズを縮小することができます。

WordPress 6.7では、HEIC画像のアップロードは可能な限りサーバー上で自動的にJPEGに変換されます。ブラウザがHEICをサポートしていなくても、メディアライブラリでHEIC画像を表示し、投稿や固定ページで使用することができます。

デザインツールの強化

WordPress 6.7では、拡張ブロックサポート、フォントサイズプリセットのような、強力なデザインツールも導入されています。

詩、引用、コンテンツブロックの背景画像管理UI

グローバルスタイルの一部ブロック、詩、引用、コンテンツブロックの背景画像を管理するためのUIコントロールが新たに追加されました。

グローバルスタイルで背景画像を設定すると、ウェブサイト全体に適用されます。ブロックに背景画像を追加したら、同じブロックの個々のインスタンスに対して設定を行うだけで、そのブロックの外観をカスタマイズできます。

コンテンツブロックでこの機能を使用すると、投稿や固定ページのコンテンツをテンプレートで囲むことができます。

その他のブロックのサポート

詩、引用、コンテンツブロックの背景画像サポートに加え、デザイナーやテーマ開発者向けのブロックのサポートも拡張されています。

ボタン、カテゴリー、ギャラリー、見出し、メディアとテキスト、段落、タイトル、引用などの多くのブロックで枠線の設定が行えるようになりました。

また、ボタン、リスト、最新のコメントの色設定も可能になっています。

さらに、デザイナーやテーマ開発者に待望のグループブロックの影設定も。

フォントサイズプリセット

WordPress 6.7では、グローバルスタイルのインターフェースで、フォントサイズのプリセットを設定できる新たなUIが登場します。これにより、テーマのデフォルト設定を上書きし、エディターでフォントサイズプリセットを作成、編集、削除、適用することが可能になります。

また、フルードタイポグラフィ（Fluid Typography）を有効にして、カスタムフルード値を設定する機能も含まれています。

この機能を試すには、「スタイル」パネルを開き、「タイポグラフィ」＞「フォントサイズ」＞「フォントサイズプリセット」に移動します。これで、利用可能なフォントサイズプリセット一覧が表示されます。任意のプリセットを選択して編集してください。

変更はすべて、ウェブサイト全体に適用されます。

UIの改善とその他の編集機能

編集が捗るUIの変更と機能も導入されています。以下その一部をご紹介します。

公開ボタンの位置変更

公開確認パネルの「キャンセル」と「公開」ボタンの位置が入れ替わり、ページ上でカーソルを動かさず、そのままクリックを続けて記事を公開できるようになりました。

ブロックインスペクタでのカスタムブロック名

カスタムブロック名を設定すると、ブロックインスペクタにも表示されるようになっています。前回のWordPress 6.6では、ブロックインスペクタにはデフォルトのブロック名（「見出し」など）が表示されていました。

WordPress 6.7では、以下のようにブロックインスペクタに表示されます。

「パターンを選択」モーデルの無効化

新規固定ページを作成する際に表示される「パターンを選択」モーダルを無効化することができます。オプション（画面右上の3つの点）メニューから、「設定」を開き、「スターターパターンを表示」のトグルスイッチを無効にすればOKです。

電話番号の自動リンク

電話番号を追加すると、リンクフィールドにtel:が自動的に追加されます。

画像ブロックに画像を一括ドロップ

画像ブロックに複数の画像を選択してドロップし、ギャラリーブロックに変換できるようになりました。

開発者向けの新機能とAPI

最後に、開発者がプラグインの機能を拡張するために使えるAPIがいくつか導入されています。プレビューオプション（Preview Options）APIが追加され、HTML API や Interactivity APIなどのAPIには改良点があります。

Preview Options API

Preview Options APIにより、投稿/固定ページエディターのプレビュードロップダウンを拡張することができます。PluginPreviewMenuItemコンポーネントが導入されていることで、カスタムタイトルやクリック時の動作を設定したメニュー項目を追加可能です。

プラグイン開発者は、WordPressエディターに以下のような設定を実装することができます。

• カスタムフォーマットプレビュー（SNSへの投稿など）
• 特定のグループ限限に制限をかけている投稿や固定ページのプレビュー
• ダークモード、メールなどの追加プレビューモード

渡されたprops（プロパティ）によって、カスタムプレビューメニュー項目をボタンやリンクとして使用できます。

APreview Options APIの使用方法について、開発者ノートの例を引用します。

import { __ } from '@wordpress/i18n';
import { PluginPreviewMenuItem } from '@wordpress/editor';
import { registerPlugin } from '@wordpress/plugins';

function onPreviewClick() {
	// プレビューアクションの処理
}

const CustomPreviewMenuItem = () => (
	<PluginPreviewMenuItem
		onClick={ onPreviewClick }
	>
		{ __( 'Your menu item label' ) }
	</PluginPreviewMenuItem>
);

registerPlugin( 'custom-preview-menu-item', {
	render: CustomPreviewMenuItem,
} );

プラグイン用のTemplate Registration API

WordPress 6.7以前では、カスタムブロックテンプレートを追加するにはテーマを使用するしかなく、複雑な回避策を講じない限り、プラグインを使ってブロックテンプレートを登録することは不可能でした。

今回登場するTemplate Registration APIのおかげで、プラグインでを使ってカスタムブロックテンプレートを登録できます。テンプレートの登録（register_block_template()）と登録解除（unregister_block_template()）の2種類の関数があります。

使用方法はとても簡単で、関数にいくつかのパラメータを渡すだけでOKです。

$template_name：テンプレート名（形式はplugin_uri//template_name、//を忘れずに）
$args：以下の引数を含む配列

• title
• description
• content
• post_types

このTemplate Registration APIについては、開発者ノートとGitHubのプルリクエストをご覧ください。

Block Type Registration API

wp_register_block_metadata_collection()関数は、block.jsonファイルを直接読み込む代わりに、マニフェストファイルが存在する場合、そのファイルからブロックタイプを登録します。これは、複数のブロックタイプを登録するプラグインにとって特に便利で、各ブロックタイプごとに block.jsonを読み込み、解析する手間を省くことができます。

なお、この関数は既存のregister_block_type()とregister_block_type_from_metadata()関数を置き換えるものではありません。必ず使用しなければならないものではありませんが、パフォーマンスの向上に複数のブロックを登録するプラグインには使用が推奨されます。

Block Type Registration APIの詳細と使用例はこちらをご覧ください。

見出しレベルの設定

levelOptions属性の導入により、見出し、サイトタイトル、サイトタグライン、クエリータイトル、投稿のタイトル、コメントのタイトルブロックのドロップダウンUIに表示される見出しレベルを指定することができます。

主にブロックテンプレート、テンプレートパーツ、パターンで使用することになります。以下は、見出しブロックのH1、H5、H6の見出しを無効にする例です。

<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><em>営業に相談する</em></h2>
<!-- /wp:heading -->

下は、ブロックツールバーに表示される利用可能なオプションです。

levelOptions属性は、プラグインやテーマの関数ファイルでregister_block_type_argsフィルターを使ってフィルタリングすることも可能です。開発者ノートでは、以下のような例が紹介されています。

function example_modify_heading_levels_globally( $args, $block_type ) {
	 
	if ( 'core/heading' !== $block_type ) {
		return $args;
	}
 
	// H1、H2、H6を削除
	$args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ];
	 
	return $args;
}
add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );

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

• テンプレートパーツブロックの最初または最後の子としてフックブロックを挿入可能に（開発者ノート参照）
• フックブロックがmultiple block-supportsプロパティをサポート（開発者ノート参照）
• ユーザーインターフェイスコンポーネントが大幅に更新（開発者ノート参照）
• 新関数であるgetServerState()とgetServerContext()は、クライアントサイドのナビゲーションで Interactivity APIの状態/コンテキストの変化に対応する方法を提供
• スクリプトモジュールに@wordpress/a11yスクリプトモジュールとscript_module_data_{$module_id}フィルターが追加
• HTML APIは、ほぼすべてのHTMLタグのサポート、script、style、titleのような自己完結型要素のテキストコンテンツを置き換えることができるset_modifiable_text()関数、 HTMLプロセッサの詳細解析モードのような複数の機能強化
• 国際化 （i18n）の改善がいくつかコアに統合（翻訳を読み込まずに既存の翻訳を確認できるhas_translation()関数、admin_emailへのメールがユーザーのロケールに基づいて送信される機能、プラグインやテーマで翻訳を読み込む際、現在のユーザーが特定されていない場合、開発者に警告が表示される機能など）

まとめ

今回は、WordPress 6.7の新機能を掘り下げました。洗練された新デフォルトテーマから、投稿エディターのメタボックスへのズームアウト機能、Block Bindings APIの追加、メディア管理の改善、デザインツールの強化、プラグイン開発者向けの新機能まで、今回のリリースにも、新機能と改善点が多数盛り込まれています。