Spacing & Typography fields' output CSS doesn't support value_pattern, prefix, suffix

[daviedR]

Hi Ari,

Why Spacing & Typography fields output CSS doesn't support value_pattern, prefix, and suffix?
We might want to add !important as suffix, or maybe calc() as the value_pattern.

[aristath]

This one is a bit weird...

Those are fields that return arrays of values.
The spacing control should work, I agree. that one is a bug.
However, on the typography field things get a bit more complicated.
The problem is that the arguments are passed-on to all properties.
suffix & prefixes will be added to font-size, line-height, font-family and so on.
Value_pattern would mess font-families completely and would only make sense in some of the control's sub-values.

Any ideas on how we could differentiate those and make things more modular?
I'm open to suggestions, but I also don't want this to get too complicated... The KISS rule applies everywhere.

[Jaessun]

Hi,

I stumbled across this issue as I too would like to use value_pattern with the typography field and thought of a solution:

As the theme_mod for the typography field is an array of key-values, couldn't we use the placeholder in the value_pattern like an array?

Say for example that I want to calculate the font-size, then it would look like this:

'output' => array(
    array(
        'element' => '.my-element'
    ),
    array(
        'element' => '.my-element',
        'property' => 'font-size',
        'value-pattern' => "calc($['font-size']em / 2)"
    ),
);

All the typography properties would apply to .my-element like normal except the font-size that is overridden with the value_pattern.

I don't know if it would be easy to implement or even simple enough to respect the KISS but keep in mind this is a simple suggestion.

[aristath]

Fixed in 3.0

You should now be able to use something like this:

'output' => array(
	array(
		'element' => '.my-element'
	),
	array(
		'element'       => '.my-element2',
		'property'      => 'font-size',
		'value_pattern' => 'calc($ / 2)',
		'choice'        => 'font-size',
	),
);

[bawright]

Hey @aristath, choice is working, but I'm not able to get the value-pattern part of this working.

Also, any particular reason why you're using value-pattern instead of value_pattern for consistency?

[aristath]

That was just a typo, fixed it in the above comment.
Try using value_pattern