WordPress 6.3の新機能（新サイトエディター、コマンドパレット、ブロック、スタイル改良など）

WordPress 6.3 Lionelがついにリリースされました。WordPress 6.3は、ロードマップフェーズ2の最後のメジャーリリースです。

フェーズ2では、主にサイトエディターに焦点を当て、機能の拡張およびインターフェースとユーザビリティの改善が行われました。

管理エリアから別のエリアに移動することなく、そしてコードを1行も記述することなく、同じインターフェース内でレイアウトを編集し、コンテンツを管理できるようになるまで進化しています。

WordPress 6.3では、10バージョンのGutenbergプラグインが組み込まれています。Gutenbergを普段使用していない場合は、サイトエディターのインターフェースの様変わりに驚くことでしょう。

また、編集体験も大幅に改善されています。いくつかの技術的な変更が影響し、ブロックテーマの検索やサイトエディター自体の操作方法が変更されています。他にも、改善されたナビゲーション、集中モード、ブロックテーマのプレビュー、スタイルとテンプレートの修正、コマンドパレット等々。

前置きはこの辺にして、WordPress 6.3にはどのような機能、改善点が導入されているのか、早速掘り下げていきましょう。

WordPress 6.3について動画での解説もご用意しています。

サイトエディターのナビゲーション強化

WordPress 6.3では、サイトエディターのナビゲーションが大幅に改善されています。以前は異なる管理メニューや管理画面からアクセス可能でしたが、よりシンプルで一貫性のある編集が行えるように改善されています。

以下は、WordPress 6.2と6.3のエディターのナビゲーションメニューを比較したものです。

まず目につくのは、サイドバーの右上に表示されている2つのボタン。左の「サイトを表示」アイコンは、マウスオーバーで表示され、WordPressサイトのフロントエンドに素早くアクセスすることができます。ナビゲーションメニューが表示されている間は、サイトエディターのどこにいてもフロントエンドのページに素早く移動可能です。

「コマンドパレットを開く」アイコン（レンズ）をクリックすると、WordPress 6.3の新機能であるコマンドパレットにアクセスできます（詳細は後ほど）。

サイトエディターのナビゲーションメニューには、以下の項目が表示されます。

ナビゲーション

作成したナビゲーションメニューは、サイトエディターの「ナビゲーション」メニューに表示されます。メニュー項目を移動したり、ドロップダウンから削除したりすることができ、項目をドラッグ＆ドロップで並び替えることも可能です。

メニュー項目をクリックすると、ページの詳細が表示され、内容やレイアウトを編集することができます。

スタイル

「スタイル」メニューでは、ブラウズモードのスタイルバリエーションが表示されます。利用可能なスタイルをプレビューし、適用してカスタマイズを始めることができます。

メニュー上部の目のアイコンをクリックすると、「スタイルブック」が起動します。これは6.2で導入された機能で、エディターのインターフェース上で選択したスタイルが適用された様々なブロックをプレビューすることができます。

固定ページ

「固定ページ」メニューでは、最近更新された10件のページが表示され、選択して編集することができます。新規ページの下書き、既存ページのコンテンツとレイアウトの編集、各ページの詳細確認などが行えます。

このメニューの素晴らしい改善点として、エディターのインターフェース上で新規固定ページを作成できるようになっています。

「+」アイコンをクリックすると、画面中央にモーダルが表示され、新規ページのタイトルを設定します。

「下書きを作成」をクリックすると、新規ページのエディターにリダイレクトされます。

「ページ」メニューでは、サイトエディターから直接ページの編集を行うことも可能です。

つまり、ページのコンテンツとスタイルの両方を一箇所で編集できるようになりました。これによって、ページのあらゆる要素を容易に管理でき、編集が捗ります。

編集モードでは、ページエディターとテンプレートエディターを簡単に切り替えることも可能で、何を編集しているのかを把握し、変更が現在のページにだけ適用されるのか、同じテンプレートを使用しているすべてのページに適用されるのかを明確化することができます。

左側には、以下のようにページの詳細も表示されます。

