[Support request] Do Customizer settings (besides colors) generate CSS variables?

[Sam]

Use case:
Let’s say I set an option in the Customizer, like Typography > All Headings, and I set a font family and font-size. Now I want all the headings of a 3rd party forms plugin to inherit those settings.

Have my Customizer settings generated variables in GP that I can reference elsewhere in my own additional CSS to accomplish this?

I’d love to be able to declare something like:

.forms-plugin-headings-selector {
  font-family: var(--gp--all-headings--font-family);
  font-size: var(--gp--all-headings--font-size);
}

Currently, I add some base :root declarations like --default-border-radius and --default-body-font-size into Additional CSS, but so many downstream changes could be streamlined if I could make them automatically inherit settings from what I’ve done in the Customizer.

If this is not currently a thing, how do we request it as a feature? 😀

[Ying]

Hi Sam,

Unfortunately, GP doesn’t generate variables for typography.

The only variable available is the colors module at this moment.

[Lars]

Putting myself in queue on this one.

[Kyle Van Deusen]

Pulling my hair out today to try to accomplish something and THIS would TOTALLY SOLVE EVERYTHING!

+1 for making the customizer settings into CSS Variables 🙌

[Mark]

CSS Variable from customizer settings would be a great addition to GP. Lots of use cases that devs/designers could use css variables for other than color. Typography classes would be great!

[Sam]

For anyone who finds this thread in the future — Feature request has been submitted. Support this idea here: https://github.com/tomusborne/generatepress/issues/509

[Jake]

This would be a massive quality-of-life improvement for more intermediate/advanced users I think – I’d love to see it in GP/GB

[Author]

Posts