WordPress 6.2 の新機能: ブラウズモード、スタイルブック、改善されたナビゲーションメニュー、新しい API など

公開: 2023-03-24

WordPress 6.2 は2023 年 3 月 28 日にリリースが予定されており、2023 年の最初のリリースで何がもたらされるのかを探る時が来ました。

WordPress 6.2 では、長期的な Gutenberg 開発ロードマップのフェーズ 2 の最終段階に入り、ブロックエディターは正式にベータフェーズを終了します。

このリリースでは、主にインターフェイスの改善と編集エクスペリエンスの合理化に重点が置かれています。

テンプレートとテンプレートパーツ間を移動するための新しいアプローチが導入され、ウィジェットをブロックテーマにインポートする機能、気を散らさない新しい書き込みモード、スケーリングされたブロック設定エクスペリエンス、および既存のブロックに対する大小さまざまな改善が多数追加されました。、パフォーマンス、およびユーザビリティ。

しかし、機能性と使いやすさの面で飛躍するものがあるとすれば、それはナビゲーションブロックです。最初にリリースされて以来、ナビゲーションメニューは何度か繰り返され、時間の経過とともに編集プロセスが大幅に合理化されました。 WordPress 6.2 では開発が続けられており、この記事では、ナビゲーションメニューをいかに簡単に管理できるようになったかを紹介します。

編集エクスペリエンスの向上

WordPress 6.2 では、サイト構造全体が中央に配置され、編集エクスペリエンスが改善されています。ナビゲーションメニューをより簡単に管理し、スタイルの変更を 1 つのブロックからグローバルスタイルにプッシュし、色付きのテンプレートパーツと再利用可能なブロックを使用してテンプレートとテンプレートパーツ間を簡単に移動できるようになりました。

しかし、それだけではありません。エディタのインターフェースへの主な追加と変更を詳しく見ていきましょう。

刷新されたサイトエディターインターフェイスとブラウズモード

WordPress 6.2 では、エディターインターフェイスのいくつかの改善が核心に迫っています。最初の最も興味深い更新は、Site Editor インターフェイスに影響を与えます。新しいブラウズモードのおかげで、テンプレートとテンプレートパーツを簡単にナビゲートできるようになりました。

WordPress 6.2 の Site Editor インターフェースを示す画像 — WordPress 6.2 のサイトエディターインターフェイス

新しいインターフェイスでは、メニュータイトルの右側にあるプラス (+) アイコンをクリックするだけで、エディターのサイドバーから直接新しいテンプレートまたはテンプレートパーツを追加することもできます。

Wp Core およびドキュメンテーションの寄稿者である Ryan Welcher 氏によると、「この機能に関する作業は進行中であり、新しい Gutenberg バージョンがリリースされるにつれて改善され続けます。」

ワークフローがよりスムーズでシームレスになりました。現在のテンプレート/テンプレートパーツの編集を開始するには、左側のメニューの[編集]ボタンをクリックするか、ページ中央のテンプレートプレビューをクリックします。

テンプレートを編集するには、[編集] ボタンまたはテンプレートプレビューをクリックします。

気晴らしモード

WordPress 6.2 では、新しい気晴らしのない編集モードが導入されました。これにより、キャンバスから雑然としたものを取り除き、ページのコンテンツに集中することができます。

右上隅にある省略記号 (3 つのドット) アイコンをクリックして表示されるオプションパネルで、この機能を有効にすることができます。

Distraction Free モードを有効にすると、余分なサイドバーとツールバーが消え、作業中のコンテンツだけが画面に残ります。

タブ付きブロックインスペクター

WordPress 6.2 では、設定コントロールを別々のパネルに分割することで、サイドバーに秩序をもたらすことを目的とした新しいブロックインスペクターが導入されました。

ブロック設定がタブに分割され、スタイル設定が他のブロック設定から分離されました。

利用可能な場合、ブロックインスペクターのタブは次の順序で表示されます。

リストビュー:サブメニューやナビゲーションブロックのリンクなど、ブロックの子を管理するためのコントロールが含まれています。
設定:ブロックの外観に関連しない構成設定が含まれます
外観:タイポグラフィや色など、現在のブロックのスタイルに特に関連する設定が含まれます。

