I’ve spent way too many hours refactoring custom block attributes just to let a client change a simple width or height. If you’ve been in the Gutenberg trenches, you know the drill: custom inspector controls, inconsistent UI, and CSS that feels like it’s held together with duct tape. Thankfully, the WordPress 7.0 Dimensions Support update finally brings some sanity to the block API, allowing us to ditch the bespoke code for standardized controls.
Historically, when a block needed width or height controls, we had to implement them as custom attributes with a manual editor UI. This fragmentation meant that every block felt different and there was no clean way to handle these values via theme.json. Consequently, global styles remained a mess for anything related to layout dimensions. WordPress 7.0 changes the game by making width and height first-class citizens of the block supports system.
Native Width and Height Block Support
To opt into these new features, you no longer need to build a custom InspectorControls component in React. Specifically, block authors can now simply toggle these supports inside block.json. If you are already familiar with PHP-only block registration, this makes your life even easier.
{
"supports": {
"dimensions": {
"width": true,
"height": true
}
}
}Once you’ve opted in, WordPress automatically handles the UI in the Dimensions panel and handles the CSS serialization for you. Furthermore, you can define default values directly in your theme.json, allowing for a much cleaner cascade of styles across your site. This is a massive win for performance as it reduces the amount of redundant CSS we ship to the browser.
Dimension Size Presets: The Real MVP
The addition of dimensionSizes is probably my favorite part of the WordPress 7.0 Dimensions Support enhancements. Instead of letting users type in arbitrary pixel values—which inevitably breaks layouts—we can now provide a curated set of presets. This mirrors how typography and spacing work, ensuring design consistency.
You define these presets in your theme.json settings:
{
"settings": {
"dimensions": {
"dimensionSizes": [
{
"name": "Standard",
"slug": "standard",
"size": "480px"
},
{
"name": "Wide",
"slug": "wide",
"size": "720px"
}
]
}
}
}WordPress will generate CSS custom properties following the --wp--preset--dimension-size--{slug} convention. Therefore, if you have fewer than 8 presets, the editor shows a sleek slider. If you have more, it switches to a dropdown to keep the sidebar from looking like a cockpit. This is exactly the kind of technical precision the platform needed to handle modern WordPress environments.
Summary Table of Changes
| Feature | block.json key | theme.json key |
|---|---|---|
| Width Support | supports.dimensions.width | settings.dimensions.width |
| Height Support | supports.dimensions.height | settings.dimensions.height |
| Dimension Presets | — | settings.dimensions.dimensionSizes |
Look, if this WordPress 7.0 Dimensions Support stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days.
Refactor Your Blocks Today
Transitioning to native supports isn’t just about following the latest trend; it’s about future-proofing your codebase. By leveraging the standardized WordPress 7.0 Dimensions Support, you ensure that your blocks play nicely with Global Styles and the Site Editor. For deeper technical details, I highly recommend checking out the official PR #71905 and the updated theme.json reference on GitHub. Happy coding, and may your build steps always pass on the first try.
