WordPress 6.0の新機能（最新ブロック、スタイルの切り替え、テンプレート編集、Webfonts APIなど）

WordPress 6.0 Arturoがお目見えしました。それでは、いつものようにWordPressの最新メジャーリリースの新機能を見てみましょう。

これは単なる最新版ではありません。Matias Ventura氏が「Preliminary Roadmap for 6.0」で指摘したように、サイトエディタの導入は大きなマイルストーンではあるものの、全工程の最初のステップに過ぎません。

WordPress 6.0では、ユーザビリティからパフォーマンスに至るまで、CMSのいくつかの領域で以下のような大幅な改善が行われています。

情報アーキテクチャとテンプレート閲覧の操作性の改善
テンプレート作成機能の改善
Webfonts API
サイトエディタの表示モードの改良
グローバルスタイルの変更
ナビゲーションブロックの改良
新しいデザイン機能
パフォーマンスの改善
その他多数

しかし、これだけではありません。WordPress 6.0には、97の機能追加と拡張、131のバグ修正を含む251のTracチケットがあります。これは、かなりの数字です。

そうです、話すことは山ほどあります。それでは、前置きはこの辺にして、6.0の新しい点を見ていきましょう。

Webfonts API

新しいWebfonts APIで、パフォーマンスの維持とユーザーのプライバシー保護のために、WordPressにウェブフォントを読み込む方法が標準化されました。

WordPress 6.0では、新しいウェブフォントはtheme.jsonからしか登録できません。

theme.jsonの使い方はとても簡単です。Typographyのセクションに新たなフォントファミリーを追加するだけです。次のコードは、ウェブフォント登録の例です。

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": ""Source Serif Pro", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

上記のコードにより、「Inter」フォントファミリーがTwenty Twenty-TwoデフォルトのfontFamilies に追加されます。ご自身で試してみたい場合は、Google FontsからInter webfontを「./assets/fonts」フォルダにダウンロードし、上記のコードをTwenty Twenty-Twoのtheme.jsonの settings.typographyセクションに追加しましょう。完了したら、ファイルを保存して、サイトエディタのインターフェースに戻ります。

次の画像は、設定変更後のエディタです。

Webfonts APIでは、現在のページのブロックをレンダリングするために必要なフォントのみが登録されます。これは特に複数のスタイルのバリエーションで定義されているウェブフォントの場合に便利です。さらに、APIはフォントファミリーごとに登録、エンキューすることでHTTPリクエストの件数を最適化してくれます。

新しいAPIの詳細については、Webfonts APIのプルリクエストと、「Status of Webfonts API for WordPress 6.0 Inclusion（WordPress 6.0へのWebfonts API搭載の状況）」と「Global Styles variations in WordPress 6.0（WordPressスタイルのバリエーション）」をご覧ください。

スタイルの切り替え

スタイルの切り替えは、WordPress 6.0搭載の機能の中でも特に待ち望まれたものの一つです。テーマの開発者は、複数の共通設定をテーマに盛り込むことができるようになり、ユーザーはワンクリックでスタイルのバリエーションから選んで、切り替えられるようになりました。

まるで、それぞれスタイルが予め設定された、すぐに使える子テーマが複数あるようなものです。

ブロックテーマにスタイルのバリエーションを追加するには、テーマのルートにあるstylesフォルダに代わりのJSONファイルを追加します。

スタイル切り替えに対応したテーマでは、「スタイル」のサイドバーに「Browse styles」という新しい項目が表示されます。クリックすると、スタイル選択のパネルが表示されます。

一覧から任意のスタイルを選ぶと、それが自動的にサイト全体に適用されます。

この新たな機能により、テーマの開発者はスタイルのバリエーションを無制限に作成できます。またWebfonts APIと組み合わせて使用することも可能です。

次の画像は、先ほどの例のカスタムスタイルで、見出しに異なるフォントを適用したものです。

ご自身で試してみたい場合は、ブロックテーマのルートにstylesフォルダを追加し、新しくJSONファイルを作成して分かりやすい名前を付け、好みのコードエディタで開き、次のコードを貼り付けましょう。

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

上の例で使用されているコードの全体はGitHubとgistで確認できます。

