Style Block Lab 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.

In addition to block-specific stylesheets, you can also create a global block stylesheet that will style all Block Lab blocks.

Global Block Styles

Block Lab will try to enqueue a global block stylesheet under one of two conditions:

  1. You are using Gutenberg
  2. Any custom Block Lab block is used on the page

Note: These styles won’t load if you are not using any Block Lab blocks.

The global block stylesheet will be loaded if it exists in one of these places:

  • {theme directory}/blocks/blocks.css
  • {theme directory}/blocks/css/blocks.css
  • {child theme directory}/blocks/blocks.css
  • {child theme directory}/blocks/css/blocks.css

If the global block stylesheet exists in multiple places, it will only be loaded the first time it’s found. So if you’ve got one in {theme directory}/blocks/blocks.css AND {theme directory}/blocks/css/blocks.css, then second stylesheet will be ignored.

Stylesheet Path

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

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/css/block-{block name}.css, or
  • {theme directory}/blocks/block-{block 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. Always enqueuing it in the editor is intentional, so it’s there and ready in case a block is added.

Block styles are expected to load in the following order:

  1. blocks/{name}/preview.css (if in the editor)
  2. blocks/css/preview-{name}.css (if in the editor)
  3. blocks/preview-{name}.css (if in the editor)
  4. blocks/{name}/block.css
  5. blocks/css/block-{name}.css
  6. blocks/preview-{name}.css