Using Additional CSS in WordPress Block Themes

The great advantage of working with block themes vs. classic themes is that you can build your designs visually through the WordPress site editor. However, there are times when WordPress meets a simple design need (for example, adding ::before and ::after quote marks to a blockquote) and makes a mountain of a molehill.

One helping tool here is the slightly obscure ability to add custom CSS directly to individual blocks via Additional CSS. While there are multiple places to include custom CSS in WordPress – adding a class to a block, using a separate stylesheet, or using the Customizer’s Additional CSS section – the block-level Additional CSS feature gives us a precision tool for specific block enhancements.

Who and what is Additional CSS for?

The Additional CSS feature in the WordPress block editor is designed for users with basic CSS knowledge who wish to customize a block appearance through the site editor, without modifying theme files. It replaces the CSS “customizer” feature in classic themes (although you can still access this if you really want to, at /wp-admin/customize.php).

The Additional CSS feature is mostly for manual overrides or one-off changes that the block editor and/or theme.json don’t support right now. Unlike theme customizations that affect your entire site, block-level CSS targets only the selected block instance, meaning it is only used when the block exists on a page or post.

Highlights:

1. No main selector needed in Additional CSS for blocks – WordPress applies your CSS to the selected block automatically
2. Use & for pseudo-elements and nested selectors – Use for targeting ::before, ::after, and child elements
3. Media queries may not work reliably (in my test) – Use theme-level CSS for responsive adjustments
4. Consider CSS functions – clamp(), min(), and max() can provide responsive behavior without media queries

Why use block-scoped CSS?

Using Additional CSS within a block offers several advantages over site-wide styling:

• Content-specific design: Useful for quick, one-off design tweaks that don’t warrant a new block variation or a section style.
• Safe experimentation: Test styling changes. Block-scoped CSS won’t break existing designs or affect other pages.
• Performance optimization: Styles only load when the specific block type is present on a page, reducing unnecessary CSS overhead compared to loading all possible block styles globally.

For a more in-depth look at adding CSS and JavaScript to WordPress blocks, check out Brian Coords video on that topic.

How to find the additional CSS feature in WordPress

The Additional CSS option is located in the block editor but isn’t immediately visible.

1. Open the WordPress site editor (Appearance > Editor)
2. Select any block in your template or design Look for the block settings panel on the right side of your screen
3. Scroll down to find the “Advanced” section
4. Click to expand the “Advanced” dropdown
5. You’ll see an “Additional CSS” textarea

The textarea is where you’ll write your custom CSS code for that specific block.

Aside: I’ll speak for all web designers and say we kinda hate how Additional CSS stuffs our programming language of choice into an obscure, hard to find box with no code formatting.

How to write CSS for individual blocks

The description for this tool tripped me up initially: “Add your own CSS to customize the appearance of the [specific] block. You do not need to include a CSS selector, just add the property and value.” There should be a link to a resource that has more detail here since, usually, if we want to add custom CSS, it’s because we want to do something more complex with nested styles and not just modify a base default.

The point is, don’t use a selector for the main block. WordPress automatically applies your styles to the selected block.

For example, if you want to style a blockquote, instead of writing:

/* this won't work */
.wp-block-quote {
    color: red;
}

/* this won't work */
.wp-block-quote {
    color: red;
}

You write:

/* yay! your quote is now a brilliant red color */
color: red;

/* yay! your quote is now a brilliant red color */
color: red;

Working with pseudo-elements and nested selectors

For pseudo-elements like ::before and ::after, or to target child elements, use the & symbol to reference the current block and parent selector:

color: red;
quotes: "\201C""\201D""\2018""\2019";
&::before {
    content: '\201C';
}
& :where(p:last-of-type)::after {
    content: '\201D';
}
& :where(cite) {
    border-top: 1px solid #BEBEC0;
}

color: red;
quotes: "\201C""\201D""\2018""\2019";

&::before {
    content: '\201C';
}

& :where(p:last-of-type)::after {
    content: '\201D';
}

& :where(cite) {
    border-top: 1px solid #BEBEC0;
}

