Web Design Leaves

theme.json ファイルの場所

theme.json は wp-content/themes/テーマ名 の中（テーマのルートディレクトリ）に配置します。

以下は Twenty Twenty-Four の例（/wp-content/themes/twentytwentyfour/theme.json）です。

※ WordPress 5.8 より前の（クラシック）テーマには theme.json ファイルは存在しません。

WordPress デフォルトの theme.json

WordPress のデフォルトの設定とスタイルが定義された theme.json ファイルが wp-includes フォルダの中にあります。こちらの theme.json を編集することはありませんが、デフォルトを確認することができます。以下は WordPress 6.6 の例（/wp-includes/theme.json）です。

設定とスタイルの階層（優先度）

theme.json ファイルはそれぞれのテーマや子テーマで定義することができます。また、デフォルトの設定とスタイルを定義した WordPress の theme.json ファイルが wp-includes フォルダに存在しています。

テーマの theme.json で定義したものは、WordPress のデフォルの theme.json を上書きし、子テーマがある場合は、子テーマの theme.json は親テーマの theme.json を上書きします。

以下は設定とスタイルの優先度です（下の方が優先度が高い）。

• WordPress の theme.json : デフォルトの設定とスタイル
• （親）テーマ の theme.json : WordPress のデフォルトの設定を上書きします。
• 子テーマ の theme.json : （子テーマがある場合）親テーマの設定を上書きします。
• ユーザー設定 : サイトエディター（管理画面 [外観] → [エディター]）でカスタマイズされた設定の JSON データはサイトのデータベースに保存され、他のすべての設定よりも優先されます。

appearanceTools

settings.appearanceTools プロパティを使うとサイトのデザインや外観に関連するいくつかの機能を一度に有効にすることができます（true を指定すると有効になります）。

このプロパティのデフォルトは false なので、このプロパティを使用しない場合は、false で定義するのではなく、単に省略します（そして必要に応じて個別に機能を有効化します）。

以下のように appearanceTools プロパティを有効（true）にした場合、

{
  "version": 3,
  "settings": {
    "appearanceTools": true
  }
}

以下のプロパティを個別に true に設定するのと同じです。

{
  "version": 3,
  "settings": {
    "background" : {
      "backgroundImage": true,
      "backgroundSize": true
    },
    "border": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    },
    "color": {
      "link": true
    },
    "dimensions": {
      "aspectRatio" : true,
      "minHeight": true
    },
    "position": {
      "sticky": true
    },
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true
    },
    "typography": {
      "lineHeight": true
    }
  }
}

一部のプロパティを無効にする

特定のプロパティの設定を上書きして、一部のプロパティを無効にすることができます。

例えば、appearanceTools を true に設定し、上記の設定を全て有効にして、sticky のみを無効にするには、theme.json に以下のように記述します。

{
  "version": 3,
  "settings": {
    "appearanceTools": true,
    "position": {
      "sticky": false
    }
  }
}

appearanceTools を有効にした場合の注意点

appearanceTools を有効にした場合、WordPress が新しい機能を自動的に有効にする可能性があります。

WordPress が将来の更新で appearanceTools に新しい機能を追加した場合、クライアントが新しい見慣れない機能を目にする可能性があるため、 appearanceTools を無効にしておき、個別に有効にするほうが良い場合があります。

border

settings.border プロパティを使用すると、ブロックの枠線設定を制御できます。枠線のスタイルではなく、ユーザーインターフェースで枠線の設定項目の表示・非表示を制御します。

settings.border プロパティでは以下の４つの設定をサポートしています。各プロパティでは、特定の枠線機能を有効または無効にすることができ、真偽値 (true または false) を受け入れます。

以下は settings.border プロパティのデフォルトで、全てのプロパティは false に設定されています。

appearanceTools が true に設定されている場合、全てのプロパティは true になります。

{
  "version": 3,
  "settings": {
    "border": {
      "color": false,
      "radius": false,
      "style": false,
      "width": false
    }
  }
}

枠線をサポートしているブロックには、ボタンやコード、グループ、画像、テーブルブロックなどがあります（全てのブロックで枠線の機能がサポートされているわけではありません）。

WordPress 6.3 以降では、color、style、width プロパティが結びついていて、いずれか1つが true に設定されている場合、他のオプションはユーザーインターフェイス内でオプションとして使用できます。

また、radius オプションを false に設定しても、ボタンブロックでは機能しません。エディターの角丸コントロールは常に表示されます。

例えば、デフォルトではコードブロックで枠線のコントロールは表示されません。

settings.border の全てのプロパティを treu、または appearanceTools を true に設定すると、以下のように枠線のコントロールが表示されます。

color

settings.color プロパティを使用すると、テーマ内での色やグラデーションなどの動作を制御できます。

色関連の特定のコントロールをユーザーインターフェイスに表示するかどうかが主な目的ですが、ユーザーが選択できるカスタムプリセットを登録することもできます。

以下は settings.color プロパティのデフォルト値です。

{
  "version": 3,
  "settings": {
    "color": {
      "background": true,
      "custom": true,
      "customDuotone": true,
      "customGradient": true,
      "defaultDuotone": true,
      "defaultGradients": true,
      "defaultPalette": true,
      "duotone": [],
      "gradients": [],
      "link": false,
      "palette": [],
      "text": true
    }
  }
}

多くの設定は真偽値（true または false）で有効・無効を設定できます。duotone や gradients、palette は値の配列を受け取ってカスタムプリセットを登録することができます。

色関連の設定は大きく分けると以下の4つに分類できます。

• UI（ユーザーインターフェイス）で設定を有効または無効にする
• 色、デュオトーン、グラデーションのユーザーカスタマイズを有効または無効にする
• WordPress のデフォルトの色、デュオトーン、グラデーションプリセットを有効または無効にする
• カスタムの色やデュオトーン、グラデーションプリセットを登録する

{
  "version": 3,
  "settings": {
    "color": {
      "background": true,
      "link": false,
      "text": true
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "custom": true,
      "customDuotone": true,
      "customGradient": true
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "custom": false
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "defaultDuotone": true,
      "defaultGradients": true,
      "defaultPalette": true
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "duotone": [],
      "gradients": [],
      "palette": []
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#ffffff",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#222222",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#438aab",
          "name": "Primary",
          "slug": "primary"
        }
      ]
    }
  }
}

{
  "version": 3,
  "settings": {
    "color": {
      "gradients": [
        {
          "gradient": "linear-gradient(to bottom, #9defad, #f3bbdd 60%, #e3f3bb)",
          "name": "Green Pink Yellow",
          "slug": "green-pink-yellow"
        },
        {
          "gradient": "linear-gradient(-225deg,#231557,#44107a 29%,#ff1361 67%,#fff800)",
          "name": "Fabled Sunset",
          "slug": "fabled-sunset"
        }
      ]
    }
  }
}

custom

settings.custom プロパティは、CSS カスタムプロパティを生成するプロパティです。

オブジェクトにキーと値を追加すると、WordPress は自動的に CSS カスタムプロパティを生成し、フロントエンドとエディターの両方に読み込みます。

例えば、以下を記述すると、

{
  "version": 3,
  "settings": {
    "custom": {
      "textShadow": "1px 1px 1px rgba( 0, 0, 0, 0.3 )"
    }
  }
}

フロントエンドとエディターでは以下のような CSS が出力されます。

:root {
  --wp--custom--text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

生成される CSS カスタムプロパティは --wp--custom--{key}: {value} の形式になります。

{key} にキャメルケースが使われている場合は、カバブケース（ハイフンつなぎ）に変換されます。

上記の例の場合、キー名の textShadow は text-shadow に変換されています。キー名を text-shadow（カバブケース）とした場合はそのままです。

また、数値は大文字と同じように扱われます。例えば、abc123 は abc-123 に変換されます。

CSS で利用

生成された CSS カスタムプロパティを style.css などの CSS で直接参照することができます。

以下は .foo の text-shadow に上記で出力された CSS カスタムプロパティ名を使ってテキストシャドウを適用する例です。

.foo {
  text-shadow: var( --wp--custom--text-shadow );
}

ネストされたプロパティ

settings.custom プロパティはネストすることができます。

例えば、いくつかの line-height 関連の CSS カスタムプロパティを作成したい場合、以下のようにプロパティをネストして記述することができます。

{
  "version": 3,
  "settings": {
    "custom": {
      "lineHeight": {
        "xs": "1",
        "sm": "1.25",
        "md": "1.5",
        "lg": "1.75"
      }
    }
  }
}

上記は以下のような CSS をフロントエンドとエディターに出力します。

異なる深さレベルのキーは -- で分割されます。line-height と xs や sm などが -- で分割されています。※ このため、custom プロパティのキー名に -- を使うことはできません。

:root {
  --wp--custom--line-height--xs: 1;
  --wp--custom--line-height--sm: 1.25;
  --wp--custom--line-height--md: 1.5;
  --wp--custom--line-height--lg: 1.75;
}

theme.json の他のプロパティで利用

settings.custom で生成した CSS カスタムプロパティを、styles プロパティなどの theme.json の他のプロパティで利用することができます。

以下は前述の lineHeight で定義した CSS カスタムプロパティを styles プロパティの typography プロパティと blocks プロパティで使用する例です。

styles.typography では root 要素の line-height に md を、styles.blocks では段落ブロックの line-height に lg を設定しています。

このとき、settings.custom で定義した CSS カスタムプロパティの値には var:custom|line-height|md や var:custom|line-height|lg でアクセスできます。

または、CSS 構文を使って、var(--wp--custom--line-height--md) などでもアクセスできます。但し、WordPress の var:custom|$feature|$slug 構文の方がうまく機能し、管理画面のインターフェイス全体で常に正しく表示されます。CSS 構文は、実際に CSS を記述するときに使用します。

{
  "version": 3,
  "settings": {
    "custom": {
      "lineHeight": {
        "xs": "1",
        "sm": "1.25",
        "md": "1.5",
        "lg": "1.75"
      }
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "var:custom|line-height|md"
    },
    "blocks": {
      "core/paragraph": {
        "typography": {
          "lineHeight": "var:custom|line-height|lg"
        }
      }
    }
  }
}

上記によりフロントエンド側では id が global-styles-inline-css の style 要素に以下が出力されます。

:root {
  --wp--custom--line-height--xs: 1;
  --wp--custom--line-height--sm: 1.25;
  --wp--custom--line-height--md: 1.5;
  --wp--custom--line-height--lg: 1.75;
}

:root :where(body) {
  line-height: var(--wp--custom--line-height--md);
}

:root :where(p) {
  line-height: var(--wp--custom--line-height--lg);
}

参考：Custom | Adding and using custom settings in theme.json

dimensions

settings.dimensions プロパティを使用すると、ユーザーインターフェイスで使用できるディメンションコントロールを決定できます。

現在、以下の4つの設定（プロパティ）を定義できます。

以下は settings.dimensions プロパティのデフォルト値です。

{
  "version": 3,
  "settings": {
    "dimensions": {
      "minHeight": false,
      "defaultAspectRatios": true,
      "aspectRatio": false,
      "aspectRatios": []
    }
  }
}

minHeight

settings.dimensions.minHeight プロパティを使用すると、ブロックに「最小の高さ」フィールドを表示するかどうかを制御できます。WordPress 6.3 の時点では、この機能が有効になっているコア WordPress ブロックはグループと投稿コンテンツのみです。

以下のように minHeight を true に設定すると、

{
  "version": 3,
  "settings": {
    "dimensions": {
      "minHeight": true
    }
  }
}

グループブロックや投稿コンテンツブロックでは「最小の高さ」のコントロールが表示されます。以下はグループブロックの場合の例です。

defaultAspectRatios

defaultAspectRatios はユーザーがアスペクト比をデフォルトのプリセットから選択できるようにするかどうかを設定するプロパティで真偽値で指定します。デフォルトは true です。

そのため、特に指定しなければ、以下のように画像ブロックやカバーブロックではアスペクト比を選択するプルダウンが表示され、その中からアスペクト比を選択することができます。false を指定すると、デフォルトのアスペクト比のリストは表示されず、「元のサイズ」のみが表示されます。

aspectRatio

aspectRatio は、ユーザーがアスペクト比を設定できるようにするかどうか（アスペクト比のコントロールを表示するかどうか）の設定です。カバーブロックでのみ機能するようです（画像ブロックではコントロールは常に表示されます）。デフォルトは false です。

settings.apperanceTools が true であれば、この設定も自動的に true になります。

aspectRatios

aspectRatios を使うと独自のアスペクト比のプリセットを定義することができます。

aspectRatios で独自のアスペクト比プリセットを定義すると、ユーザーの UI ドロップダウンにプリセットが追加され、テーマのパターンとテンプレートで使用できるようになります。

但し、WordPress 6.6 の時点では、アスペクト比を設定できるのは「画像」、「カバー」「アイキャッチ画像」の3つのブロックのみです

以下はデフォルトのアスペクト比の定義です。aspectRatio はデフォルトで false なので、デフォルトの theme.json では、実際には省略されています。

{
  "version": 3,
  "settings": {
    "dimensions": {
      "defaultAspectRatios": true,
      "aspectRatio": false,
      "aspectRatios": [
        {
          "name": "Square - 1:1",
          "slug": "square",
          "ratio": "1"
        },
        {
          "name": "Standard - 4:3",
          "slug": "4-3",
          "ratio": "4/3"
        },
        {
          "name": "Portrait - 3:4",
          "slug": "3-4",
          "ratio": "3/4"
        },
        {
          "name": "Classic - 3:2",
          "slug": "3-2",
          "ratio": "3/2"
        },
        {
          "name": "Classic Portrait - 2:3",
          "slug": "2-3",
          "ratio": "2/3"
        },
        {
          "name": "Wide - 16:9",
          "slug": "16-9",
          "ratio": "16/9"
        },
        {
          "name": "Tall - 9:16",
          "slug": "9-16",
          "ratio": "9/16"
        }
      ]
    }
  }
}

aspectRatios プロパティでは、プリセット（オブジェクト）の配列を定義します。配列には次のプロパティを受け取るオブジェクトを含めます。

※ スラッグ（slug）の名前は、デフォルトの WordPress スラッグが使用する規則に従うことが推奨されます。例えば、アスペクト比（ratio）が 3/4 のスラッグは 3-4 になります。

以下は 2:1 と 21:9 のアスペクト比を追加する例です。以下では aspectRatio に true を指定して、カバーブロックでもアスペクト比のコントロールを表示するようにしています。

{
  "version": 3,
  "settings": {
    "dimensions": {
      "aspectRatio": true,
      "aspectRatios": [
        {
          "name": "Extra Wide - 2:1",
          "slug": "2-1",
          "ratio": "2/1"
        },
        {
          "name": "Cinema - 21:9",
          "slug": "21-9",
          "ratio": "21/9"
        }
      ]
    }
  }
}

上記を設定すると、以下のように UI ドロップダウンに「Extra Wide - 2:1」と「Cinema - 21:9」のプリセットが追加されます。

デフォルトのアスペクト比を無効に

デフォルトのアスペクト比を無効にして、独自に定義したプリセットのみを表示するには、defaultAspectRatios を false に設定します。

{
  "version": 3,
  "settings": {
    "dimensions": {
      "defaultAspectRatios": false,
      "aspectRatio": true,
      "aspectRatios": [
        {
          "name": "Extra Wide - 2:1",
          "slug": "2-1",
          "ratio": "2/1"
        },
        {
          "name": "Cinema - 21:9",
          "slug": "21-9",
          "ratio": "21/9"
        }
      ]
    }
  }
}

上記を設定すると、以下のように独自のアスペクト比のプリセットのみが表示されます。

Registering custom aspect ratios in WordPress 6.6

layout

settings.layout プロパティはレイアウト関連の設定を格納するオブジェクトです。

現時点ではコンテンツと幅広コンテンツの幅の設定、及びレイアウトコントロールの有効・無効に使われていますが、将来的には他の設定にも使われるようになるかもしれません。

以下の4つの設定を定義できます。エディター側とフロントエンド側両方に影響します。この定義がないと、全てのブロックが幅一杯に広がってしまいます。

以下はコンテンツの幅を 40rem に、幅広コンテンツの幅を 64rem に設定する例です。

{
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "40rem",
      "wideSize": "64rem"
    }
  }
}

allowEditing

レイアウトコントロールをサポートしたブロック（グループブロックなど）では設定サイドバーにレイアウトコントロールパネルが表示されます。

"allowEditing": false を設定すると、

{
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px",
      "allowEditing": false
    }
  }
}

設定サイドバーからレイアウトコントロールパネルが消えます。

allowCustomContentAndWideSize

allowCustomContentAndWideSize を false に設定すると（デフォルトは true）、

{
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px",
      "allowCustomContentAndWideSize": false
    }
  }
}

レイアウトコントロールパネルは表示されますが、コンテンツと幅広の設定が無効（非表示）になり、その他の UI は表示されます。

position

settings.position プロパティを使用すると、WordPress のブロックのグローバル配置設定を制御できます。現在、設定できるのは sticky プロパティのみで、以下がデフォルトです。

appearanceTools が true の場合は position.sticky は自動的に true になります。

{
  "version": 3,
  "settings": {
    "position": {
      "sticky": false
    }
  }
}

settings.position.sticky を true に設定すると、「位置」のコントロールに「張り付き」のオプションが表示されます（サポートするブロックは現時点ではグループブロックだけのようです）。

「位置」のコントロールで「張り付き」を選択した場合、そのブロックはユーザーがページをスクロールしたときに直近の親に固定されます。

固定ヘッダーを作成

固定ヘッダーを作成する場合、ヘッダーテンプレートパーツでは「位置」を使用できないので、ヘッダーテンプレートパーツを包含するグループブロックでラップし、グループに固定配置を適用する必要があります。

spacing

settings.spacing プロパティはスペースに関する設定で、特にマージン、パディング、ギャップに関連する設定をカバーします。

以下は settings.spacing プロパティのデフォルトです。

{
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": null,
      "customSpacingSize": true,
      "defaultSpacingSizes": true,
      "margin": false,
      "padding": false,
      "spacingScale": {
        "operator": "*",
        "increment": 1.5,
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem"
      },
      "spacingSizes": [],
      "units": [ "px", "em", "rem", "vh", "vw", "%" ]
    }
  }
}

appearanceTools が true の場合は blockGap、margin、padding は true になります。

以下は settings.spacing で設定できるプロパティです。

{
  "version": 3,
  "settings": {
    "spacing": {
      "margin": true,
      "padding": true
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "customSpacingSize": false
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "units": [ "px", "em", "rem", "vh", "vw", "%" ]
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "spacingScale": {
        "operator": "*",
        "increment": 1.5,
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem"
      }
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "defaultSpacingSizes": false,
      "spacingScale": {
        "operator": "+",
        "increment": 0.25,
        "steps": 9,
        "mediumStep": 1,
        "unit": "rem"
      }
    }
  }
}

{
  "version": 2,
  "settings": {
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "spacingScale": {
        "steps": 0
      }
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "defaultSpacingSizes": false
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "defaultSpacingSizes": false,
      "spacingSizes": [
        {
          "name": "Step 1",
          "size": "0.25rem",
          "slug": "10"
        },
        {
          "name": "Step 2",
          "size": "0.5rem",
          "slug": "20"
        },
        {
          "name": "Step 3",
          "size": "0.75rem",
          "slug": "30"
        },
        {
          "name": "Step 4",
          "size": "1rem",
          "slug": "40"
        },
        {
          "name": "Step 5",
          "size": "1.25rem",
          "slug": "50"
        }
      ]
    }
  }
}

{
  "version": 3,
  "settings": {
    "spacing": {
      "blockGap": true,
      "margin": true,
      "padding": true,
      "defaultSpacingSizes": false,
      "spacingSizes": [
        {
          "name": "Fluid Scale -3",
          "size": "clamp( 0.31rem, 0.11vw + 0.28rem,  0.35rem )",
          "slug": "minus-3"
        },
        {
          "name": "Fluid Scale -2",
          "size": "clamp( 0.47rem, 0.16vw + 0.42rem,  0.53rem )",
          "slug": "minus-2"
        },
        {
          "name": "Fluid Scale -1",
          "size": "clamp( 0.71rem, 0.25vw + 0.63rem,  0.79rem )",
          "slug": "minus-1"
        },
        {
          "name": "Fluid Scale +/- 0 (Base)",
          "size": "clamp( 1.06rem, 0.37vw + 0.95rem,  1.19rem )",
          "slug": "base"
        },
        {
          "name": "Fluid Scale +1",
          "size": "clamp( 1.20rem, 0.85vw + 0.94rem,  1.48rem )",
          "slug": "plus-1"
        },
        {
          "name": "Fluid Scale +2",
          "size": "clamp( 1.34rem, 1.5vw + 0.89rem,  1.86rem )",
          "slug": "plus-2"
        },
        {
          "name": "Fluid Scale +3",
          "size": "clamp( 1.86rem, 3.7vw + -0.05rem,  2.32rem )",
          "slug": "plus-3"
        }
      ]
    }
  }
}

参考：Everything you need to know about spacing in block themes

typography

settings.typography プロパティはタイポグラフィ（文字の調整）に関する設定です。

{
  "version": 3,
  "settings": {
    "typography": {
      "customFontSize": true,
      "defaultFontSizes": true,
      "dropCap": true,
      "fontStyle": true,
      "fontWeight": true,
      "letterSpacing": true,
      "lineHeight": false,
      "textAlign": true,
      "textColumns": false,
      "textDecoration": true,
      "textTransform": true,
      "writingMode": false
    }
  }
}

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": []
    }
  }
}

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Primary",
          "slug": "primary",
          "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "fontFamily": "Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif"
        },
        {
          "name": "Monospace Code",
          "slug": "monospace-code",
          "fontFamily": "ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"
        },
        {
          "name": "System Font",
          "slug": "system-font",
          "fontFamily": "system-ui, sans-serif"
        }
      ]
    }
  }
}

:root{
  --wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --wp--preset--font-family--secondary: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --wp--preset--font-family--monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --wp--preset--font-family--system-font: system-ui, sans-serif;
}

.has-primary-font-family {
  font-family: var(--wp--preset--font-family--primary) !important;
}

.has-secondary-font-family {
  font-family: var(--wp--preset--font-family--secondary) !important;
}

.has-monospace-code-font-family {
  font-family: var(--wp--preset--font-family--monospace-code) !important;
}

.has-system-font-font-family {
  font-family: var(--wp--preset--font-family--system-font) !important;
}

{
  "version": 3,
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "name": "Primary",
          "slug": "primary",
          "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "fontFamily": "'Spectral', serif",
          "fontFace": [
            {
              "fontFamily": "Spectral",
              "fontStyle": "normal",
              "fontWeight": "300",
              "src": ["file:./assets/fonts/Spectral/Spectral-Light.ttf"]
            },
            {
              "fontFamily": "Spectral",
              "fontStyle": "italic",
              "fontWeight": "300",
              "src": ["file:./assets/fonts/Spectral/Spectral-LightItalic.ttf"]
            },
            {
              "fontFamily": "Spectral",
              "fontStyle": "normal",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/Spectral/Spectral-Regular.ttf"]
            },
            {
              "fontFamily": "Spectral",
              "fontStyle": "italic",
              "fontWeight": "400",
              "src": ["file:./assets/fonts/Spectral/Spectral-Italic.ttf"]
            },
            {
              "fontFamily": "Spectral",
              "fontStyle": "normal",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/Spectral/Spectral-Bold.ttf"]
            },
            {
              "fontFamily": "Spectral",
              "fontStyle": "italic",
              "fontWeight": "700",
              "src": ["file:./assets/fonts/Spectral/Spectral-BoldItalic.ttf"]
            }
          ]
        }
      ]
    }
  }
}

my-block-theme
├── assets
│   └── fonts
│       └── Spectral
│           ├── OFL.txt
│           ├── Spectral-Bold.ttf
│           ├── Spectral-BoldItalic.ttf
│           ├── Spectral-ExtraBold.ttf
│           ├── Spectral-ExtraBoldItalic.ttf
│           ├── Spectral-ExtraLight.ttf
│           ├── Spectral-ExtraLightItalic.ttf
│           ├── Spectral-Italic.ttf
│           ├── Spectral-Light.ttf
│           ├── Spectral-LightItalic.ttf
│           ├── Spectral-Medium.ttf
│           ├── Spectral-MediumItalic.ttf
│           ├── Spectral-Regular.ttf
│           ├── Spectral-SemiBold.ttf
│           └── Spectral-SemiBoldItalic.ttf
・・・中略・・・
└── theme.json

:root {
  --wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --wp--preset--font-family--secondary: 'Spectral', serif;
}

.has-primary-font-family{
  font-family: var(--wp--preset--font-family--primary) !important;
}
.has-secondary-font-family{
  font-family: var(--wp--preset--font-family--secondary) !important;
}

{
  "version": 3,
  "settings": {
    "typography": {
      "defaultFontSizes": true,
      "fluid": false,
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "13px"
        },
        {
          "name": "Medium",
          "slug": "medium",
          "size": "20px"
        },
        {
          "name": "Large",
          "slug": "large",
          "size": "36px"
        },
        {
          "name": "Extra Large",
          "slug": "x-large",
          "size": "42px"
        }
      ]
    }
  }
}

:root {
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: 20px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 42px;
}

.has-small-font-size{
  font-size: var(--wp--preset--font-size--small) !important;
}

.has-medium-font-size{
  font-size: var(--wp--preset--font-size--medium) !important;
}

.has-large-font-size{
  font-size: var(--wp--preset--font-size--large) !important;
}

.has-x-large-font-size{
  font-size: var(--wp--preset--font-size--x-large) !important;
}

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": true
    }
  }
}

:root {
  --wp--preset--font-size--small: 13px;
  --wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.682), 20px);
  --wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.586), 36px);
  --wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 1.93), 42px);
}

{
  "version": 3,
  "settings": {
    "typography": {
      "fluid": {
        "minViewportWidth": "600px",
        "maxViewportWidth": "1200px"
      }
    }
  }
}