さらに詳しく知りたい開発者の方は、「グローバル設定とスタイル」と「Theme.json」のドキュメントをご覧ください。

また、新たなスタイルのバリエーションが3つ追加された、Twenty Twenty-Twoの最新バージョンもあわせてご確認ください。

ブロックパターン

ブロックパターンは現在のWordPress開発において、間違いなく、中心的な役割を果たしています。WordPress 5.5で初めて導入されたブロックパターンは、その後も定期的に改良が加えられてきました。

また、WordPress 5.9からは、パターンディレクトリに掲載されているパターンが動的に取得され、ブロックインサーターに読み込まれるようになりました。

そして今、誰でもパターンを開発できるようになりました。パターン作成機能で、自分だけのブロックパターンを作成、編集し、パターンディレクトリに登録することができます。WordPress.orgのアカウントさえあれば、簡単に利用可能です。

また、WordPress 6.0ではブロックパターンにさらなる改良が加えられています。

まず、テンプレート編集画面でブロックパターンを見つけやすくなりました。特定のテンプレートの第一階層へアクセスしたとき、クイックインサーターには該当するブロックパターンのみが表示されます。つまり、ブロックがドキュメントの直系のパターンであるときのみ表示されます。

表示されるのは、以下の条件を満たしたときです。

ブロックテンプレートを編集している
クイックインサーターがルート階層にある場合
他のブロックの間にブロックを追加している（つまり、ページの最初のブロックでも最新のブロックでもない）

もうひとつの便利な機能は、テーマの開発者が推奨するパターンをtheme.jsonに追加することができるようになったことです。試しに、パターンディレクトリ内から、テーマの利用者におすすめしたいパターンを探し、URLからパターンのスラッグを取得して、theme.jsonに次のように記述してみましょう。

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

ブロックインサーターにはおすすめのパターンが表示されます。

他にも、WordPress 6.0に搭載されたパターン関連の便利な機能には、暗黙のパターン登録があります。テーマのルートに新しく作成した/patternsディレクトリの下にPHPファイルとして宣言することで、パターンを暗黙に登録できるようになりました。

やり方はいたって簡単です。

テーマのルートに新しいパターンフォルダを作成する。
ブロックエディタでブロックグループを作成する。
HTMLをコピーして、新しいテキストファイルに貼り付ける。
次のコードを先頭に記述する。
ファイルをPHPとしてpatternsフォルダに保存します。

<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

これで完了です。ブロックインサーターに表示される新しいブロックパターンが完成しました。

「ページ作成パターン」も、WordPress 6.0に追加された、ブロックパターン関連の気になる機能です。新しいページ作成に際して、ポップアップに複数ブロックのセットが表示されます。ここから選んでページ作成に役立てることができます。

ちなみにこの複数ブロックは、最低でも一つのパターンがcore/post-contentブロックタイプのサポートを宣言している時にのみ表示されます。

WordPress 6.0には、標準でそのようなパターンは組み込まれていません。ですので、既存のパターンに別途サポートを追加しない限り表示されません。実際にこのポップアップが表示されるようにするのは、非常に簡単です。

先に紹介した例にならってブロックパターンをテーマに登録した場合には、以下の例のようにBlock Typesプロパティを追加することができます。

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

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

お使いのテーマの/patternsディレクトリに、このコードをPHPファイルとして保存します。そして、WordPress管理画面から新しいページを作成してみましょう。すると、以下のスクリーンショットにあるように、ポップアップが表示されるはずです。

ページ作成パターンの詳細については「Page creation patterns in WordPress 6.0（WordPress 6.0のページ作成パターン）」をご覧ください。

ブロックパターン開発全体については「New features for working with patterns and themes in WordPress 6.0（WordPress 6.0でパターンとテーマを扱う新機能）」とGitHubでのTracking Issueをご確認ください。

サイト編集機能

フルサイト編集機能の開発は、WordPress 5.9で完了したわけではありません。WordPress 6.0では、視覚的なテーマ作成機能の改善や、ブロックテーマ用の新しいテンプレートなど、さらに一歩進んだ機能が搭載され、他にも様々な要素が加わる予定です。

視覚的なテーマ作成

