WordPress 6.1 の新機能: JPEG から WebP への変換、Fluid Typography、改良されたテンプレート システム、その他多数!

WordPress 6.1 は 2022 年 11 月 1 日にリリースが予定されており、5 月 24 日にリリースされた WordPress 6.0 Arturo、1 月 25 日にリリースされた WordPress 5.9 Josephine に続く、今年で 3 回目のメジャーリリースとなります。

いつものように、WordPress の新しいリリースでは、Gutenberg プラグインの最新バージョンから新しい機能、改善、バグ修正がコアにもたらされます。 WordPress 6.1 も例外ではなく、13.1 から 14.1 までの 11 バージョンの Gutenberg プラグインがコアにマージされます。

リリース スケジュールの主な日付は次のとおりです。

• Beta 1 & Feature Freeze: 2022 年 9 月 20 日 – この日以降、コア コントリビューターはバグのテストと修正に専念します
• リリース候補 1: 2022 年 10 月 4 日 – フィールド ガイドと開発ノートを公開
• 予行演習: 2022 年 10 月 24 日
• WordPress 6.1 一般リリース: 2022 年 11 月 1 日

この記事を書いている時点では、開発ノートとフィールド ガイドはまだ公開されていませんが、WordPress の次のメジャー リリースで何が期待できるかを理解するために、すでにカーテンの裏側をのぞくことができます.

Matias Ventura は、6.1 へのロードマップでいくつかの洞察を提供しており、6.1 の目標は、5.9 および 6.0 で導入されたエクスペリエンスを改良し、グーテンベルク ロードマップのフェーズ 3 に近づくにつれていくつかの問題を修正することであると述べています。

1. テンプレート エディターの改善: 主な新機能の 1 つはテンプレート エディターです。 WordPress 6.1 では、サイトの構造を閲覧、視覚化、編集する機能を導入する必要があります。

2. テンプレート パターン: 目標は、テンプレートとページの作成においてブロック パターンに中心的な役割を与え、それらをカスタム投稿タイプとブロック タイプに適応させ、ロック機能を強化し、保存されたパターン管理を改善することです。

3. グローバル スタイルとブロック & デザイン ツール: WordPress 6.1 では、Web フォントの管理、レスポンシブ タイポグラフィの実装、ブロックで使用できるツールセットの拡張が可能になります。

そうは言っても、WordPress 6.1 で提供される最も強力な機能のいくつかを詳しく見てみましょう。

WebP 形式への自動画像変換

WordPress 5.8 で初めて導入された WebP は、Web 上の画像に優れた可逆圧縮と非可逆圧縮を提供する最新の画像形式です。

ただし、メディア ライブラリを使用して WebP 画像を WordPress にアップロードすることはできますが、WordPress は WebP 形式への画像の自動変換をサポートしていません。 Web サイトでその機能を有効にするには、サードパーティの WebP WordPress プラグインを使用します。

現在、WordPress 6.1 から、画像のサブサイズは代替ファイル形式で自動的に作成されます。 さらに、WordPress 6.1 には 3 つの新しいフィルターが導入されており、開発者はフロントエンドで WordPress によって生成および使用されるサブサイズの MIME タイプを制御できます。

また、6.1 では、デフォルトで利用可能な場合、WordPress は WebP サブサイズを生成して使用します。

ユーザーが JPEG 画像をアップロードすると、WordPress は WebP と JPEG サブサイズの両方を自動的に生成できます。 これにより、WordPress はフロントエンドで WebP 画像を提供できるようになります。 JPEG 画像は、WebP がまだサポートされていないコンテキスト (電子メールなど) で使用されます。

これがデフォルトの動作です。 開発者は、デフォルト設定をオーバーライドし、フィルターを使用して使用する画像形式を決定できます。

新しい MIME タイプが生成されると、サイズがそれぞれのオリジナルよりも小さいイメージのみが保持されます。 デフォルトでは、サポートを選択した場合、デフォルトの画像サイズとカスタム サイズに対してのみ、追加の MIME タイプが生成されます。

この変更により、2 番目の MIME タイプの出力を完全に制御できる 3 つの新しいフィルターも導入されます。

