Contents
はじめに
この記事は、WordPress テーマの機能・レイアウト・スタイルなどの多くを一元的に管理出来る JSON ファイルである theme.json について、WordPress 6.6での変更点をまとめたものです。
theme.json 自体の全体図については、「【WordPress5.9 / 6.0版】theme.json 全解説」という記事にまとめていますので、そもそも theme.json とは何か分からない方、各セクション (プロパティ) の役割が分からない方は、ぜひ先にこちら記事を見ていただければ幸いです。また、WordPress 6.1から WordPress 6.5までの変更点については、それぞれ以下の記事でまとめています。
変更点一覧
とりあえず変更点をざっくりと知っておきたいという方のために、WordPress 6.6での変更点をリストアップしておきます。より詳しく理解してみたい方は、以降の各セクションの解説を参照ください。
theme.jsonのバージョンが2から3に上がった (解説)- デフォルトのフォントサイズプリセットを選択できるかどうかをコントロールする
settings.typography.defaultFontSizesプロパティが追加された (解説) - CSSの
text-alignに関する設定を有効化するかどうかをコントロールするsettings.typography.textAlignプロパティが追加された (解説) - デフォルトのスペーシングプリセットを選択できるかどうかをコントロールする
settings.spacing.defaultSpacingSizesプロパティが追加された (解説) - Aspect Ratio プルダウンにデフォルトのオプションを表示するかどうかを設定する
settings.dimensions.defaultAspectRatiosプロパティが追加された (解説) - Aspect Ratio プルダウンにオプションを追加する
settings.dimensions.aspectRatiosプロパティが追加された (解説) - サイト全体に背景画像を適用できるようになった (解説)
- CSSの
text-alignを設定できるようになった (解説) - CSSの
aspect-ratioを設定できるようになった (解説) - ブロックスタイルの仕様が拡張された (解説)
備考・注意点
この記事は、2024年6月4日にリリースされた WordPress6.6 Beta1の検証結果に基づいています。正式リリースは2024年7月16日の予定ですが、それまでのあいだに仕様が若干変わる可能性があります。最新の仕様は、WordPress のgitリポジトリまたは WordPress.org のリリースニュース (Make WordPress Core) などで確認してください。
前準備
この記事の内容を実践するためのオリジナルテーマを用意したいという方は、作成したテーマフォルダに以下ファイルを用意してください。ブロックテーマとして認識させ、フロントエンドでコンテンツを確認出来るようにするために必要な最低限のファイルです。
/*
Theme Name: My Theme
Text Domain: mytheme
*/<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
<div class="wp-block-query">
<!-- wp:post-template -->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- /wp:post-template -->
</div>
<!-- /wp:query --><!-- wp:post-title /-->
<!-- wp:post-content {"layout":{"inherit":true}} /-->{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
}
}version
WordPress5.8で theme.json が導入され、WordPress6.0でバージョン2に上がりましたが、WordPress6.6ではバージョン3に上がります。
バージョンが上がったのは、フォントサイズとスペーシングの二つに関して仕様変更が行われ、デフォルトプリセットの扱いに関して一貫性を持たせることが主な目的のようです。
- デフォルトプリセットがデフォルトで表示されるかどうか
- デフォルトプリセットと同じスラッグを持つプリセットをテーマが提供した場合、デフォルトプリセットがテーマのプリセットを上書きするかどうか
ここでは、フォントサイズを例に挙げて解説します。
バージョン2で、テーマが何もプリセットを定義していない場合は、タイポグラフィパネルでは以下のようにデフォルトプリセットが表示されます。この4つのプリセットは、それぞれ small、medium、large、x-large というスラッグを持ちます。
バージョン2において、以下のように何らかのフォントサイズプリセットを定義すると、デフォルトプリセットは theme.json で定義されたプリセットですべて上書きされます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"layout": {
"contentSize": "900px"
},
"typography": {
"fontSizes": [
{
"name": "Small",
"size": "12px",
"slug": "small"
},
{
"name": "Custom",
"size": "30px",
"slug": "custom"
}
]
}
}
}
※ラベルが T シャツサイズで固定されているためわかりづらいですが、「S」がスラッグ small で定義したもの、「M」がスラッグ custom で定義したものです。
ここで、theme.json のバージョンを3に挙げてみます。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"typography": {
"fontSizes": [
{
"name": "Small",
"size": "12px",
"slug": "small"
},
{
"name": "Custom",
"size": "30px",
"slug": "custom"
}
]
}
}
}
デフォルトプリセットと、theme.json で定義されたプリセットの両方が表示されていることがわかります。「S (custom)」が theme.json で定義されたプリセットで、「M (small)」、「L (medium)」、「XL (large)」、「XXL (x-large)」がデフォルトプリセットです。
※ラベルとスラッグがずれているのがややこしいですが、これはフォントサイズのラベルが T シャツサイズでハードコードされており、常に「S」から始まるためです。
ここで重要なことは、small というスラッグをもつプリセットがテーマ・デフォルトプリセットの双方で定義されている場合、デフォルトプリセットの値が優先されるということです。
small というスラッグをもつプリセットから、--wp--preset--font-size--small という CSS 変数が生成されますが、この値は テーマ側のプリセットで定義された 12px ではなく、デフォルトプリセットで定義された 13px となります。
バージョン3においてこの挙動を防ぐためには、デフォルトで true である settings.typography.defaultFontSizes を false に変更します。これによりデフォルトプリセットが表示されなくなり、テーマ側で定義されたプリセットの値が上書きされることがなくなります。
スペーシングに関しても似たような仕様となっていますが、より詳しい挙動を知りたい方は、以下のマイグレーションガイドを参照してください。
Migrating Theme.json to Newer Versions – Migrating from v2 to v3
settings
settings.typography
settings.typography.defaultFontSizes
デフォルトのフォントサイズプリセットを選択できるかどうかをコントロールします。
※デフォルト値：true
version のセクションで説明した通り、この設定は theme.json のバージョンが2・3ののどちらかによって挙動が変わってきます。
- theme.json のバージョンが2の場合:
settings.typography.fontSizesでテーマのプリセットが定義されている場合、このデフォルトフォントサイズプリセットはすべて上書きされる - theme.json のバージョンが3の場合:
settings.typography.fontSizesでテーマのプリセットが定義されている場合、このデフォルトフォントサイズプリセットとマージされる。ただし、デフォルトプリセットと同じスラッグを持つプリセットをテーマが持ってる場合、デフォルトプリセットの設定で上書きされる
この値を false にする一例としては、theme.json のバージョンを3にあげつつ、テーマが定義するプリセットがデフォルトプリセットに上書きされたくない、というケースだと思います。
settings.typography.textAlign
CSSの text-align に関する設定を有効化するかどうかをコントロールします。
※デフォルト値：true
WordPress6.6の時点では、この設定をサポートするコアブロックは存在しませんが、カスタムブロックの block.json でこのサポートをオプトインすることで、ブロックツールバーにドロップダウンが表示されます。
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "test/my-block",
"title": "My Block",
"supports": {
"typography": {
"textAlign": true
}
}
}
アクティブなテーマがブロックテーマであれば、サイトエディターのグローバルスタイルで、ブロックのデフォルトの text-align も設定できます。
コアブロックに関しても、将来的に独自の UI からこのサポートへ移行することが検討されています。
Block Library: Migrate to the new textAlign block support · Issue #60763 · WordPress/gutenberg
settings.spacing
settings.spacing.defaultSpacingSizes
デフォルトのスペーシングプリセットを選択できるかどうかをコントロールします。
※デフォルト値：true
version のセクションでも述べた通り、デフォルトプリセットの扱いに関して一貫性を持たせるために追加されました。
この設定が true である場合の挙動は、theme.json のバージョンが2か3かによって異なります。さらに、プリセットを自動生成するためのsettings.spacing.spacingScale プロパティの設定も関連します。
詳しい挙動については、以下のマイグレーションガイドを参照してください。
Migrating Theme.json to Newer Versions – Migrating from v2 to v3
settings.dimensions
settings.dimensions.defaultAspectRatios
Aspect Ratio プルダウンに、デフォルトのオプションを表示するかどうかを設定します。
※デフォルト値：true
settings.dimensions.aspectRatios
Aspect Ratio プルダウンにオプションを追加します。
注意点として、WordPress 6.6の時点で Aspect Ratio をサポートしているのはカバーブロックのみですが、Aspect Ratio の設定はデフォルトで false なので、オプションを追加しても UI 自体が表示されません。以下の例では、settings.dimensions.aspectRatio を true に変更しつつ、オプションを追加しています。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"dimensions": {
"aspectRatio": true,
"aspectRatios": [
{
"name": "Extra Wide - 2:1",
"ratio": "2/1",
"slug": "2-1"
}
]
}
}
}
ちなみに、画像ブロック・投稿アイキャッチ画像でも Aspect Ratio を利用できますが、この二つのブロックはブロックサポートを介さない独自属性で実装されているため、settings.dimensions.aspectRatio の値にかかわらず UI は常に表示されます。
styles
styles.typography
styles.typography.textAlign
サイト全体のCSSの text-align を設定します。実際は、このプロパティではなく styles.blocks.{blockName}.typography.textAlign プロパティを使用して、ブロックレベル・要素レベルで設定することが多いかと思います。
styles.background
styles.background.backgroundImage, styles.background.backgroundPosition, styles.background.backgroundRepeat, styles.background.backgroundSize
サイト全体に適用する背景画像に関するスタイルです。
プロパティ名から見て分かる通り、それぞれ background-image、background-position、background-repeat、background-size CSS プロパティを定義します。
backgroundImage プロパティに関しては、 外部リソースを指定する場合は、以下二つの定義方法があります。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"background": {
"backgroundImage": {
"url": "https://live.staticflickr.com/8307/7879971866_4ef11ff25b_b.jpg"
}
}
}
}{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"background": {
"backgroundImage": "url(https://live.staticflickr.com/8307/7879971866_4ef11ff25b_b.jpg)"
}
}
}テーマに同梱されたアセットを使用したい場合は、file: プレフィックスを使用し、テーマディレクトリのルートからの相対パスで記述します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"background": {
"backgroundImage": {
"url": "file:./assets/background.jpg"
}
}
}
}これらを踏まえて、4つ全てのスタイルを定義する一例は以下です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
},
"background": {
"backgroundImage": true,
"backgroundSize": true
}
},
"styles": {
"background": {
"backgroundImage": "url(https://live.staticflickr.com/8307/7879971866_4ef11ff25b_b.jpg)",
"backgroundSize": "cover",
"backgroundPosition": "center",
"backgroundRepeat": "no-repeat"
}
}
}なお WordPress6.6では、theme.json での定義に加えて、グローバルスタイルでもサイト全体の背景を設定できるようになっています。
この設定自体を有効にするには、WordPress6.4で追加された settings.background.backgroundImage (および WordPress6.5で追加された settings.background.backgroundSize) をオプトインします。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2,
"settings": {
"background": {
"backgroundImage": true,
"backgroundSize": true
}
}
}
styles.blocks
styles.blocks.{blockName}.typography.textAlign
CSSの text-align を設定します。以下は、見出しのデフォルトのテキスト位置を左右中央に設定する例です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/heading": {
"typography": {
"textAlign": "center"
}
}
}
}
}styles.blocks.{blockName}.dimensions.aspectRatio
CSSの aspect-ratio を設定します。以下は、カバーブロックに適用する例です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/cover": {
"dimensions": {
"aspectRatio": "1/1"
}
}
}
}
}styles.blocks.variations
セクションごとのスタイルを行うためのセクションです。
この機能の概念についてはかなり難しいのですが、一つもメリットとして、ブロックスタイルごとのスタイル定義が theme.json 経由でより簡単に行えるようになったようです。
これまでも、 block.json 経由で登録されたブロックスタイルに限ってですが、「特定のブロックスタイルのみにスタイルを定義する」ということはできました。以下は、画像ブロックの rounded スタイルの角丸を変更する例です。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "900px"
}
},
"styles": {
"blocks": {
"core/image": {
"variations": {
"rounded": {
"border": {
"radius": "10px"
}
}
}
}
}
}
}WordPress 6.6では、このようなことを実現するために、ブロックスタイルの仕様が拡張され、theme.json のみで、ブロックスタイルの登録とそれに対するスタイル定義をあわせて行えるようになったようです。
以下の例では、以下のことを実現しています。
testというバリエーションを追加する- そのバリエーションを、
blockTypesプロパティを介してグループブロックとカラムブロックに適用する - そのバリエーションに対してスタイルを適用する
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"styles": {
"blocks": {
"variations": {
"test": {
"blockTypes": [
"core/group",
"core/columns"
],
"color": {
"text": "#ff0000"
}
}
}
}
}
}セクションスタリングの概念については非常に難しいのですが、興味がある方は以下 PR を読んでみてください。