WordPress 7.0 introduces the ability to add custom CSS directly to individual block instances from within the post and site editors. This closes a long-standing gap in the block styling system: while Global Styles has supported block-type-level custom CSS since WordPress 6.2, there was no built-in way to target a single specific block on a…

WordPressCore's platform is a central hub for WordPress developers and contributors, offering insights into WordPress core development, plugin development, and theme customization. Through articles, tutorials, and community forums, WordPressCore offers insights into WordPress architecture, development best practices, and contributing to the WordPress open-source project. Readers can learn about WordPress coding standards, security guidelines, and performance optimization techniques to build powerful and secure websites with WordPress.

Make WordPress Core

WordPress 7.0 adds a new `customCSS` block support that lets users apply custom CSS directly to individual block instances from the post or site editor. Previously, targeting a single block required a two-step workaround involving custom class names and the global CSS field. The new feature adds a Custom CSS input in the block inspector's Advanced panel, gated by the `edit_css` capability. CSS is stored in the block's `style` attribute under a `css` key, and at render time a unique hash-based class is generated and scoped using `:root :where()` to ensure proper cascade order after Global Styles. The support is enabled by default for all blocks, with an opt-out via `block.json`. Several core blocks like `core/freeform` and `core/html` opt out by default. Plugin and theme developers using server-side rendering should ensure their block's outermost tag is a standard HTML element.

Custom CSS for Individual Block Instances in WordPress 7.0