これは、特にグループブロックやナビゲーションブロックのような多くの構成オプションを備えた高度なブロックの場合、インターフェイスの使いやすさの顕著な改善です。

ご了承ください：

新しいインスペクターは、表示する要素が含まれている場合にのみタブを表示します。
[設定] タブに [詳細] パネルのみが含まれている場合は、[外観] タブに移動します。
Block Inspector にタブが 1 つしかない場合は、WordPress 6.2 以前と同じように表示されます。

新しい Block Inspector の詳細については、開発ノートをご覧ください。

色付きのテンプレートパーツと再利用可能なブロック

グループやブロックと簡単に区別できるように、テンプレートパーツと再利用可能なブロックは、リストビュー、ブロックインサーター、ブロックツールバー、およびエディターキャンバスで異なる色で強調表示されるようになりました。

これは、下の画像に示すように、サイトエディターと投稿エディターの両方で発生します。

投稿エディターで色付きの再利用可能ブロックを示す画像 — 投稿エディターで色分けされた再利用可能ブロック

刷新されたブロックインサーター

Block Inserter は、全体的な編集エクスペリエンスを大幅に改善するいくつかの変更の影響を受けます。

まず、新しいインターフェイスデザインにより、パターンとメディアカテゴリ間のナビゲーションが改善され、パターンとメディアアイテムのプレビューが大きくなりました。

WordPress 6.2 の Block Inserter でのパターンプレビュー

サイトにメディアが存在する場合、メディアタブがブロックインサーターに表示され、コンテンツ内へのメディアの挿入が簡単になります。画像/メディアをドラッグアンドドロップするか、メディアをクリックするだけでコンテンツに追加できます。

新しい <strong><figcaptionwp-caption-text を示す画像

タブ内で、[メディアライブラリを開く]ボタンをクリックすると、WordPress メディアライブラリが表示されます。

Block Inserter での Openverse 統合

Openverse は、誰でも使用できるように、オープンライセンスまたはパブリックドメインの作品を共有することを目的としたツールです。現在、WordPress 6.2 では、Openverse が Block Inserter に統合されています。

この新機能にアクセスするには、Block Inserter の [メディア] タブをクリックします。これは、Openverse リポジトリから直接取得した検索フィールドと画像プレビューを含むパネルを示しています。

技術的な詳細については、Openverse 統合プルリクエストを参照してください。

ウィジェットをブロックテーマに移行する

WordPress 6.2 以降、クラシックテーマを使用してサイトを実行しているユーザーが、ブロックテーマに切り替えることを決定した場合、既存のウィジェットエリアを新しいテーマに移行して、それらをテンプレートパーツに変換できます。

それがどのように機能するかを見てみましょう。

まず、クラシックテーマでウィジェットエリアを作成します。たとえば、Twenty-Eleven を有効にして、フッターエリア 1 にカレンダーを追加できます。

ここで、テーマを Twenty Twenty-Three に変更します。サイトエディターを開き、編集するテンプレートを選択して、テンプレートパーツを追加します。

Twenty Twenty-Three テーマのテンプレートへのテンプレートパーツの追加

ブロックのサイドバーで、 [ウィジェットエリアのインポート]ドロップダウンメニューからインポートするウィジェットエリアを選択します。

以上です。これで、他のテンプレートパーツと同様に、以前のウィジェットエリアを管理できます。

ドキュメントの詳細とリストビューの組み合わせ

WordPress 6.2 より前は、エディターのツールバーに[詳細]と[リストビュー]の 2 つの別個のボタンがありました。次の画像では、単語数、文字数、読み取り時間、ヘッダー、段落、ブロックの数、およびドキュメントアウトラインを含む、WordPress 6.1 のドキュメント詳細ポップオーバーを確認できます。

WordPress 6.2 から、リストビューと詳細は、リストビューとアウトラインの 2 つのタブに分割された単一のドキュメント概要パネルに移動されました。

この変更により、ドキュメントをより簡単に管理できるようになります。

ローカル開発環境に WordPress 6.2 をインストールする方法

公式リリース前に WordPress の開発版を試してみたい場合は、次の手順に従ってください。

DevKinsta を開き、新しいローカル WordPress ウェブサイトを作成します
完了したら、WordPress ダッシュボードを開き、 [プラグイン] → [新規追加]に移動します
WordPress Beta Testerプラグインを検索してインストールする
プラグインを有効にして、 [ツール] → [ベータ版テスト]に移動します
WP Beta Tester Settings タブで、 Bleeding edgeオプションを選択し、設定を保存します。
WordPress ダッシュボードに戻り、更新画面を開き、最新のナイトリーバージョンに更新します。

それで全部です！これで、ローカルの WordPress 開発インストールが完了し、すべてのテストを自由に実行できるようになりました。周りを見て、新機能についてどう思うか教えてください。

DevKinsta を使用すると、数回クリックするだけで、ローカルマシンに WordPress の最新の開発環境を構築できます。

DevKinstaを無料でダウンロード

拡張ブロック機能

WordPress 6.2 では、いくつかのコアブロックタイプの機能が拡張されました。これは、編集エクスペリエンスに対するいくつかの変更と改善の影響を受けるナビゲーションブロックに特に当てはまります。

主な変更点を詳しく見ていきましょう。

ナビゲーションブロックのリストベースの編集

WordPress 6.2 のリリースにより、ブロック設定サイドバーのリストビューからナビゲーションブロック要素の配置を変更できるようになりました。

メニュー項目をクリックすると、選択したページリンクの設定サイドバーが表示され、ラベル、URL、説明、リンクタイトル、リンク rel などのリンクの詳細を編集できます。

この変更により、ナビゲーションメニューの編集操作が大幅に簡素化され、メニュー内の項目の追加、配置、削除、または新しいナビゲーションメニューの作成さえ可能になります。

ナビゲーションをロック

ナビゲーションブロックのもう 1 つの改善点は、より詳細な方法でメニュー編集をロックできることです。 WordPress 6.1 では、 [編集を制限する] と [移動を無効にする] オプションしか利用できませんでしたが、現在は [編集を制限する] 、 [移動を無効にする] 、および [削除を防止する]を使用できます。

さらに、選択したオプションを内部ブロック (リンクとサブメニュー) に適用することもできます。

ブロックツールバーからキャプションを追加/削除する

新しい[キャプションの追加/削除]ボタンを使用すると、ユーザーは複数のブロック (オーディオ、ビデオ、画像) のブロックツールバーからキャプションを制御できます。

既にキャプションを設定している場合は、画像をコンテンツに追加するときに自動的にキャプションが含まれます。

ページリストブロックの改善

2 つの改善点には、ページリストブロックが含まれます。

まず、ページリストブロックを展開して、リストビューパネルにページのリストを表示できるようになりました。

さらに、ブロックサイドバーの新しいオプションを使用すると、開始ページを設定し、ブロック内のそのページから下にあるページのみを表示できるようになりました。

新しいグループブロックプレースホルダー

ブロックがページコンテンツに追加されると、グループブロックプレースホルダーにバリエーションピッカーが表示されるようになりました。

スティッキーポジショニングブロックのサポート

WordPress 6.2 では、スティッキーポジショニングから始まる新しいポジションブロックサポート機能が導入されました。

この新機能は現在、デフォルトでオプトインされているグループブロックにのみ適用されます。

テーマ開発者は、 theme.jsonのappearanceTools機能を使用して、テーマのスティッキーポジショニングを有効にすることができます。外観ツールをより細かく制御したい場合は、 settings.position.sticky prop をtrueに設定することもできます。

インスペクターコントロールサイドバーの[位置]パネルで、スティッキーポジショニングを有効にすることができます。

スティッキーポジショニングをオンにすると、HTML タグはis-position-stickyクラスを取得し、いくつかの CSS ルールが対応する要素に適用されます。

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

Twenty Twenty-Three テーマを使用したスティッキーポジショニングの例

スティッキーポジショニングは、ドキュメントのルートにあるグループブロックに対してのみ機能します。これにより、ユーザーの混乱やエラーを防ぐことができますが、現時点では、組み込みのスティッキーポジショニングが少し難しいと感じるかもしれません (また、WordPress Web サイトにスティッキーヘッダーを追加するさまざまな方法を確認することをお勧めします)。ただし、開発ノートによると、

