theme.json

デフォルトのコントロール/オプションの提供

theme.jsonは設定ツールとして機能するため、利用可能なオプションを詳細に定義する方法は多数あります。このセクションでは、いくつかのブロックにまたがる機能を示し、さまざまなアクセスレベルを可能にするため、デュオトーンを例として使用します。

各画像関連ブロックに対してCoreオプションとカスタマイズが利用可能なデュオトーン:

{
   "version": 3,
   "settings": {
   "color": {
   "customDuotone": true,
   "duotone": [
   ]
   }
   }
}

テーマで定義されたカラオプション、Coreオプション、および各画像関連ブロックに対してカスタマイズが利用可能なデュオトーン:

{
   "version": 3,
   "settings": {
   "color": {
   "duotone": [
   {
   "colors": [ "#000000", "#ffffff" ],
   "slug": "foreground-and-background",
   "name": "Foreground and background"
   },
   {
   "colors": [ "#000000", "#ff0200" ],
   "slug": "foreground-and-secondary",
   "name": "Foreground and secondary"
   },
   {
   "colors": [ "#000000", "#7f5dee" ],
   "slug": "foreground-and-tertiary",
   "name": "Foreground and tertiary"
   },
   ]
   }
   }
}

Post Featured Imageブロックに対して定義されたデフォルトオプションとすべてのカスタマイズが利用可能なデュオトーン:

{
   "version": 3,
   "settings": {
   "color": {
   "custom": true,
   "customDuotone": true
   },
   "blocks": {
   "core/post-featured-image": {
   "color": {
   "duotone": [
   {
   "colors": [ "#282828", "#ff5837" ],
   "slug": "black-and-orange",
   "name": "Black and Orange"
   },
   {
   "colors": [ "#282828", "#0288d1" ],
   "slug": "black-and-blue",
   "name": "Black and Blue"
   }
   ],
   "customDuotone": true,
   "custom": true
   }
   }
   }
   }
}

Post Featured Imageブロックに対して定義されたデフォルトオプションとCoreオプションのみが利用可能なデュオトーン（カスタマイズなし）:

{
   "version": 3,
   "settings": {
   "color": {
   "custom": true,
   "customDuotone": true
   },
   "blocks": {
   "core/post-featured-image": {
   "color": {
   "duotone": [
   {
   "colors": [ "#282828", "#ff5837" ],
   "slug": "black-and-orange",
   "name": "Black and Orange"
   },
   {
   "colors": [ "#282828", "#0288d1" ],
   "slug": "black-and-blue",
   "name": "Black and Blue"
   }
   ],
   "customDuotone": false,
   "custom": false
   }
   }
   }
   }
}

theme.jsonによるインターフェースオプションの制限

ブロックごとのオプションの制限

デフォルト値を定義することに加えて、theme.jsonを使用すると、オプションを完全に削除し、代わりにテーマが設定したものに依存することもできます。以下は、同じ段落ブロックの2つの極端な例を示すビジュアルです:

デュオトーンの例を続けると、画像ブロックに対してすべてのデュオトーン機能への完全なアクセスを許可し、Post Featured Imageブロックのみを次のように制限することができます:

{
   "version": 3,
   "settings": {
   "color": {
   "custom": true,
   "customDuotone": true
   },
   "blocks": {
   "core/image": {
   "color": {
   "duotone": [],
   "customDuotone": true,
   "custom": true
   }
   },
   "core/post-featured-image": {
   "color": {
   "duotone": [],
   "customDuotone": false,
   "custom": false
   }
   }
   }
   }
}

theme.jsonでオプションをオン/オフにする方法についてはこちらをお読みください。

デフォルトレイアウトの継承を無効にする

グループブロックのようなコンテナブロックに対して「デフォルトレイアウトを継承する」設定を無効にするには、次のセクションを削除します:

"layout": {
   "contentSize": null,
   "wideSize": null
},

グローバルにオプションを制限する

ブロックまたはクラシックテーマでtheme.jsonを使用する場合、これらの設定により、デフォルトのカラーおよびタイポグラフィコントロールがグローバルに有効になるのを防ぎ、可能なことを大幅に制限します:

{
   "version": 3,
   "settings": {
   "layout": {
   "contentSize": "750px"
   },
   "color": {
   "background": false,
   "custom": false,
   "customDuotone": false,
   "customGradient": false,
   "defaultGradients": false,
   "defaultPalette": false,
   "text": false
   },
   "typography": {
   "customFontSize": false,
   "dropCap": false,
   "fontStyle": false,
   "fontWeight": false,
   "letterSpacing": false,
   "lineHeight": false,
   "textDecoration": false,
   "textTransform": false
   }
   }
}

上記のいずれかを有効にするには、変更したい値をtrueに設定するだけで、より詳細に制御できます。