New Block Support in WordPress 7.1: Minimum Width

WordPress 7.1 introduces a minWidth dimension blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. support, letting blocks opt in to setting a minimum width. This follows the same pattern as the existing minHeight support.

GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged by the repository owner. https://github.com/ issue: #76525 | PR: #76949

Background

Blocks already support several dimension properties: height, minHeight, and width. There was no matching control for a minimum width. Setting a floor on a block’s width is a common CSSCSS Cascading Style Sheets. need. For example, you may want a container or layout element to stay usable and not collapse below a certain size on smaller viewports.

Until now, achieving this required custom CSS or a custom block style, since the design tools did not expose a min-width option. This release handles it natively through a new block support.

What changed

A new minWidth feature is registered under the existing dimensions block support. When a block opts in, a “Minimum width” control appears in the Dimensions panel, alongside the existing minimum height control. The value is applied as the CSS min-width property, and it supports dimension presets (dimensionSizes) where a theme provides them.

How to use it

A block opts in through its block.json supports, the same way it opts in to minHeight:

{
	"supports": {
		"dimensions": {
			"minWidth": true
		}
	}
}

To enable the setting for all blocks that support it, use theme.json. You can turn it on directly, or through Appearance Tools:

{
	"settings": {
		"dimensions": {
			"minWidth": true
		}
	}
}

You can also set a value in theme.json, either globally or per block:

{
	"styles": {
		"dimensions": {
			"minWidth": "400px"
		},
		"blocks": {
			"core/group": {
				"dimensions": {
					"minWidth": "400px"
				}
			}
		}
	}
}

If the active theme defines dimensionSizes presets, the control offers those presets, and selecting one applies the matching --wp--preset--dimension--{slug} custom property.

Where the control appears

The minimum width control follows the same visibility rules as other optional design tools:

• In the block inspector, the control is not shown by default. A block must opt in through __experimentalDefaultControls to show it automatically. Otherwise, you reveal it from the panel’s options menu (the three-dots menu on the Dimensions panel headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.).
• In Global Styles (Site Editor), the control is shown by default.

Block-level values set in the editor override the theme defaults, following the same cascade as other block supports.

Backwards compatibility

These are additive changes. No existing blocks are broken, and no action is required for most blocks and themes. Blocks that do not opt in behave exactly as before. Themes that do not enable the setting see no change.

Summary

Layer	Key
block.json support	supports.dimensions.minWidth
theme.json setting	settings.dimensions.minWidth
theme.json style	styles.dimensions.minWidth
CSS property	min-width
Preset source	dimensionSizes (--wp--preset--dimension--{slug})

Further Reading

• PR: Block Supports: Add min width support to dimensions (#76949)
• Issue: #76525

#7-1, #blocks, #dev-notes, #dev-notes-7-1