以下のような情報を確認することができます。

• ステータス
• スラッグ
• テンプレート
• 親
• 単語
• 所要時間
• 最終更新日

テンプレート

「テンプレート」メニューは特に変更点はありませんが、新規テンプレートを作成すると、テンプレートを適用する対象を選択するモーダルウィンドウが表示されます。

対象ページを選択すると、「パターンを選択」ウィンドウが表示され、必要に応じて適用することができます。

パターン

以前のリリースでは「ライブラリ」と名付けられていた「パターン」メニューでは、ブロックパターンシステムに関する多くの改善点が見られます。UIの変更だけでなく、ブロックパターン全体が一新されています。

「パターン」メニューでは、テンプレートパーツとパターンを管理することができます。テンプレートパーツとテーマパターンをカテゴリ分けしたメニューが表示され、鍵のアイコンがついているものは、変更できないことを意味します。

新規テンプレートパーツとパターンを作成して、テーマのパターンと一緒に管理することができます。

「パターンを作成」をクリックすると、モーダルウィンドウが表示されます。名前を入力して、作成するパターンのタイプ（「すべてのパターンインスタンスの同期を保持」するかどうか）を設定します。

パターンを1つ以上作成すると、「パターン」メニューの一番上に表示される「マイパターン」に保存されます。

パターンを選択すると、詳細を確認できるパネルが表示され、ハンドルを左右に動かし、さまざまな解像度でパターンをプレビューしたり、その応答性を確認したりすることができます。

「詳細」セクションには、現在のパターンの同期ステータスが表示されます。

「パターン」メニューの下部にある「すべてのマイパターンを管理」と「すべてのテンプレートパーツを表示」から、テンプレートパーツとパターンにアクセスすることができます。

以上が、一新されたパターン管理のインターフェースについてです。続いて、ブロックパターンの構造と機能の変更点を見てみましょう。

ブロックパターンの変更点

WordPress 6.3（およびGutenberg 16.1）の変更点をまとめると、以下の通りです。

• 再利用ブロックは「同期パターン」に
• 通常のブロックパターンは「非同期パターン」に
• カスタム投稿タイプwp_blockでカスタムフィールドがサポートされ、パターンの同期ステータスを保存するwp_block_sync_statusメタフィールドが追加
• コアパターンとユーザーパターンを区別するために、ブロックパターンスキーマとレスポンスにsourceプロパティが追加
• REST APIに属性が追加

同期パターンに加えられた変更は、サイト全体でそのブロックが出現するたびに適用されます。

逆に、非同期のブロックパターンに加えられた変更は、そのパターンの特定のインスタンスにのみ影響し、他の投稿や固定ページのインスタンスには適用されません。

新しいパターン管理システムによって、以前は再利用ブロック（現在は同期パターン）しか作成することができなかったのが、同期ブロックパターンや非同期ブロックパターンをサイトや投稿エディターから直接作成できるようになっています。

投稿エディターでこの新機能を試すには、WordPressの管理画面を開き、「投稿」＞「新規追加」に移動します。そこで、ブロックの新規グループを作成するか、ブロックパターンに追加したいブロックを選択。次に、ブロックツールバーのオプション（3つの点）から「パターン/再利用ブロックの作成」をクリックします。

また、サイトエディターの「パターン」メニューで「パターンを作成」をクリックして、新規テンプレートやパターンを作成できます。

「テンプレートパーツを作成」を選択すると、モーダルウィンドウが開きます。ここでテンプレートパーツ名と対象エリアを選択します。

「パターンを作成」をクリックすると、モーダルウィンドウが開くので、パターン名と同期または非同期パターンのどちらを作成するかを決定します。

これで、サイトエディターでパターンまたはテンプレートを作成することができます。

編集を終えたら、ブロックパターンを保存して、サイトエディターに戻ります。「パターン」メニューを開き、「パターンの管理」をクリックすると、管理画面の「パターン」ページに作成したブロックパターンが一覧で表示されます。

