WordPress 6.2 Dolphyは、2023年最初のメジャーリリースです。その新機能が気になるところです。

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

今回のリリースは、主にインターフェースの改善と編集作業の効率化に重点が置かれています。

テンプレートやテンプレートパーツの操作を楽にする新たな手法が導入され、ブロックテーマにウィジェットをインポートする機能、集中執筆モード、ブロック設定の拡張、そして既存のブロック、パフォーマンス、ユーザビリティに対する大小さまざまな改善点が盛り込まれています。

中でも、機能性や使い勝手の面で劇的に改善されたのが、ナビゲーションブロックでしょう。ナビゲーションメニューは、WordPressのリリース当初から度重なる改良を経て、編集作業が大幅に効率化されており、今回のWordPress 6.2でもその進化が伺えます。以下、ナビゲーションメニューがいかに最適化されたかを含め、詳しくご紹介していきます。

WordPress 6.2の新機能について動画での解説もご用意しています。

編集機能の強化

WordPress 6.2では、サイト構造全体が中心に配置され、編集体験が向上しています。ナビゲーションメニューが管理しやすくなり、単一のブロックからグローバルスタイルにスタイルを変更できるようになり、さらに、色のついたテンプレートパーツや再利用可能なブロックで、操作がより簡単になりました。

他にもさまざまな変更点があります。まずは、エディターのインターフェースまわりの変更点を見ていきましょう。

サイトエディターインターフェースの一新

エディターインターフェースの改良点が、今回のリリースの肝となります。まず注目したいのが、サイトエディターインターフェースのリニューアル(Browse Mode)です。これによって、テンプレートとテンプレートパーツをより簡単に操作できるようになっています。

WordPress 6.2のサイトエディターインターフェース
WordPress 6.2のサイトエディターインターフェース

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

新サイトエディターのテンプレートメニュー
新サイトエディターのテンプレートメニュー

Wp Core and DocumentationのコントリビューターであるRyan Welcher氏によると、この機能は現在も開発中で、今後新たなGutenbergのバージョンがリリースされるたびに改善されていくようです。

新規テンプレートを追加
新規テンプレートを追加

ワークフローはさらにシームレスに。左側メニューの「編集」ボタン、またはページ中央のテンプレートプレビューをクリックするだけで、テンプレート/テンプレートパーツの編集を開始することができます。

編集ボタンまたはテンプレートのプレビューをクリックしてテンプレートを編集
編集ボタンまたはテンプレートのプレビューをクリックしてテンプレートを編集

集中執筆モード

他の要素に邪魔されることなく、コンテンツの執筆に専念することができる「集中執筆モード」が導入されています。

集中執筆モード
集中執筆モード

この機能は、右上の縦三点リーダー(︙)をクリックして表示されるメニューから有効化できます。

集中執筆モードを有効にすると、サイドバーやツールバーが非表示になり、コンテンツだけが画面に表示されます。

設定とスタイルタブ

新たなブロックインスペクター(右側サイドバー)が導入されており、設定項目が別パネルに分割され、サイドバーが操作しやすくなりました。

ブロック設定を「設定オプション」と「スタイル」の2つのタブで区別することで、より設定が行いやすくなっています。

この変更が適用されているブロックでは、以下のタブが表示されます。

  • リスト表示:ナビゲーションブロックのサブメニューやリンクなどのブロックの子要素の設定項目
  • 設定オプション:ブロックのスタイルに関連しない設定項目
  • スタイル:タイポグラフィや色など、ブロックのスタイルに関連する設定項目
ブロックのサイドバーにタブが追加
ブロックのサイドバーにタブが追加されている

特にグループブロックやナビゲーションブロックのような設定項目が多いブロックでは、使い勝手が大幅に向上します。

ただし、以下の点にご注意ください。

  • 表示要素がある場合にのみタブが表示されます。
  • 「設定オプション」タブに「高度な設定」項目しかない場合は「スタイル」タブに移動します。
  • タブが1つしかない場合は、WordPress 6.2以前と外観と同じになります。

