support for css custom properties

When you build a theme, there are often parts of the interface that you want to lock down before you hand it off to someone else to build the site. In my case, I want the person building the site to have full access, but there are still certain things that I would like to restrict – namely arbitrary changes to font size and content padding.

For example, I set up responsive font sizes (and a modular scale for sizes and spacing) in the stylesheet for the child theme. In this situation, the headline and button blocks are too permissive in that they allow the font size to be set to any value. For standard Wordpress blocks, I can specify a set of editor font sizes and then override the generated custom properties in the stylesheet. I wish that this were also available for the headline and button blocks. At first, I was going to request that there be an option to use the Gutenberg font size control with these GenerateBlocks blocks, but it occurred to me that support for custom properties might be a more flexible solution. Which leads me to my second problem…

While the three breakpoints and the choice of three units (px/em/%) for font sizes and spacing probably cover most cases, I still would like to use rem units for accessibility and I might also need additional breakpoints for certain containers. I could take care of this easily if I could enter custom property names in the block inspector and the customizer. This combines the ease of using GeneratePress/Blocks with the power of custom CSS.

So my request is that there be additional fields in the spacing and typography panels and in the customizer that can accept a custom property name as input and output ‘var(–theTextThatWasEntered)’ in the CSS. You might ask how this is any different than adding utility classes to a block. With classes, you need to override the css that is generated by GeneratePress/Blocks; with custom properties, the generated css is exactly what you want. Furthermore, the customizer fields are currently limited in the units they accept, so custom properties would help there, too. And since GeneratePress/Blocks is essentially the Gutenberg that developers actually need, I think that custom properties would be another way for GP/B to stand out in this market.