... 手動テストでは、追加の UI または UX の作業がなければ、ユーザーが誤ってルート以外のブロックをスティッキーに設定したり、たとえば、ヘッダーテンプレートパーツ内のブロックをスティッキーに設定したりすると、スティッキーヘッダーを作成しようとすると混乱する可能性があることがフィードバックで示されました。粘着性があります。 6.2 では機能をルートブロックのみにスケールバックして、ネストされたブロックの適切なソリューションを検討する時間を増やすことにしました。

配置機能は個々のブロックでのみ使用できるため、グローバルスタイルにはありません。

ブロック編集エクスペリエンスのその他の改善

ブロック編集のその他の注目すべきアップグレードには、次のようなものがあります。

空の段落に画像をドラッグアンドドロップして、画像ブロックに置き換えることができるようになりました。
タイポグラフィコントロールは、パネルにグループ化されています。これにより、ブロック設定インターフェイスのようにコントロールを表示および非表示にできるようになったため、スタイルインターフェイスと設定インターフェイスとの一貫性が高まり、使いやすさが向上します。
WordPress 6.1 と WordPress 6.2 のタイポグラフィコントロール
グローバルスタイルインターフェイスで、見出しブロックの文字間隔を直接変更できるようになりました。
カレンダーブロックの背景、リンク、およびテキストの色を設定できるようになりました。
Web ページの構造をより適切に反映するために、2 つの新しいバナーとフッターのブロックパターンカテゴリが導入されました。
[[ショートカットを使用して、任意のブロック内のリンクをオートコンプリートできるようになりました。この変更の前は、ブロックは__experimentalSlashInserterを使用してリンクのオートコンプリートのサポートを明示的に宣言する必要がありました。
新しいcontrol + option + 1 ～ 6キーボードショートカットを使用すると、段落を見出しに変換できます。
ページリストブロックは、フォントファミリ、フォントサイズ、外観、行の高さ、文字間隔、装飾、大文字と小文字を含む、すべてのタイポグラフィオプションをサポートするようになりました。
WordPress 6.2 のページリストブロックのタイポグラフィ設定

強化された設計ツール

WordPress 6.2 で導入された新機能と改善点の多くは、CMS のスタイリングとデザイン機能を強化します。以下は、6.2 で提供される最も興味深いデザイン関連の機能のリストです。それぞれについて詳しく説明します。

スタイルブック

WordPress 6.2 では、ユーザーがテンプレート/テンプレートパーツにブロックを追加しなくても、Web サイトで使用できるブロックをプレビューできる新しいスタイルブック機能が導入されています。グローバルスタイル内のスタイルヘッダーに表示される [スタイルブックを開く] ボタン (目のアイコン) をクリックして、スタイルブックを起動できます。

これにより、すべてのコアおよびサードパーティブロックのプレビューをカテゴリ別に表示するインターフェイスが開きます。

Style Book インターフェースを示す画像 — スタイルブックのインターフェース

新しいスタイルブックインターフェイスは、すべてのブロックスタイルのプレビューを 1 か所で利用できるようにすることで、設計プロセスを簡素化します。

技術的な観点から見ると、新しいインターフェイスは@wordpress/edit-siteに追加された新しいStyleBookコンポーネントによって生成され、iframe に登録されたすべてのブロックのプレビューを表示します (PR #45960 も参照)。

同じインターフェースは、個々のブロックのプレビューも提供します。例として、次の画像は、カスタマイズされたカレンダーウィジェットのプレビューを示しています。

開発者は、2 つの方法でブロックの挿入とプレビューを非表示にできます。最初に、 block.jsonでsupports.inserter falseに設定できます。

 { "supports": { "inserter": false } }

ブロックプレビューを非表示にするもう 1 つの方法は、インスペクターヘルプパネルでブロックのプレビューを作成するために使用されるexampleプロパティを避けることです (詳細はこちらを参照)。

グローバルスタイルの影

WordPress 6.2 では、Global Styles またはtheme.jsonを使用して一部のブロックに影を追加およびカスタマイズできるようになりました (この記事の執筆時点では、影の機能は Button ブロックでのみ使用できます)。

まず、この機能をサポートするテーマでは、グローバルスタイルインターフェイスから影を追加できます。

実際の動作を確認するには、Twenty Twenty-Three テーマを有効にし、 Styles > Blocks > Buttonに移動して、 Shadowボタンをクリックします。

シャドウポップアップでは、テーマプリセットからシャドウを選択できます。

テーマ開発者と上級ユーザーは、 theme.jsonを使用してブロックに影を追加することもできます。次の定義は、Button ブロックに 4px の黒い影を追加します。

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

プリセットを定義して、テーマユーザーがスタイルインターフェイスから選択できるようにすることもできます。

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

定義すると、プリセットはブロックスタイルのシャドウパネルに表示されます。

プリセットの値を選択して、ブロックのデフォルトとして使用することもできます。

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

新しい最小高寸法コントロール

WordPress 6.2 以降、Group および Post Content ブロックのブロック設定サイドバーの [Dimensions] パネルで、 appearanceTools機能を使用してテーマでデフォルトで有効になっている新しい最小高さコントロールが提供されるようになりました。

この新しいコントロールを使用すると、ユーザーはグループコンテンツブロックと投稿コンテンツブロックの最小の高さを設定でき、コンテンツが少ない場合でもページの下部にフッターを表示するために使用できます。

新しい垂直配置ツールと組み合わせることで、ページの上部/中央/下部で内部要素を垂直方向に整列させることもできます。

開発者は、テーマにminHeight設定をtheme.jsonに追加することで、最小高さのサポートを追加できます。

 { "settings": { dimensions: "minHeight": true } }

appearanceToolsプロパティを使用することもできます。

 { "settings": { "appearanceTools": true } }

新しいminHeightプロパティを使用して、特定の値を直接theme.jsonに設定することもできます。

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

ブロック開発者は、 supports.dimensions.minHeightプロパティをblock.jsonファイルに追加し、その値をtrueに設定できます。静的ブロックの場合、CSS のmin-heightルールはインラインスタイルとして保存されますが、動的ブロックの場合は、 get_block_wrapper_attributesによって返されるスタイル属性に含まれます。

スタイルパネルのカスタム CSS

テーマカスタマイザーと比較してサイトエディターに欠けている機能の 1 つは、カスタム CSS スタイルを追加する機能でした。 WordPress 6.2 はそのギャップを埋め、テーマを更新しても上書きされないカスタム CSS ルールを追加するためのテキストフィールドがグローバルスタイルインターフェイスに含まれるようになりました。

ブロックスタイルパネルから、またはスタイルツールバーの[その他のスタイル] アクションボタンをクリックして、ブロックごとにカスタムスタイルを追加できます。これにより、追加の CSS要素を示すポップアップメニューが表示されます。

カスタム CSS をサポートするために、新しいstyles.cssプロパティがtheme.jsonに追加されました。

カスタム CSS ルールは、 theme.jsonで設定されたカスタムスタイルを完全にオーバーライドできます。これが発生したくない場合は、既存のエンキューメソッドを使用してスタイルシートを含めることを検討してください。

styles.blocks.block.cssプロパティを使用して、 theme.jsonにブロックごとのカスタム CSS を追加することもできます。

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

ネストされた要素と疑似セレクターに&を使用することもできます。

新しいカスタム CSS 機能の詳細については、グローバルスタイルおよびブロックごとのカスタム CSS も参照してください。

ブロック間でのスタイルのコピーと貼り付け

ブロックのツールバーの [オプション] メニューの新しいグループに、 [スタイルをコピー] と[スタイルを貼り付け]の 2 つのボタンが表示されるようになりました。この追加の前は、スタイルのコピーのみが可能でしたが、スタイルの貼り付け方法が明確ではありませんでした。

この新機能を試すには、見出しなどの新しいブロックを追加します。スタイルを変更し、ブロックの [オプション] メニューから[スタイルのコピー]を選択します。

Google Chrome がクリップボードにコピーされたテキストと画像を表示できるようにする

次に、別のブロックを選択してPaste styleを選択します。コピーされたスタイルは、2 番目のブロックに自動的に適用されます。

この機能は、サポートされているブラウザーの安全な (https) サイトでのみ使用できることに注意してください。詳細については、プルリクエストを参照してください。

ブロックの変更をグローバルに適用

WordPress 6.2 では、個々のブロックの [詳細設定] パネルの下に [グローバルに適用]ボタンも導入されています。これにより、ブロックスタイルの変更をグローバルスタイルにプッシュし、それらの変更を Web サイト全体に適用できます。

この新機能のおかげで、ブロックのタイポグラフィ、間隔、寸法、およびカラースタイルをそのタイプのすべてのブロックに適用することが、ボタンを押すのと同じくらい簡単になりました (このプルリクエストも参照してください)。

Spacing Visualizer による設計エクスペリエンスの向上

スペーシングビジュアライザーを使用すると、ブロックに適用されているマージンまたはパディングの量をプレビューできます。 WordPress 6.2 では、この機能が強化され、編集エクスペリエンスが向上するいくつかの機能が追加されました。

まず、スペースビジュアライザーは、マージンまたはパディングコントロールにカーソルを合わせるとすぐに表示されるようになりました。

次に、Spacing Visualizer は、スペーシング設定にカーソルを合わせるとすぐにブロックツールバーを自動的に非表示にするようになりました。これにより、ブロックツールバーの煩雑さから解放された新しいマージンとパディング設定をプレビューできます。

これらは小さいながらも重要な変更であり、かなりの数のコアブロックに影響を与えます。

開発者向けの変更

WordPress 6.2 は、新しい API、バグ修正、パフォーマンスの改善など、開発者向けの多くの新機能ももたらします。最も魅力的な追加機能に飛び込みましょう。

新しい HTML API

WordPress 6.2 では、特定の HTML タグを見つけ、PHP を介して属性を追加、削除、または更新するための安全な方法を提供する、HTML5 仕様に準拠したパーサーである HTML タグプロセッサが導入されています。 HTML タグプロセッサは、新しい HTML 処理 API の最初のコンポーネントです。

新しい API を使用すると、正規表現の使用が必要になることが多かった、以前は複雑だったタスクを簡単に実行できます。

次の例では、 alt属性をimgタグに追加するだけです。

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

このコードは、次のimgタグを生成します。

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

$p->next_tag()メソッドは、HTML で次に使用可能なタグに移動します。また、上記の例に示すように、特定のタグを検索するために、タグ名、CSS クラス、またはその両方を受け入れます。

HTML タグを編集するには、まずターゲットタグを選択する必要があります。

 $p->next_tag();

ターゲットタグを選択したら、API メソッドを使用していくつかの操作を実行できます。

$p->get_tag()
$p->set_attribute()
$p->get_attribute()
$p->remove_attribute()
$p->add_class()
$p->remove_class()

スタイル属性を設定できます。

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

クラスまたは属性を追加または削除することもできます。次のコードでは、カスタムクラスをh1タグに追加します。

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

$p->get_updated_html()メソッドを使用して、更新されたタグをエコーまたは返すことができます。

新しい HTML API の詳細については、WordPress コアコミッターである Adam Zielinski によるこのインタラクティブな PHP チュートリアルを参照してください。

Patterns API と新しい`template_types`プロパティ

Patterns API を使用すると、WordPress 開発者は「投稿、ページ、カスタム投稿タイプ、およびテンプレートに簡単に挿入できる、事前に設計されたコンテンツのブロックを作成する」ことができます。

WordPress 6.2 では、パターン API に新しいtemplate_typesプロパティが含まれるようになり、特定のブロックパターンを使用できるテンプレートを指定できるようになりました。

Jorge Costa は、これがバックエンドのみの更新であり、現在対応する UX 機能がないことを強調しています。ただし、WordPress 6.3 では、この機能の進化した実装が期待できます。

WordPress 6.3 を考える上での最初の使用法は、ユーザーがテンプレートの作成を開始するときに、テンプレートで意味のあるいくつかのパターンをユーザーに示すことです。ユーザーは、「空白」またはフォールバックテンプレートではなく、パターンから開始できます。

技術的な面では、 register_block_pattern()関数が変更され、新しいtemplate_typesパラメータが含まれるようになりました。これは、ブロックパターンが対象とするテンプレートの名前を含む文字列の配列です。

REST API も変更され、少なくとも 1 つのブロックパターンが定義されている場合は、ブロックパターンのテンプレートタイプを返すようになりました。

React v18.0 と同時実行モード

WordPress 6.2 には、バージョン 18.0 に更新された新しいバージョンの React ライブラリも同梱されています。新しいバージョンには、新しい API、機能、改善、およびバグ修正が含まれています。 React v18.0 の主な機能の 1 つは、「React が同時に複数のバージョンの UI を準備できるようにする新しい舞台裏のメカニズム」である同時実行モードの導入です。

React の並行モードの主な特徴の 1 つは、割り込み可能であることです。

React は、レンダリングが中断された場合でも、UI が一貫して表示されることを保証します。これを行うために、ツリー全体が評価されると、最後まで DOM ミューテーションの実行を待機します。この機能により、React はメインスレッドをブロックすることなく、バックグラウンドで新しい画面を準備できます。これは、UI が大規模なレンダリングタスクの途中であってもユーザー入力に即座に応答できることを意味し、滑らかなユーザーエクスペリエンスを生み出します。

主な利点は、UI がバックグラウンドで実行中のジョブと並行して、ユーザー入力に即座に応答することです。

ただし、同時実行には、開発者が注意すべき潜在的な落とし穴もあります。 WordPress 6.2 の React での並行モードの詳細な概要については、開発ノートで提供されている例を確認してください。

開発者向けの追加の変更

開発者が注意すべきその他の重要な変更には、次のようなものがあります。

WordPress 6.2 では、エディターが画面に表示される前にブロック設定をフィルタリングするために使用できる新しい JavaScript フィルターが導入されています。新しいblockEditor.useSetting.beforeフィルターを使用すると、開発者は、ブロックの場所、現在のユーザーロール、隣接するブロックなどに基づいて設定を変更することもできます。追加情報と使用例については、WordPress 6.2 の任意のブロックの設定をカスタマイズするを参照してください。
ServerSideRenderコンポーネントのブロックサポートに関連する属性とスタイルを除外するために、新しいskipBlockSupportAttributesプロパティが導入されました。
新しいtheme.json API により、 theme.jsonから既存のコアブロックのバリエーションをスタイルできるようになりました。
Twenty Twelve から Twenty Seventeen までのバンドルされたテーマでは、Google フォントがローカルに含まれるようになり、Google アドレスからフェッチされなくなりました。

しかし、それだけではありません。 WordPress 6.2 では、簡潔にするためにここでは言及しなかった多くの機能、改善、およびバグ修正が導入されています。より包括的な概要については、WordPress 6.2 フィールドガイドをご覧ください。

まとめ

WordPress 6.2 により、Customization という名前の Gutenberg プロジェクトのフェーズ 2 の終わりに近づいています。しかし、Matias Ventura が指摘するように、これはカスタマイズ作業が完了し、将来のバージョンで行われることを意味するものではありません。いつものように、コミュニティからのフィードバックに基づいて、エディターの追加の改善が期待できます。

この投稿では、WordPress 6.2 で提供される主な機能、改善点、およびバグ修正のいくつかを調べました。しかし、6.2 にはさらに多くの機能があります。 14.2 から 15.1 までの 10 のバージョンの Gutenberg プラグインがコアに組み込まれているため、新しいブラウズモード、タブ付きブロックインスペクター、ウィジェットからブロックテーマへの移行、新しい API、および多数の機能強化とバグ修正が行われます。また、アクセシビリティと国際化も改善されます。

また、WordPress が好きで、新しい WordPress 開発スキルを習得したり、CMS をテストして貢献したりしたい場合は、Kinsta の完全に無料のローカル WordPress 開発スイートである DevKinsta を試してみてください。

開発環境で新しいバージョンを既にテストしましたか? WordPress 6.2 で最も気に入っている機能は何ですか? 以下のコメントセクションであなたの考えを共有してください。

WordPress 6.2 の新機能: ブラウズ モード、スタイル ブック、改善されたナビゲーション メニュー、新しい API など