WordPress6.4 RC1 が 公開され、いよいよ WordPress6.4 のリリース（2023年11月7日予定）が近づいてきました。

WordPress6.4 を チェックしています

WordPress6.4では新しいデフォルトテーマ「Twenty Twenty-Four」が搭載される予定です。
※「Twenty Twenty-Four」は WordPress6.4以降で使えます。

【参考】Introducing Twenty Twenty-Four
https://make.wordpress.org/core/2023/08/24/introducing-twenty-twenty-four/

【参考】WordPress Unveils Design for Upcoming Twenty Twenty-Four Default Theme
https://wptavern.com/wordpress-unveils-design-for-upcoming-twenty-twenty-four-default-theme

【参考】GitHub – WordPress/twentytwentyfour
https://github.com/WordPress/twentytwentyfour

　
ということで、「Twenty Twenty-Four」はまだリリース前ですので今後 変わっていくと思いますが「Twenty Twenty-Four」をチェックしていきたいと思います。
「Twenty Twenty-Four」は「Twenty Twenty-Three」や「Twenty Twenty-Two」と同様に ブロックテーマで WordPress5.9 からの機能「サイトエディタ」でサイト全体を編集する事ができます。

　

サイトエディタ

「Twenty Twenty-Four」テーマの特徴はブロックテーマになっていて、サイト全体を「サイトエディタ」で編集できるようになっています。

　

管理者はphpの知識が無くてもサイト全体のデザイン・レイアウト等を「サイトエディタ」で構成させる事ができます。
また、WordPess5.8から採用された theme.json を利用する事で更に詳細なブロック用CSS設定やブロックオプションを設定する事ができます。

【参考】Block Theme
https://developer.wordpress.org/block-editor/how-to-guides/themes/block-theme-overview/

　
　

外観

「Twenty Twenty-Four」は WordPress6.4以降で動作します。
１カラムになっています。標準ではサイドバーはありません。
ヘッダー/フッター幅は1280pxになってます。
ウィジェットエリアはありません。すべてブロックでまかなうようになっています。
　

コンテンツ部分

コンテンツ標準幅は 680px で幅広は 1280pxになっています。
これは「theme.json」に以下のように layout の指定があるからです。

	"settings": {
		"layout": {
			"contentSize": "620px",
			"wideSize": "1280px"
		},
	}

　

Font

フォントは「デフォルト」と「Inter」「Cardo」が選べるようになっています。

【参考】Inter : Google Fonts
https://fonts.google.com/specimen/Inter

【参考】Cardo : Google Font
https://fonts.google.com/specimen/Cardo

　

フォントは対応しているブロックで個別に設定できるようになっています。
※ブロックを選択後タイポグラフィ横の3点リーダーをクリックしてみてください。

「デフォルト」は –wp–preset–font-family–{slug} で設定されています。(theme.json)

	--wp--preset--font-family--body: "Inter", sans-serif;
	--wp--preset--font-family--heading: Cardo;

　

フォントサイズはtheme.jsonで以下の様に設定されています。

S	0.9rem
M	1.05rem
L	1.85rem(1.39rem～1.85rem)
XL	2.46rem(1.85rem～2.46rem)
XXL	3.27rem(2.46rem～3.27rem)

L,XL,XXLは「流体タイポグラフィ(Fluid typography)」を採用しています。
「流体タイポグラフィ(Fluid typography)」はブラウザの表示領域 に応じてフォントサイズを変化させる事ができます。
TT4の場合は 最小320px ～ 最大1280pxの間で変化します。

　

レスポンシブ

テーマとしてのCSSブレイクポイントはありません。ブロック次第となります。
　
　

管理画面

ブロックテーマを選択している時だけ以下のようにメニュー部分が変更されています。

サイトのデザインは 外観→「エディタ」で行います。

　

ブロックパターン

「Twenty Twenty-Four」では オリジナルのブロックパターンが、たくさん付属しています。

それぞれカテゴリ内にありますのでチェックしてみてください。

隠しブロックパターンもかなり用意しています。
「A 404 page」「Comments」「Full Screen Image」「Heading on left」「Hidden No Results Content」「Post Meta」「Hidden Search form」「sidebar」
「Portfolio Archive Template」「Writer Archive Template」「Portfolio Template」「Writer Template」「Portfolio Search Template」「Writer Search Results Template」
「Portfolio Single post Template」「Business Home Template」
主にテンプレート構成内で使われています。
後学の為にどんなのかはテーマの patternsフォルダ を確認してみてください。

　
例えばトップページで読み込まれている home.html では

コンテンツ部分は
パターン「twentytwentyfour/template-home」を呼び出しています。
↓
「twentytwentyfour/template-home(template-home-business.php)」では
パターン「twentytwentyfour/home」を呼び出しています。
↓
「twentytwentyfour/home(page-01-business-home.php)」では
パターン「twentytwentyfour/hero(hero.php)」を呼び出しています。
パターン「twentytwentyfour/feature-grid(feature-grid.php)」を呼び出しています。
パターン「twentytwentyfour/features-with-images(features-with-images.php)」を呼び出しています。
パターン「twentytwentyfour/testimonial-centered(testimonial-centered.php)」を呼び出しています。
パターン「twentytwentyfour/posts-featured(posts-featured.php)」を呼び出しています。
パターン「twentytwentyfour/text-centered-cta-subscribe(text-centered-cta-subscribe.php)」を呼び出しています。

ややこしいですね。

　

表示スタイル

表示スタイルでは予め用意されているテーマスタイルを選択する事でサイトのカラーを変更する事ができます。

　
　

ブロックスタイル

「Twenty Twenty-Four」では 独自のブロックスタイルが用意されています。
ソースはテーマの functions.php にありますので改造又は追加してもいいですね。

core/button

ボタンのスタイルを「輪郭」に設定した場合のマウスオーバー時の色反転

※テキスト・背景色が設定されてない場合。

core/details

サマリー部分のスタイルで「Arrow icon」を追加

core/post-terms

カテゴリのスタイルで「Pill」を追加

core/list

リストのスタイルで「Checkmark」を追加

core/navigation-link

リンクのスタイルで「With arrow」を追加

core/heading

見出しのスタイルで「With asterisk」を追加

　
　

テンプレート

サイトエディタのテンプレートは従来のテーマとは違います。
テンプレートは テーマの partsフォルダ や templateフォルダ に入っています。

partsフォルダ
　header.html *
　post-meta.html
　sidebar.html
　footer.html *
　footer-portfolio.html
　footer-writer.html
※すべてのテンプレートは「header.html」「footer.html」で設定されています。

templateフォルダ
　404.html
　archive.html
　home.html
　index.html
　page.html
　page-no-title.html (テンプレート変更で利用可)
　page-wide.html (テンプレート変更で利用可)
　page-with-sidebar.html (テンプレート変更で利用可)
　search.html
　single.html
　single-with-sidebar.html (テンプレート変更で利用可)
※「single-with-sidebar.html」「page-with-sidebar.html」は「sidebar.html」を読み込んでいます。
※「single.html」「single-with-sidebar.html」は「post-meta.html」を読み込んでいます。

　
　

CSS

「Twenty Twenty-Four」の style.css には なんと CSSコードが入っていません。
WordPressコアのブロツクのCSSと theme.json に設定されているCSSで表現しようとしています。

　
　

functions.php

functions.php もブロックスタイルを設定しているだけのシンプルな仕様になっています。

　
　

子テーマ

子テーマも従来の方法どおりに作れます。
templates や partsフォルダ を作ってオリジナルテンプレートを置くだけで 子テーマのを読むようになります。
※サイトエディタで編集したら、このテンプレート(テンプレートパーツ)ファイルは読まなくなります。

theme.json も設置すると親テーマのtheme.jsonとマージしてくれます。

　

…という事で リリースまでに更新された部分は、また追って追記していきたいと思います。