Gutenberg: Should we allow creating your own CSS variables via Global Styles?

[nosolosw]

Context (slack thread).

Before https://github.com/WordPress/gutenberg/pull/25301 the theme.json shape was like this:

{
  "global": {
    "presets": {
      "color": [
        { "slug": "nice-blue", "value": "some nice blue" }
      ],
      "font-size": [],
      "gradient": []
    },
    "styles": {},
    "features": {}
  }
}

The CSS variables we generate for presets follow this pattern --wp--preset--{category}--{slug} (ex: --wp--preset--color--nice-blue). The old mechanism took all categories within presets and created the proper variables without checking whether it was one of the three categories we had (color, gradient, font size) --- this was a bug. However, people used this to add their own things, like line-height presets (example 1, example 2).

After https://github.com/WordPress/gutenberg/pull/25301 this is no longer possible, as we keep a curated list of presets. This is the current shape, for reference:

{
  "global": {
    "settings": {
      "color": {
        "gradients": [ ],
        "palette": [ ],
      },
      "typography": {
        "fontSizes": [ ],
      }
    }
  }
}

People raised that they were missing some CSS variables and proposed to add some back.

---

Given that theme.json pushes theme authors to write the less CSS possible (ideally, none), this bears the question: should we formalize the old mechanism by which it's possible to generate theme-only CSS variables that can be used in the styles?

[nosolosw]

cc for thoughts: @aristath @kjellr as you were using this, @jorgefilipecosta @youknowriad @mtias

[nosolosw]

An alternative could be to add presets for the style properties we support that don't have presets yet (line-height (example), padding example) but don't surface them visually, as that resulted problematic in the previous attempts we tried. Would this be useful/enough?

Food for thought: the examples I saw were fundamentally used for typography, where you need a mix of font-size, line-height, etc to get good results. If people wanted to create a typographic scale (font base + scale) a system to create their own CSS variables would be handy, and having a curated list of things will prove not enough.

[aristath]

If people wanted to create a typographic scale (font base + scale) a system to create their own CSS variables would be handy, and having a curated list of things will prove not enough.

Agreed. It would be really convenient for theme-authors to have a single source of truth for all their default vars, and the theme.json is the logical choice.
Perhaps we could introduce customVars inside the JSON file where they can add the variables they need?

[kjellr]

If people wanted to create a typographic scale (font base + scale) a system to create their own CSS variables would be handy, and having a curated list of things will prove not enough.

Themes are inevitably going to want to add additional variables, and I agree with @aristath that they should be declared in a single document. Putting them in some sort of "custom" section would be totally fine, and would make it clear that they aren't going to be surfaced in the UI somewhere.

[paaljoachim]

We could also add a Custom CSS section to the global styles area.
Somewhat similar to the Additional CSS section in the customizer.