1.31.0 - A Card block that is one accessible link, Additional CSS that understands nesting, and a theme's icons in the Icon block

Three features. Card is a new block that works like a Group and can turn the whole card into one accessible link — the image, the padding, the gap between two lines. The Additional CSS box on every block now behaves like Sass: nesting works to any depth, and media queries work where they were silently dropped before. And a theme's own SVG files now appear in the Icon block — drop them in an /icon folder and they are there. A stretched-link fix comes with them.

• [NEW FEATURE] A Card block: a Group's full control set plus a Link This Card toggle. With it on the card renders as one anchor around its content, so the browser handles hover, focus, middle-click and "copy link address" rather than CSS faking them. See Card.
• [NEW FEATURE] A card can be named after a block inside it. Mark the heading, and that heading's text becomes what a screen reader announces for the card — so a pattern holds the sentence once instead of twice, and an editor who rewrites the heading renames the card with it.
• [NEW FEATURE] Link to: The post makes every card in a Query Loop link to the post it is rendering, announced as that post's own title. Nothing stores a URL; the permalink is read from block context, the same way Post Title and Read More resolve theirs.
• [BUG FIX] Stretched links now reach the whole container when there is a wrapper between the link and it. WordPress positions every constrained Group, which is the default, so a card built as an outer container holding an inner group for its padding had its click area stop at that inner group — the padding and the image did nothing. See Stretched Links.
• [NEW FEATURE] The Additional CSS field on a block now behaves like Sass. Nested rules reach the elements inside the block — & h2 { … }, or just h2 { … } — to any depth, and & can go anywhere in a selector: &:hover, &.is-active, .no-js &. See Block Additional CSS.
• [NEW FEATURE] Media queries work, wherever they are written — at the top of the box, or inside a nested rule, or inside one another. @supports, @container, @layer and @keyframes come with them.
• [NEW FEATURE] The same fix applies to the Site Editor's per-block box, under Styles > Blocks > block > Additional CSS. The site-wide Styles > Additional CSS box was never affected — WordPress prints that one as written.
• [IMPROVEMENT] The field is now a syntax-highlighted code editor rather than a plain textarea, using the editor WordPress already ships. It highlights nesting and & correctly, matches brackets, and indents as you type. Format re-indents the whole thing, one level per level of nesting.
• [IMPROVEMENT] An & inside a url() or an attribute selector is now left alone. background: url(image.png?a=1&b=2) used to have the rule split at the ampersand and mangled.
• [IMPROVEMENT] @import is dropped rather than half-understood, so a box that styles one block cannot pull in a whole remote stylesheet.
• [NEW FEATURE] A theme's own icons now appear in the Icon block. Put SVG files in the active theme's /icon folder and they show up in the Icon library under the theme's name, alongside the ones WordPress ships. Nothing to register, and a child theme replaces a parent's icon by name. See Theme Icons.
• [IMPROVEMENT] Those icons keep what WordPress would otherwise throw away. Its icon registry keeps three SVG elements and silently deletes the rest, so a grouped icon loses its position, a <circle> disappears and an outlined icon renders as nothing at all. Each file is rewritten first — groups flattened, shapes turned into paths, outlines given back their stroke — so what you drew is what appears.
• [IMPROVEMENT] A file that genuinely cannot survive that — a gradient, real text, a transparency — is left out rather than registered as a blank square, and Tools > Site Health names it and says why. wp yoko theme_icons prints the same list.
• [BUG FIX] Fixes the demo site the pull-request previews are built from saving its content as no user, which meant WordPress stripped any block CSS out of it, and passing content through wp_insert_post() unslashed, which corrupted escape sequences inside block attributes.

What changes on an existing site, for the Additional CSS box

Nothing you have written stops working. The CSS lives where WordPress puts it — in the block's own attributes, and in the Site Editor's styles — and none of that is touched. Anything that renders today renders the same way.

What changes is what starts rendering: a media query or a second level of nesting that was being silently discarded now takes effect. If a box was written months ago against the old behaviour and quietly ignored, its rules will begin to apply. It is worth a look at any block whose Additional CSS you remember fighting with.

Deactivating the plugin hands the field back to WordPress, unchanged.

What the Additional CSS box looks like

No selector is needed — declarations apply to the block itself, and anything with braces nests inside it:

padding: 2rem;

& h2 {
	margin-top: 0;

	& em { color: rebeccapurple; }
}

@media (max-width: 600px) {
	padding: 1rem;

	& h2 { font-size: 1.2rem; }
}

The editor canvas renders exactly what the front end will, as you type.

Where the field is, and who sees it

Both boxes live in the block editor, so neither exists in the classic editor or in Beaver Builder — a Beaver Builder layout still uses the module's own Advanced > CSS field. The field appears only for users who can already edit CSS, which is WordPress's own rule and is unchanged.

The block-level box is a WordPress 7.0 feature. On an older WordPress there is no box to improve and this does nothing.

Icons from the theme

Drop arrow-right.svg into wp-content/themes/<your-theme>/icon/ and the Icon block has an Arrow Right in it. icons/ works too, and a child theme wins over its parent.

Icons take the colour and size set on the block, like core's do — including outlined ones, which follow currentColor as well as filled ones do.

The Icon block itself is a WordPress 7.1 feature and lives only in the block editor. In a classic theme or a Beaver Builder module, render one in PHP:

echo wp_get_icon( 'theme/arrow-right', array( 'size' => 24 ) );

For the team

• The compiler is written twice — PHP for the front end, JavaScript for the editor preview — and both are held to the same fixture file, so the preview cannot drift from what ships.
• Rules are still emitted as :root :where( … ), which is WordPress's own shape and pins every rule at 0-1-0 specificity. Nesting deeper wins you nothing, and neither does &&; !important is the way past a theme rule that is genuinely more specific.
• One new filter, yoko_block_css_global_styles, hands you the compiled per-block CSS from the Site Editor before it is printed.
• Theme icons add four more: yoko_theme_icons_directories, yoko_theme_icons_manifest, yoko_theme_icons_collection and yoko_theme_icons_stylesheet.
• The theme's icon folder is read once and cached against the files' own names, sizes and modification times, so an icon edited in place appears on the next request with nothing to clear.