このブロックインスペクターの詳細についてはこちらをご覧ください。

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

グループやブロックとの区別がつきやすいよう、リスト表示、ブロックインサーター、ブロックツールバー、エディターキャンバスで、テンプレートパーツと再利用可能ブロックが別の色で表示されるようになります。

リスト表示のテンプレートパーツをカラー化
リスト表示のテンプレートパーツに色がついている

以下のように、この変更点はサイトエディターと投稿エディターの両方に導入されています。

An image showing a colorized Reusable Block in the post editor
ポストエディターにて(再利用可能なブロックに色がついている)

ブロックインサーターの改良

ブロックインサーターには、編集作業全般に大きく影響する改善が施されています。

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

ブロックインサーターのパターンプレビュー
ブロックインサーターのパターンプレビュー

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

タブ内にある「メディアライブラリを開く」をクリックすると、すぐにWordPressのメディアライブラリにアクセスできます。

Openverseとブロックインサーターの統合

Openverseは、オープンライセンスやパブリックドメインの作品を共有し、誰でも利用できるようにすることを目的とした検索エンジン。今回のリリースでは、このOpenverseがブロックインサーターに統合されています。

ブロックインサーターの「メディア」タブをクリックすると、検索フィールドとOpenverseリポジトリの画像とプレビューが表示されます。

Openverseとブロックインサーターの統合
Openverseとブロックインサーターの統合

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

ウィジェットのブロックテーマへの移行

クラシックテーマをブロックテーマに変更する際、既存のウィジェットエリアテンプレートパーツに変換して、新たなテーマに移行することができるようになりました。

具体的な仕組みを見てみます。

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

Twenty Elevenでウィジェットを追加
Twenty Elevenでウィジェットを追加

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

Twenty Twenty-Threeでテンプレートにテンプレートパーツを追加
Twenty Twenty-Threeでテンプレートにテンプレートパーツを追加

ブロック設定サイドバーの「ウィジェットのインポート」ドロップダウンメニューで、インポートするウィジェットを選択します。

ウィジェットのインポート
ウィジェットのインポート

以上で完了です。これで、以前のウィジェットを他のテンプレートパーツと同じように管理できるようになります。

インポートしたウィジェットをプレビュー
インポートしたウィジェットをプレビュー

文書の詳細とリスト表示の統合

WordPress 6.2以前は、エディターのツールバーに「詳細」と「リスト表示」の2つのボタンが存在しており、WordPress 6.1の「詳細」には、単語数、文字数、読了時間、見出し、段落、ブロックの数、および文書の概要が表示されていました(以下スクリーンショット参照)。

「詳細」ポップオーバー
「詳細」ポップオーバー

WordPress 6.2では、「リスト表示」と「詳細」が1つのパネルに統合され、「詳細」は「アウトライン」タブに表示されます。

「アウトライン」タブ
「アウトライン」タブ

この変更によって、文書がより管理しやすくなります。

ブロック機能の強化

WordPress 6.2では、いくつかのブロックタイプの機能が拡張されています。特にナビゲーションブロックが改善されており、編集作業が効率化されること間違いなしです。

以下、変更点を詳しく見ていきましょう。

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

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

ナビゲーションメニューのリスト表示に「メニュー」タブが追加
ナビゲーションメニューのリスト表示に「メニュー」タブが追加されている

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

ページリンク設定のサイドバー
ページリンク設定のサイドバー

これによって、ナビゲーションメニューが大幅に簡略化され、メニュー項目の追加、配置、削除、さらにはナビゲーションメニューの新規作成が可能になりました。

ナビゲーションのロック機能

ナビゲーションブロックのもう1つの改善点として、ロック機能が強化されました。WordPress 6.1では「編集を制限」と「移動を無効化」の2種類しかありませんでしたが、6.2からは新たに「削除を防止」も選択できます。

