プリセットの使用（Using Presets）

プリセットとは何ですか？

基本的に、プリセットは登録するオプションであり、一般的にはユーザーがUIから選択できるもので、CSSカスタムプロパティにマッピングされます。

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

WordPress自体、テーマ、プラグイン、さらにはユーザーも、サポートされているさまざまな機能のためにプリセットを登録できます。そして、WordPressはすべての登録されたプリセットに対して--wp--preset–{$feature}-{$slug}という名前のCSSカスタムプロパティを作成します。

基本的なカスタムカラーパレットの例を見てみましょう。3つの色があります:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
            {
            "color": "#ffffff",
            "name": "Base",
            "slug": "base"
            },
            {
            "color": "#000000",
            "name": "Contrast",
            "slug": "contrast"
            },
            {
            "color": "#89cff0",
            "name": "Primary",
            "slug": "primary"
            }
            ]
        }
    }
}

これにより、WordPressがエディタとフロントエンドに出力する3つのCSSカスタムプロパティが作成されます:

body {
    --wp--preset--color--base: #ffffff;
    --wp--preset--color--contrast: #000000;
    --wp--preset--color--primary: #89cff0;
}

結局のところ、プリセットはインターフェース内でオプションを作成し、CSSカスタムプロパティを生成するための標準化された方法に過ぎません。

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

プリセットは設定として登録されるため、ユーザーインターフェースで選択可能です。しかし、テーマのデフォルトデザインの一部として使用したい場合は、スタイルとして適用する必要があります。

前のセクションのカスタムカラーパレットを基にしましょう。登録したプリセットを使用してこれらのスタイルを適用したいとします:

• サイトの背景色はbaseプリセットを使用する必要があります。
• サイトの主要なテキスト色はcontrastプリセットを使用する必要があります。
• リンクの色はprimaryプリセットを使用する必要があります。

theme.jsonでプリセットを参照するには、特別な構文を使用できます: var:preset|$feature|$slug。したがって、この場合のbase色はvar:preset|color|baseになります。

その計画を念頭に置き、この章で学んだことを使って、theme.jsonでこれを再現してみてください。あなたのコードは次のようになります:

{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
            {
            "color": "#ffffff",
            "name": "Base",
            "slug": "base"
            },
            {
            "color": "#000000",
            "name": "Contrast",
            "slug": "contrast"
            },
            {
            "color": "#89cff0",
            "name": "Primary",
            "slug": "primary"
            }
            ]
        }
    },
    "styles": {
        "color": {
            "text": "var:preset|color|contrast",
            "background": "var:preset|color|base"
        },
        "elements": {
            "link": {
            "color": {
            "text": "var:preset|color|primary"
            }
            }
        }
    }
}

フロントエンドまたはエディタでサイトをテストすると、色が正しく適用されていることがわかるはずです:

次のステップは、他のプリセットを適用したい要素やブロックを特定することです。テーマの複雑さに応じて、これは数色のカスタムカラーから数百行のJSONコードまで簡単に行えます。本当に、ここから何をするかは完全にあなた次第です。

技術的には、var( --wp--preset--{$feature}--{$slug} )のCSS構文を使用してプリセットを参照できます。しかし、WordPressのvar:preset|$feature|$slug構文ははるかに優れており、WordPress管理のインターフェース全体で常に正しく表示されます。実際にCSSを書くときのためにCSS構文を保存してください。

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

カスタム設定のドキュメントでは、「カスタム」プリセットを作成する方法を学びました。これらは登録できる非標準のCSSカスタムプロパティであり、WordPressがCSS出力を生成します。

これらは標準プリセットと比較して異なる命名規則を使用します。基本的に、標準プリセットのコードでpresetという用語を使用した場合、カスタムプリセットを扱う際にはそれをcustomに置き換えます。

例を見てみましょう。テーマデザインで行間を処理するためのCSSカスタムプロパティを登録したいとします。これをtheme.jsonファイルに追加します:

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

WordPressは、エディタとフロントエンドでこれらのカスタム行間をCSSカスタムプロパティとして生成します:

body {
    --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;
}

登録された`````md`````行間サイズをルート/グローバルレベルのデフォルト行間として適用したいとします。そのためには、`````styles.typography.lineHeight`````をターゲットにする必要があります。  
`````theme.json`````での完全なコードは次のようになります:  
``````bash
{
    "version": 2,
    "settings": {
        "custom": {
            "lineHeight": {
            "xs": "1",
            "sm": "1.25",
            "md": "1.5",
            "lg": "1.75"
            }
        }
    },
    "styles": {
        "typography": {
            "lineHeight": "var:custom|line-height|md"
        }
    }
}
`

もちろん、他のカスタム行間プリセットを使用して他の要素やブロックのスタイリングを行うこともできます。

利用可能なプリセット

WordPressには、プリセットを登録できるいくつかの機能があります。これらのプリセットは、それぞれの設定ドキュメントに見つけることができます（特定のプロパティは括弧内に記載されています）:

• 色 (palette)
• 影 (presets)
• 間隔 (spacingScale, spacingSizes)
• タイポグラフィ (fontSizes, fontFamily)
• カスタム