{
  "version": 3,
  "settings": {
    "typography": {
      "defaultFontSizes": false,
      "fontSizes": [
        {
          "name": "Small",
          "size": "1rem",
          "slug": "sm"
        },
        {
          "name": "Medium",
          "size": "1.25rem",
          "slug": "md"
        },
        {
          "name": "Large",
          "size": "1.5rem",
          "slug": "lg"
        }
      ]
    }
  }
}

{
  "version": 3,
  "settings": {
    "typography": {
      "defaultFontSizes": false,
      "fluid": {
        "minViewportWidth": "600px",
        "maxViewportWidth": "1200px"
      },
      "fontSizes": [
        {
          "name": "Small",
          "size": "1rem",
          "slug": "sm",
          "fluid": false
        },
        {
          "name": "Medium",
          "size": "1.25rem",
          "slug": "md",
          "fluid": {
            "min": "1rem",
            "max": "1.5rem"
          }
        },
        {
          "name": "Large",
          "size": "1.5rem",
          "slug": "lg",
          "fluid": {
            "min": "1.25rem",
            "max": "2rem"
          }
        }
      ]
    }
  }
}

:root {
  --wp--preset--font-size--sm: 1rem;
  --wp--preset--font-size--md: clamp(1rem, 1rem + ((1vw - 0.375rem) * 1.333), 1.5rem);
  --wp--preset--font-size--lg: clamp(1.25rem, 1.25rem + ((1vw - 0.375rem) * 2), 2rem);
}

useRootPaddingAwareAlignments

settings.useRootPaddingAwareAlignments プロパティは、WordPress がテーマの水平方向のパディングスタイルを設定するためのもので、styles.spacing.padding と連動します（スタイル設定）。

useRootPaddingAwareAlignments のデフォルト値は false です。

true に設定すると、制約付きレイアウト（※）のグループブロックにルートパディングが追加され、ネストされた全幅ブロックはグループの外側に広がります。false に設定すると、パディングはサイト全体のラッパーに適用され、全幅ブロックはコンテナーの外側に広がりません。

※制約付きレイアウト（constrained layout）とは、その中にネストされたブロックがレイアウトのコンテンツ幅を尊重し、その外側に広がらないようにするレイアウトタイプです。

また、ルートパディングとは、Web ページのルート要素（WordPress テーマの場合は body 要素）に適用されるパディングのことです。

この設定を使用する場合、styles.spacing.padding は CSS のショートカットではなく、常にオブジェクト形式として設定し、top, right, bottom, leftの値は別々に宣言する必要があります (これは他のパディングの使用には適用されず、ルートレベルにのみ適用されます)。

以下は設定例です。

{
  "version": 3,
  "settings": {
    "useRootPaddingAwareAlignments": true
  },
  "styles": {
    "spacing": {
      "padding": {
        "top": "0px",
        "right": "2rem",
        "bottom": "0px",
        "left": "2rem"
      }
    }
  }
}

• Use Root Padding Aware Alignments
• Full-Width Blocks and Root Padding in WordPress 6.1

blocks

theme.json のほとんどの設定では、プロパティをグローバルレベルで設定するので、その設定はサポートするすべてのブロックに適用されます。

settings.block プロパティを使うことで、ブロックレベルで設定を制御して（グローバル設定を上書きして）個々のブロックに対してタイポグラフィ、色、スペーシングなどの設定を行うことができます。

以下の例では、グローバルに適用されるカスタムカラーパレットを作成し、次に blocks プロパティを使ってカバーブロックにのみ表示される、カバーブロック用のカスタムカラーパレットを作成します。

この例では、まず以下のカスタムカラーパレットを作成します。これはグローバルに適用され、すべてのブロックのカラーピッカーで使用できます。

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#177517",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#ffffff",
          "name": "Contrast",
          "slug": "contrast"
        }
      ]
    }
  }
}

例えば、上記で作成したカスタムカラーパレットの色（テーマの色として表示される緑と白）を使用して、段落ブロックとカバーブロックで背景色（オーバーレイ）とテキストの色を設定します。

カバーブロックだけではピンク色のカラーパレットを使用したいので、settings.blocks[core/cover].color.palette をターゲットにしてカスタムカラーの配列を渡すことで、カバーブロックだけのカラーパレットを設定します。

以下のようにカバーブロックだけに適用するカラーパレットの設定（18〜35行目）を追加します。

標準のカバーブロックは core/cover（namespace/slug）になります。

ブロック設定はグローバル設定と同じ構造です。グローバルレベルでは settings.color ですが、ブロックレベルでは settings.blocks[core/cover].color になります。

blocks[core/cover] は blocks.core/cover のことですが、スラッシュが入っているのでブラケットで記述しています。

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#177517",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#ffffff",
          "name": "Contrast",
          "slug": "contrast"
        }
      ]
    },
    "blocks": {
      "core/cover": {
        "color": {
          "palette": [
            {
              "color": "#f05fc9",
              "name": "Base",
              "slug": "base"
            },
            {
              "color": "#f8ebf4",
              "name": "Contrast",
              "slug": "contrast"
            }
          ]
        }
      }
    }
  }
}

ブラウザーでウィンドウを更新すると、上記 blocks プロパティの設定によりカバーブロックには新しい色が表示されますが、段落ブロックはグローバルの設定が適用されるので変わりません。

上記はカラーパレットの例ですが、すべての設定において blocks プロパティを使ってブロックごとに設定を制御することができます。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/button": {
        "border": {
          "radius": true
        }
      },
      "core/image": {
        "lightbox": {
          "allowEditing": true
        }
      },
      "core/pullquote": {
        "border": {
          "color": true,
          "radius": true,
          "style": true,
          "width": true
        }
      }
    }
  }
}

lightbox

settings.lightbox は、画像をクリックしたときに画像を拡大するライトボックス機能を有効にします。

この設定は WordPress 6.4 以降でのみ使用可能で、画像ブロック (core/image) でのみ機能します。

※ 現時点では、settings プロパティ直下（settings.lightbox）で設定した場合は機能しません（エラーにはなりませんが）。settings.blocks.core/image.lightbox で設定します。

ライトボックス設定は画像ブロックに固有のものであるため、現時点では、settings.block プロパティを使って画像ブロック (core/image)をターゲットにします。

今後、変更になる可能性があります。

lightbox プロパティは、設定可能な以下の2つのネストされたプロパティを持つオブジェクトです。

以下はデフォルトです。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/image": {
        "lightbox": {
          "allowEditing": true
        }
      }
    }
  }
}

デフォルトでは、allowEditing が true なので、画像ブロックを選択すると、インターフェース（ツールバー）に [クリックで拡大] オプションが表示されます。

※ ドキュメントではサイドバーのインスペクターに[クリックで拡大] が表示されるとなっています。

[クリックで拡大] を選択すると、ライトボックス機能が有効になります。解除するには右端のアンリンクのアイコンをクリックします。

サイト全体でライトボックス機能を有効に

サイト全体で画像ブロックのライトボックス機能を有効にするには、settings.blocks.core/image.lightbox.enabled を true に設定します。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/image": {
        "lightbox": {
          "enabled": true
        }
      }
    }
  }
}

上記を設定すると、デフォルトで全ての画像ブロックのライトボックス機能が有効になります。個々の画像ブロックでは、リンクを解除することでライトボックス機能を個別に無効にできます。

ライトボックス機能の編集を無効に

デフォルトでは、インターフェース（この時点ではツールバー）に [クリックで拡大] オプションを表示して、ユーザーが画像ブロックごとに有効・無効を切り替えられます。

ユーザーによる編集を禁止するには、settings.blocks.core/image.lightbox.allowEditing を false に設定します。

{
  "version": 3,
  "settings": {
    "blocks": {
      "core/image": {
        "lightbox": {
          "allowEditing": false
        }
      }
    }
  }
}

shadow

settings.shadow プロパティでは現在、カスタムのシャドウプリセットを作成できます。

この場合のシャドウは、CSS box-shadow（ボックスシャドウ）を指し、text-shadow（テキストシャドウ）ではありません。

settings.shadow プロパティには、以下の2つの設定（プロパティ）があります。

以下はデフォルトの settings.shadow プロパティです。

{
  "version": 3,
  "settings": {
    "shadow": {
      "defaultPresets": true,
      "presets": [
        {
          "name": "Natural",
          "slug": "natural",
          "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
        },
        {
          "name": "Deep",
          "slug": "deep",
          "shadow": "12px 12px 50px rgba(0, 0, 0, 0.4)"
        },
        {
          "name": "Sharp",
          "slug": "sharp",
          "shadow": "6px 6px 0px rgba(0, 0, 0, 0.2)"
        },
        {
          "name": "Outlined",
          "slug": "outlined",
          "shadow": "6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)"
        },
        {
          "name": "Crisp",
          "slug": "crisp",
          "shadow": "6px 6px 0px rgba(0, 0, 0, 1)"
        }
      ]
    }
  }
}

上記により、ブロックスタイルで直接使用したり、ユーザーがインターフェイスから選択したりできる以下のシャドウのデフォルトプリセットが登録されています。

• Natural
• Deep
• Sharp
• Outline
• Crisp

シャドウはボタン、画像、アイキャッチ画像、カバー、カラムのコアブロックでサポートされています。

すべてのプリセットと同様、WordPress は登録されたシャドウごとに CSS カスタムプロパティを生成します。シャドウプリセットの名前（スラッグ）は --wp--preset--shadow--{$slug} です。

以下は、デフォルトのシャドウプリセット用に生成された CSS カスタムプロパティの例です。

:root{
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
}

シャドウがサポートされているブロックでは、「枠線と影」のパネルにコントロールが表示されます。

「ドロップシャドウ」をクリックすると、プリセットのシャドウが表示されるので、選択して適用することができます。

シャドウを無効にする

デフォルトのシャドウは、通常、背景が白または非常に薄いグレーのテーマでのみうまく機能します。

テーマで別の色を使用している場合やデフォルトのシャドウが気に入らない（テーマ用に特別にデザインしたシャドウのみを使用したい）場合は、これらのシャドウを削除することができます。

デフォルトのシャドウを無効にするには、settings.shadow.defaultPresets を false に設定します。

{
  "version": 3,
  "settings": {
    "shadow": {
      "defaultPresets": false
    }
  }
}

カスタム シャドウプリセットの追加

settings.shadow.presets プロパティを使用して任意の数のカスタム シャドウを登録できます。

presets プロパティは、シャドウオブジェクトを格納するための配列で、各シャドウオブジェクトには、以下のの3つのプロパティを指定します。

以下は独自のシャドウを登録する例です。この例では、登録したシャドウのみを使用するように、defaultPresets を false に設定しています。

{
  "version": 3,
  "settings": {
    "shadow": {
      "defaultPresets": false,
      "presets": [
        {
          "name": "Small",
          "slug": "sm",
          "shadow": "1px 1px 2px 0 rgb(0 0 0 / 0.1)"
        },
        {
          "name": "Medium",
          "slug": "md",
          "shadow": "2px 2px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.2)"
        },
        {
          "name": "Large",
          "slug": "lg",
          "shadow": "4px 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.3)"
        }
      ]
    }
  }
}

上記の例では、デフォルトのシャドウプリセットを無効にし、独自のプリセットを3つ登録したので、以下のようにエディターで画像「ドロップシャドウ」をクリックすると、3つのオプションが表示されます。

以下は管理画面 [外観] > [エディター] でサイトエディターのスタイルブックのデザインタブでボタンブロックでシャドウを確認する例です。

styles プロパティで適用

theme.json で styles プロパティ を使ってボックスシャドウを適用することもできます。

ボックスシャドウは styles.blocks.blockname.shadow で適用します。

以下はブロックのスタイル設定を使って、全てのアイキャッチ画像（core/post-featured-image）にデフォルトのプリセットのシャドウ（var:preset|shadow|natural）を適用する例です。

7行目の shadow の値には CSS 構文で "var(--wp--preset--shadow--natural)" のように指定することもできますが、var:preset|shadow|natural の構文の方が良いです。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "styles": {
    "blocks": {
      "core/post-featured-image": {
        "shadow": "var:preset|shadow|natural"
      }
    }
  }
}

以下は要素のスタイル設定を使って、ボタン要素に presets プロパティで別途登録したカスタムシャドウプリセット（lg）を適用する例です。

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "shadow": {
      "defaultPresets": false,
      "presets": [
        {
          "name": "Small",
          "slug": "sm",
          "shadow": "1px 1px 2px 0 rgb(0 0 0 / 0.1)"
        },
        {
          "name": "Medium",
          "slug": "md",
          "shadow": "2px 2px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.2)"
        },
        {
          "name": "Large",
          "slug": "lg",
          "shadow": "4px 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.3)"
        }
      ]
    }
  },
  "styles": {
    "elements": {
      "button": {
        "shadow": "var:preset|shadow|lg"
      }
    }
  }
}

background

settings.background プロパティを使用すると、ブロックに背景画像を設定するコントロールの表示を制御できます。

現時点でサポートされているブロックはグループブロックのみのようです。

settings.background プロパティでは以下の2つの設定をサポートしています。各プロパティでは、コントロールを有効または無効にすることができ、真偽値 (true または false) を受け入れます。

以下は settings.background プロパティのデフォルトです。

但し、appearanceTools が true に設定されている場合、backgroundImage と backgroundSize プロパティの両方は自動的に true になります。