また、選択したオプションは、内側のブロック(リンクやサブメニュー)にも適用可能です。

ナビゲーションをロック
ナビゲーションをロック

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

キャプションの追加・削除ボタンが導入され、ブロックのツールバーから複数のブロック(音声、動画、画像)のキャプションを設定できるようになっています。

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

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

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

固定ページリストブロックには、2つの変更点が加えられています。

まず、固定ページリストブロックを展開すると、「リスト表示」タブにページ一覧が表示されるようになっています。

リスト表示の固定ページリスト
リスト表示の固定ページリスト

また、ブロック設定サイドバーで親ページが設定できるようになり、指定したページ以下のページのみをブロック内に表示することができます。

固定ページリストブロックに親ページを設定
固定ページリストブロックに親ページを設定

グループブロックのプレースホルダー

ブロックがページコンテンツに追加された際、グループブロックのプレースホルダーでレイアウトを選択できるようになりました。

グループブロックのプレースホルダー
グループブロックのプレースホルダー

Stickyポジションブロック

スクロール時にもブロックが上部に固定される、「Stickyポジション」をはじめとするポジションブロック機能が導入されました。

この機能は、現在グループブロックにのみ適用されており、デフォルトでオプトイン状態となっています。

テーマ開発者は、theme.jsonappearanceTools機能を使って、テーマ上でStickyポジションを有効化することができます。appearanceToolsをより詳細に制御するため、settings.position.stickytrueに設定することも可能です。

サイドバーの「Position」ドロップダウンメニューで、Stickyポジションを選択できます。

グループブロックでStickyポジションを設定
グループブロックでStickyポジションを設定

Stickyポジションを有効にすると、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テーマでのStickyポジション例
Twenty Twenty-ThreeテーマでのStickyポジション例

Stickyポジションは、ドキュメントのルートにあるグループブロックに対してのみ機能します。混乱やエラーを防ぐことができる可能性がある一方で、現時点ではこの機能に賛同できないという声も(WordPressサイトのスティッキーヘッダーについてはこちらの記事をご覧ください)。WordPress開発チームは以下のように述べています。

「マニュアルテストを実施し、UIやUXの追加作業がないと、ヘッダーのSticky化を試みる際に誤ってルート以外のブロックをSticky化してしまったり、ヘッダーテンプレートパーツ内のブロックをSticky化すると、混乱する可能性があるというフィードバックを受けました。これを鑑み、6.2ではこの機能をルートブロックのみに制限して、ネストしたブロックの適切な解決策を検討する時間を確保することにしました」(英語原文の日本語訳)

なお、このポジション機能は個々のブロックに対してのみ有効です。全体には適用できません。

ブロック編集に関連したその他の改善点

