Global CSS Template File

[RobStino]

When building blocks for a site, I often have css styles that are re-useable across blocks, as well as the the larger theme. An example is styling for a tile component. This tile component could have styling that includes things like border, padding, and background-color. These styles could easily be relevant to multiple blocks.

The current options for handling these global styles have flaws.

1. Include styles in each block css template file. This is not DRY.
2. Include styles in theme stylesheet. These are not loaded in the editor.
3. Include styles in preview css template file. Also not DRY.
4. Include styles in editor-styles.css and enqueue to the admin. Not DRY.

An idea for a solution is to have a global blocks.css file that is saved in the blocks folder. This file will be:

• loaded in the editor
• loaded on the frontend unconditionally.

Open to discussion, especially around issues with it, but I think this could prove very helpful.

[x5hwuk7nc6jsudcc]

Yeah, I think this would be useful. It would also help to keep block code contained as a package, separate to any theme work. I'm currently doing this using scss mixins, but there is a lot of repetition in the output code that could be dispensed with.

[mukeshpanchal27]

@RobStino It is great thought.

Global style is great option if any block needed special css then we can use parent selector to add different css for that block element only.

Also if possible add an option to remove/dequeue that global style in case of it was conflict with any theme or plugin css or end user need to add/change style as per there need.

[kienstra]

Hi @RobStino, this sounds useful, and it wouldn't be too hard. It'd probably be similar to enqueue_block_styles().