WordPress 5.9の新機能—フルサイト編集、グローバルスタイル、ブロック、パターン、API、UI拡張機能など

WordPress 5.9 Josephineが登場！ 今年の最初のWordPressバージョンは、当初2021年12月14日にリリースされる予定でした。いくつかの未解決の問題と未解決のバグのため、最終リリースは延期され、最終的に2022年1月25日にリリースされました。

WordPress 5.9の新機能について疑問がある場合、簡単な答えはフルサイト編集（FSE）です。

実際、多くの5.9機能は、新しいデフォルトのテーマであるTwenty Twenty-Twoなど、フルサイト編集をサポートするテーマを使用している場合にのみ使用できます。

WordPress 5.9では、グーテンベルクロードマップの第2フェーズであるカスタマイズフェーズの中心に到達します。カスタマイズフェーズは、主にフルサイト編集、ブロックパターン、ブロックディレクトリ、およびブロックベースのテーマに焦点を当てています。

来月発売される5.9で、私たちは、グーテンベルクのこのカスタマイズフェーズの最小実行可能製品であるMVPにいます。

2021 State of theWordのMattMullenwegによるこれらの言葉は、新しいWordPressリリースの主要な機能を最もよく要約しています。

そうは言っても、2022年の最初のWordPressリリースの新機能は何ですか？

確認してみましょう！

グローバルスタイル： theme.jsonのグラフィックインターフェイス

2021年のWordPress5.8のリリースにより、theme.jsonファイルの操作は、テーマ開発者がエディターの設定とスタイルをカスタマイズするための標準的な方法になりました。

WordPress 5.9は、ユーザーが1行のコードを記述せずに、グローバルまたはブロックレベルで、Webサイトのスタイルプリセットをカスタマイズできるグラフィックインターフェイスを導入することで、物事を次のレベルに引き上げます。

グローバルスタイルはWordPressサイトデザインのいくつかの側面に影響を与えるため、グローバルスタイルメカニズムは、Webサイトの外観をカスタマイズするために使用する方法を大幅に変更する必要があります。

まず、グローバルスタイルインターフェイスがカスタマイザーに置き換わり、ブロックテーマを使用して設定とスタイルをカスタマイズする唯一の方法になりました。 同様に、複雑なテーマオプションの管理ページは不要になります。 これにより、テーマの設定とスタイルを構成する新しい標準的な方法が提供されると同時に、テーマ開発ワークフローが合理化されます。

グローバルスタイルを使用すると、WordPressユーザーは、個々のページや投稿のコンテキストを超えて、グローバルおよびブロックタイプごとの両方でWebサイトの表示をより細かく制御できます。

新しいサイドバーがサイトエディタで利用できるようになりました。その上部には、小さなプレビューパネルと4つのコンポーネントが次の順序で表示されます。

• タイポグラフィ
• 色
• レイアウト
• ブロック

時間の経過とともに新しいコンポーネントが追加されることが予想されます。

新しいインターフェースを詳しく見てみましょう。

ここにあります！ WordPress5.9について知っておくべきことすべてを1つのメガポストにまとめるクリックしてツイート
[CTA]

スタイルプレビュー

グローバルスタイルサイドバーの最初の要素はプレビューパネルです。 このパネルを使用すると、カスタマイズの結果を確認でき、サイトエディタのキャンバスに表示されていない要素に変更を適用する場合に特に便利です。

次の画像は、3つの異なるスタイルの組み合わせを比較したものです。

タイポグラフィ

タイポグラフィパネルは、Webサイトのタイポグラフィを制御する場所です。 もちろん、このパネルで使用できるコントロールは、 theme.jsonの設定によって異なります。

たとえば、Twenty Twenty-One Blocks（TT1 Blocks）テーマは、次のタイポグラフィプロパティを宣言します。

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

次の画像は、グローバルスタイルのサイドバーに表示されるタイポグラフィ設定を示しています。

もう少し深く掘り下げて、TT1ブロックテーマがfontFamiliesをどのように宣言するかを見てみましょう。

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

これらのフォントファミリは、グローバルスタイルプレビューパネルで確認できます。

色

[色]セクションでは、カラーパレットを表示および編集し、いくつかのサイト要素の色をカスタマイズできます。

