The CSS code used in the block code editor
-
Is there any reference page for the syntax of the CSS used in the code editor of blocks? I finally figured out I can change things the way I want them, but the CSS code in the code editor uses “” and {} in ways that are idiosyncratic and I know that if you mess something up, there’s no second chance. So is there a reference?
I am so happy I can finally kill all those giant padding and margins that look like crap AND maybe even control sizes of things? Dare I dream that my blog will look how I want it to again instead of how designers say it is supposed to look???
Google-fu keeps showing me ways to add Code to Blocks which is not what I want.
-
This isn’t CSS. It’s data for the block serialised as JSON and stored in an HTML comment. It’s how data that can’t be pulled directly from the HTML is stored so that it can be read when the block is loaded in the editor. There’s an explanation available here and in subsequent articles.
If you have a block that has spacing defined in this data, then editing that value directly is not going to actually change spacing. It can’t actually affect anything, because it’s not CSS. All it would do is allow the editor to read that value and use it to do something else, like add some inline CSS, or a custom class.
As to whether you can control spacing between blocks etc, this depends entirely on the theme. You’ve always been able to change this with your own CSS in Appearance > Customize > Additional CSS, but whether simpler tools are available in the editor to control this is entirely dependent on the theme. WordPress 5.7 introduced some features to allow control over spacing from within the editor, but themes still need to opt into this.
- The topic ‘The CSS code used in the block code editor’ is closed to new replies.