【theme.json】フォントサイズの設定方法

各ブロックにオリジナルのフォントサイズを設定

fluidを使った可変サイズの指定方法もありますが、こちらでは紹介していません。

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "name": "Small",
                    "slug": "small",
                    "size": "clamp(0.75rem, 0.661rem + 0.45vw, 0.875rem)"
                },
                {
                    "name": "Medium",
                    "slug": "medium",
                    "size": "1rem"
                },
                {
                    "name": "Large",
                    "slug": "large",
                    "size": "clamp(1.25rem, 0.893rem + 1.79vw, 1.75rem)"
                },
                {
                    "name": "Extra Large",
                    "slug": "x-large",
                    "size": "clamp(1.875rem, 1.339rem + 2.68vw, 2.625rem)"
                }
            ]
        }
    }
}

JSON

ブロックにデフォルトのフォントサイズを設定する

h2タグなどにsettingsで設定したフォントサイズをデフォルトで適用させたい場合は、以下のように記述します。

{
    "version": 3,
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "settings": {
        "typography": {
            "fontSizes": [
                {
                    "name": "Small",
                    "slug": "small",
                    "size": "clamp(0.75rem, 0.661rem + 0.45vw, 0.875rem)"
                },
                {
                    "name": "Medium",
                    "slug": "medium",
                    "size": "1rem"
                },
                {
                    "name": "Large",
                    "slug": "large",
                    "size": "clamp(1.25rem, 0.893rem + 1.79vw, 1.75rem)"
                },
                {
                    "name": "Extra Large",
                    "slug": "x-large",
                    "size": "clamp(1.875rem, 1.339rem + 2.68vw, 2.625rem)"
                }
            ]
        }
    },
    "styles": {
        "blocks": {
            "core/group": {
                "elements": {
                    "h2": {
                        "typography": {
                            "fontSize": "var(--wp--preset--font-size--x-large)"
                        }
                    }
                }
            }
        }
    }
}

JSON

※”core/group”を”core/heading”に変更すると、以下のCSSが出力され上手く機能しない。

/* 上手く機能するコード */
h2.wp-block-heading {
    font-size: var(--wp--preset--font-size--x-large);
}

/* 実際に出力されるコード */
.wp-block-heading h2 {
    font-size: var(--wp--preset--font-size--x-large);
}

CSS

この対処法についてご存知の方は、お問い合わせまたはXでご連絡頂けますと幸いです。