T2 Minimum Height Block Support
Adds a custom support for setting the minimum height of a block as an
alternative to the native Gutenberg minimum height support
(supports.dimensions.minHeight
in block.json
).
In contrast to the native implementation, the custom support works with
css classes, and does not allow the user to enter fixed height values
(i.e. in px or em).
For blocks that support T2 Minimum Height, a BlockHeightControl
is
added to InspectorControls
in the block editor. The author can use this
control to select from a range of height sizes.
The default height sizes are none
, small
, medium
and large
. Alternatively,
you can define your own height sizes in block.json
.
The selected height size is added to supported blocks
as a class name: t2-min-height-<size>
. The actual minimum height must be
defined by developers in the block css.
Example 1: Default height sizes
When setting supports.t2MinHeight
to true
, the default height sizes are
used: none
, small
, medium
, large
.
block.json
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my/block",
"title": "My Block",
"description": "My awesome block description",
"category": "design",
"supports": {
"t2MinHeight": true
}
}
Example 2: Custom height sizes
You can also define your own height sizes in an array.
block.json
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my/block",
"title": "My Block",
"description": "My awesome block description",
"category": "design",
"supports": {
"t2MinHeight": [
{
"value": "none",
"label": "None"
},
{
"value": "xs",
"label": "XS"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
},
{
"value": "xl",
"label": "XL"
}
]
}
}
Example 3: Support for other blocks
You can also add support for core and external blocks in t2.json
t2.json
{
"t2/min-height": {
"blocks": [
"core/group",
"core/columns"
]
}
}