いよいよ11月7日にWordPress 6.4がリリースされます。今回も新バージョンの注目の機能と改善点が気になるところ。

特に気になる機能としては、ブロックフック、パターン構成の改善、コマンドパレットの再設計と強化、添付ファイルページの無効化、画像のLightbox機能、および執筆ワークフローの改善など。

また、テンプレートやスクリプトローディングストラテジーの改善、その他のパフォーマンス強化により、WordPressサイトがより高速になります。リストビューの強化や管理ユーザーインターフェースの改良も施されており、使い勝手も向上しています。

そして、編集プロセスの効率化に貢献するパターンやテンプレートが多数搭載された新デフォルトテーマも見逃せません。

早速、WordPress 6.4の新機能や改善点を詳しく見ていきましょう。

ブロックフック

ブロックフック(以前は自動挿入ブロックと呼ばれていたもの)によって、プラグインがGutenbergエディターと自動的にやり取りできるようになります。

より具体的には、コンテンツに別のブロックが追加されると、ブロックが特定の位置に自動で配置されるようになりました。

ブロックフックの動作には、以下2つの原則があります。

  • エディターにブロックを挿入する手間を省き、フックされたブロックを提供するプラグインが有効化されると同時に、フロントエンドにブロックが挿入される。またプラグインが無効化されると、ブロックも自動的に削除される。
  • ブロックがエディターに表示され、自動挿入についての管理を行うことができる。

この両方の原則を考慮し、コードに含まれる情報を保持するため、ブロックフックは未修正のテンプレートとテンプレートパーツ、およびテーマが提供するパターン、パターンディレクトリからコピーされたパターン、またはregister_block_pattern関数で登録されたパターンのみで機能します。投稿コンテンツ、変更されたテンプレートとテンプレートパーツ、ユーザーが作成したパターンで動作することはありません。

開発者ノートでは、次のように述べられています。

WordPress 6.4では、保存機能を持つブロックを自動的に挿入することはできません。そうしようとすると、ブロック検証エラーが発生します。わかりやすく言えば、ブロックフックは静的ブロックではなく、動的ブロックで動作することになります。(英語原文の和訳)

静的ブロックと動的ブロックの詳細はこちらをご覧ください。

ブロックフックの実装には、block.jsonファイルを使う手法とhooked_block_typesフィルターを使う手法の2通りがあります。

block.jsonを使用したブロックフック

block.jsonを使用すると、サードパーティーのブロックを手っ取り早く簡単にフックできますが、柔軟性に欠けるのが難点です。block.json経由で自動で挿入されたブロックは、対象となるすべてのインスタンスに無条件で追加されます。

blockHooksプロパティは、キーと値のペアのオブジェクトを取り、キーはフックしたいブロック名、値はターゲットブロックからの相対的な位置を指定します。

この位置については、以下のいずれかを指定できます。

  • ターゲットブロックのbefore(前)
  • ターゲットブロックのafter(後)
  • ターゲットコンテナブロックのfirstChild(最初の子要素)
  • ターゲットコンテナブロックのlastChild(最後の子要素)

例えば、blockHooksを使用して、すべてのスペーサーブロックにブロックをフックすることができます。

{
	blockHooks: {
		'core/spacer': 'after'
	}
}

block.jsonfirstChildまたはlastChildを使用すると、ブロックインスペクターに新たに導入されたプラグインパネルに、自動で挿入されるブロックが一覧として表示され、自動挿入の有効化/無効化トグルが操作できるようになります。

