theme.json の新しいバージョンへの移行

Topics

このガイドでは、異なる theme.json のバージョン間の変更点と、アップグレード方法を説明します。古いバージョンは引き続きサポートされますが、新しい開発は新しいバージョンでのみ継続されるため、アップグレードを推奨します。

v1 から v2 への移行

v2 へアップグレードすると、いくつかの新機能が有効になり、いくつかの古い機能名称が、統一した形式に調整されます。

Top ↑

v1 から v2 への移行方法

  1. version を 2 に更新する。
  2. 以下のプロパティを使用している場合は、名前を変更する。

v1、v2 それぞれのバージョンについては、リリースに際しての dev note と、リファレンスドキュメント を参照してください。

Top ↑

名前の変わったプロパティ

v1v2
settings.border.customRadiussettings.border.radius
settings.spacing.customMarginsettings.spacing.margin
settings.spacing.customPaddingsettings.spacing.padding
settings.typography.customLineHeightsettings.typography.lineHeight

Top ↑

新しいプロパティ

新しいトップレベルのプロパティ: customTemplates、templateParts

settings への追加:

  • settings.appearanceTools
  • settings.border.color
  • settings.border.style
  • settings.border.width
  • settings.color.background
  • settings.color.defaultGradients
  • settings.color.defaultPalette
  • settings.color.text
  • settings.spacing.blockGap
  • settings.typography.fontFamilies
  • settings.typography.fontStyle
  • settings.typography.fontWeight
  • settings.typography.letterSpacing
  • settings.typography.textColumns
  • settings.typography.textDecoration
  • settings.typography.textTransform

styles への追加:

  • styles.border.color
  • styles.border.style
  • styles.border.width
  • styles.filter.duotone
  • styles.spacing.blockGap
  • styles.typography.fontFamily
  • styles.typography.fontStyle
  • styles.typography.fontWeight
  • styles.typography.letterSpacing
  • styles.typography.textColumns
  • styles.typography.textDecoration
  • styles.typography.textTransform

Top ↑

プロパティ値の変更

コア (settings.typography.fontSizes) が提供するデフォルトフォントサイズが更新されました。Normal (標準) と Huge (超特大) サイズ (normal と huge スラッグ) がリストから削除され、Extra Large (特大) (x-large スラッグ) が追加されました。コアが提供するデフォルト値を UI コントロールが表示する場合、Normal と Huge は存在しません。しかし、それらを使用している既存のコンテンツが期待通りに動作することを確認するために、それらの CSS クラスと CSS カスタムプロパティは引き続きキューに入れられます。

Top ↑

v2 から v3 への移行

v3 へアップグレードすると、プリセットのデフォルトが一貫性のあるものに調整されます。

Top ↑

v2 から v3 への移行方法

  1. version を 2 に更新する。
  2. 変更されたデフォルトを構成する (以下を参照)。

Top ↑

変更されたデフォルト

Top ↑

settings.typography.defaultFontSizes

theme.json v2 では、デフォルトのフォントサイズはテーマでサイズが定義されていない場合にのみ表示されていました。テーマがデフォルトと同じスラッグを持つフォントサイズを提供する場合は、常にデフォルトを上書きしました。

デフォルトの fontSizes スラッグは、small、medium、large、x-large、xx-largeです。

新しいdefaultFontSizesオプションでは、デフォルトのフォントサイズの上書きを無効にして、これを表示できます。

  • true に設定すると、デフォルトのフォントサイズは表示され、テーマは上書きできません。
  • false に設定すると、デフォルトのフォントサイズは表示されず、テーマはデフォルトのスラッグを使用できます。

v3 に切り替えるとデフォルトで true になります。これにより settings.color.defaultPalette のような他の default* オプションの動作と一貫性が保たれますが、v2 の動作とは異なります。

v3 の theme.json で v2 と同じ動作にするには、

  • もし fontSizes が定義されていない場合は、defaultFontSizes を省略するか true に設定してください。
  • もし fontSizes が定義されている場合は、defaultFontSizes を false に設定してください。

Top ↑

settings.spacing.defaultSpacingSizes

theme.json v2には、テーマレベルのスペースサイズの設定に使用可能な2つの設定があります。settings.spacing.spacingSizes と settings.spacing.spacingScale です。spacingSizes と spacingScale の 両方 を設定すると、spacingSizes の値のみが使用されます。またこのどちらかを設定すると常に、WordPress が提供するデフォルトのスペースサイズのセット全体が置き換えられます。

WordPress が提供するデフォルトの spacingSizes スラッグは、20, 30, 40, 50, 60, 70, 80 です。

新しい defaultSpacingSizes オプションを使用すると、デフォルトのスペースサイズを表示したり、デフォルトのスペースサイズが上書きされないように制御できます。

  • true に設定すると、デフォルトのスペースサイズが表示され、テーマによって上書きされるのを防ぎます。
  • false に設定すると、デフォルトのスペースサイズが非表示になり、テーマはデフォルトのスラッグを使用できます。

v3 に切り替えると、デフォルトで defaultSpacingSizes は true です。これは、settings.color.defaultPalette のような他の default* オプションの動作と一致しますが、v2 の動作とは異なります。

さらに、v3では spacingSizes と spacingScale の両方を同時に設定できるようになりました。spacingSizes から生成されたプリセットとマッチするスラッグを持つ、spacingSizes 内で定義されたプリセットは、生成されたプリセットを上書きします。

v3 の theme.json で v2 と同じ動作にするには、

  • もし spacingSizes プリセットを持たず、または spacingScale の設定を定義していなければ、defaultSpacingSizes を省略するか、true に設定してください。
  • もし spacingScale を { "steps": 0 } に設定してデフォルトのスペースサイズを無効にしている場合は、 spacingScale の設定を削除して defaultSpacingSizes を false に設定してください。
  • プリセットに spacingScale または spacingSizes のどちらか一方しか定義していない場合は、 defaultSpacingSizes を false に設定してください。
  • もし spacingScale と spacingSizes の両方を定義している場合は、 spacingSizes の設定を削除し、かつ、defaultSpacingSizes を false に設定してください。

原文

最終更新日: