MENU

theme.jsonで余白を設定する方法（settings.spacing）

WordPress
  • URLをコピーしました！

WordPressのtheme.jsonファイルにsettings.spacingの設定を追加することで、ブロックの余白に関する設定を詳細にカスタマイズできます。

目次

settings.spacing

下記のコードは、settings.spacingに関する全体的な設定を示しています。この設定によって、ブロックに余白を調整させる項目の追加やオリジナルの間隔を設定することが可能です。

{
    "settings": {
        "spacing": {
            "padding": true,
            "margin": true,
            "blockGap": true,
            "customSpacingSize": true,
            "defaultSpacingSizes": true,
            "spacingScale": {
                "operator": "+",
                "increment": 10,
                "steps": 7,
                "mediumStep": 50,
                "unit": "px"
            },
            "spacingSizes": [
                {
                    "size": "40px",
                    "slug": "small",
                    "name": "small"
                },
                {
                    "size": "50px",
                    "slug": "medium",
                    "name": "medium"
                },
                {
                    "size": "70px",
                    "slug": "large",
                    "name": "large"
                }
            ],
            "units": [
                "px",
                "em",
                "rem",
                "vh",
                "vw",
                "%"
            ]
        }
    }
}
theme.json

padding

{
    "settings": {
        "spacing": {
            "padding": true
        }
    }
}
theme.json

paddingプロパティをtrueに設定すると、パディングがサポートされているブロックに対してサイドバーにパディング項目が追加され、ユーザーは自由に余白を調整できるようになります。一方、falseに設定すると、ユーザーはパディングを調整できなくなります。

margin

{
    "settings": {
        "spacing": {
            "margin": true
        }
    }
}
theme.json

marginプロパティをtrueに設定すると、マージンがサポートされているブロックに対してサイドバーにマージン項目が追加され、ユーザーは自由に余白を調整できるようになります。一方、falseに設定すると、ユーザーはマージンを調整できなくなります。

blockGap

{
    "settings": {
        "spacing": {
            "blockGap": true
        }
    }
}
theme.json

blockGapプロパティをtrueに設定すると、ギャップがサポートされているブロックに対してサイドバーにブロックの間隔項目が追加され、ユーザーは自由にブロック間の余白を調整できるようになります。一方、falseに設定すると、ユーザーはブロック間の余白を調整できなくなります。

ブロック間の余白を設定する

blockGapプロパティをtrueに設定した状態では、カラムブロックやボタンブロックなど、ギャップがサポートされているブロックの間隔を調整することができますが、ブロック同士の垂直間隔を指定するには追加の記述が必要です。

{
    "settings": {
        "spacing": {
            "blockGap": true
        }
    },
    "styles": {
        "spacing": {
            "blockGap": "20px"
        }
    }
}
theme.json

この記述で生成されるCSSは以下のとおりです。

/* エディタ */
:root :where(.is-layout-flow) > * {
    margin-block-start: 20px;
}

:root :where(.is-layout-flex) {
    gap: 20px;
}

/* フロントエンド */
:root :where(.is-layout-flow) > * {
    margin-block-start: 20px;
}

:root {
    --wp--style--block-gap: 20px;
}
CSS

フロントエンドのブロック同士の垂直間隔は、CSS変数のみ生成されるため、スタイルを自分で適用させる必要があります。

.l-article {
    &__container {
        > *:not(:first-child) {
            margin-top: var(--wp--style--block-gap);
        }
    }
}
SCSS

各ブロックごとに異なる値を設定する

styles.spacing.blockGapで設定した値は、垂直間隔と水平間隔の両方で使用されます。垂直間隔を大きめに設定した場合、水平間隔が違和感を感じるほど余白が空いてしまうことがあります。そのような場合には、各ブロックごとに異なるblockGapの値を設定することができます。

{
    "settings": {
        "spacing": {
            "blockGap": true
        }
    },
    "styles": {
        "blocks": {
            "core/columns": {
                "spacing": {
                    "blockGap": "20px"
                }
            }
        },
        "spacing": {
            "blockGap": "100px"
        }
    }
}
theme.json

customSpacingSize

{
    "settings": {
        "spacing": {
            "customSpacingSize": true
        }
    }
}
theme.json

customSpacingSizeプロパティをtrueに設定すると、水平間隔（ギャップ）コントロールに独自のカスタム値と単位を入力できるようになります。一方、falseに設定すると、決められた値からのみ間隔を設定することになります。

defaultSpacingSizes

{
    "settings": {
        "spacing": {
            "defaultSpacingSizes": true
        }
    }
}
theme.json

defaultSpacingSizesプロパティをtrueに設定すると、WordPressで提供されているデフォルトのスペースサイズを表示し、スペースサイズが上書きされないように制御できます。一方、falseに設定すると、デフォルトのスペースサイズは表示されなくなり、スペースサイズの上書きが可能になります。

デフォルトで提供されているスペースサイズは以下のとおりです。

:root {
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
}
CSS

spacingScale

{
    "settings": {
        "spacing": {
            "spacingScale": {
                "operator": "+",
                "increment": 10,
                "steps": 7,
                "mediumStep": 50,
                "unit": "px"
            }
        }
    }
}
theme.json

spacingScaleプロパティを利用すると、独自のカスタム間隔スケールを設定することができます。注意点として、defaultSpacingSizesプロパティにtrueが設定されていると上書きすることができません。

各プロパティの使い方は以下のとおりです。

プロパティの使い方
  • operator
    数値の増減を加算（+）または乗算（*）で指定します。
  • increment
    増減値を設定します。
  • steps
    スケールのステップ数を設定します。
  • mediumStep
    スケールの中央値となる値を設定します。
  • unit
    単位を指定します。

先程のコードをtheme.jsonに設定した場合は、以下のCSS変数が生成されます。

:root {
    --wp--preset--spacing--20: 20px;
    --wp--preset--spacing--30: 30px;
    --wp--preset--spacing--40: 40px;
    --wp--preset--spacing--50: 50px; /* スケールの中央値 */
    --wp--preset--spacing--60: 60px;
    --wp--preset--spacing--70: 70px;
    --wp--preset--spacing--80: 80px;
}
CSS

spacingSizes

{
    "settings": {
        "spacing": {
            "spacingSizes": [
                {
                    "size": "40px",
                    "slug": "small",
                    "name": "small"
                },
                {
                    "size": "50px",
                    "slug": "medium",
                    "name": "medium"
                },
                {
                    "size": "70px",
                    "slug": "large",
                    "name": "large"
                }
            ]
        }
    }
}
theme.json

spacingSizesプロパティを利用すると、独自のカスタム間隔を設定することができます。spacingScaleプロパティは、数値の増減値や増減方法などを設定し規則性のある値を生成していましたが、spacingSizesプロパティでは、不規則な値を生成することができます。注意点として、defaultSpacingSizesプロパティにtrueが設定されていると上書きすることができません。

各プロパティの使い方は以下のとおりです。

プロパティの使い方
  • size
    間隔の数値を設定します。
  • slug
    生成されるCSSの末尾に付与する文字列を設定します。
  • name
    エディタ上で表示される文字列を設定します。

先程のコードをtheme.jsonに設定した場合は、以下のCSS変数が生成されます。

:root {
    --wp--preset--spacing--small: 40px;
    --wp--preset--spacing--medium: 50px;
    --wp--preset--spacing--large: 70px;
}
theme.json

units

{
    "settings": {
        "spacing": {
            "units": [
                "px",
                "em",
                "rem",
                "vh",
                "vw",
                "%"
            ]
        }
    }
}
theme.json

unitsプロパティを利用すると、選択可能な単位を指定することができます。unitsプロパティで指定できる単位は「px」「em」「rem」「vh」「vw」「%」があります。

例えば、「px」「em」「rem」以外の単位を使わせたくない場合は、下記のコードを記述することでそれ以外の単位を選択させないようにできます。

{
    "settings": {
        "spacing": {
            "units": [
                "px",
                "em",
                "rem"
            ]
        }
    }
}
theme.json
WordPress

この記事が気に入ったら
いいねしてね！

よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次