Pattern CSS
Add a CSS editor to your blocks and patterns! Loads only where necessary. Supports adding global CSS too.
The facts
- Rating
- 5★ from 8
- Active installs
- 100+
- Price
- Free
- Last updated
- 15 Aug 2026
- Added
- Nov 2023
- Requires WP
- 6.7
- Tested up to
- WP 7.1
- Requires PHP
- 7.0
- Downloads
- 5,311
Our analysis
AI-assistedPattern CSS is a WordPress plugin designed for the Gutenberg editor, allowing users to add custom CSS to individual blocks without the need for a child theme or a bulky plugin. It features a settings panel for each block where you can input CSS that is specifically scoped to that block, ensuring that styles do not affect other elements on the page.
The plugin supports reusable patterns and offers features like smart loading, CSS minification, and the ability to see changes in real-time. It is suitable for users who want to enhance their block styling efficiently and effectively.
Best for: This plugin is best for WordPress users who want to customise block styles without extensive coding or complex setups.
What it does well
- ✓Scoped CSS ensures styles do not leak to other blocks
- ✓Supports reusable patterns for consistent styling
- ✓Real-time preview of CSS changes
- ✓Optimised and minified CSS output
- ✓Fast CSS parsing powered by WebAssembly
Where it falls short
- •No information on potential conflicts with other plugins
- •Limited details on support or documentation
Verdict
Pattern CSS offers a straightforward solution for adding custom styles to Gutenberg blocks, making it a useful tool for users looking to enhance their site's design.
From the developer
Kevin Batdorf's own description of Pattern CSS, lightly tidied.
The missing inline block CSS editor for the Gutenberg editor. Very powerful with synced patterns as well. And it pairs well with global styles.
This plugin is perfect for users looking to add CSS for blocks without needing to create a child theme, or use a bloated plugin. Client safe too. CSS won’t leak outside of the block, and only valid block CSS is persisted.
Star it on GitHub
Follow me on Twitter @kevinbatdorf
How to
- Every block will have a new “Pattern CSS” settings panel
- Open it and add any CSS. It will be scoped to the block
- To target the block directly, you must use the
[block]selector - To target any element inside the block, use the normal CSS selector
- Use
!importantto override your theme styles (use sparingly)
Global Editor
- Access global styles under the options menu (three dots) in the top right corner of the editor
- Additionaly, you can open from the Pattern CSS block editor controls
Features
- Powered by WebAssembly for fast and secure CSS parsing
- Smart loading. Only loads the CSS when the block is present
- Styles persist when changing themes
- Scopes styles to the block so that parent/sibling blocks are not affected
- It’s fast
- CSS is minified and optimized
- It’s safe. Invalid, non-spec CSS is never persisted
- Supports reusable (synced or not-synced) patterns
- See changes on the page as you make them
- Combines adjacent rules (to decrease size)
- Minifies colors and math functions to simplify according to spec
- Supports CSS nesting
Basic Example
/* Target the block directly */
[block] {
background: antiquewhite;
padding: 2rem;
}
/* Target any inner elements */
a {
text-decoration-color: burlywood;
text-decoration-thickness: 2px;
text-decoration-style: solid !important;
}
a:hover {
text-decoration-color: darkgoldenrod;
}
/* Output: */
.pcss-a1b7b016{background:#faebd7;padding:2rem}.pcss-a1b7b016 a{text-decoration-color:#deb887;text-decoration-thickness:2px;text-decoration-style:solid!important}.pcss-a1b7b016 a:hover{text-decoration-color:#b8860b}
Supports Media Queries
@media (prefers-color-scheme: dark) {
[block] {
border-color: blue;
}
}
/* Output: */
@media (prefers-color-scheme:dark){.pcss-cddaa023{border-color:#00f}}
Combines Rules
[block] {
color: red;
}
.bar {
color: red;
}
/* Output: */
.pcss-3aa0f0fc,.pcss-3aa0f0fc .bar{color:red}