• wp_image_sizes_with_additional_mime_type_supportにより、開発者はサイズごとに画像の MIME タイプを制御できます
• wp_upload_image_mime_transformsを使用すると、開発者は特定の入力の画像 MIME タイプを制御し、元の MIME タイプをオーバーライドすることさえできます
• wp_content_image_mimesを使用して、コンテンツ画像の MIME タイプの出力順序を制御できます。 ページに画像を表示するときは、利用可能な最初の MIME タイプが使用されます。

この変更により、平均ファイル サイズが 30% 削減されます。

6.1 の最終リリースの前に、WordPress Performance Group の Performance Lab プラグインを使用して新機能をテストできます。

ただし、この変更には物議を醸しているように見え、多くの貢献者が引き続き問題を報告しています。 具体的には、次のことが指摘されました。

画像をアップロードするときに画像を生成するためのリソースは大幅に増加しますが、画像を提供するためのリソースは減少します。 画像のアップロードは、画像の提供に比べて非常にまれであるため、画像を圧縮して保存するための余分な労力は、それだけの価値があります。

と：

実際、画像をアップロードするときのリソース使用量の劇的な増加は、ここでは非常に悪い副作用です. これは、多くのアップロードが失敗し、ユーザーが立ち往生することを意味します。 また、WordPress とホスティング会社の両方に対するサポート リクエストが劇的に増加します。 これは受け入れられるとは思わないでください。 このため、WordPress で画像のマルチマイムのサポートが必要な場合でも、現在のアプローチは適切なソリューションとは思えません。

そのため、執筆時点では、画像サブサイズでの WebP 形式の使用がデフォルトで有効になるのか、それともサイト管理者がウェブサイトのフロント エンドで WebP 形式を提供することをオプトインする必要があるのか​​はまだ不明です。 . その間、JPEG から WEBP への自動変換は一時的に無効になっています。 進行中の議論の意味のある要約については、WP Tavern に関する Sara Gooding の記事をチェックしてください。

流動的なタイポグラフィ

WordPress 6.1 では、CSS 関数のcalc / clampによる Fluid Typography のサポートが追加されました。

Fluid typography という表現は、ビューポートの幅に適応するテキストの容量を表し、最小幅から最大幅までスムーズにスケーリングします。

これは、メディア クエリで実現できることとは異なります。メディア クエリでは、特定のビューポート サイズに応じてテーマのテキストのサイズを変更できますが、異なる値の間では何もしないからです。

一部のテーマは、すでに流動的なタイポグラフィをサポートしています。 たとえば、Twenty Twenty-Two は、いくつかのフォント サイズに対して CSS のclamp()関数を使用します。 例えば：

 "settings": { ... "custom": { "spacing": { "small": "max(1.25rem, 5vw)", "medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))", "large": "clamp(4rem, 10vw, 8rem)", "outer": "var(--wp--custom--spacing--small, 1.25rem)" }, "typography": { "font-size": { "huge": "clamp(2.25rem, 4vw, 2.75rem)", "gigantic": "clamp(2.75rem, 6vw, 3.25rem)", "colossal": "clamp(3.25rem, 8vw, 6.25rem)" } } } }

上記のコードでわかるように、流動的なフォント サイズの値はすべてのフォント サイズに使用されます。

現在、WordPress 6.1 から、次のように新しいtypography.fluidプロパティを宣言することで、テーマが自動的に可変フォント サイズを生成できるようになりました。

 "styles": { .... "typography": { "fluid": true, "fontSizes": [ { "size": "2rem", "fluid": { "min": "2rem", "max": "2.5rem" }, "slug": "medium", "name": "Medium" } ] }

typography.fluidとtypography.fontSizes[].fluidを使用すると、すべてのフォント サイズの値が次の式を使用して自動的に計算されます。

 --wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});

例えば：

 --wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});

この記事の執筆時点では、Fluid Typography は実験的な機能であることに注意してください。 技術的な詳細については、ブロック サポート: 流動的なタイポグラフィの追加 を参照してください。

流動的なタイポグラフィは、最新の #WordPress Web サイトを構築するための大幅な改善です。 この機能を含めるために @frostwp を更新しました。 @richard_tabor から、それが何であり、なぜそれが重要なのかについての素晴らしい読み物があります。 https://t.co/Bq5YuHX3wi

— ブライアン・ガードナー (@bgardner) 2022 年 8 月 8 日

How to add Fluid Typography to WordPress Block Themes by Rich Tabor および Fluid typography with Gutenberg by Carolina Nymark も参照してください。