ブロック編集に関連したその他の改善点には、他にも以下のようなものがあります。

  • 空の段落ブロックに画像をドラッグ&ドロップして、画像ブロックに変換できるようになった。
  • タイポグラフィの設定がパネルにグループ化された。スタイルインターフェースと設定インターフェースの統一感が増し、ブロック設定インターフェースと同様に設定の表示・非表示が行えるようになったことで、使いやすさが向上している。

    WordPress 6.1とWordPress 6.2のタイポグラフィ設定の比較
    WordPress 6.1とWordPress 6.2のタイポグラフィ設定の比較

  • グローバルスタイルのインターフェースで、見出しブロックの文字間隔を変更できるように。
  • カレンダーブロックの背景、リンク、テキストの色が選択可能になった。
  • ウェブページの構造を反映させるため、2つの新たなバナーフッターブロックパターンカテゴリーが導入された。
  • [[ショートカットで、ブロックのリンクのオートコンプリートが可能に(以前は__experimentalSlashInserterを使ってリンクのオートコンプリートを明示的に宣言しなければならなかった)。
  • キーボードショートカットcontrol +option +16で、段落を見出しに変換することができるように。
  • 固定ページリストブロックで、フォントファミリー、フォントサイズ、外観、行の高さ、文字間隔、文字装飾、大文字小文字など、すべてのタイポグラフィ設定が可能に。

    固定ページリストブロックのタイポグラフィ設定
    固定ページリストブロックのタイポグラフィ設定

デザイン機能の強化

WordPress 6.2の新機能や変更点のほとんどは、CMSのスタイリングとデザイン機能を改善するものです。このセクションでは、デザイン機能に関連した変更点をご紹介します。

スタイルブック

テンプレート/テンプレートパーツにブロックを追加することなく、サイトで使用するあらゆるブロックをプレビューできる機能が導入されています。このスタイルブックは、グローバルスタイル内の「スタイル」ヘッダーに表示される右側の目のアイコン(以下参照)をクリックして起動することができます。

すると、コアとサードパーティのブロックがカテゴリ別にプレビュー表示されるインターフェースが開きます。

スタイルブックインターフェース
スタイルブックインターフェース

すべてのブロックスタイルのプレビューが一元的に表示されることで、デザイン編集作業が捗ります。

技術的には、@wordpress/edit-siteに新たに追加されたStyleBookコンポーネントによって生成され、登録されたすべてのブロックのプレビューをiframeで表示しています(PR #45960参照)。

また、同じインターフェースで、個々のブロックのプレビューも表示されます。以下は、カスタマイズしたカレンダーウィジェットのプレビュー例です。

カレンダーブロックのカスタマイズとプレビュー
カレンダーブロックのカスタマイズとプレビュー

開発者向けに、ブロックの挿入とプレビューを非表示にする方法は2通りあります。1つは、block.jsonsupports.inserterfalseに設定する方法。

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

もう1つは、exampleプロパティを避ける方法です。このプロパティは、サイドバーのヘルプパネルでブロックのプレビューを作成するのに使用します(詳しくはこちら)。

グローバルスタイルの影

グローバルスタイルやtheme.jsonを使って、一部のブロックに影をつけることができるようになりました(本記事執筆時点では、ボタンブロックのみ)。

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

手順としては、Twenty Twenty-Threeテーマを有効化して「スタイル」>「ブロック」>「ボタン」に移動し、「」をクリックします。

「影」のポップアップで、テーマのプリセットから任意の影を選択します。

ブロックスタイルに影を設定
ブロックスタイルに影を設定

テーマ開発者や上級者であれば、theme.jsonを使ってブロックに影を追加することも。以下は、ボタンブロックに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)"
        }
    }
}

寸法の「最小の高さ」設定

グループブロックと投稿コンテンツブロックの設定サイドバーの「寸法」パネルで最小の高さを設定できるようになりました。appearanceTools機能を有効にしているテーマでは、デフォルトで設定可能になります。

グループブロックの最小の高さ設定
グループブロックの最小の高さ設定

グループと投稿コンテンツブロックで最小の高さを設定すると、コンテンツが少ない場合でも、ページ下部にフッターをレンダリングすることができます。

また、垂直方向の配置機能と組み合わせれば、ページの上部/中央部/下部にある内側の要素を垂直に配置することも。

開発者は、theme.jsonminHeightの設定を追加して、テーマに最小の高さを指定することができます。

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

appearanceToolsプロパティを使用してもOKです。

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

追加したminHeightプロパティは、theme.jsonで特定の値を設定可能です。

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

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

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

テーマカスタマイザーと比較して、サイトエディターには、独自のCSSスタイルを追加する機能が欠けていました。WordPress 6.2ではこれに対処し、グローバルスタイルのインターフェースに、テーマを更新しても上書きされないカスタムCSSルールを追加できるテキストフィールドが導入されています。

ブロックスタイルパネルにカスタムCSSを追加
ブロックスタイルパネルにカスタムCSSを追加