WordPress 6.0では、テーマエクスポート機能が改良され、現在使用中のテーマを「加えた変更やカスタマイズを維持したまま」ダウンロードすることができます。

これまでブロックテーマエクスポート機能を使ったことがない方のために紹介すると、スタイルやテンプレートをテーマごとエクスポートすることができる便利なサイト編集機能です。

変更が完了したら、サイトエディタのインターフェースから「Options」のサイドバーを開き、「Tools」セクションを探します。ここで、「Export」ボタンをクリックすると、現在使用中のテーマをすべてのスタイルとテンプレートを維持したままZIPファイル形式でダウンロードすることができます。

その後、テーマをエクスポートして、任意のWordPressサイトにインストールすることができます。

改良されたテーマのエクスポートツールをローカル環境のWordPressサイトでテストしてみたところ、ほとんどすべてが期待通りに動作することがわかりました…😅

いずれにせよ、このエクスポート機能はまだ開発段階であり、今日ご紹介しているのはその無限の可能性の一部に過ぎません。ご自身のサイトの編集インターフェースからテーマを作成し、多くの人に配布できる可能性すらあります。しかも、開発者の方でなくてもできるのです。

まだ修正すべき問題がたくさんあるため、近いうちにいくつか改善が見られるでしょう。視覚的なテーマ作成機能についてもっと知りたい方は、GitHubのTracking Issueをご覧下さい。

ブロックテーマテンプレートの追加

以前のWordPressのバージョンではテンプレートの種類の数は限られていました。

WordPress 6.0では、著者、カテゴリー、日付、タグ、タクソノミーなど、複数のテンプレートの種類が新たに導入されています。

この機能追加により、サイト編集のワークフローが効率化されるはずです。試しに、ドロップダウンメニューから新しいテンプレートを選び、必要なブロックを追加し、変更を保存して、フロントエンドでどのように見えるかを確認してみましょう。そう、驚くほど簡単です。これを先ほどご紹介したテーマエクスポート機能と組み合わせれば、サイト編集が今後どれほど楽になるか、想像に難くありません。

インターフェースとユーザビリティの改善

WordPress 6.0では、UIに多くの変更が導入され、その多くはサイドバーの使いやすさに関するものです。この変更により、編集の操作性がかなり改善されたはずです。ここでは、そのうちのいくつかを紹介しますが、すべての変更点の詳細を知りたい方は、Gutenbergのリリースノートをご覧ください（Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0）。

リスト表示の改善

リスト表示には使い勝手を改善するためにかなりの変更が加えられました。

選択時にリスト表示を展開

エディタ内でブロックをクリックすると、リスト表示でそのブロックが自動的にハイライトされるようになりました。ブロックが親ブロックにネストされている場合、親ブロックが展開し、ブロックツリーのアイテムが表示されます。

リスト表示─デフォルトで折りたたまれた状態に

WordPress 6.0以前では、リスト表示のパネルを開くと、デフォルトで展開された状態になっていました。

しかし、投稿はネストされたブロックの複雑な構造になっていることが多いので、リスト表示でブロックツリーが折りたたまれた状態であるのは非常に理にかなっています。

6.0では、すべてのエディタでリスト表示がデフォルトで折りたたまれており、ブロックツリーの構造が一目で分かります。

フォーカスがリスト表示ボタンに戻る

リスト表示のパネルを開いたとき、フォーカスがリスト表示ボタンに戻るようになりました。キーボードからリストビューを閲覧する場合に特に便利で、よりスムーズに編集できます。

複数ブロックの選択とドラッグ＆ドロップ

リスト表示のもう一つの変更点は、同じ階層の複数のブロックを選択し、リスト内の別の位置にドラッグ＆ドロップすることができるようになったことです。

ブロックスタイルのプレビュー

WordPress 6.0以前は、ブロックスタイルのプレビューはブロックのサイドバーに配置されており、スタイルパネルのかなりの範囲を占めていました。

6.0では、スタイルパネルにはスタイルのバリエーションの名前のみが表示され、スタイル名にカーソルを合わせるかフォーカスすると、スタイルプレビューがサイドバーの外側に表示されます。

この変更により、サイドバーのサイズが小さくなり、スタイル名が分かりやすくなりました。

段落のタイポグラフィセクション

ブロックサイドバー内の整頓のために、段落ブロックのドロップキャップの設定が、タイポグラフィのセクションに移動しました。

この変更により、タイポグラフィーの設定がすべて同じセクションに集約され、編集がしやすくなりました。

WordPress 5.9とWordPress 6.0のタイポグラフィ設定画面の比較

枠線とカラーの設定はツールパネルに移動

ごちゃごちゃした設定画面を整理するため、枠線の設定とカラーの設定はツールパネルに移動し、展開したり折りたたんだりできるようになりました。

この変更により、複数のブロックによる編集作業が効率化され、サイドバーの機能が分かりやすくなりました。

投稿の公開画面のカテゴリーのリマインダー

急いでいるときや、定期的にかなりの数のブログ記事を公開していると、タグやカテゴリーを忘れてしまうことがあります。そのような場合、投稿の公開画面に表示されるタグのリマインダーが非常に便利です。

WordPress 6.0では、管理者や作者が投稿に必要なカテゴリーを設定しやすいように、投稿の公開画面に「提案：カテゴリーを割り当て」という画面が新たに追加されました。投稿にカテゴリーが追加されていない場合にこの項目が表示されます。

以下の画像は、WordPress 5.9と6.0の投稿公開パネルを比較したものです。

サイトエディタへのコードエディタ追加

WordPress 6.0から、サイトエディタ内でもコードエディタが利用できるようになりました。投稿エディタと同様、「オプション」メニューの中にコードエディタがあります。

ブロックをロック

「高度な設定」のドロップダウンに新しい「ロック」という項目が追加されました。ユーザーがブロックを移動または削除（またはその両方）できないようにする設定画面が表示されます。

特にテンプレートの編集や再利用ブロックでは、ブロックの編集を制限できるので便利です。

この新しい機能は、canLockBlocks設定により、プログラミングベースで無効化することができます。

以下のコードを使えば「編集者」以上の権限を持つユーザーにのみ、ブロックのロック機能の使用を許可することも可能です。

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

また、開発に際して、lockプロパティを使うことで、特定のブロックタイプにおけるロック操作UIを非表示にすることもできます。

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

ブロックのロックについて詳しくは、「Block Locking Settings in WordPress 6.0（WordPress 6.0でのブロックのロック設定）」をご覧ください。

マルチセレクト

複数のブロックにまたがるテキストを選択できるようになりました。

A screenshot showing text selection across two paragraphs. — 2つの段落にまたがるテキストを選択

スタイルの維持

ブロックの変換や新しいボタンの作成時に、一部のスタイルを保持できるようになりました。

以下の画像は、様々なスタイルを適用したリストブロックです。

リストブロックを段落ブロックに変換した場合、新しいブロックは以前と同じスタイルを保持します。

また、新しいボタンが追加されたボタンブロックでも同様に、隣接するボタンのスタイルが適用されるよう改善されました。

新しいコアブロック

コアブロックの数は絶えず増加しています。現在利用可能なコアブロックを知りたい方は、現在Gutenbergプラグインに含まれるすべてのコアブロックの一覧が掲載されたリファレンスページをご覧下さい。各ブロックについて、名前、カテゴリー、サポート、属性が記載されており、ブロックの開発者にとって便利なソースコードのリンクも記載されています。

また、WordPress 6.0ではさらに多くのブロックが登場する予定です。次期バージョンで予定されているブロックをご紹介します。

コメントクエリーループ

クエリーループブロックと似た、新しいコメントクエリーループブロックは、投稿へのコメントを表示します。これは、個別に編集・設定できる複数の内部ブロックで構成された高度なブロックです。

次の画像のように、コメントクエリーループブロック内のブロックを選択して、その外観を自由にカスタマイズすることができます。また、ブロックを追加したり、既存のブロックを移動または削除したりできます（ソースコード）。

続きを読む

カスタマイズ可能な新しい「続きを読む」ブロックにより、「続きを読む」ボタンのさまざまな要素（枠線、色、角、タイポグラフィーなど）をカスタマイズすることができます。（ソースコード）

