Use --wp--custom--spacing--small variable instead of hard coded style

[richtabor]

Is your feature request related to a problem? Please describe. If I modify the settings.custom.spacing.small value (from the initial max(1.25rem, 5vw) value — then content will not be displayed appropriately throughout the theme, as a number of spacing values are tied are set specifically to max(1.25rem, 5vw) — instead of the small custom spacing setting in theme.json.

Examples:

Here's the theme — with no change to the settings.custom.spacing.small default value:

And here's the same page, with settings.custom.spacing.small set to max(1.5rem, 10vw) (doubled).

In the screenshot above, the header-large-dark.php pattern has left/right padding values set to max(1.25rem, 5vw) within the pattern (instead of using the --wp-custom--spacing--small variable) — source.

Describe the solution you'd like:

There's not really a clean way for me to make the change without diving into the pattern markup on the page, so in essence this hard-coding of the padding value within the markup is stopping variants from being able to modify the small/outer spacing values.

If we used var(--wp--custom--spacing--small, 1.25rem) instead of max(1.25rem, 5vw) throughout the theme, then users could modify the spacing throughout the theme within theme.json, like this:

[richtabor]

Realistically, we should evaluate where it makes sense to use var(--wp--custom--spacing--outer) instead of var(--wp--custom--spacing--small).

As currently --wp--custom--spacing--small, ( or its value of max(1.25rem, 5vw)) is used everywhere.

[richtabor]

I spun out #310 based on the findings here.

We should consider that PR before deciding if the other max(1.25rem, 5vw) values (top/bottom margin and padding throughout patterns) should use the small CSS prop.