ブロックパターンは、画像ブロックのアスペクト比の変更にも利用できます。画像にアスペクト比を設定すると、別の寸法の画像に変更しても、縦横同じ比率を保持することができます。ブロックパターンで画像を置き換える際に画像の寸法を気にする必要がなくなるため、特に便利な機能です。

ブロックパターンに加えられた変更点の詳細は、PR#51078、#51144、#50028を参照してください。

サイトエディターのスタイルのリビジョン

別の変更点として、サイトエディターでリビジョン履歴が表示されるようになりました。

リビジョン履歴を表示するには、「スタイル」パネルの「リビジョン」アイコンをクリックします（以下参照）。

リビジョン一覧が時系列で表示され、各リビジョンの作者名と作成日時がツールチップで表示されます。

グローバルスタイルインターフェースでリビジョンを閲覧し、プレビューしながら、任意のリビジョンを選んでコンテンツを復元可能です。

リビジョン機能はこれだけに留まらず、フェーズ3ではさらに拡張され、使い勝手が向上することが予想されます。

コマンドパレット

コマンドパレットは、エディター内の他のページやテンプレートへの移動など、よく使う操作をコマンドで実行できる新機能です。

サイトエディターでレンズのアイコンをクリックするか、cmd + k（Mac）またはctrl + k（WindowsとLinux）を押すと起動します。

コマンドを入力し始めると、複数のコマンドが表示され、タスクを実行したり、サイトエディターの特定の領域にアクセスしたりといった操作が表示されます。

今回のリリースではクイック検索機能、サイトエディターにおける移動、新規投稿/固定ページの作成、UI要素の切り替え、テンプレートやテンプレートパーツのリセットや削除などの操作が導入されています。今後のリリースではさらに多くのコマンドが追加されていくはずです。

例えば、特定の投稿や固定ページのデザイン設定を表示するコマンドがあればさらに便利になりそうです。

また、コマンドのレンダリング、登録、解除のコマンドパレットAPIによって、独自のコマンドを登録することもできます。

コマンドの登録方法は、作成したいコマンドの種類によって異なります。

• 静的コマンド：wp.data.dispatch( wp.commands.store ).registerCommand操作、またはReactフックwp.data.useCommandを使用して、独自の静的コマンドを登録可能。
• 動的コマンド：コマンドパレットの検索フィールドに入力した単語によって、あるいはあるコマンドがいくつかの条件を満たした場合にのみ、コマンドパレットに登録される。
• コンテキストコマンド：特定のコンテキストで優先され、自動的に表示される（テンプレートを編集しているときなど）テンプレートのリセットと削除がこれに当たります。現在は以下2つのコンテキストが実装されています。
  • site-editor：サイトエディターで操作しているとき
  • site-editor-edit：エディターで何らかの要素（テンプレート、テンプレートパーツ、固定ページ）を編集しているとき

ブラウザのコンソールでwp.data.select( wp.commands.store ).getCommands()を実行すると、利用可能なコマンド一覧を取得することができます。

現在は、投稿エディターとサイトエディターのみで利用可能ですが、将来的には管理画面全体で利用できるようになる予定です。

コマンドパレットの開発者向けプレビューはこちらをご覧ください。

サイトエディターのその他の新機能と改善点

WordPress 6.3のサイトエディターは、最初のセクションでご紹介した変更点に加えて、以下のような改善も行われています。

テーマプレビュー

theme_previewパラメータが追加され、すべてのブロックテーマをサイトエディターに読み込み、有効化前にプレビューすることができるようになりました。

ブロックテーマをプレビューするには、「外観」＞「テーマ」に移動します。任意のブロックテーマにカーソルを合わせると、「ライブプレビュー」ボタンが表示され、クリックするとプレビューが表示されます。ブロックテーマ以外のテーマは、「ライブプレビュー」をクリックすると、テーマカスタマイザーが起動します。

読み込みの改善

WordPress 6.3ではエディターの読み込みも改善され、エディターが完全に読み込み終わる前に操作が行えるようになっています。

サイトエディターに集中執筆モードが導入