これは、「投稿の抜粋」ブロック以外で「続きを読む」のリンクを追加し、カスタマイズすることができるため、非常に便利なブロックです。

クエリーループの結果なし

「結果なし」ブロックは、クエリの結果がない場合に表示するテキストやブロックを追加することができるブロックコンテナです。「結果無し」ブロックをクエリーループに追加するには、クエリーループを選択し、右下にあるプラスアイコンをクリックしてクイックインサーターを起動します。そして、「結果無し」を検索します。このブロックはクエリーループ以外では使用できません。（ソースコード）

アバターブロック／投稿者の経歴

WordPress 6.0では、投稿者ブロックを要素ごとに分割し、コンテンツ内で個別に使用できる新しいブロックも導入されています。

投稿者の経歴ブロックは、投稿者の説明を表示するブロックです。（ソースコード）

アバターブロックでは、サイトの投稿者から選択し、アバターを表示することができます。（ソースコード）

WordPress 6.0のアバターブロック

このブロックは、投稿者の経歴ブロックやコメント以外の場面で投稿者のアバターを表示する場合に便利です。たとえば、すべての投稿者を紹介するページや、ユーザーや読者からのレビューを表示するページで使用できます。

既存のブロックの改善

WordPress 6.0では、編集ワークフローに強い影響を与える可能性のある変更と既存ブロックの強化もなされています。ナビゲーションブロックに変更点があり、クエリーループ、アイキャッチ画像、グループ、ソーシャルアイコンなど、他のブロックも改善されます。

ナビゲーションブロックの改善

この数ヶ月の間に、ナビゲーションブロックはいくつかの改良を受け、より使いやすいインターフェースとなっています。

まず、ナビゲーションブロックにリッチプレビューが追加されました。一般に公開されているページのリンクを設定した状態でブロックツールバーのリンクボタンをクリックすると、プレビュー画像が表示されます。

さらに、編集作業全般に影響を与えるいくつかの変更点があります。

新しいメニューを追加する際、ナビゲーションメニューが1つしか存在しない場合、デフォルトでそのメニューが選択されるようになりました。この変更により、ナビゲーションメニューが1つしかない場合、編集のワークフローが速くなるはずです。

ナビゲーションリンクには、それについての説明を入力できるフィールドが元から用意されていました。しかし、WordPress の以前のバージョンでは、テーマによるこの機能のサポートはできませんでした。

WordPress 6.0 では、リンクのラベルの後に<span class="wp-block-navigation-item__description">が表示されるようになりました。

Twenty Twenty-Twoでは、CSS によって .wp-block-navigation-item__description 要素は非表示になっていますが、テーマによって display: block プロパティを追加してリンクの説明を表示させることができます。

WordPress 6.0とTwenty Twenty-Twoでのナビゲーションリンクの説明

クエリーループフィルタとアイキャッチ画像

クエリーループフィルタの設定セクションに、カスタムタクソノミーの入力フィールドが表示されるようになりました。この機能を使えば、タクソノミーで投稿をフィルタリングすることができます。

また、以前のバージョンでは、ドロップダウンから作者を一人選択することしかできませんでしたが、現在、複数の作者で投稿をフィルタリングすることが可能になりました。

また、クエリーループブロック内でも、アイキャッチ画像の寸法を設定できるようになりました。

グループブロックにおけるタイポグラフィとボーダーのサポート

グループブロックと行ブロックがタイポグラフィ設定に対応しました。この変更により、同じ書式設定をブロックのグループ全体に一度に適用できるようになり、複数のネストしたブロックを含むグループの調整を行う際に数クリックの手間を省くことができるようになりました。

グループブロックがさらに改良され、ワンクリックで簡単に「重ね」や「行」にブロックをグループ化することができるようになりました。

グループ化したいブロックを選択し、ブロックツールバーにある3つのコントロール（「グループ」・「行」・「重ね」）から選ぶだけでOKです。

ブロックをグループ化すると、設定サイドバーの新しいパネルにグループのバリエーションの説明が表示され、数回のクリックでバリエーションを切り替えることができるようになります。

WordPress 6.0では、グループブロックのマージンもサポートされ、上下のマージンを個別にコントロールできるようになりました。

