Support for CSS variables

Hello,

I am used to create my own CSS variables for fluid typography, spacing and also for generating color shades. The advantage of this method is that it takes a lot of work off my shoulders because I don’t have to fiddle around responsive breakpoints that much. Font sizes and spacing is already taken care for me this way.

So this is more of a feature request than a support question.

1. Would it be possible to input custom values inside padding/margin block editor options? Specifically, I would like to input a CSS variable for responsive spacing, for example – padding-bottom: var(--space-m) right inside the gutenberg editor (For example: Container -> Spacing -> Padding).

2. Same goes for typography (font-size) option. It would be very nice if I could set the CSS variable for fluid font sizes directly in gutenberg editor (Typography -> Font size).

3. As for the colors, currently I can write the CSS variable right inside the color picker instead of HEX value. There is just one issue: the color inside color picker doesn’t reflect the CSS color variable. So, for example if I write var(--color-p-500), the color picker can’t seem to detect the exact color inside gutenberg editor. On the front-end, it works.

4. As of now, the workaround for my first 2 points (fluid typography and spacing) seems to be to apply a custom class to the given element, and specify the typography/or spacing values inside CSS customizer. So, for example, if I would like to apply responsive padding for container, I would apply a custom class to it in gutenberg editor (for example .container__spacing) and then in CSS customizer I would apply a padding: var(--space-m) for the class .container__spacing

5. Also, it would be nice if any custom CSS set in customizer would be actually reflected in Gutenberg editor. Right now, if I set the custom padding values to container (what I mentioned above), the padding is not reflected in gutenberg editor, but it works on frontend though.

Thank you!

• This topic was modified 2 years, 9 months ago by Anonymous User 20238576.

The page I need help with: [log in to see the link]