Custom CSS variables

[asafm7]

Consider introducing custom CSS variables to be used across the editor and in external CSS files using the var() function.

Similar to the global colors' functionality.

[carolinan]

Hi, Can you please add more context? Is this related to extending the editor, or for use in components in the project itself? CSS variables are used extensively already.

[asafm7]

Thanks, @carolinan.

For example, in the editor, in the global styles section, being able to define a var called Global Border Radius with a value of 12px.

Then, everywhere in the editor where a border radius can be set, it will be possible to use the global variable. This way, if, for example, a decision is made to change the design from 12px to 8px it can be done from one place.

This will also allow external CSS files to use the variable, making the design easier to maintain in this regard as well.

Just like when a Primary color is changed, it is reflected on all places set to use it (including external CSS).

Maybe the variable's type is better defined by a unit (px, em etc.) rather than a property (border-radius, font-size etc.)

Please let me know if this is clearer.

Thanks again.

[carolinan]

How is this different from the existing global styles system? I personal don't think that having input fields for entering custom CSS variables would be useful for the majority of users. But I also believe that what you are describing is also already possible using the global styles. I don't think there is anything that is preventing using the preset css variables in third party CSS files.

[asafm7]

@carolinan, using the current global styles it is possible to set global styles on a block level, but not on a cross-block level.

If, for example, my design uses "soft corners" (that is, with a specific border-radius where possible) and I want it to be applied to many elements: images, buttons, embeds etc. - how can it be done using the current options?

[carolinan]

By using the "custom" setting in theme.json then adding that custom variable to the border radius of each block and element. Or by creating style variations that you can apply to multiple blocks.

If this is specific to borders please see https://github.com/WordPress/gutenberg/issues/64041

[asafm7]

Thanks, @carolinan.

I've tried adding a custom setting, but it isn't reflected in the UI.

So, if I understand correctly (correct me if I don't), what you mean is maintaining a custom code override for each relevant block.

This feels like complicating things, rather than simplifying them.

What I mean is making the custom variables available in the code.

Just like we have:

Meaning, the ability to choose a custom color or a preset color.

We can have:

I also went over the ticket you referred to and I'm now sure exactly what I mean. The tickets mention a scale (small, medium, large) rather than individual presets which aren't necessarily scale related.

[carolinan]

That it is not reflected in the UI is also already reported as a separate issue. For feature requests and bug reports to be actionable, they need to be limited in scope and specific.

[asafm7]

Thanks, @carolinan.

That it is not reflected in the UI is also already reported as a separate issue.

Can you maybe refer to this ticket?

Thanks again.

[carolinan]

I found it here :) https://github.com/WordPress/gutenberg/issues/37752

[asafm7]

Great. Thank you 🙏