In WordPress 6.2, a new minimum height block 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 feature has been added, with the Group and Post Content blocks opted-in by default. For themes using the
appearanceTools feature in
theme.json, the control will be available in the inspector controls, under Dimensions. It is not exposed by default, and users can access the control via the Dimensions panel’s menu. (#45300)
The feature allows users to set a Group or Post Content block to have a minimum height, similar to the control that exists for the Cover block. An example use case is to ensure that a post content area has a minimum height, forcing a footer area to render lower on the page, even if a page has little content. For this reason, it can be quite useful to use viewport relative units when setting minimum height, e.g.
100vh for a block that takes up the entire height of the viewport.
Setting the minimum height for the Stack variation of the Group block is also useful when combined with the new vertical alignment tools added in 6.2 introduced in this Gutenberg PR, as it allows users to align the blocks within the minimum height of the Stack to be at the
bottom positions within the block, or for the blocks to be aligned via
How to add
minHeight support to a theme
There are two ways to add support for the
minHeight setting to a block theme. The simplest is to opt in to the
appearanceTools setting, which automatically enables several design tools (read more in the Developer Handbook).
For themes that wish to have more granular control over which UI User interface tools are enabled, the
minHeight dimensions support can be opted into by setting
theme.json. For example:
For styling blocks globally,
minHeight can also be set either within the global styles interface, or within
theme.json. For example, the Post Content block can be set to have a minimum height of
70vh by setting
How to add
minHeight support to a custom block
In the block’s
block.json file, add the
supports.dimensions.minHeight property, and set it to
true to enable the minimum height control. For static blocks, the
min-height CSS Cascading Style Sheets. rule will be saved as an inline style to post content. For dynamic blocks, the
min-height rule will be injected into the
style attribute returned as part of a call to
get_block_wrapper_attributes. For more information on outputting block supports in dynamic blocks, read the entry in the Developer Handbook.
Props to @bph and @webcommsat for review.