WordPress 7.0’s “Design Agility” theme is a cluster of new blocks and new block-support tools. None of them is dramatic on its own, but together they close real gaps — and a few will change how you build pages.

Block-level custom CSS

The headline design change: you can now apply custom CSS to an individual block, right in the editor. No more registering a class, switching to your stylesheet, and reloading. Select a block, open its Advanced panel, and write CSS scoped to that block.

It is granular control without leaving the editor. For one-off tweaks it is a real time-saver; for systematic styling, theme.json is still the right home.

New blocks

WordPress 7.0 ships several new blocks:

• Headings block — a single block with variations for every heading level, quick toggling in the sidebar inspector, fast transforms, and a presence in both the search and slash inserters.
• Breadcrumbs block — automatically reflects the site’s navigational hierarchy, and can be placed globally in site parts like the theme header. New filters let developers add, remove, or modify the trail, and control which taxonomy and terms appear.
• Navigation block — easier insertion, Interactivity support for pattern editing and contentOnly, and improved presentation of “bound” page items.
• Video embed Cover block — videos can now be embedded as section backgrounds inside the Cover block.
• Icons block and a Playlist block with CSS inheritance also ship in 7.0.

The Gallery block gets a lightbox

The Gallery block now has built-in lightbox support with a slideshow option. Create a gallery, click the link icon, and choose “enlarge on click” — visitors get a proper lightbox with no plugin. Another whole category of plugin made unnecessary by Core.

Paragraph columns and dimension tools

Two block-support upgrades are worth knowing:

The Paragraph block gains a columns layout — text in a <p> can now be arranged in columns, via new <p> block supports.

The Dimensions support is substantially expanded. 7.0 adds height and width block support, typography text-indent support in paragraphs, dimension presets, and pseudo-element support on the core/button block for :hover, :focus, :focus-visible, and :active at the theme.json level.

{
  "styles": {
    "blocks": {
      "core/button": {
        "css": "&:hover { transform: translateY(-2px); }",
        ":focus-visible": { "outline": "2px solid currentColor" }
      }
    }
  }
}

Preset dimension values can now be defined in theme.json for supports like width, height, and min-height — so a block’s variations can share the same values instead of every block hard-coding them. For theme authors, this is the kind of change that makes a design system actually maintainable.

What’s next

These are the editor-facing tools. The next tutorial goes under the hood — the new developer APIs in 7.0: PHP-only block registration, the Interactivity API’s new watch() function, DataViews and DataForms, and the Block Bindings iterations.