新しく改善されたブロック タイプ

非常に多くの Gutenberg のバージョンがコアに統合されたため、WordPress 6.1 ではまったく新しい目次ブロックが導入され、既存のブロック タイプに多数の変更と改善が加えられます。

新しい目次ブロック

Gutenberg 13.3 で初めて導入された、新しいTable Of Contentsブロックが実験的なブロックとして利用できるようになりました。 投稿またはページに追加されると、目次ブロックは、コンテンツに追加された見出しブロックを検出し、順序付けられたリストにアンカー リンクとして表示します。

列ブロックのボーダーサポートを追加

列ブロックは、WordPress ユーザーが列のカスタマイズされた境界線を指定できるようにする新しい BorderBoxControl コンポーネントを利用するようになりました。また、各境界線に完全に異なるスタイルを設定することもできます (列: 列ブロックに境界線サポートを追加するプル リクエストも参照してください)。

個々の境界線は、次のようにtheme.jsonファイルで設定することもできます。

 "core/column": { "border": { "top": { "color": "#CA2315", "style": "dashed", "width": "6px" }, "right": { "color": "#FCB900", "style": "solid", "width": "6px" } } }

開発者は、コンポーネント リファレンス – BorderBoxControl で新しいコントロールの詳細を読むことができます。

画像ブロックの枠線コントロール

Gutenberg 13.8 では、Image ブロックのすべての境界線コントロールのサポートが導入されました。 この変更は WordPress 6.1 でコアに追加され、Web クリエイティブに新しい素晴らしい機会への扉が開かれます。

コメントブロックの改善

WordPress 6.1 では、改善されたコメント ブロックも提供されます。 WordPress の次のバージョンから、ユーザーはコメント ブロックでより高度な編集機能を使用できるようになります。

下の画像では、コメント ブロック設定サイドバーと、コメント タイトルに適用された変更を確認できます。

カスタムタクソノミー用語の投稿用語ブロックバリエーション

Post Termsブロックは、新しいカスタム分類のバリエーションで強化されました。 「映画の俳優」投稿タイプなどの新しいカスタム分類を登録できるようになり、現在の投稿またはカスタム投稿タイプに分類用語のリストを追加できるようになります。

下の画像は、映画投稿タイプの俳優のリストを示しています。

クエリ ブロックの新しい親フィルター

クエリ ブロックで新しい親フィルターを使用して、同じ親を持つ階層的な投稿とページを表示できるようになりました。

見出しブロックのフォント ファミリー コントロール

見出しブロックは、フォント ファミリー コントロールをサポートするようになりました。

ギャラリー ブロックの水平および垂直方向の間隔

WordPress 6.1 以降では、新しい軸間隔コントロールにより、ギャラリーブロック内の画像に異なる水平および垂直ギャップを設定できます。

この変更により、画像ギャラリーのレイアウトを作成する際の柔軟性が向上します。

カバー ブロックの注目の画像

アイキャッチ画像は依然として多くの注目を集めており、WordPress 6.1 ではその使用範囲がさらに拡大されています。 6.1 以降では、次の画像に示すように、主要な画像をカバー ブロックのプレースホルダーから直接選択できます。

この変更により、より一貫したユーザー エクスペリエンスが作成され、ユーザーが何をカスタマイズしているかが明確になります。

また、アイキャッチ画像トグルがメディア置換フローに追加されました。

投稿ナビゲーション リンクの外観ツール

appearanceTools設定プロパティを使用すると、デフォルトで無効になっているいくつかの設定をオプトインできます。

WordPress 6.1 以降、 appearanceTools設定プロパティをサポートするテーマでは、投稿ナビゲーション リンクでリンクの色とフォント ファミリをカスタマイズできます。

appearanceToolsプロパティの詳細については、Twenty Twenty-Two テーマの概要を参照してください。

ワンクリックでコンテナブロック内をロック

新しいトグルにより、ユーザーはシングル クリックでブロックのコンテナー内のブロックをロックできるようになりました。 これは、 Group 、 Cover 、およびColumnブロックに適用されます。

ブロック エディターの追加機能と改善点

統合バージョンではありますが、WordPress 6.1 では非常に多くの変更と改善が行われるため、1 つの記事ですべてをリストすることはできません。 新しい目次ブロックと上記の変更に加えて、以下が表示されます。