これらの要素をクリックすると、新しいパネルにアクセスして、コア、テーマ、カスタムパレットの3つのカラーパレットから色を選択できます（詳細については、デフォルトの色、テーマの色、カスタムの色を参照してください）。

このパネルでは、現在の要素の色を設定および変更できます。

レイアウト

ツールの最後のグループは、レイアウトのカスタマイズを目的としています。 グローバルコンテキストでは、これはサイトコンテナに限定されます。

ブロック

グローバルスタイルメカニズムの実装により、段落（タイポグラフィと色）、ボタン（レイアウト）、列（色とレイアウト）などの特定のブロックの外観を変更することもできるようになりました。

ブロックが対応するblock.jsonファイルで特定の機能のサポートを宣言している場合にのみ、ブロックスタイルをグローバルスタイルインターフェイスからカスタマイズできることに注意してください。 たとえば、 core/post-titleブロックは現在、次のスタイルをサポートしています。

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

core/post-titleブロックは色、間隔、タイポグラフィをサポートしているため、ポストタイトルブロックのグローバルスタイル設定に対応するエントリがあります。

次の画像は、上記のコードと簡単に比較できるタイポグラフィ設定を示しています。

WordPress 5.9は、グローバルスタイルインターフェイスの最初の実装のみを提供することに注意してください。 Matias Venturaが指摘しているように、新しいスタイル制御機能のさらなる開発が合理的に期待できます。

将来的には、システムにフローが組み込まれ、ローカルスタイルからグローバルスタイルに移行できるようになります。たとえば、ボタンブロックをカスタマイズして、そのタイプのすべてのボタンにグローバルに変更を適用することを選択できます。

そのため、まもなく大幅な改善が見られる可能性があります。 以下の画像は、私たちが期待するもののほんの一例です。

追加の改善には、テーマが代替のカラーパレットと複数のグローバルスタイルのバリエーションを提供する機能が含まれる可能性があります。

先週、私は少数の22のカラー+フォントのバリエーションを非常にシンプルな子テーマに組み込みました。 彼らは本当に軽量で、ワンクリックで劇的に異なるサイトを人々に提供するというアイデアが大好きです。https：//t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr（@kjellr）2021年11月15日

開発者は、Global Settings＆Styles（theme.json）サポート記事でグローバルスタイリングメカニズムをさらに深く掘り下げることができます。 TwentyTwenty-Twoのデフォルトテーマの紹介に追加の例があります。

ナビゲーションブロック

ナビゲーションブロックは「最も影響力のあるテーマブロックの1つ」と呼ばれ、同意すると言っても過言ではありません。

ブロックはしばらくの間初期段階にあります（ナビゲーションブロックの追跡の問題と追跡の問題i2も参照してください）。 それでも、WordPress 5.9の必須アイテムとしてリストされているすべての保留中の問題とブロッカーが修正されたので、WordPress5.9でコアに統合された最も強力な機能の1つをようやく使い始めることができます。
[CTA]

ナビゲーションブロックインターフェイスの概要

新しいブロックを使用することは、最初は少し混乱するかもしれませんが、一度コツをつかむと、その可能性を最大限に活用できるようになります。

ナビゲーションブロックを最初に追加するとき、ブロックプレースホルダーには、既存のブロックベースのメニューを選択する、すべてのページでメニューを作成する、または空のメニューで最初からやり直すための3つのオプションがあります。

新しいナビゲーションメニューでは、クラシックテーマで使用できる[外観メニュー]画面から作成されたメニューをインポートすることもできます。

つまり、クラシックテーマからブロックテーマに移行する場合、既存のメニューを再構築する必要はありません。 現在利用可能な「クラシックメニュー」の1つを選択するだけで、ブロックベースのナビゲーションメニューに自動的に変換されます。

ナビゲーションブロックは、ページのどこにでも追加できます。 たとえば、長い記事で目次を作成して、ユーザーが特定のコンテンツセクションにジャンプできるようにすると便利な場合があります。

他のタイプのブロックがすでにメニューに追加されていない限り、右側のプラス（ + ）アイコンをクリックすると、新しいナビゲーションリンクがナビゲーションブロックに即座に追加されます（Gutenberg 11.7リリースノートも参照）。

ナビゲーションリンクブロックツールバーの[編集]ボタンをクリックすると、メニュー項目がカスタムリンクに変換されます。 これにより、アイテムを個別に追加、編集、並べ替え、および削除できます。

