Themeisle Docs

Appearance

What Blocks CSS Adds Beyond WordPress Block-Level CSS ​

WordPress includes a built-in CSS field for each block, and Blocks CSS adds editor capabilities on top of it. This guide explains the difference so you can decide which option fits your workflow.

What WordPress Block-Level CSS Provides ​

The WordPress block editor includes a built-in custom CSS field in each block's inspector panel. You can write CSS targeting that specific block, and WordPress applies it on the frontend.

This built-in field works well for simple CSS edits: changing a color, adjusting spacing, or overriding a single property on a block.

What Blocks CSS Adds ​

Blocks CSS replaces the basic CSS input field with a full code editor inside the block inspector. In addition to writing custom CSS per block, you get:

  • Syntax highlighting — The editor displays your CSS with color-coded syntax, making it easier to read and edit rules.
  • CSS error linting — The editor checks your CSS for errors as you type and marks problems inline. CSS with unresolved errors is not applied until you correct or dismiss the warnings.
  • Media queries — You can write @media rules directly in the editor to apply different styles at different screen sizes.
  • Descendant element targeting — Use selector as a placeholder for the block's class, then write additional rules to target elements inside the block. The editor includes an example to illustrate:
css
selector {
    background: #000;
}

selector img {
    border-radius: 100%;
}

Blocks CSS replaces selector with the block's unique class when it applies the CSS to the page, so selector img becomes a rule that targets images inside that specific block.

Which Option Should You Use? ​

Use the WordPress block-level CSS field when:

  • You are making a simple, one-off CSS change to a block.
  • You do not need responsive styles or rules targeting elements inside the block.

Use Blocks CSS when:

  • You want syntax highlighting and live error feedback while writing CSS.
  • You need to write media queries for responsive styling.
  • You need to target elements inside a block, such as images, headings, or links.

Compatibility ​

Blocks CSS adds a CSS editor panel to the block inspector sidebar. It does not conflict with the WordPress built-in block CSS field — you can use both.

⚠️ Site Editor compatibility: Blocks CSS has limited compatibility with the WordPress Site Editor. For full Site Editor support, install Otter Blocks.

Last updated: