5. Styling custom blocks

The best way of adding CSS to your custom block is to create a block specific stylesheet. This will be automatically loaded by Block Lab only when it's needed (when the relevant block is on a page), saving you from loading block styles on pages where they're not used.

Stylesheet Path

If you are using a child theme, Block Lab will always look for a stylesheet there first, and in the parent theme if nothing is found.

Your stylesheet needs to be correctly named, using the block name setting in your custom block. It should be named block-{block name}.css, and placed in:

• {theme directory}/blocks/{name}/preview.css (if in the editor)
• {theme directory}/blocks/css/preview-{name}.css (if in the editor)
• {theme directory}/blocks/preview-{name}.css (if in the editor)
• {theme directory}/blocks/{name}/block.css
• {theme directory}/blocks/css/block-{name}.css
• {theme directory}/blocks/preview-{name}.css

Block Lab will automatically detect your stylesheet and include it in both the WordPress editor when previewing the block, as well as the frontend of your website if the block is included.