ブロックツールバーの[変換]ボタンをクリックして、リンクをブロックに変換することもできます。 これにより、特定のブロックをナビゲーションメニューに直接追加できます。

カスタムリンク、スペーサー、サイトロゴ、ホームリンク、ソーシャルアイコン、および検索ブロックは、ナビゲーションメニューにブロックを追加するときにユーザーに公開されるようになりました。

設定サイドバーには、ナビゲーションメニューのいくつかの側面を制御するための包括的なオプションセットがあります。

レイアウトパネルには、位置合わせ、向き、および折り返しのコントロールが含まれています。

ナビゲーションブロックは、常時オンのハンバーガーメニューのオプションを備えた改善された表示設定パネルも備えています。

メニューとサブメニューのテキストと背景色をカスタマイズすることもできます。

ナビゲーションブロックに最近追加されたもう1つの便利な追加機能は、ブロックギャップのサポートです。これにより、ユーザーがメニュー項目間の距離を制御できるようになります。

タイポグラフィパネルは、フォントファミリ、外観、行の高さ、装飾、および大文字と小文字の一連のコントロールを提供します。 これらのコントロールはすべて、右側の省略記号アイコンをクリックしたときに表示されるドロップダウンメニューからオン/オフを切り替えることができます。

ナビゲーションブロック：フードの下

ナビゲーションブロックデータは、 wp_navigation専用の投稿タイプを使用してデータベースに保存されます。

これがWordPressユーザーにとって興味深いのはなぜですか、そしてそれはどのように機能しますか？

2つのカスタムリンクと検索ボックスで構成されるナビゲーションメニューを作成したとします。 Twenty Twenty-Twoテーマをインストールすると、メニューは次の画像のようになります。

上記のNavigationブロックは、次のようにwp_navigationとしてデータベースに保存されます。

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

ナビゲーションブロックのコンテンツをデータベースに保存すると、ユーザーは異なるブロックテーマで同じナビゲーションメニューを使用できます。 メニューがすぐに表示されない場合は、メニューセレクターで目的のナビゲーションメニューを選択するだけです（問題＃36087およびPR＃36178も参照）。

次の画像は、21ブロックをテーマにした上記のメニューを示しています。

Navigationブロックは数回繰り返されました。 Gutenberg 11.7、11.8、および11.9リリースノートで、各実装をさらに深く掘り下げることができます。

ナビゲーションブロックの詳細については、新しいナビゲーションブロックの開発ノートとナビゲーションブロックのサポート記事を参照してください。
[CTA]

画像ギャラリー、注目の画像、サイトアイコン

WordPress 5.9は、さまざまなコンテキストで画像がより一貫して動作するようにすることを目的として、いくつかのブロックに新しい機能と改善を提供します。 ギャラリーブロックは完全に改訂されましたが、注目の画像ブロックとサイトアイコンブロックへのさまざまな変更により、ユーザーはそれぞれの画像をよりきめ細かく制御できるようになりました。

リファクタリングされたギャラリーブロック

WordPress 5.8では、ギャラリー内の画像の外観をカスタマイズする機能が多少制限されていました。 画像のスタイルを変更したり、デュオトーンフィルターを適用したりする方法はありませんでした。

さらに、ギャラリー内の個々の画像へのカスタムリンクの追加など、ギャラリー画像には重要な機能がありませんでした。

単一の画像とギャラリー内の画像の2つの異なるコンテキストでの画像間のこの非対称性の理由をよりよく理解するために、WordPress5.8のコードビューのギャラリーブロックを見てみましょう。

画像の詳細はギャラリーブロック区切り文字にのみ保存されることに注意してください（グーテンベルクブロックとは何ですか？も参照してください）。

これにより、個々の画像の動作がギャラリーの画像とは異なります。

画像を2つの異なるコンテキストで一貫して動作させるために、WordPress 5.9では完全にリファクタリングされたGalleryブロックが導入されました。これは、画像の順序付けられていないリストではなく、Figure要素のコレクションのコンテナーのように動作します。

WordPress 5.9では、ギャラリー画像はコアのinnerBlocks APIを使用してネストされ、各画像には、個々の画像とまったく同じように、独自の詳細セットが格納されます。

ギャラリーブロック画像は、画像のサイズやデュオトーンフィルタなどのコア画像ブロックで利用できるのと同じ機能に加えて、ドラッグアンドドロップ、コピー、複製、削除機能などの標準ブロック機能をサポートするようになったため、これは大きな機能強化です。 。

新しいGalleryブロックを使用すると、画像を個別にスタイル設定できます。 これにより、さまざまなカスタマイズの機会が得られます。

下の画像は、ギャラリー内の複数の写真を示しており、それぞれの写真の角が異なります。

同じギャラリー内の異なる画像に異なるデュオトーンフィルターを使用することもできます。

もちろん、各画像に特定のCSSクラスを割り当てることができます。これにより、ギャラリー画像に必要なカスタマイズを追加するための追加の機能が提供されます。

新しいGalleryブロックの詳細については、Gallery Block Refactor Dev Note、今後のGallery Blockの改善、およびGutenberg11.4リリースノートも参照してください。

注目の画像拡張

注目の画像ブロックにもいくつかの改善が加えられました。

基本寸法コントロール

注目の画像ブロックは、高さ、幅、スケールのコントロールを提供する新しい寸法設定パネルを備えています。

次の画像に示すように、ディメンションコントロールはクエリループブロックの注目画像にも適用されます。

注目の画像のデュオトーンフィルター

上記で、新しいリファクタリングされたGalleryブロックでラップされた画像にデュオトーンフィルターを適用できるようになりました。

現在、WordPress 5.9以降、投稿テンプレートやページテンプレートからクエリループブロックまで、あらゆるコンテキストの注目画像ブロックでデュオトーンフィルターを使用できるようになりました。

この機能は、サイト全体で創造的で一貫した色の組み合わせへの扉を開きます。

サイトロゴの画像トリミング

WordPress 5.9（およびGutenberg 11.6）より前は、ロゴ画像はアップロードする前にしか編集できませんでした。 WordPress 5.9では、サイトロゴブロックで使用されている画像をブロックツールバーから直接トリミング、ズーム、回転できます。

新しいデザインツール、ブロック、およびUIの機能強化

11のGutenbergバージョンがWordPress5.9とコアに統合され、1つの記事でそれらすべてをカバーすることは不可能なほど多くの機能、拡張機能、およびバグ修正を提供します。

そこで、最も注目に値するものをいくつか選びました。 これらの機能と改善点の詳細については、Gutenberg 10.8、10.9、11.0、11.1、11.2、11.3、11.4、11.5、11.6、11.7、11.8、および11.9のリリース投稿を確認することもできます。

そうは言っても、このセクションでは次の変更について説明します。

ボーダーはUIをサポートします

WordPress 5.9以降、 theme.jsonがborder設定を宣言し、ブロックがBlock Supports APIを介して境界サポートを宣言すると、新しい設定パネルで境界の半径、幅、スタイル、色、単位を制御できるようになります（Gutenberg 11.1も参照）。 。

コアのGroupブロックは、この便利なUI拡張機能の良い例です。 Groupブロックのblock.jsonファイルには、次のsupports宣言が含まれるようになりました。

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

この機能により、ユーザーは最小限の労力でWebサイトにすばらしいグラフィック効果を作成できます。 新しいTwentyTwenty-Twoテーマで実際に動作しているのを見ることができます。

新しい投稿またはページで、新しいグループブロックを作成して選択します。 ブロック設定サイドバーに[境界線]パネルが表示されます。 必要に応じて境界線の幅とスタイルを変更し、結果を楽しんでください。

テーマ開発者であり、この機能をテーマに追加したい場合は、 theme.jsonファイルを開き、次のコードに示すようにボーダーサポートを宣言します。

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

ファイルを保存して、WordPressダッシュボードに戻ります。 新しい投稿またはページで、新しいグループブロックを作成して選択します。 これで、ブロック設定サイドバーに[境界線]パネルが表示されます（この実験的なtheme.jsonも参照してください）。

リストビューの改善

WordPress 5.9では、リストビューが改善され、ドラッグアンドドロップ、折りたたみ可能なセクション、およびHTMLアンカーが機能するようになりました。

リストビューでドラッグアンドドロップ

プルリクエスト＃33320で説明したように、ドラッグアンドドロップはリストビューに実装されていますが、パフォーマンスの問題のために無効になっています。

