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