The & symbol is a preprocessor feature (from Sass/SCSS and Less) rather than standard CSS, and WordPress’s block editor processes this syntax for us.

• Pseudo-elements (&::before, &::after)
• Pseudo-classes (&:hover, &:focus)
• Nested selectors (& p, & .custom-class)

The media query fumble

I assumed that I could add responsive behavior to a block as well like this:

border: 0 !important;
position: relative;
margin-block: 1.5rem;
&::before {
    content: '\201C';
    top: -1.75rem;
    left: -1.25rem;
}
@media (max-width: 768px) {
    &::before {
        top: -2.55rem;
        left: .55rem;
    }
}

border: 0 !important;
position: relative;
margin-block: 1.5rem;

&::before {
    content: '\201C';
    top: -1.75rem;
    left: -1.25rem;
}

@media (max-width: 768px) {
    &::before {
        top: -2.55rem;
        left: .55rem;
    }
}

But, I was wrong. Although media queries are supported in the block editor, there may be some nuances and occasional issues where media queries behave inconsistently.

For now, if media queries inside block-level Additional CSS don’t behave as expected, it’s recommended to add those styles globally (in the theme Additional CSS or stylesheets) until native support is added.

Split the difference

After discovering this limitation, here’s the working approach:

Block Additional CSS (for base styles):

border: 0 !important;
quotes: "\201C""\201D""\2018""\2019";
position: relative;
margin-block: 1.5rem;
&::before {
    content: '\201C';
    font-size: min(max(4rem, 5vw), 8rem);
    font-family: Georgia, Times New Roman, Serif;
    color: #4271d750;
    position: absolute;
    top: -1.75rem;
    left: -1.25rem;
}
// add the closing quote mark after the last paragrph
& :where(p:last-of-type)::after { 
    content: '\201D';
}

border: 0 !important;
quotes: "\201C""\201D""\2018""\2019";
position: relative;
margin-block: 1.5rem;

&::before {
    content: '\201C';
    font-size: min(max(4rem, 5vw), 8rem);
    font-family: Georgia, Times New Roman, Serif;
    color: #4271d750;
    position: absolute;
    top: -1.75rem;
    left: -1.25rem;
}

// add the closing quote mark after the last paragrph
& :where(p:last-of-type)::after { 
    content: '\201D';
}

Use the global theme Additional CSS (Appearance > Customize > Additional CSS):

@media (max-width: 768px) {
    .wp-block-quote::before {
        top: -2.55rem;
        left: .55rem;
    }
}

@media (max-width: 768px) {
    .wp-block-quote::before {
        top: -2.55rem;
        left: .55rem;
    }
}

Where does additional CSS go when changes are saved?

Additional CSS added through the block editor – such as custom classes specified for individual blocks – is saved in the block’s attributes within the WordPress database.

The actual CSS code that styles these custom classes is not written to theme.json unless you manually include it OR use a helpful plugin like Create Block Theme to write changes to the theme.

The site editor now shows a version history of style changes made on the fly in the editor, allowing us to restore to a previous version if we make a mess of things.

Should you use Additional CSS in a block or in a theme?

I would think of Additional CSS as utility CSS, reserved for temporary or minimal style tweaks that don’t call for a new block variation.

Block Theme refresher

If you are building custom block themes I recommend looking into Full Site Editing from Carolina Nymark, the Block Theme Academy, now FREE and hosted by Mike McAlister at Ollie.com, and learn.wordpress.org.

Without learning about how and why the site editor works the way it does, you’ll find it much harder to adapt a classic theme development approach to the block editor. Block themes can be incredibly flexible, but they do require a shift in approach.

Many ways to design and build

There’s no single way to do block themes “right” and you don’t have to employ a complex build process (I don’t). Start anywhere and experiment.

Additional CSS at the block level works well for styling specific blocks across your site without editing theme files. It’s ideal for making one-off changes to a core block appearance (like all quote blocks or all button blocks) that you can’t yet accomplish in theme.json or in the style editor. Scoping CSS to a specific block avoids generating monstrous global theme CSS since those styles will only be inlined if the block exists on a rendered page.

Have questions or thoughts? Please share your comments below!