WordPress 5.9以降、リストビューでのドラッグアンドドロップが再実装されました。 リストビューの任意の場所にブロックとブロックのグループを再度ドラッグアンドドロップできます。 これにより、ページ内でブロックやブロックのグループをすばやく簡単に移動できるため、エディターの使いやすさが大幅に向上します。 長い形式の記事やページに役立ち、ネストされたブロックの複雑な構造を管理します。

リストビュー折りたたみ可能なセクション

リストビューのもう1つの重要な改善点は、ネストされたブロックのセクションを展開/折りたたむ機能です。 これにより、複雑なブロック構造を簡単にナビゲートし、ブロックの単一グループを拡張しながら、残りをすべて折りたたむことができます。

左矢印と右矢印を使用して、リストビューセクションを展開および折りたたむこともできます。

リストビューアイテムのHTMLアンカー

さらにもう1つの便利な拡張機能は、リストビューのブロックにHTMLアンカーを追加して、それらを一目で確認できることです。

ブロックギャップ間隔制御

Gutenberg 11.4で最初に導入され、現在はWordPress 5.9でコアに統合された、新しいブロック間隔コントロールを使用すると、ブロック内のアイテム間のカスタム距離を設定できます。 以下に、22のデフォルトテーマを持つColumnsブロックのさまざまなブロック間隔値のプレビューを示します。

ギャップ間隔は、最初はボタン、画像、列、タイトル、ナビゲーションなどの特定のブロックで使用できますが、将来的にはさらに多くのブロックにサポートを拡張する必要があります。

テーマは、新しいappearanceToolsプロパティを使用してtheme.jsonでギャップ間隔を有効にする必要があります。 外観ツールの詳細については、TwentyTwenty-Twoの詳細をご覧ください。 プルリクエスト＃33991および＃34630も参照してください。

リンク制御用のリッチURLプレビュー

新しいRESTurl-detailsエンドポイントを利用することにより、リンクコントロールは、リンクターゲットリソースの詳細を表示する豊富なURLプレビューを提供するようになりました。

最初の実装では、この機能はポストエディタのリッチテキストコンポーネントでのみ使用可能でした。 この記事の執筆時点では、サイトエディタでも使用できますが、ナビゲーションエディタとウィジェットエディタでは使用できません。

リンクポップアップからページを作成する

WordPress 5.9は、改善されたインラインリンクUIも備えており、インラインリンクポップアップから直接新しいページを作成するための新しいボタンを表示します。 この機能は、投稿エディタ内でのみ使用できます。

検索ブロックの改善

検索ブロックにボタンと境界線の色の設定が表示されるようになりました。

また、背景とテキストの色、境界線の色と半径をカスタマイズできるようになりました。

ブロック寸法の新しいコントロール

ユーザーがページ上のブロックが占めるスペースを制御するための新しい寸法設定パネルが利用できるようになりました。 パネルには、高さ、幅、パディング、マージン、および場合によっては配置コントロールを含める必要がありますが、すべての属性がすべてのブロックで使用できるわけではありません。

ブロック開発者は、GitHubに文書化されている<DimensionControl />コンポーネントを見つけることができますが、それでも実験的な機能としてマークされており、この記事の執筆時点で重大な変更が加えられる可能性があることに注意してください。

ウィジェット画面に追加された新しいウィジェットグループブロック

新しいウィジェットグループブロックが、ブロックベースのウィジェットエディターで使用できるようになりました。 最新のブロックを使用すると、クラシックテーマのウィジェットエディターとカスタマイザーでタイトル付きのウィジェットにブロックのグループを追加できます。

ウィジェットエディターの詳細については、ブロックベースのウィジェットエディターおよびカスタマイザーのブロックウィジェットを参照してください。

フレックスレイアウトと新しい行ブロック

もともとはGutenberg11.2の実験的な機能として導入されましたが、フレックスレイアウトは、ソーシャルリンクやグループブロックを含むいくつかのブロックに拡張されました。

Social Linksブロックなどの一部のブロックは、フレックスレイアウトをカスタマイズできる一連のツールバーコントロールとサイドバー設定を提供するようになりました。

これと同じ機能は、Gutenberg11.5で導入されたGroupブロックの新しいバリエーションであるNavigationブロックとRowブロックで使用できます。

次の画像は、設定サイドバーにレイアウトコントロールがあるRowブロックを示しています。

以下に、フロントエンドとChromeのインスペクターツールで同じRowブロックを確認できます。

ブロックパターンの機能強化

WordPress 5.5で最初に導入されたブロックパターンにより、WordPressユーザーは、数回クリックするだけで、ネストされたブロックの複雑ですぐに使用できる構造をコンテンツに含めることができます。

現在、WordPress 5.9は、ブロックパターンシステムにいくつかの拡張機能を導入することで、デザインの民主化とユーザーのエンパワーメントに向けて一歩前進しています。

では、WordPress 5.9のブロックパターンの新機能は何ですか？

パターンディレクトリの注目のパターン

ブロックインサーターは、パターンディレクトリから動的に取得された注目のブロックパターンを表示するようになり、ユーザーがコンテンツで使用する人気のあるパターンをすばやく簡単に見つけることができるようになりました。

同様に、パターンがWordPressダッシュボードに直接入ると、WordPress開発者は、時間の経過とともにますます多くのパターンを作成して公開するように促され、ユーザーの設計機能がますます高度になります。

新しいフルスクリーンパターンエクスプローラー

パターンディレクトリで利用可能なブロックパターンの数が増え続け、より多くのテーマがそれらを使用するにつれて、WordPress5.9は新しいブロックパターンナビゲーションインターフェイスであるパターンエクスプローラーを導入します。

新しい[探索]ボタンでフルスクリーンのモーダルが開き、ユーザーは数回クリックするだけでブロックパターンを参照、検索、挿入できます。 その結果、ユーザーエクスペリエンスが向上します。

また、Twenty Twenty-Two WordPressテーマの詳細については、追加のメモといくつかのブロックパターンの例をご覧ください。

興味があり、詳細を知りたい場合は、Josepha Haden Chomphosyのポッドキャストエピソード16および21を聴き、AnneMcCarthyのExploringWordPress5.9YouTubeビデオをご覧ください。

22のテーマとWordPressのブロックテーマ

WordPress 5.9では、WordPressWebサイトでフルサイト編集を有効にするためにGutenbergプラグインをインストールする必要がなくなりました。 ブロックテーマがすべてのFSE機能を利用できるようにする必要があります。

さらに、WordPress5.9には新しいデフォルトのテーマであるTwentyTwenty-Twoがバンドルされており、Twenty Twenty-Twoは史上初のデフォルトのブロックテーマであるため、これはゲームチェンジャーです。

Twenty Twenty-Twoは、柔軟性とカスタマイズ性に優れたテーマです。 WordPress 5.9以降、新しいテンプレート編集フロー、新しいブロック、インターフェイスの機能強化、およびコアに追加されたすべてのサイト編集機能を試すのに最適なサンドボックスを提供します。

上記のように、あなたがする必要があるのは、TwentyTwenty-Twoなどのブロックテーマをインストールしてアクティブ化することだけです。 テーマがアクティブになると、新しいエディター（ベータ）メニュー項目がWordPressダッシュボード管理メニューに表示されます。

サイトエディタのインターフェイスに、改良されたサイト編集フローが追加されました。 編集インターフェースから、サイトのホームページ、テンプレート、テンプレートパーツを視覚的に編集したり、グローバルスタイルインターフェースにアクセスしたりできます。

ブロックテーマをアクティブ化すると、カスタマイザーは見つかりません。 これは、カスタマイザーがサイトエディターのみを使用するブロックテーマをサポートしていないためです。 これが、非アクティブなブロックテーマをプレビューできない理由でもあります。

そのため、WordPress 5.9以降、ブロックテーマがアクティブな場合、カスタマイザーへのアクセスポイントは管理メニューで使用できなくなります（それを使用するプラグインを使用している場合を除く）。

それでも従来のテーマに縛られていて、下位互換性が心配な場合は、安心してください。テーマを引き続き使用できます。

現在、4つの異なるカテゴリのテーマから選択できます。

• ブロックテーマ：FSE用に設計されたテーマ
• ユニバーサルテーマ：カスタマイザーとサイトエディターの両方で機能するテーマ
• ハイブリッドテーマ：theme.jsonなどのFSE機能をサポートするクラシックテーマ
• クラシックテーマ：PHPテンプレート、functions.phpなどのテーマ。

ブロックテーマがWordPressエコシステムに与える可能性のある影響のため、22とWordPressのブロックテーマをカバーする記事全体があります。 より詳細な概要については、必ずチェックしてください。

パフォーマンスの向上

ここキンスタでは、ウェブサイトの速度に夢中になっています。 そのため、WordPress5.9によるパフォーマンスの向上に興奮しています。

これらの改善は、ブロックエディタからブロックテーマ、遅延読み込みなど、CMSのいくつかの領域に影響します。 飛び込みましょう。

ブロックインサーターの機能強化

WordPress 5.9以降、ブロックタイプ、パターン、およびカテゴリは、ブロックインサーターで遅延レンダリングされます。 ブラウザは優先度の高いコンテンツを最初にロードし、ユーザーにスムーズな編集エクスペリエンスとパフォーマンスの向上を提供します。

ブロックエディタのコンテキストでさらに注目すべきパフォーマンスの向上は、再利用可能なブロックとリストビューに影響します。

ロードされたCSSが少ない

フロントエンドに関しては、WordPress 5.9はブロックテーマによってロードされるCSSの量を大幅に削減し、ページのロードを大幅に高速化しました。

このコンテキストで注意する必要がある主な改善点は、 theme.json設定とスタイルメカニズムの導入です。これにより、テーマが数百のCSS宣言を含む大規模なスタイルシートを使用できなくなります。 テーマが使用するCSSコードの量が、すべてのブロックタイプで再利用できるいくつかのCSSカスタムプロパティに削減されました。

遅延読み込みのパフォーマンスの向上

画像の遅延読み込みは、WordPress5.5で最初に導入されました。 WordPress 5.7以降、遅延読み込み機能がiframeに拡張され、サイト所有者はより高速なWebサイトを構築し、SEOを改善できるようになりました。

とにかく、Largest Contentful Paint（LCP）の分析の結果、ページ上のすべての画像とiframeにloading="lazy"属性を割り当てると、パフォーマンスがわずかに低下することがわかりました。

単にloading="lazy"属性をスキップすることは、遅延読み込みの明らかな利点を失うことにつながるため、解決策ではありませんでした。

最適な解決策は、折り目の上に表示される画像のloading="lazy"属性のみを省略することです。 ただし、 loading="lazy"属性はサーバー側で割り当てられているため、WordPressはどの画像が折り目の上に表示されているかを正確に判断できません。 それは主にアクティブなテーマに依存するものです。

現在、トレードオフソリューションとして、WordPress 5.9以降、 loading="lazy"属性は最初のコンテンツ画像またはiframeに適用されていません。 50の人気のあるWordPressテーマで実施された分析では、このソリューションによってパフォーマンスが大幅に向上し、ページの読み込みが最大30％高速化されることがわかりました。

フェリックス・アルンツはそれがどのように機能するかを説明しています：

…開発者が動作をカスタマイズすることなく、すぐに使用できるパフォーマンスを向上させるために、WordPressはページの最初の「コンテンツ画像またはiframe」の遅延読み込みをスキップするようになりました。 ここでの「コンテンツ画像またはiframe」という用語は、現在のメインクエリループ内の投稿のコンテンツ内にある画像またはiframeと、そのような投稿の注目画像を意味します。 これは、「単一」コンテンツと「アーカイブ」コンテンツの両方に適用されます。「単一」コンテキストでは、（唯一の）投稿の最初の画像またはiframeは遅延読み込みされませんが、「アーカイブ」コンテキストでは、クエリの最初の投稿は遅延読み込みされません。

テーマ開発者は、新しいwp_omit_loading_attr_thresholdフィルターを使用して、遅延読み込みからスキップする画像/iframeの数を変更できるようになりました。

ブロックごとに複数のスタイルシート

ブロックとテーマの開発者は、各ブロックに複数のスタイルシートを登録し、必要に応じて他のブロックからスタイルをロードできます。 これにより、ページのコンテンツに応じてスタイルシートをロードできるようになり、テーマがすべてのページに巨大なスタイルシートをロードするのを防ぐことができます。

Ari Stathopoulosによると：

ブロックは、複数のスタイルシートを登録し、必要に応じて他のブロックからスタイルをロードできるようになります。 テーマは、どこにでも強制的にロードされるモノリシックスタイルシートをロードする代わりに、ブロックごとにスタイルを追加できるようになります。 これは、ページとレイアウトのコンテンツに基づいてスタイルシートの読み込みが最適化されるブロックテーマに大きな影響を与えますが、従来のテーマでも使用できます。

開発者向けの追加機能

これまでに説明した多くの機能とUIの機能強化に加えて、WordPress5.9では開発者向けにいくつかの機能も導入されています。

ブロックをロックするための新しい属性

ブロック開発者は、ブロック設定にlock属性を追加することで、ユーザーが個々のブロックを移動または削除できないようにすることができます。

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

この機能を有効にすると、ユーザーはブロックコンテンツを編集できますが、ページ上でブロックを移動したり、エディターキャンバスからブロックを削除したりすることはできません。 次の画像は、ツールバーコントロールの標準セットを備えたカスタムブロックを示しています。

上記のコードに示されているように、 lock属性を定義すると、ブロックムーバーと、ブロックツールバーの[移動]および[削除]コントロールが非表示になります。 以下の画像は、画面上の最終結果を示しています。

特定のブロックをブロックパターンでロックすることもできます。 例については、WordPress5.9のブロックのロックも参照してください。

グローバル設定とスタイルにアクセスするための新しいAPI

WordPress 5.9では、 theme.jsonからデータを読み取るための新しいPHPパブリックAPIが導入されています。

theme.jsonから設定とスタイルを読み取る

theme.jsonで宣言されたsettingsセクションとstylesセクションからデータを読み取るための2つの新しい関数があります。

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $pathは、指定された設定へのパスをリストする配列です
• $contextは、これらのデータのコンテキストを設定する配列です。 開発者は、特定のブロック設定セクションから読み取ることができます—たとえば、 array( 'block_name' => 'core/paragraph' ) 。 oryginキーをbaseに設定すると、ユーザーが保存したカスタムデータを無視できます。

次のサンプルコードは、 contentSize設定値を返します。 Twenty Twenty-Twoでは、 650pxになります。

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

コンテキストを設定することで、特定のブロックのスタイルを取得できます。 次のコードは、 core/buttonブロックの境界半径値を取得する方法を示しています。

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

上記の関数は、デフォルト設定、テーマ設定、およびユーザーデータを考慮しながら、必要なプロパティ値を返します。 カスタム値は、ユーザーがグローバルスタイルインターフェイスでボタンの境界線の半径を構成した場合に提供されます。

ユーザーデータを無視するには、次のコードを使用します。

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

生成されたスタイルシートの取得

WordPress 5.9には、デフォルト、テーマ、カスタムスタイルの結果であるスタイルシートを取得するための新しい関数も導入されています。

 wp_get_global_stylesheet( $types = array() );

$typesは、生成するスタイルのリストです。

新しいAPIの詳細については、新しいAPIを参照して、グローバル設定とスタイルにアクセスしてください。

開発者向けのその他の機能

あなたが知りたいと思うかもしれない開発者のための追加のWordPress5.9の変更は以下を含みます：

• テーマをブロックする、WordPress5.9でテーマを構築する新しい方法
• 設定、スタイル、theme.jsonの更新
• WordPress5.9のテーマに焦点を当てた変更とフィルター
• WordPress5.9の新しい機能クエリ
• WordPress5.9でのその他のコアの変更
• WordPress5.9でのその他のブロックエディタの変更
• 内部ブロック領域をより細かく制御する（ブロック開発者として）

WordPress 5.9の究極のガイド：UIの機能強化からグローバルスタイル（およびその他） までクリックしてツイート

概要

この記事の締めくくりとして、WordPressの市場シェアについて簡単に説明します。 WordPressは現在、コンテンツ管理システムが知られているすべてのWebサイトの65％以上に電力を供給しており、すべてのWebサイトの43％の北に位置しています。

これらの数字は、特にShopifyのように市場シェアが5％未満の最も近い競合他社と比較した場合に印象的です。

また、これは、WPCMSの進化を見逃すことはできないことも意味します。 WordPressの新しいバージョンはそれぞれ、新機能、インターフェースの強化、パフォーマンスの向上をもたらし、WordPress5.9も例外ではありません。 新しい機能をテストするために必要なのは、新しいTwenty Twenty-Twoのデフォルトテーマのようなブロックテーマだけです。これで、準備が整います。

さあ、あなたに！ テーマとFSEをブロックするように切り替える準備はできていますか？ そして、WordPress 5.9でのお気に入りの変更は何ですか？