また、サイトエディターにも集中執筆モードが導入されました。WordPress 6.2で投稿エディターに導入された機能です。

この機能は、サイトエディターのオプションメニュー（ページ右上の3つの点）で有効にすることができます。「集中執筆」をオンにすると、サイドバーやツールバーなどの要素が消え、クリーンな画面で編集に集中できるようになります。

その他のUI改善

• <ViewLink>コンポーネントに、公開されている投稿タイプを新規ウィンドウで開くボタンが表示されるようになりました。ちょっとした変更ですが非常に便利で、設定サイドバーでリンクを探す手間を省くことができます（PR#50260）。
• テンプレートの説明が改善され、各テンプレートが具体的にどのような役割を果たすのかが理解しやすくなりました。サイトエディターで適切なテンプレートを選びやすくなります。
• 以前はブロックツールバーのみで利用可能だったデュオトーンフィルターが、設定サイドバーから管理できるように（PR#49838）。
• 大きなフォントが小さな画面では適切に拡大縮小されませんでしたが、小さな画面用の最小フォントサイズが対数スケール係数によって計算されるため、Fluid Typography（柔軟にサイズが変更されるタイポグラフィ）がよりスムーズに拡大縮小されます（PR#49707）。

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

WordPress 6.3では、多くのコンテンツライターに有用な2つのブロックが新たに導入されています。

脚注ブロック

まず1つ目の脚注ブロックは非常に便利です。

この画期的な機能によって、テキストブロック（段落、見出し、リスト）に数回のクリックで脚注を追加することができます。リンクを追加したい場所にカーソルを置いて、ブロックツールバーの「さらに表示」＞「脚注」をクリックします。これで、ページの一番下に脚注が挿入されます。

このブロックは、テキストを編集すると自動的に脚注を追加、削除、並べ替えしてくれるため、長尺の記事を執筆する際にはとても便利です。

詳細ブロック

詳細ブロックを使用すると、読者がよくある質問を読んだり、動画を視聴したり、ポッドキャストを聴いたりするなどの行動を起こす時点まで、コンテンツの一部を非表示にしておくことができます。

このブロックは、要約と隠しコンテンツの2つの要素で構成されており、デフォルトでは非表示になっていますが、ブロック設定のサイドバーで変更することができます。

このブロックには、リッチテキストsummaryを含むdetails要素と、hidden要素を含むdiv要素が使用されています（PR#45055）。

カバーブロックの改善

カバーブロックのデザイン機能が改善され、使いやすくなり、カスタマイズの可能性が広がりました。

まず、テキストカラーデザインツールをサポートするようになりました。これによって、利用者やテーマ作成者は、カバーブロックのテキストの色を設定するだけで、すべてのインナーブロックの色を変更することができます。また、「メディアとテキスト」ブロックからの変換も簡単になっています。

カバーブロックのもう一つの改善点は、枠線に関するデザインツールのサポートです。これによって、カスタムブロックのスタイリングにかかる手間が削減できます。

また、ブロックパネルの設定に「レイアウト」タブも追加されたことによって、レイアウト処理に一貫性が確保され、ユーザーもテーマ開発者もカスタマイズしやすくなります。

ただし、ブロックレイアウトがカスタマイズの内容を上書きしてしまう可能性があるため、テーマ開発者は既存のテーマで必ずテストを行なってください。

デュオトーンフィルターの改善

デュオトーンフィルターにもいくつかの変更点が加わっています。

まず、サイトエディターのスタイルメニューから全体のデュオトーンフィルターを設定できるようになった点です。以前はtheme.jsonからしか適用することができませんでした。

これは、デュオトーン値がカラー値ではなくカラースラッグを使用して設定されるようになったためです。デュオトーン値を一度設定すれば、同じスラッグを使用している限り、使用しているテーマやテーマのバリエーションに関係なく適用することができます。

また技術に詳しい上級者向けに触れておきたい点として、デュオトーンのスタイルはWordPressスタイルエンジンで生成され、インライン化されるのではなく、ブロックサポートCSSと一緒に保存されるようになっています。

