generatepress icon indicating copy to clipboard operation
generatepress copied to clipboard

Write specific Customizer settings to CSS variables (like colors currently are)

Open slomeli79 opened this issue 3 years ago • 10 comments

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.

Ideally, my Customizer settings generated CSS variables that I can reference elsewhere to tie external styles together into my GP-generated styling.

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.

slomeli79 avatar Feb 09 '23 15:02 slomeli79

+1 for this!

Calvin-Susan avatar Feb 09 '23 15:02 Calvin-Susan

Would be a great feature for sure!

markman77 avatar Feb 09 '23 15:02 markman77

+1 😃

tdrayson avatar Feb 09 '23 15:02 tdrayson

Yep, this would be a killer addition

jakewoods-io avatar Feb 09 '23 16:02 jakewoods-io

  • 1

larshallen avatar Feb 09 '23 17:02 larshallen

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

fernandoazarcon2 avatar Jul 27 '23 00:07 fernandoazarcon2

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

Just to add clarity to my above-mentioned forum post, I can also see benefit in being able to use pre-defined vars to set defaults in the customiser as well - so kind of the reverse of the feature suggested in this issue. It could perhaps be part of the same feature though.

My suggestion came about in response to the advent of several CSS frameworks that support Gutenberg and GenerateBlocks (Automatic CSS and Core Framework to name two). To be able to configure GP to use the fluid typography and spacing variables from these frameworks would be tremendously valuable in my opinion, as they are quite advanced and extend beyond what's currently possible in the theme without child-theme customisations.

I can see real value in both approaches.

Graphnic avatar Jul 27 '23 08:07 Graphnic

yep that is a good one

thisbit avatar Sep 06 '23 19:09 thisbit

+1 https://generate.support/topic/feature-request-use-of-vars-in-generatepress-customiser/

QuantumDevQBL avatar Oct 03 '23 12:10 QuantumDevQBL

+1 https://generate.support/topic/css-variables/#post-118628 just thought about this, and didn't thinnk about checking the GitHub repo, sorry!

jmslbam avatar Jul 06 '24 11:07 jmslbam