カスタムスタイルの追加は、ブロック単位ブロックスタイルパネルから行うか、スタイルツールバーの「More Style(その他のスタイル)」ボタンをクリックします。すると、ポップアップメニューに「追加CSS」が表示されます。

追加CSS
追加CSS

また、カスタムCSSに対応するため、theme.jsonに新しいプロパティstyles.cssも追加されています。

カスタムCSSルールは、theme.jsonで設定されたカスタムスタイルを完全に上書きしてしまう可能性があり、これを回避するには、従来のエンキュー方式でスタイルシートを含めることを検討してください。

また、theme.jsonstyles.blocks.block.cssプロパティを使用して、ブロック単位のカスタムCSSを追加することも可能です。

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

入れ子になった要素や擬似セレクタには、&を使用します。

カスタムCSSの新機能については、『グローバルスタイルとブロック単位のカスタムCSS』もご覧ください。

ブロック間でのスタイルのコピー&ペースト

ブロックのツールバーのメニューに「スタイルのコピー」と「スタイルの貼り付け」が追加されています。この機能が導入される以前は、スタイルはコピーできたものの、スタイルを貼り付ける方法は確立されていませんでした。

スタイルのコピー
スタイルのコピー

この機能を使用するには、見出しなどのブロックを追加してスタイルを変更し、ブロックのオプションメニューから「スタイルのコピー」を選択します。

Chromeでクリップボードにコピーされたテキストや画像を表示できるように設定
Chromeでクリップボードにコピーしたテキストや画像を表示できるように設定

それから別のブロックを選択して、「スタイルの貼り付け」をクリックします。コピーしたスタイルが、2つ目のブロックに自動的に適用されます。

スタイルの貼り付け
スタイルの貼り付け

なお、この機能は対応ブラウザのセキュアサイト(HTTPS)のみで利用できます。詳細については、プルリクエストを参照してください。

ブロックの変更を全体に適用

個々のブロックの「高度な設定」パネルの下に、「全体に適用」ボタンが導入され、ブロックスタイルの変更をグローバルスタイルに反映して、サイト全体に変更を適用できるようになりました。

ブロックスタイルを全体に適用
ブロックスタイルを全体に適用

これによって、ボタンをクリックするのと同じくらいに、ブロックのタイポグラフィ、余白、寸法、カラースタイルをすべてのブロックに適用することが容易になりました(プルリクエスト参照)。

視覚的な余白の確認

ブロックに適用されている余白(margin、padding)を視覚的にプレビューすることができる、Spacing Visualizersの機能が強化されています。

まず、「余白の設定」にカーソルを合わせると、すぐに余白が青色で表示されるようになりました(以下スクリーンショット参照)。

また、「余白の設定」にカーソルを合わせると、自動的にブロックツールバーも非表示になり、余計な要素のないすっきりした画面で余白をプレビューできます。

ブロックツールバーを非表示にして余白をプレビューできる
ブロックツールバーを非表示にして余白をプレビューできる

これは、小さいながらも重要な変更で、多くのコアブロックでの編集作業が効率化されます。

開発者向けの変更点

WordPress 6.2では、新しいAPI、バグ修正、パフォーマンスの改善など、開発者向けの変更点も多数あります。最後に、特に注目の機能を見ていきましょう。

HTML API

HTML5仕様に準拠したパーサであるHTMLタグプロセッサーが導入され、PHPを介して特定のHTMLタグを検索し、属性を安全に追加、削除、更新することができるようになりました。HTML Tag Processorは、HTML処理APIの最初のコンポーネントになります。

このAPIによって、これまで正規表現が必要だった複雑な作業が簡単になります。

以下の例では、imgタグにalt属性を追加します。

$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();

その後、更新後のタグをechoで出力、またはreturnで返す($p->get_updated_html()を使用)ことができます。

