Skip to content

Block Support: Add min-height block support#33970

Closed
ramonjd wants to merge 9 commits intoadd/height-block-supportfrom
add/minimum-height-block-support
Closed

Block Support: Add min-height block support#33970
ramonjd wants to merge 9 commits intoadd/height-block-supportfrom
add/minimum-height-block-support

Conversation

@ramonjd
Copy link
Copy Markdown
Member

@ramonjd ramonjd commented Aug 10, 2021

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).

@aaronrobertshaw aaronrobertshaw force-pushed the add/height-block-support branch from 6303040 to 0cf5fff Compare August 13, 2021 01:30
@ramonjd ramonjd force-pushed the add/minimum-height-block-support branch 2 times, most recently from 6ef129c to 4b6cbde Compare August 13, 2021 02:32
@aaronrobertshaw aaronrobertshaw force-pushed the add/height-block-support branch from 0cf5fff to 433ce14 Compare August 16, 2021 00:16
@ramonjd ramonjd force-pushed the add/minimum-height-block-support branch 2 times, most recently from 7f0884c to 480d908 Compare August 16, 2021 01:11
@ramonjd
Copy link
Copy Markdown
Member Author

ramonjd commented Aug 17, 2021

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

@aaronrobertshaw aaronrobertshaw force-pushed the add/height-block-support branch from 433ce14 to 36aceb3 Compare August 27, 2021 02:06
@ramonjd ramonjd force-pushed the add/minimum-height-block-support branch from 480d908 to 209dd1c Compare August 27, 2021 10:10
@ramonjd ramonjd force-pushed the add/minimum-height-block-support branch from 209dd1c to 6341854 Compare August 31, 2021 03:06
* Update forked dependency to fix typescript error

* Temporary: create new npm cache

* Point to react-native-gesture-handler fork tag

* Temporary: new npm cache for build-plugin-zip.sh

* Revert "Temporary: new npm cache for build-plugin-zip.sh"

This reverts commit b04adb2.

* Revert "Temporary: create new npm cache"

This reverts commit ab60daa.
@ramonjd
Copy link
Copy Markdown
Member Author

ramonjd commented Jan 19, 2022

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
Copy link
Copy Markdown
Contributor

andrewserong commented Jan 19, 2022

@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
Copy link
Copy Markdown
Member Author

ramonjd commented Feb 18, 2022

Closing. See comments over at #32499 (comment)

@andrewserong
Copy link
Copy Markdown
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants