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 top, center, bottom positions within the block, or for the blocks to be aligned via space-between.
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 settings.dimensions.minHeight to true in theme.json. For example:
{
"settings": {
"dimensions": {
"minHeight": true
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 styles.blocks.core/post-content.dimensions.minHeight to 70vh in theme.json:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "70vh"
}
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.
Further reading
Props to @bph and @webcommsat for review.
#6-2, #dev-notes, #dev-notes-6-2