{
    "version": 3,
    "settings": {
      "background" : {
        "backgroundImage": false,
        "backgroundSize": false
      }
  }
}

例えば、以下のように backgroundImage と backgroundSize プロパティの両方を true に設定するか、または appearanceTools を true に設定すると、

{
    "version": 3,
    "settings": {
      "background" : {
        "backgroundImage": true,
        "backgroundSize": true
      }
  }
}

グループブロックでは、背景画像を設定するコントロールが表示されます。

以下はグループブロックを選択した場合に、スタイルタブに表示される背景画像のコントロール（背景画像を追加）の例です。

背景画像オプションの「サイズ」を選択すると、位置（background-position）とサイズ（background-size）のコントロールが表示されます。

以下は、「背景画像を追加」で画像を指定して追加し、サイズを「cover」に設定して、位置をドラッグして調整して背景画像として表示した例です。

スタイルの適用

従来のテーマでは全てのスタイルをスタイルシートから設定していましたが、最新の WordPress では、テーマのほとんど（あるいは全て）のスタイルを theme.json ファイルから設定することができます。

この標準システムを使用すると、外観 > エディター > スタイル にも反映され、その管理画面にアクセスできるユーザーは、テーマのスタイルと連携して変更を加えることもできます。また、必要に応じて、外観 > エディター > スタイル から直接テーマをデザインすることもできます。

theme.json は、次の 3 つの異なるレベルでスタイルをサポートしています。

• Root（グローバル）→ styles プロパティ直下（ルート要素）
• Elements → styles.elements（要素レベル）
• Blocks → styles.blocks（ブロックレベル）

また、現時点で theme.json で使用可能なスタイルプロパティには以下のようなものがあります。

{
  "version": 3,
  "styles": {
    "color": {
      "text": "#666666",
      "background": "#ebf5ea"
    }
  }
}

body {
  background-color: #ebf5ea;
  color: #666666;
}

:root :where(body) {
  background-color: #ebf5ea;
  color: #666666;
}

{
  "version": 3,
  "styles": {
    "spacing": {
      "padding": {
        "top": "0",
        "bottom": "0",
        "left": "2rem",
        "right": "2rem"
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "text": "#ffffff",
          "background": "#2f602b"
        },
        "border": {
          "radius": "6px"
        }
      }
    }
  }
}

.wp-element-button, .wp-block-button__link {
  background-color: #2f602b;
  border-radius: 6px;
  color: #ffffff;
}

:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: #2f602b;
  border-radius: 6px;
  color: #ffffff;
}

<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex">
  <div class="wp-block-button">
    <a class="wp-block-button__link wp-element-button">Button</a>
  </div>
</div>

<button class="wp-element-button">ボタン</button>
<a class="wp-element-button">リンク</a>

{
  "version": 3,
  "styles": {
    "elements": {
      "button": {
        "color": {
          "text": "#ffffff",
          "background": "#2f602b"
        },
        "border": {
          "radius": "6px"
        },
        ":hover": {
          "color": {
            "background": "#3e7b38"
          }
        }
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/image": {
        "border": {
          "radius": "8px"
        }
      }
    }
  }
}

.wp-block-image img {
  border-radius: 8px;
}

:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder) {
  border-radius: 8px;
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/pullquote": {
        "typography": {
          "fontSize": "2.25rem"
        },
        "color": {
          "text": "orange"
        },
        "elements": {
          "cite": {
            "typography": {
              "fontSize": "0.875rem"
            }
          }
        }
      }
    }
  }
}

:root :where(.wp-block-pullquote) {
  color: orange;
  font-size: 2.25rem;
}

:root :where(.wp-block-pullquote cite) {
  font-size: 0.875rem;
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/button": {
        "variations": {
          "outline": {
            "border": {
              "color": "green",
              "style": "solid",
              "width": "2px"
            },
            "color": {
              "text": "green"
            }
          }
        }
      }
    }
  }
}

プリセットの使用（参照）

settings プロパティで登録（定義）した独自のカラー、フォントサイズ、フォントファミリー、間隔サイズなどのカスタムプリセットを styles プロパティで参照して使用することができます。

基本的にプリセットは、ユーザーが UI から選択するために登録するオプションで、CSS カスタムプロパティにマップされます 。

例えば、カスタムフォントサイズの登録ではプリセットを settings.typography.fontSizes に追加します。WordPress は、これらのフォントサイズをそれぞれ取得し、--wp--preset--font-size-{$slug} という名前の CSS カスタムプロパティを作成します。

フォントサイズ以外にも、サポートされているさまざまな機能のプリセットを登録でき、WordPress は登録されたすべてのプリセットに対して、--wp--preset-{$feature}-{$slug} という名前で CSS カスタムプロパティを作成します。

プリセットの参照

theme.json で標準のプリセットを参照するには、var:preset|$feature|$slug という構文を使用できます。

※ CSS 構文を使用して、var( --wp--preset--{$feature}--{$slug} ) で参照することもできますが、var:preset|$feature|$slug 構文の方がうまく機能し、管理画面のインターフェイス全体で常に正しく表示されます。そのため、CSS 構文は実際に CSS を記述するときに使用します。

プリセットをスタイルとして適用

プリセットは settings プロパティとして登録されるので、ユーザー インターフェイスで選択できますが、テーマのデフォルトデザインの一部として使用する場合は、スタイルとして適用する必要があります。

例えば、カスタムカラーパレットに base、contrast、primary、primary-hover というスラッグの色のプリセットを登録して、次のようなスタイルを適用する場合、

• サイトの背景色には、base プリセットを使用
• サイトのメインの文字色には、contrast プリセットを使用
• サイトのリンクの色には、primary プリセット、ホバー時の色は primary-hover プリセットを使用

theme.json でプリセットを参照するには、var:preset|$feature|$slug という構文を使用できるので、base プリセットの色は var:preset|color|base になります。

そのため、以下のコードでカスタムカラーパレットのプリセットをスタイルに適用できます。

{
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        {
          "color": "#f6f6f6",
          "name": "Base",
          "slug": "base"
        },
        {
          "color": "#333333",
          "name": "Contrast",
          "slug": "contrast"
        },
        {
          "color": "#19653b",
          "name": "Primary",
          "slug": "primary"
        }
        ,
        {
          "color": "#059b49",
          "name": "Primary Hover",
          "slug": "primary-hover"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "text": "var:preset|color|contrast",
      "background": "var:preset|color|base"
    },
    "elements": {
      "link": {
        "color": {
          "text": "var:preset|color|primary"
        },
        ":hover": {
          "color": {
            "text": "var:preset|color|primary-hover"
          }
        }
      }
    }
  }
}