自動挿入の有効化(画像出典:PR#52969)
自動挿入の有効化(画像出典:PR#52969

hooked_block_typesを使用したブロックフック

hooked_block_typesフィルターを使用すると、block.jsonを使った手法のように無条件にブロックをフックすることも、条件に基づいてフックすることも可能です。例えば、ブロックが配置されているテンプレート、テンプレートパーツ、パターンによって、ブロックを対象にフックすることができます。

hooked_block_typesのコールバック関数は、以下4つのパラメータを受け取ります。

  • $hooked_blocks─フックされたブロックの配列
  • $positionbeforeafterfirst_childlast_childのいずれか
  • $anchor_block─アンカーブロック名
  • $context─アンカーブロックが属するブロックテンプレート、テンプレートパート、またはパターン

ブロックフックの技術的な詳細については、開発者ノートを参照してください。

パターンシステムの強化

ブロックパターンは、コンテンツやテンプレートで使用できる強力なデザインツールで、複雑な構造のブロックを簡単に構築できます。ブロックテーマに付帯するパターンを使用することもできれば、パターンディレクトリからコピーして追加することも可能です。

あるいは、サイト/投稿エディターのインターフェースでゼロからパターンを作成したり、コーディング経験があれば、.phpファイルで現在のテーマや子テーマにパターンを追加したりすることも可能です。パターンは現在、WordPressの核となる機能です。ブロックパターンに関する詳細はこちらでご紹介しています。

WordPress 6.3のパターン作成ウィンドウ
WordPress 6.3のパターン作成ウィンドウ

WordPress 6.4における、パターンシステムの新機能を見ていきましょう。

まずは、パターンカテゴリー。これまでのWordPressでは、パターンを新規作成する際、パターン名とタイプ、同期の有無しか設定できませんでした。

WordPress 6.4からは、パターンにカテゴリーを追加できるようになっており、サイトや投稿エディターで識別しやすくなっています。

WordPress 6.4のパターン作成ウィンドウ
WordPress 6.4のパターン作成ウィンドウ

また、パターンの編集時にカテゴリーを変更することも可能です。

パターンカテゴリーの編集
パターンカテゴリーの編集

さらに、ブロックインサーターの「同期パターン」タブがなくなり、1つの「パターン」タブからすべてのパターンの管理が行えるようになっています。

WordPress 6.3(左)とWordPress 6.4(右)のブロックインサータータブの比較
WordPress 6.3(左)とWordPress 6.4(右)のブロックインサータータブの比較

また、サイトエディターからJSONとしてパターンをインポートまたはエクスポートするのも簡単になりました。

Export pattern as JSON from the site editor
サイトエディターからJSONとしてパターンをエクスポートする

追加変更により、クラシックテーマとのパターンの互換性も向上しています。

Twenty Twenty-Fourテーマ

WordPress 6.4では、新たなデフォルトテーマとして「Twenty Twenty-Four」が登場します。多機能でありながらミニマルなWordPressテーマで、主に中小企業、写真家とアーティスト、作家とブロガーという3つの用途を想定して設計されています。

「Twenty Twenty-Four」は、サイトに機能を追加するのではなく、様々な種類のウェブサイトを構築するのに役立つテンプレートとパターンを集めたテーマといった様相です。

要件に合わせて編集できるページ構成例も豊富に用意されており、デフォルトのコンテンツも充実しています。

新デフォルトテーマの「Twenty Twenty-Four」についてはこちらをご覧ください。

新たなデザインツールと機能

WordPress 6.4には、新しいデザインツールと機能がいくつか標準で搭載されています。以下は特に気になる機能です。

コンテンツブロックの色設定

コンテンツブロックは、クエリループブロックの子ブロックで、クエリループ内のコンテンツの外観を変えるのに特に便利です。

クエリループブロックで使用できるコンテンツブロック
クエリループブロックで使用できるコンテンツブロック

クエリループを編集しているときは投稿エディターで、テンプレートを作成または編集しているときはサイトエディターで利用可能です。

WordPress 6.4では、このコンテンツブロックが改良されており、テキスト、背景、リンクの色を変更できるようになっています。

Color settings for the Content block
コンテンツブロックの色設定

背景画像ブロック

背景画像ブロックが導入され、デフォルトでグループブロックで利用できる仕様になっています。

グループブロックの背景画像を管理
グループブロックの背景画像を管理

使用しているテーマがtheme.jsonappearanceTools機能を使用している場合、背景画像ブロックに対応する管理セクションと背景画像のプレビューが表示されます。

背景画像を設定すると、ブロックのdiv要素にbackground-imageプロパティが追加され、画像がグループブロックを覆うようにbackground-size: coverが追加されます。

テーマに背景画像のサポートを実装するには、2つの方法があります。簡単なのは、appearanceToolsプロパティを選択する方法で、背景画像を含む複数のデザイン機能が有効になります。

デザインをより細かく制御するには、theme.jsonbackgroundImageプロパティを使用できます。

{
	"settings": {
		"background": {
			"backgroundImage": true
		}
	}
}

画像のLightbox

ブロック画像設定パネルに新しく追加された「Expand on Click」(クリックで拡大)トグルを使うと、Lightbox機能を有効または無効にできます。今回のこの機能は、あくまでも最初のバージョンであり、今後さらに改善されていくことが予想されます。

「Expand on Click」をクリックして画像のLightbox機能を有効化
Expand on Click」をクリックして画像のLightbox機能を有効化

Lightbox機能は、デュオトーンフィルターでも動作しますが、画像ギャラリーに関しては少しわかりにくく、本記事の執筆時点では、ギャラリーレベルでLightbox機能を有効にすることはできません。個別の画像で有効にする操作が必要になります。

以前のWordPressバージョンでは、この機能の実装にプラグインが必要でしたが、今回のリリースで標準搭載になり、WordPressサイトのサードパーティに依存するコードを削減することができます。

縦書きテキスト

新たなテキストの向きも導入され、テーマで縦書きのテキストをサポートできるようになりました。使用しているテーマがこの機能に対応している場合は、「タイポグラフィ」設定でテキストの向きを右から左の縦書きに変更することができます。

テキストの縦書き設定
テキストの縦書き設定

デフォルトではこの機能は無効になっているため、テーマ開発者はtheme.jsonwritingMode設定を追加する必要があります。

{
	settings: {
		"typography": {
			"writingMode": true
		}
	}
}

特定のブロックに対して異なるデフォルト動作を設定することもできます。以下は、すべての段落ブロックにvertical-rlを設定する例です。

{
	"styles": {
		"blocks": {
			"core/paragraph": {
				"typography": {
					"writingMode": "vertical-rl"
				}
			},
		}
	}
}

脚注ブロックの改良

WordPress 6.4では、脚注ブロックにも改良が加えられており、リンク、背景、テキストの色を変更できるようになりました。さらに、タイポグラフィ、寸法、境界線の管理も可能です。

脚注ブロックの色、タイポグラフィ、寸法、境界線の設定
脚注ブロックの色、タイポグラフィ、寸法、境界線の設定

テキストとリンクの色の設定セクションがデフォルトで展開され、その他の設定はページ読み込み時に折りたたまれる仕様です。

ナビゲーションブロック内へのボタンの追加

ナビゲーションブロックで使用できる要素にボタンが追加されました。

メニュー項目をボタンに変換
メニュー項目をボタンに変換

メニュー項目作成時に、ブロックツールバーから簡単にボタンに変換できます。

ナビゲーションブロックのボタン
ナビゲーションブロックのボタン

UIとワークフローの改善点

WordPress 6.4では、エディターのインターフェースも改善されており、編集体験の向上とワークフローの合理化が期待できます。以下、いくつか改善点を厳選してご紹介します。

コマンドパレットの強化

WordPress 6.3で初めて登場したコマンドパレットは、サイトエディターのインターフェースで頻繁に使用するアクションを実行できる機能です。WordPress 6.4では、デザインの変更やその他の改善によって、レベルアップしています。

WordPress 6.3のコマンドパレット
WordPress 6.3のコマンドパレット
WordPress 6.4のコマンドパレット
WordPress 6.4のコマンドパレット

下のスクリーンショットは、WordPress 6.3と6.4のコマンドパレットの動作の比較です。

WordPress 6.3でのパターン検索
WordPress 6.3でのパターン検索
WordPress 6.4でのパターン検索
WordPress 6.4でのパターン検索

WordPress 6.4では、コマンドが増えているほか、名称の変更もあり、一貫性が高まっています。ブロック変換、複製、コピー、削除、前後挿入が新たに導入されたコマンドの一例です。

ちょっとした変更点としては、多くのコマンド名から動詞が削除(「〜を開く」など)されています。これにより、コマンドの検索性が上がっており、作業がより捗りそうです。

WordPress 6.3で「open」(開く)を検索
WordPress 6.3で「open」(開く)を検索してみた結果
WordPress 6.4で「open」(開く)を検索
WordPress 6.4で「open」(開く)を検索してみた結果

また、ブロック選択のコマンドも導入されました。サイトエディターでブロックを選択し、cmd + k(Mac)またはctrl + k(Windows)を押して、「transform」(変換)などの検索キーを入力すると、以下のような候補が表示されます。

ブロック選択コマンド
ブロック選択コマンド

複数のブロックにコマンドを実行できます。例えば、いくつものブロックをグループ化するといった操作が簡単に実行可能です。

選択した複数のブロックをグループ化
選択した複数のブロックをグループ化

また、グループ化を解除することもできます。

ブロックのグループ化を解除
ブロックのグループ化を解除

本記事の執筆時点では、「前に追加」「後に追加」「削除」「複製」「移動」「グループに変換」「グループ解除」「変換」のブロック選択コマンドがあります。

リストビューの改良

リストビューでは、ページの内容を確認し、ブロック、グループ、パターンに対してコピー、複製、グループ化などを行うことができます。アイテムのグループを展開または折りたたむことも、単一のブロック、グループ、パターンに対して複数の操作を行うことも可能で、ネストしたブロックの複雑な構造を扱う際に特に有用です。

WordPress 6.3のリストビュー
WordPress 6.3のリストビュー
WordPress 6.4のリストビュー
WordPress 6.4のリストビュー

WordPress 6.4では、ショートカットキーcmd + shift + d(Windowsではctrl + shift + d)を使って、ブロックのグループ名の変更、ギャラリーや画像ブロックのプレビューブロックの複製もできるようになっています。

リストビューからブロックのグループ名を変更
リストビューからブロックのグループ名を変更

ツールバーの固定

複数の子ブロックを含むブロックを編集する際、内側のブロックを操作するのは簡単ではありません。特にナビゲーションブロックではこの傾向が顕著です。

以前のバージョンでは、内側のブロックを選択すると、ブロックツールバーが画面上の別の位置に移動します。この動作は、ナビゲーションブロックやリストブロックのユーザー体験を損ねていました。

WordPress 6.4からは、子ブロックのツールバーは親の位置に固定されるようになっています。これで子ブロック間で選択を切り替えても、ツールバーが動くことはありません。

リストブロックのツールバー
リストブロックのツールバー
リスト項目のブロックツールバー
リスト内の項目を選択

この機能は現時点で、ナビゲーションブロックリストブロック、および引用ブロック実装されています。

開発者向けのパフォーマンス改善とその他の変更点

他にもテーマ開発者向けの変更点や、100以上のパフォーマンス改善がコアにマージされています。いくつかピックアップして見てみましょう。

スクリプトローディングストラテジー

スクリプトローディングストラテジー(スクリプトの戦略的読み込み)は、WordPress 6.3で導入された機能です。asyncdefer属性が、スクリプトの依存関係ツリーにおいて予期せぬ順序でスクリプトが読み込まれるのを回避します。

WordPress 6.4では、コアテーマとバンドルテーマのフロントエンドスクリプトに実装されています。

さらに、WordPress 6.4から、defer属性で読み込まれるスクリプトがフッターからheadに移動しています。これにより、ドキュメントの読み込み中により早く検出され、読み込み後はより迅速に実行できるようになりました。

その他の変更により、コアのセキュリティと保守性も向上しています。スクリプトの読み込みに関する技術的な情報はこちらをご覧ください。

添付ファイルページの無効化

WordPress 6.4から、新規インストールしたWordPressの添付ファイルページが完全に無効化されます。

これまでは、アップロードされたすべてのマルチメディアファイルに対して、添付ファイルページが自動生成されていましたが、ほとんどのウェブサイトで不必要でした。このページは検索エンジンにインデックスされてしまい、ユーザー体験に悪影響を与えることも。

WordPress 6.4からは、wp_attachment_pages_enabledデータベースオプションが、添付ファイルページの動作を制御します。

既存のウェブサイトでは1 (添付ファイルページ有効)、新規ウェブサイトでは0 (添付ファイルページ無効)に設定されています。

この値は、WP-CLIで変更できます。

wp option set wp_attachment_pages_enabled 0|1

または、サイトのwp-admin/options.phpにアクセスし、wp_attachment_pages_enabledの値を変更してもOKです。

添付ファイルページ有効化の設定を変更
添付ファイルページオン/オフの設定を変更

プログレスバーの導入

サイトエディターでコンテンツを読み込む際に使用されていたSpinner要素を置き換えるものとして、シンプルな水平方向のProgressBar導入されました。

サイトエディターの新プログレスバー
サイトエディターの新たなプログレスバー

読み込みパターンの変更

WordPress 6.4以前のバージョンでは、_register_theme_block_patterns()関数によって、使用中のテーマに付随するパターン(patternsディレクトリ内のもの)が登録されていました。この関数は大規模なファイル操作を必要とするため、リソースのオーバーヘッドの問題を引き起こす可能性があり、特に「Twenty Twenty-Four」のような膨大な量のパターンを搭載するテーマでは大きな懸念になります。

この問題に対処するため、WordPress 6.4では、パターンを一時的なキャッシュに保存する関数(_wp_get_block_patterns()が導入されました。この関数によって、後続のリクエストはファイルを検索する必要がなくなり、パフォーマンスの大幅な改善が期待できます。

テーマの開発モードを有効にするか、テーマのバージョン番号を更新するか、テーマを切り替えるか、あるいはWP_Theme::delete_caches()メソッドを呼び出すことで、パターンキャッシュをバイパスすることができます。

ファイル確認作業の軽減

これまでテーマ APIのいくつかの関数は、親テーマにフォールバックする前に、子テーマ内のファイルの存在確認を実行していました。

これは、関数が現在のテーマが子テーマであるかどうかを考慮していなかったために起こる挙動です。

無駄なファイル有無の確認処理を防ぐため、テーマ APIのいくつかの関数とメソッドが更新され、ファイルの有無を確認する前に現在のテーマのスタイルシートディレクトリがテンプレートディレクトリと一致するかどうかを検証するようになりました。

これにより、特に非子テーマにおけるパフォーマンスが大幅に向上するはずです。

その他のパフォーマンスの改善として、get_block_theme_folders()the_header_image_tag()関数も導入されました。

オプション機能

オプション機能は、デフォルトで読み込まれるようになっています。サイトのオプションが多すぎると、サーバーの応答時間が長くなったり、バグが発生したりする可能性があります。この動作を防ぐため、オプションを管理し、異なるデフォルトの動作を設定するための新たな関数が導入されました。これによって、パフォーマンスの改善が期待できます。

まず、1つのデータベースクエリで複数のオプションを取得できる2つの関数です。

prime_options()は、単一のデータベースクエリで複数のオプションを取得できます。オプションの値はキャッシュに保存されるため、それ以降のget_option()呼び出しでデータベースクエリが追加で必要になることはありません。

prime_options()はオプション名の配列を受け取ります。オプションの値は返しません。その役割は、関連するキャッシュを更新することに限定されます。

prime_options_by_group()は、prime_options()と同じように動作しますが、特定のオプショングループに対応する関数となります。

また以下2つの関数で、 オプションの自動読み込み値を設定することができます。

wp_set_option_autoload_values()を使用すると、1つのオプションに対する自動読み込み値を設定可能です。

wp_set_options_autoload_values()を使用すると、複数のオプションの自動読み込み値を設定できます。

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

その他の開発者向けの変更点には、以下のようなものがあります。

  • ハードコーディングされたスタイルタグのwp_add_inline_style()への置き換え(開発者ノート参照)
  • theme.jsonで、Fluid Typographyのビューポートの最小値および最大値を設定可能に
  • theme.jsonでレイアウト制御を無効にできるように
  • 新たに導入されたフックuseBlockEditingModeでブロック編集モードを設定できるように(開発者ノート参照)
  • wp_get_loading_optimization_attributes()関数を改善し、読み込み最適化属性を管理する新たなフィルターを導入(開発者ノート参照)
  • 新たに導入されたregisterInserterMediaCategory APIにより、プラグイン開発者はカスタムインサーターのメディアカテゴリーを登録し、より多くのオプションを提供可能に ※Openverseカテゴリーを除くコアカテゴリーの管理は不可(開発者ノート参照)
  • wp_get_admin_notice()wp_admin_notice()関数によって、メンテナンスの負担を軽減し、一貫性を促し、すべての管理者通知に対して引数とメッセージのフィルタリングが可能に(開発者ノート参照)
  • WP_QueryWP_Term_Queryのキャッシュシステムの改善─データベースクエリが削減されたことで、全体的な作業効率が向上(開発者ノート参照)
  • ログインと登録ページのマークアップの改善、構造の最適化により、より柔軟にカスタマイズできるように(開発者ノート参照)

まとめ

WordPress 6.4は、2023年3回目となるメジャーリリースです。新たな機能とデザインツール、UIの改善、バグ修正、その他小さな変更点が多数もたらされています。

軽量で多機能なデフォルトテーマも新たに導入され、数々のパターンとテンプレートが使用できることから、特定の用途に合わせて柔軟にカスタマイズするのにうってつけです。

WordPress 6.4のベータ版はもう試されましたか?WordPressコミュニティに貢献したり、テストしたりするなら、無料のローカルWordPress開発ツール「DevKinsta」が役に立つはずです。

WordPress 6.4で特に気に入った機能があれば、以下のコメント欄でぜひお聞かせください。

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.