その他の改善点

• ボタンブロックで枠線の色、スタイル、幅を変更できるように（PR#44574）
• 投稿の抜粋ブロックで抜粋の長さの管理ができるように（PR#44964）
• 投稿のアイキャッチ画像ブロックの縦横比を変更可能に（PR#47854）
• グローバルスタイルのインターフェースで、脚注要素の色とタイポグラフィが変更できるように（PR#49141）
• 投稿日ブロックに最終更新日を追加できるようになり、公開日の代わりに投稿の更新日を素早く表示したい場合に便利（PR#49111）
• サイトのロゴをサイドバーから置換できるように（PR#49992）

パフォーマンスの向上と開発者向けの変更

WordPress 6.3には、サイトのパフォーマンスと開発ワークフローを改善するための変更や新機能も導入されています。これは多数挙げられますが、特に注目しておきたいものを厳選してご紹介します。

PHP 5サポートが終了

WordPress 6.3からPHP 5のサポートは終了します。PHPの推奨バージョンは7.4以上であり、7.4はWordPressサイトの50.8%で使用されています。

使用するPHPのバージョンは、サイトのセキュリティとパフォーマンスに影響するため、開発者だけでなくすべてのWordPressユーザーにとって重要です。

Kinstaでは、公式にサポートされているPHPバージョンのみを許可しています。サポートされている各バージョンのパフォーマンスベンチマークを定期的に実施し、新しいバージョンの方がパフォーマンスが向上することを確認しています。

画像読み込みのパフォーマンス向上

WordPress 6.3では、LCP（Largest Contentful Paint）画像かどうかを判断するために、"high"という値を持つfetchpriority属性が画像に割り当てられます。Largest Contentful Paintとは、直訳すると「最も大きいコンテンツの描画」で、ビューポート内で最大のコンテンツをレンダリングするのに要する時間を評価する指標です。

fetchpriority属性は、レイアウトが計算される前であっても、その画像の取得を優先するようにブラウザに指示を出します。

もうひとつの改良点は、loading属性による画像の遅延読み込みの自動処理です。この属性は、WordPress 5.5で初めて導入され、その後WordPress 5.9で最初のコンテンツ画像に対して、loading="lazy"属性を省略するように変更されました（詳細はこちら）。そしてWordPress 6.3では、残りの課題はすべて解消され、パフォーマンスが向上しています。

fetchpriorityとloadingの属性は、新たに追加された関数wp_get_loading_optimization_attributes()によって制御されます。この関数は、表示速度を最適化するために、属性の連想配列を返します。現在は以下の属性を返します。

• loading（パラメータ＝"lazy"）
• fetchpriority（パラメータ＝"high"）

上記の属性は互いに排他的であり、コンテンツが両方の属性を持つことはありません（両方の属性を持つ要素には警告が表示されます）。

wp_get_loading_optimization_attributes()関数、fetchpriority属性、loading属性の詳細と使用例については、「Image performance enhancements in WordPress 6.3」（WordPress 6.3における画像パフォーマンスの向上）をご覧ください。

HTML 5のasyncおよびdefer属性のサポート

asyncとdeferは、HTML 5の属性であり、HTMLの解析を一時停止せずにJavaScriptをダウンロードするようにブラウザに指示するものです。

両属性には大きな違いがあります。

• async属性を持つスクリプトは、読み込まれるとすぐに非同期で実行される。スクリプトが読み込まれると、ブラウザはHTMLの解析を一時停止して、スクリプトを実行する。
• defer属性を持つスクリプトは、ページの解析が完了してから実行される。

WordPress 6.3から、wp_register_script()またはwp_enqueue_script()関数のboolean型$in_footerを使用して、asyncおよびdefer属性を持つスクリプトを登録できるようになっています（WordPressでアセットをエンキューする方法はこちら）。

このパラメータがオーバーロードされ、新たに$args配列を受け付けるようになりました。これにより、スクリプトの読み込み方法を指定可能です。