カバーブロックのアイキャッチ画像

WordPress 6.0では、ブロックツールバーに「アイキャッチ画像の使用」トグルが追加され、カバーブロックにアイキャッチ画像を使用することができるようになりました。この新しい機能により、1回のクリックで普通の画像からアイキャッチ画像に切り替えることができます。

ソーシャルアイコンのラベル表示・非表示の切り替え

ソーシャルアイコンブロックで、アイコンのラベルのオン/オフを切り替えることができるようになりました。

このオプションを有効にすると、デフォルトのサービス名を表示したり、アイコンのカスタムラベルを個別に設定したりできます。

ブロックのさらなる強化

WordPressの最新バージョンでは、他のブロックにも数多くの強化が施されています。

例えば、カラムブロックの枠線をコントロールできるようになりました（Gutenberg 12.7）。

もう一つの便利なUX改良点として、簡単なキーボードトリガー「[[」を使って内部リンクを挿入できるようになりました。

新しいブロック間隔機能により、ギャラリーブロック内の画像の周りのスペースを簡単に調整できるようになりました。

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

WordPress 6.0には開発者向けの機能がたくさん盛り込まれています。

A new wp_content_img_tagフィルタを使って、HTMLコンテンツの画像を調整することができます（詳細: New filter to modify content images in WordPress 6.0）
The parse_requestメソッドにおいて、do_parse_requestフィルタがfalseを返した時のクエリの数が減らされました（詳細: Changes to do_parse_request filter in WordPress 6.0）
テーマ内からブロックを登録できるようになりました（詳細: Registration of Blocks from within Themes）
ancestorプロパティで、特定のブロックタイプにおけるブロックの利用許可が設定できるようになりました（詳細: New ancestor property in block.json）

最新版では、パフォーマンスの改善も見られます。WordPress Caching APIが強化され、タクソノミーのクエリ性能が改善し、ユーザー数が膨大なシングルサイトのパフォーマンス強化も実現しています。

以上、WordPress 6.0の新機能と変更点をご紹介しました。

しかし、ここで扱った内容は、WordPress 6.0に搭載された改善点のほんの一部に過ぎません。詳細については、GutenbergリリースノートとWordPress 6.0フィールドガイドをご覧ください。

WordPress 6.0をローカル開発環境で利用する方法

WordPressの正式リリース前に開発版を試す方法は以下の通りです。

DevKinstaを開き、ローカルのWordPressサイトを新規に作成します。
完了したら、WordPressの管理画面を開き、「プラグイン」>「新規追加」に移動します。
「WordPress Beta Tester」プラグインを検索・インストールします。
プラグインを有効化して、「ツール」>「ベータテスト」へ移動します。
「WP Beta Tester 設定」タブで「最前線」オプションを選択し、設定を保存してください。
WordPress管理画面から「更新」を開き、最新のナイトリーバージョンに更新します。

以上です。これで、WordPress のローカル開発環境ができ、あらゆるテストを自由に実行できます。新機能についてどう思われるか、ぜひお聞かせください。

DevKinstaを使えば、わずか数クリックでローカルマシンにWordPressの開発環境を構築することができます🖥

DevKinstaの無料ダウンロードはこちら！👈

まとめ

以上のように、現在はGutenbergの開発フェーズ2である「カスタマイズフェーズ」の真っ最中と言えるでしょう。

フルサイト編集はWordPressコアの一部であり、6.0とその次のバージョンでは、既存の機能に、さらなる改良が加えられることになります。

これは、WordPressのエコシステムとウェブ全体に大きな影響を与えるはずです。

WordPressは、既知のCMS利用サイトの64.2%で使用されています。これは、全ウェブサイトの43%にあたります（出典: W3Techs）。

今回はここまでです。WordPress 6.0に搭載される機能や改善点を1つの記事で網羅することはできませんが、少なくとも、日々のWordPressの使い方に最も大きな影響を与えるであろう各種機能をご紹介できたと思います。

では、最後に読者の皆さんに質問を投げかけて、この記事を締めくくりたいと思います。

ぜひ、以下のコメント欄でご意見をお聞かせください👇

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.