Block Inserter のテンプレート パーツ バリエーション

テンプレート パーツのバリエーションがブロック インサーターで利用できるようになり、テンプレート パーツを Web サイトに簡単に追加できるようになりました。

この変更により、編集プロセスがより簡単かつ迅速になり、ユーザーは数回クリックするだけでテンプレート パーツのバリエーションを一度にすばやく表示できます。

マージンとパディングを視覚化する

小さいながらも有用な改善点は、ユーザーがマージンとパディングを調整しているときに強調表示されることです。 これにより、要素の内側または外側にどれだけのスペースが追加されているかがより明確になります。

設定サイドバーの改善

WordPress 6.1 では、設定サイドバーのインターフェイスもいくつか改善されています。

投稿設定サイドバーが若干再設計されました。 投稿フォーマット、スラッグ、テンプレート、および作成者のフィールドが整列され、同じ幅になりました。 さらに、ポスト スケジューラが簡素化され、エクスペリエンスがよりわかりやすくなりました。 テンプレート セクションもポップオーバーに移動して、スペースを節約し、インターフェイスをクリーンアップしました。

さらに、テンプレート パネルはテンプレート リンクに置き換えられました。 テンプレート リンクをクリックすると、デフォルト テンプレートがポップオーバーに表示されます。

ポップオーバー デザインの更新を公開する

公開ポップオーバーの日時ピッカーが再設計され、「既存の WordPress コンポーネントと Emotion スタイル」を使用するようになりました。

Publish ポップオーバー ( DateTimePicker ) のデザインの更新で、より多くの技術的な洞察を利用できます。

情報パネルで読む時間

上部のツールバーで使用できる情報パネルが改善され、単語、文字、見出し、段落、およびブロックに加えて、読む時間が表示されるようになりました。

推定読書時間は、1 分あたり平均 189 ワードで計算されます。 @wordpress/editor で詳細を読む: エディターの目次に読むための推定時間を追加します。

新しく改善された構築ツール

WordPress 6.1 では、Site Builder の機能も拡張されます。 ブロック パターンを利用できる場所が増え、テンプレート タイプの選択肢が広がることで、テンプレート エディターでの編集エクスペリエンスが向上します。

投稿タイプの作成パターン

WordPress 6.0 では、ページ作成パターンが導入されました。これは、ユーザーが新しいページを作成するたびにパターンの選択を提供する方法です。 この方法では、ページを最初から作成する必要はありませんが、モーダルからパターンを選択してコンテンツを入力するだけで、すぐに使用できます。

この機能を有効にするには、少なくとも 1 つのブロック パターンで、 core/post-contentブロック タイプのサポートを宣言する必要があります。

現在、WordPress 6.1 以降、この機能はすべての投稿タイプに拡張されています。 パターンのblockTypesにcore/post-contentを含め、関連するpostTypesを設定するだけです。

それでは、実際の例を使用して、この新機能を活用する方法を見てみましょう。 映画の投稿タイプがあるとします。

最初に、ここで説明したようにブロック パターンを登録する必要があります。

または、簡単な方法で暗黙的なパターン登録を使用することもできます (この例では簡単にするために、暗黙的なパターン登録を使用します)。

テーマのフォルダーの/patternsディレクトリに、ブロック パターンの PHP ファイルを作成します (この例では、Twenty Twenty-Two を使用しました)。 次に、次の見出しを追加します。

 <?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->

以上です。 これで、新しい動画投稿タイプを作成するたびに、パターンの選択モーダルが画面に表示されます。

モーダルを複数の投稿タイプに表示したい場合は、対応するスラッグをコンマで区切って追加するだけです:

 <?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie, book * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->

作成パターンの詳細については、ページ以外の投稿タイプに作成パターンを使用する機能を参照してください。

サイト エディターのテンプレート タイプの追加

WordPress 6.0 では、サイト エディターで作成できるテンプレートの数は限られています。

WordPress 6.1 から、個々の投稿タイプごとに異なるテンプレートを作成できるようになります。

また、単一のカテゴリやタグであっても、コアおよびカスタム分類のテンプレートを追加および編集できます。

カスタム投稿タイプまたはカスタム分類法を登録すると、サイト エディターのテンプレート選択ボックスに自動的にリストされます。

しかし、それだけではありません。 テンプレート投稿タイプを選択すると、モーダルは、そのタイプのすべての投稿に対してテンプレートを作成するか、選択した投稿タイプの特定の投稿に対して新しいテンプレートを作成するかをユーザーに促します。

次に、新しいモーダルが、その投稿タイプで利用可能な投稿のリストを提供します。

開発者向けの変更

WordPress 6.1 では、開発者向けに新しい API といくつかの改善点も追加されています。

新しい環境設定の永続化 API

WordPress 6.1 では、エディターの設定をローカル ストレージではなく WordPress データベースに保存する新しい設定永続化 API が導入されました。

このようにして、ユーザー設定をすべてのブラウザーとデバイスに保存できます。

この目的のために、 @wordpress/dataパッケージの以前の永続化システムは廃止され、新しいpreferences-persistence化パッケージが導入されました。 新しいパッケージは、Rest API を介してユーザー メタにデータを保存します。 ユーザーがオフラインになった場合やリクエストが中断された場合のフォールバックとして、データはローカル ストレージにも保存されます (プル #39795 も参照)。

theme.json でのボタン スタイルのサポート

WordPress 6.1 では、 theme.jsonを使用してボタンのスタイルをテーマに追加できます。 これにより、テーマ開発者はブロック全体でボタンに一貫性を追加できます。 一例は検索ブロックですが、サードパーティのブロックもこの変更の恩恵を受けます。

これを可能にするために、新しいwp-element-buttonクラスがボタン要素に追加され、同じスタイルを共有します。

この変更をテストするには、開発環境でtheme.jsonに次のコードを追加します。

 { "styles": { "elements": { "button": { "color": { "background": "blue" } } } } }

検索ブロックのバリエーションでクエリ変数がサポートされるようになりました

WordPress 6.1 は、クエリ変数に基づく検索ブロックのバリエーションをサポートします。 これは、あらゆる種類のコンテンツを詳細に検索するために使用する検索ボックスをユーザーに提供できることを意味します。

次の例では、 movies投稿タイプのブロック バリエーションを登録しています。 この例は、ブロックのバリエーションに関する Carolina Nymar のチュートリアルに基づいています。

(子) テーマの関数ファイルに、次のコードを追加します。

 function movies_editor_assets() { wp_enqueue_script( 'movies-block-variations', get_template_directory_uri() . '/assets/block-variations.js', array( 'wp-blocks' ) ); } add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );

ここで、(子) テーマのassetsフォルダーに次のblock-variations.jsファイルを作成します。

 wp.blocks.registerBlockVariation( 'core/search', { name: 'movie-search', title: 'Movie Search Block', attributes: { query: { post_type: 'movies' } } } );

WordPress ダッシュボードをリロードし、ブロック インサーターで Movie Search Block のバリエーションを検索します。

ブロックのバリエーションの詳細については、公式ドキュメントを参照してください。

グローバル スタイルの新しいボタン要素

WordPress 5.9 はグローバル スタイル インターフェイスを導入し、ユーザーがウェブサイトのスタイル プリセットをグローバルまたはブロック レベルでカスタマイズできるようにしました。

最初の実装では、背景、テキスト、およびリンクの色をカスタマイズできました。 WordPress 6.1 から、新しいボタン要素が [色] パネルに追加され、ユーザーが Web サイト全体でボタンの外観を制御できるようになりました。

これは、ボタン ブロックから検索ブロック、ボタンを使用するサードパーティ ブロックまで、サイト全体のすべてのボタン スタイルに影響します。

概要

WordPress 6.1 には確かに多くの新機能が追加されていますが、2022 年の最新リリースの最終的な評価を行うのはまだ時期尚早です。さらに、この記事の執筆時点ではまだ機能凍結に達していないため、 11 月 1 日に予定されている最終リリースの前に、追加の機能や変更について話し合う必要があります。

コアにマージされた 11 バージョンの Gutenberg のおかげで、新しい機能が表示されることはすでにかなり確信で​​きますが、JPEG から WebP への変換がどのように実装されるかはまだわかりません。 .

ただし、注目に値する変更があり、新機能がコアにマージされているため、この記事を更新するので、引き続きフォローしてください.

今はあなた次第です。 WordPress の次のバージョンに何を期待しますか? 開発環境で Nightly Build を既にテストしましたか? 以下のコメントセクションで、WordPress 6.1 に関するご意見をお聞かせください。