以下は、wp_register_scriptを使用してプラグインのPHPファイルにdefer属性を定義する例です（コードはwp_enqueue_scriptと同じ）。

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

後方互換性が追加されているため、引き続きフッターでスクリプトを読み込むことができます。

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

これによって、WordPress 6.3より前のバージョンでは不可能であった、スクリプトの依存関係ツリーにおいて予期せぬ順序でスクリプトが読み込まれることがなくなります。Scripts APIの変更点に関する情報やその他の例、技術的な詳細については、Simon Dowdles氏の開発ノートをご覧ください。

開発モード

新たに導入されたWP_DEVELOPMENT_MODEを使用して、開発者向けの開発モードも導入されています。この定数はどのような開発作業にも推奨できるもので、値は開発の種類によって異なります。

WP_DEVELOPMENT_MODEの値は次のいずれかになります。

• core─サイトがコア開発環境である場合
• plugin─プラグイン開発
• theme─テーマ開発
• all─サイトが上記3つのタイプの開発すべてに使用される場合
• 文字列なし─デフォルトでサイトが開発環境として使用されていない場合

なお、WP_DEVELOPMENT_MODEは開発環境でのみ使用する定数です。本番環境では使用しません。

開発モードはWordPressの動作の低レベルな部分に影響を与えます。この記事の執筆時点で、唯一の違いはtheme.jsonファイルのキャッシュに関するもので、WP_DEVELOPMENT_MODEを'theme'に設定するとバイパスされます。

WP_DEVELOPMENT_MODE、WP_DEBUG、WP_ENVIRONMENT_TYPEはWordPressの動作に影響を与えません。一般的に開発で使用されるWP_DEBUGとWP_ENVIRONMENT_TYPE定数とは異なる動作をします。WP_ENVIRONMENT_TYPEが'development'または'local'の場合は、WP_DEVELOPMENT_MODEを使用することになります。

開発モードは以下で有効化にすることができます。

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3では、ウェブサイトが開発モードにあるかどうかを確認できるwp_in_development_mode()関数も導入されています。$modeの値として、'core'、'plugin'、'theme'を指定することで、現在有効になっている開発モードの種類を確かめることも可能です。

if ( wp_in_development_mode( 'theme' ) ) { ... }

または、「サイトヘルス」の「情報」タブでWP_DEVELOPMENT_MODEの値を確認することもできます。

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

• テーマ開発者は、新規テンプレートを作成時のモーダルウィンドウに表示されるテンプレートパターンを登録する際、template_typesプロパティを使って1つ以上のテンプレートタイプを割り当てることができるように。
• get_pages()関数が更新され、内部的にWP_Queryを使用するように。
• WP_User_Queryクラスが大幅に改善され、クエリキャッシュが実装されました。
• Cache APIにいくつかの改善点が導入。
• サイト編集リンクをクリックすると、エディターのホームページではなく、現在のテンプレートを読み込むように。
• Block Selectors APIが新たに登場し、グローバルスタイルで使用するブロックに複数のCSSセレクタを設定できるように。
• SNSアイコンの適用色がtheme.jsonとグローバルスタイルに基づいて動的に更新されるように。
• 国際化（I18N）とレイアウトサポートが更新されています。

まとめ

WordPress 6.3は、Gutenberg開発ロードマップのフェーズ2「Customization」最後のリリースです。サイトエディターのアップグレードした編集機能、より柔軟なブロックパターン、新ブロックの導入、パフォーマンスの向上、アクセシビリティと国際化の改善などにより、編集体験を次のレベルに引き上げるバージョンになっています。

2023年11月に予定されているWordPressの次期バージョンは、エディターに高度なコラボレーション機能を実装することに重点をおいた、フェーズ3「Collaboration」に突入します。

WordPressサイトをテストしたい、またはWordPressに貢献したい方には、Kinstaの無料ローカルWordPress開発ツールDevKinstaがお役に立てるはずです。

開発環境でもうWordPress 6.3をテストしましたか？特にお気に入りの機能はありますか？以下のコメント欄でぜひお聞かせください。