WordPress 7.0 introduces critical updates to its Dimensions block support system, bringing uniformity to width and height controls, and empowering themes with dimension size presets. These changes aim to streamline block customization while improving consistency across the editor.
Previously, blocks requiring width or height controls relied on custom attributes and unique editor interfaces. This approach led to fragmented user experiences and made it difficult for developers to define dimensions globally via theme.json. WordPress 7.0 addresses these issues by integrating width and height as standard block supports under the Dimensions API, aligning them with existing supports like spacing, typography, and color.
Width and Height Block Support in WordPress 7.0
Width and height are now first-class citizens within the Block API. Developers can opt-in by adding "width": true or "height": true under the dimensions key in block.json. Once activated, these controls appear in the Dimensions panel of the block inspector and the Styles panel within the Site Editor.
For example, enabling width in block.json looks like this:
{ "supports": { "dimensions": { "width": true } } }
Theme authors can define default width and height values per block type in theme.json. These defaults cascade in the editor but can be overridden at the block level:
{ "styles": { "blocks": { "core/paragraph": { "dimensions": { "width": "300px", "height": "300px" } } } } }
The flexibility extends further. Themes can globally disable width or height controls using settings:
{ "settings": { "dimensions": { "width": false } } }
Both controls respect advanced configurations like __experimentalSkipSerialization and __experimentalDefaultControls, offering granular control over serialization behavior and default UI visibility.
Dimension Size Presets for Consistency
WordPress 7.0 introduces dimension size presets, allowing themes to define named width and height options directly in theme.json. These presets provide users with a consistent, reusable palette of sizes, avoiding repetitive manual entries.
Presets are defined under settings.dimensions.dimensionSizes in theme.json:
{ "settings": { "dimensions": { "dimensionSizes": [ { "name": "Small", "slug": "small", "size": "240px" }, { "name": "Medium", "slug": "medium", "size": "480px" }, { "name": "Large", "slug": "large", "size": "720px" } ] } } }
Each preset includes three fields: name for UI labels, slug for CSS custom property generation, and size for valid CSS length values. Presets generate custom properties using the --wp--preset--dimension-size--{slug} naming convention, consistent with other theme.json presets.
Control rendering adapts based on the number of presets:
- Fewer than eight presets display a slider control.
- Eight or more presets switch to a dropdown for better UI management.
Regardless of the preset count, users retain the ability to enter custom values directly.
Backwards Compatibility and Migration
The enhancements in WordPress 7.0 are entirely additive. Blocks without dimensions support remain unaffected, and themes can opt out of presets or controls entirely. Blocks using custom width or height attributes are encouraged to migrate to the new system for consistency but are not required to do so in this release.
Dimension size presets are a new feature. Themes without them default to free-form input fields, preserving previous behaviors. Developers can begin adopting these changes incrementally without disrupting existing implementations.
What To Do
- Block Developers: Update
block.jsonto integrate width and height block supports for relevant blocks. - Theme Authors: Use
theme.jsonto define default dimensions or dimension size presets for consistency. - Site Operators: Evaluate block and theme updates to ensure compatibility with WordPress 7.0 features.