サイトの背景色とメインの文字色はデザイン全体に適用されるグローバルスタイルとしてルート要素に設定し、リンクは要素のスタイルとして elements プロパティに設定しています。

その際に、色の値としてプリセットを参照しています。

上記を設定すると、例えば、以下のように背景色が薄いグレー、文字色は黒、リンクの色は緑色で表示されます。

カスタム プリセットの参照

settings.custom プロパティで作成した CSS カスタムプロパティをカスタムプリセットと呼びます。

これらは、標準プリセットと比較して異なる命名規則を使用します。具体的にはカスタムプリセットを参照するには、var:preset の代わりに var:custom を使います。

例えば、settings.custom プロパティを使って、以下のような line-height 関連の CSS カスタムプロパティを登録した場合、

{
  "version": 3,
  "settings": {
    "custom": {
      "lineHeight": {
        "xs": "1",
        "sm": "1.25",
        "md": "1.5",
        "lg": "1.75"
      }
    }
  }
}

WordPress は、エディターとフロントエンドで以下の CSS カスタムプロパティとして生成します。

:root {
  --wp--custom--line-height--xs: 1;
  --wp--custom--line-height--sm: 1.25;
  --wp--custom--line-height--md: 1.5;
  --wp--custom--line-height--lg: 1.75;
}

これらを styles プロパティで参照するには、var:custom|$feature|$slug 構文を使います。

以下は、上記カスタムプリセットで登録された md の行の高さのサイズをルート（グローバル）レベルのデフォルトの行の高さとして適用する例です。

{
  "version": 3,
  "settings": {
    "custom": {
      "lineHeight": {
        "xs": "1",
        "sm": "1.25",
        "md": "1.5",
        "lg": "1.75"
      }
    }
  },
  "styles": {
    "typography": {
      "lineHeight": "var:custom|line-height|md"
    }
  }
}

利用可能なプリセット

WordPress には、プリセットを登録できる機能がいくつかあります。

これらのプリセットは対応する以下の設定ドキュメントで見つけることができます 。

• Color (palette)
• Shadow (presets)
• Spacing (spacingScale, spacingSizes)
• Typography (fontSizes, fontFamily)
• Custom

カスタム CSS

styles プロパティの css プロパティを使用すると、サイトにカスタム CSS を追加することができます。

但し、大量のカスタム CSS を追加する必要がある場合などには適していません（大量のスタイルを記述した外部スタイルシートの読み込みの代わりにはなりません）。

基本的には、前述の要素やブロックのスタイル設定では対応できない場合に、テーマに少量の CSS を追加するために使用できます。

また、JSON ファイルに記述するため、CSS は改行なしで1行に記述する必要があり、CSS の記述は二重引用符 " で囲まれているため、CSS に含める二重引用符もエスケープする必要があります。

生成される CSS は WordPress が生成する他の CSS と同様、フロントエンド側では head 要素内の <style id='global-styles-inline-css'>〜</style> に出力されます。

head 要素内の style 要素には以下の順序で出力されます（後から出力される方が優先度が高くなります）。

1. グローバル スタイル
2. カスタマイザーからの CSS
3. サイト全体のカスタム CSS
4. ブロックごとのカスタム CSS

サイト全体のカスタム CSS

サイト全体のカスタム CSS は、styles プロパティ直下に文字列として追加します。文字列には、任意の有効な CSS と任意の CSS セレクターを含めることができます。

以下はサイト全体のカスタム CSS の例です。良い例ではありませんが、以下のように css プロパティに値として CSS（セレクタとスタイル）を記述します。

{
  "version": 3,
  "styles": {
    "css": "p.red, p.red a {color:red} h3.blue {color:blue}"
  }
}

上記を記述すると以下の CSS が出力されます。このような使い方はあまりないかと思います。

p.red, p.red a {color:red} h3.blue {color:blue}

サポートされている「要素」でのカスタム CSS

以下は elements プロパティを使ったサポートされている要素でのカスタム CSS の例です。

この例では link プロパティを使って a 要素にスタイルを設定しています。

前述の styles プロパティ直下に css プロパティを指定する場合と異なり、この場合は link プロパティを使っているのでセレクター部分は WordPress が自動的に生成します。そのため、スタイルの内容（プロパティと値）のみを記述します。

{
  "version": 3,
  "styles": {
    "elements": {
      "link": {
        "css": "color: red"
      }
    }
  }
}

上記により以下のような CSS が出力され、ボタン以外の全てのリンクの文字色が赤になります。。

:root :where(a:where(:not(.wp-element-button))){
  color: red
}

ブロックのスタイルバリエーションのカスタム CSS

ブロックのスタイルバリエーションにもカスタム CSS を使用できます。

以下はボタンブロック（core/button）に variations プロパティを使って、輪郭（outline）のスタイルバリエーションを設定する例です。

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/button": {
        "variations": {
          "outline":{
            "css":"border:2px solid orange; color: green"
          }
        }
      }
    }
  }
}

但し、上記の例の場合、以下のようにカスタム CSS を使わなくても border プロパティと color プロパティで同じことが可能です。

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/button": {
        "variations": {
          "outline": {
            "border": {
              "color": "orange",
              "style": "solid",
              "width": "2px"
            },
            "color": {
              "text": "green"
            }
          }
        }
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/post-title": {
        "css": "text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.2);"
      }
    }
  }
}

:root :where(.wp-block-post-title) {
  text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.2);
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/post-title": {
        "css": "letter-spacing: 3px;"
      }
    }
  }
}

:root :where(.wp-block-post-title) {
  letter-spacing: 3px;
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/post-title": {
        "typography": {
          "letterSpacing" : "3px"
        }
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/table": {
        "css": "color:#666 & th{ background:#f5f5f5; color:#222 }"
      }
    }
  }
}

.wp-block-table > table {
  color: #666
}

.wp-block-table > table th {
  background: #f5f5f5;
  color: #222
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/image": {
        "css": " img {border:5px solid #ccc;}"
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/image": {
        "css": "& img {border:5px solid #ccc;}"
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/image": {
        "css": "&.cap-inside figcaption { translate: 10px -2.5rem; color: #ffffff; }"
      }
    }
  }
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/heading": {
        "css": "&:not(.no-shadow) {text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.2);}"
      }
    }
  }
}

:root :where(.wp-block-heading:not(.no-shadow)) {
  text-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.2);
}

{
  "version": 3,
  "styles": {
    "blocks": {
      "core/paragraph": {
        "css": ".star::before {content:'★'; margin-right: 5px;}"
      }
    }
  }
}

:root :where(p.star::before) {
  content: '★';
  margin-right: 5px;
}

:root :where(p.star)::before{
  content: '★';
  margin-right: 5px;
}