Block Support: Add min-height block support

[ramonjd]

Depends on Block Support: Add height block support feature, which, in turn, depends on
Dimensions Panel: Add new ToolsPanel component and update spacing supports

Related: Block Support: Add width block support feature

Description

Greetings!

This PR add minimum height block support, and builds on top of the great work in Block Support: Add height block support.

The motivation behind this addition, aside from opening up min-height to other blocks, is to achieve consolidation of the cover block controls. See: #23770 (comment)

Screenshots

block-supports-group-min-height.mp4

Types of changes

New feature: addition to block supports.

Testing

Manual testing

In group/block.json add the following to the supports object:

"__experimentalDimensions": {
    "minHeight": true
},

Then add the following to the settings object in lib/experimental-default-theme.json (or lib/theme.json once this is rebased on trunk)

"dimensions": {
    "customHeight": false,
    "customMinHeight": true
},

Create a post and add a group block. Add some inner Blocks too if you like. A paragraph, an image. They're giving them away in that inserter!

Can you see the Dimensions control panel and the minimum height control? Great!

Adjust the minimum height of the group block. Save, then view the post. The frontend should reflect your changes in the editor.

Check global in the site editor. Under By Block Type, find the group block and play around with the min-height.

Also, fennel tea is great for digestion.

Unit tests

Run from project root.

Theme.json tests

npm run wp-env run phpunit 'phpunit -c /var/www/html/wp-content/plugins/gutenberg/phpunit.xml.dist --verbose --filter stylesheet /var/www/html/wp-content/plugins/gutenberg/phpunit/class-wp-theme-json-test.php'

Style.js tests

npm run test-unit:watch packages/block-editor/src/hooks/test/style.js

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[ramonjd]

Rename the ad hoc panel, leaving two separate panels for the short term

In the interests of avoiding duplicate labels before the release, here's a copy update to the existing Cover block dimensions panel label

#34102

[ramonjd]

I came here to question the need for this support given that we can now insert custom controls in the Tools Panel, for example min-height in the Cover Block.

@andrewserong mentioned another potential use case related to #30121, where we'd want to ensure that sticky headers and footers have some height predictability. 🤷

[andrewserong]

@andrewserong mentioned another potential use case related to #30121, where we'd want to ensure that sticky headers and footers have some height predictability. 🤷

Thanks for the ping! I've only just started looking into fixed/sticky headers and footers, but I imagine it'll be useful for folks to be able to set a min-height on a fixed/sticky Group block (and its Row variation) at the very least. Also, possibly the Columns block if folks wish to avoid having to wrap Columns in a Group block?

[ramonjd]

Closing. See comments over at #32499 (comment)

[andrewserong]

I've opened up a new PR that borrows from the ideas here in #45300 now that we've got the style engine in.