HTML APIの詳細については、WordPressコアメンバーのAdam Zieliński氏による対話型PHPに関する解説を参照してください。

パターンAPIとtemplate_typesプロパティ

WordPress開発者は、パターンAPIを使用して「投稿、固定ページ、カスタム投稿タイプ、テンプレートに簡単に挿入可能なデザイン済みのコンテンツブロックを作成」することができます。

WordPress 6.2では、パターンAPIにtemplate_typesプロパティが追加され、特定のブロックパターンがどのテンプレートで使用できるかを指定できるようになっています。

Jorge Costa氏は、これはあくまでバックエンドでの更新であり、現時点では対応するUXの機能はないことを強調していますが、6.3では、この機能の進化版としての実装を期待できそうです。

WordPress 6.3での第一の使用方法としては、テンプレートを作成する際に、テンプレート上で理に適ったパターンをいくつか表示すること。これによって、「空白の状態」やフォールバックテンプレートの代わりに、パターンを使ってテンプレートを作成することができます。(英語原文の日本語訳)

技術的には、register_block_pattern()関数が修正され、template_typesパラメータが追加されています。これは具体的には、ブロックパターンが対象とするテンプレート名を含む文字列の配列です。

また、REST APIは、ブロックパターンが少なくとも1つ定義されていれば、そのテンプレートタイプを返すように改善されています。

React 18の並行処理機能

WordPress 6.2には、Reactの最新バージョン18が搭載されています。React 18には、新たなAPI、機能、改善、バグ修正が含まれており、特に注目に値するのが「同時にUIの複数のバージョンを準備しておけるようにする、新たな裏方のメカニズム」である、並行処理機能です。

この機能の大きな特徴は、処理が中断可能であることです。

レンダーが中断したとしても、React は UI の見た目に一貫性があることを保証します。これを実現するために、React はツリー全体の評価が終わるまで DOM の書き換えをせずに待機します。これにより、React はメインスレッドをブロックせずにバックグラウンドで次の画面を用意しておけるようになります。つまり、大きなレンダー作業の最中でもユーザの入力に UI が即座に反応できるということであり、ユーザ体験がスムースになります。(公式サイトより引用)

主なメリットは、UIがユーザー入力に即座に反応し、バックグラウンドで実行中のジョブと連動する点です。

ところが、この並行処理機能は、注意すべき潜在的な落とし穴も。WordPress 6.2におけるReactの並行処理機能の詳細については、こちらのページで提示されている例を参照してください。

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

他にも、以下のような変更点があります。

他にも、今回の記事ではご紹介しきれなかった機能、改善点、バグ修正がまだまだあります。包括的な概要についてはこちらをご覧ください。

まとめ

WordPress 6.2では、Gutenbergのロードマップにおいて「カスタマイズ」と呼ばれるフェーズ2終了の段階に到達しています。しかし、Matias Ventura氏が指摘しているように、カスタマイズに関する作業が終了したという意味ではありません。これまで通り、コミュニティからのフィードバックに応じて、さらにエディターが改善されていくはずです。

この記事では、WordPress 6.2注目の新機能、改善点、バグ修正に迫りましたが、これがすべてではありません。14.2から15.1まで、全10バージョンのGutenbergプラグインがコアに組み込まれ、サイトエディターのリニューアル、サイドバーの追加タブ、ウィジェットからブロックテーマへの移行、新たなAPI、そして数々の機能拡張とバグ修正が見られます。さらに、アクセシビリティ対応国際化も改善される予定です。

WordPressユーザーで、新たなWordPress開発スキルを身につけたい、またはCMSをテストして開発に貢献したいという方は、Kinstaの完全無料ローカルWordPressサイト開発ツール「DevKinsta」をぜひお試しください。

ローカル開発環境での最新バージョンのテストはお済みですか?以下のコメント欄で、WordPress 6.2の特に気に入った機能についてぜひお聞かせください。

Carlo Daniele Kinsta

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