Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a minHeight block support under dimensions #45300

Merged
merged 11 commits into from
Nov 3, 2022

Conversation

andrewserong
Copy link
Contributor

@andrewserong andrewserong commented Oct 26, 2022

Dependencies

What?

Add a minHeight block support feature that sits under Dimensions in the block editor inspector and in global styles.

This PR builds on the good earlier work by @aaronrobertshaw in #32499 which looked at adding in a height block support feature, and the work by @ramonjd on min-height block support in #33970.

Why?

I think we might be at a point where adding min-height will be really useful, so let's revisit it now that we've got the style engine in 😄

Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. As raised in #45117 having control over minimum height could be particularly useful for blocks like Post Content when used in page layouts, and in the Group block and its Row and Stack variations.

Issues that might be resolved or partially resolved by including this block support

How?

  • This PR mostly includes or builds on changes in the earlier preceding PRs (kudos Aaron and Ramon), but uses the style engine now.
  • Add a dimensions key to the block supports and to the style object in block attributes, and a minHeight property. (I avoided the __experimental prefix for now, since we've been pretty settled on dimensions in earlier explorations, but can re-instate it if folks prefer)
  • For now, use a simple UnitControl for the minimum height input
  • Include minHeight in the list of controls enabled by the appearance tools opt-in

Testing Instructions

  1. In a post, add a Group block with a paragraph or two within it.
  2. From the dimensions panel click to expose the Minimum height control and test that it works as expected.
  3. In global styles, try adjusting the Group block's minimum height at the block level.
  4. In a single or page template, try adjusting the minimum height of the Post Content block — it should result in being able to set a minimum height — this will likely be useful to use with vh units.

Screenshots or screencast

Post Content block Group block
image image

@andrewserong andrewserong added [Type] Enhancement A suggestion for improvement. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Oct 26, 2022
@andrewserong andrewserong self-assigned this Oct 26, 2022
@github-actions
Copy link

github-actions bot commented Oct 26, 2022

Size Change: +443 B (0%)

Total Size: 1.28 MB

Filename Size Change
build/block-editor/index.min.js 169 kB +289 B (0%)
build/block-library/index.min.js 192 kB +28 B (0%)
build/blocks/index.min.js 49.9 kB +18 B (0%)
build/edit-site/index.min.js 58.2 kB +108 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/style-rtl.css 15.8 kB
build/block-editor/style.css 15.8 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 126 B
build/block-library/blocks/audio/theme.css 126 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 394 B
build/block-library/blocks/group/editor.css 394 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 880 B
build/block-library/blocks/image/editor.css 880 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.04 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 2.19 kB
build/block-library/blocks/navigation/style.css 2.18 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 501 B
build/block-library/blocks/post-comments-form/style.css 501 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 282 B
build/block-library/blocks/post-template/style.css 282 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 282 B
build/block-library/blocks/query-pagination/style.css 278 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.2 kB
build/block-library/editor.css 11.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.3 kB
build/block-library/style.css 12.3 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/components/index.min.js 203 kB
build/components/style-rtl.css 11.3 kB
build/components/style.css 11.3 kB
build/compose/index.min.js 12.2 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16.1 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 34.1 kB
build/edit-post/style-rtl.css 7.33 kB
build/edit-post/style.css 7.32 kB
build/edit-site/style-rtl.css 8.37 kB
build/edit-site/style.css 8.35 kB
build/edit-widgets/index.min.js 16.7 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/editor/index.min.js 43.6 kB
build/editor/style-rtl.css 3.6 kB
build/editor/style.css 3.59 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.95 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.33 kB
build/primitives/index.min.js 944 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.77 kB
build/shortcode/index.min.js 1.53 kB
build/style-engine/index.min.js 1.48 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@@ -136,6 +136,20 @@ final class WP_Style_Engine {
),
),
),
'dimensions' => array(
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good top-level label.

Carry on.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Side note: I'm working on a PR that will allow us to extend base style definitions

Nothing to do here. I think having a set of definitions for dimensions: { width, height, ... } in the base set of definitions makes sense 👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the time comes, after testing this branch and so on, what do you think about splitting the style engine additions into a dependency PR?

I'm just thinking of the need for unit tests and how to avoid bloating this PR.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what do you think about splitting the style engine additions into a dependency PR?

Thanks for taking a look!

Absolutely, I'm all for splitting this up into component parts to make the merge and review process easier. It's super easy for these new block support addition PRs to become unwieldy 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Splitting this up a bit sounds like a solid plan. Might make tracking down when individual blocks had their bespoke controls moved over to this block support easier as well.

@ramonjd
Copy link
Member

ramonjd commented Oct 27, 2022

This is testing well manually.

2022-10-27.14.51.56.mp4

Love the fact that I can add 100vh to a template to force full height

2022-10-27.14.55.46.mp4

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work @andrewserong, nicely done 👍

Overall this tests very well.

I did find one small issue around not being able to skip serialization though and left an inline comment on that.

lib/compat/wordpress-6.2/class-wp-theme-json-6-2.php Outdated Show resolved Hide resolved
packages/block-editor/src/hooks/style.js Outdated Show resolved Hide resolved
@@ -136,6 +136,20 @@ final class WP_Style_Engine {
),
),
),
'dimensions' => array(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Splitting this up a bit sounds like a solid plan. Might make tracking down when individual blocks had their bespoke controls moved over to this block support easier as well.

@andrewserong
Copy link
Contributor Author

Thanks for reviewing and testing @ramonjd and @aaronrobertshaw!

I'll make a start splitting out the style engine changes into a separate PR as I think that'll be the logical thing to land first (the ability to output min-height). Will update here as I go 👍

@andrewserong
Copy link
Contributor Author

Update: I've split out the style engine changes and opened up a separate PR for just that part (with tests) over in #45334

@andrewserong
Copy link
Contributor Author

andrewserong commented Oct 31, 2022

Update: here's how the feature currently looks in the post editor:

2022-10-31 15 31 54

@WordPress/gutenberg-design does this look like an acceptable MVP for adding in a min-height block support feature? To recap:

  • This PR seeks to add in a minimum height block support that sits under Dimensions and is hidden by default. It behaves in a similar way to the control in the cover block, but can be used on the Group block and its Row and Stack variations, and the Post Content block
  • To begin with, it uses a simple UnitControl component as the control and doesn't yet add in the resizeable box — the idea being that we would implement a simple control to begin with, and can look at more complex interactions in follow-ups
  • Minimum height will be a useful setting to be used in conjunction with sticky positioning (being explored separately in [WIP] Layout: Explore adding in sticky position support within the layout support #44723) — for example, imagine being able to set a minimum height on a sticky or fixed heading or footer
  • Being able to set minimum height will also be useful when go to add in vertical alignment controls for the Stack block (with a height set, the align controls will be more visibly useful)

My goal for this PR is to try to get to a good MVP for the feature. We can then land it in smaller more easily reviewed PRs (beginning with #45334), and once the MVP of the feature is in, we can then explore more UI follow-ups like adding in a slider next to the UI control / exploring whether a resizeable box is suitable, too.

Note: I'm AFK on and off this week and next, so no rush on this one!

@aaronrobertshaw
Copy link
Contributor

To begin with, it uses a simple UnitControl component as the control and doesn't yet add in the resizeable box — the idea being that we would implement a simple control to begin with, and can look at more complex interactions in follow-ups

When it comes time to address the resizable box side of this new support, one option may be to leverage a block popover for the resizable box. An example can be found in #41153 where I explored exactly this for the Cover block's min-height. While that PR is a little stale now, it only needs the block popover to have the ability not to be constrained to the viewport to be ready for review.

@jasmussen
Copy link
Contributor

Nice, this is cool. I'm assuming we can separately refactor Cover to use this?

Screenshot 2022-10-31 at 12 45 56

And can we call it "Min. height" and add a slider to the mix?

Dimensions

Same componentry as font size, in other words:

Screenshot 2022-10-31 at 12 49 50

Nice enhancement.

@beafialho
Copy link

Thank you for your work on this! I think this could definitely help solve the original issue.

One important question that arises is if we set a specific minimum height (700px for instance) on desktop, would that adjust for mobile? Where naturally 700px height would be too much.

@paaljoachim
Copy link
Contributor

paaljoachim commented Oct 31, 2022

Very nice!

Testing using WP 6.0.3
Twenty Twenty Two
The PR Gutenberg build.

In a page. I added the Minimum Height with 100vh.
Screenshot 2022-10-31 at 13 55 45

Checked the frontend. It looks good!

This is very helpful to have this feature added to the dimensions panel! Thank you!

@andrewserong andrewserong deleted the try/add-min-height-block-support branch November 3, 2022 02:04
@andrewserong andrewserong added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Nov 3, 2022
@github-actions github-actions bot added this to the Gutenberg 14.6 milestone Nov 3, 2022
@andrewserong
Copy link
Contributor Author

I've opened up a follow-up issue to keep track of the tasks and suggestions here: #45501 — feel free to add anything over there if anyone has any other tasks they think should be addressed!

While it's very early for 6.2, I've added a Needs Dev Note label to this one so we don't forget when the time comes for the 6.2 release, as it'll likely need a little highlighting.

@andrewserong
Copy link
Contributor Author

Update: I've opened up a follow-up PR to add in the slider alongside the unit control: #45875 — it's the end of my week now, so I very well might have missed something in that PR, but I'll test it some more on Monday.

oandregal added a commit that referenced this pull request Dec 15, 2022
@oandregal
Copy link
Member

I wanted to share that #46102 introduced a regression in the site editor that #46810 fixes, affecting this feature.

@andrewserong
Copy link
Contributor Author

Thanks for the heads-up, glad to hear it's been resolved! 🙂

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Jan 30, 2023
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Feb 1, 2023
This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. 

In this changeset:

* Adds support in `theme.json`.
* Adds support in the style engine.
* Adds support in `wp_apply_dimensions_support()`.
* Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`.
* Adds PHPUnit tests.

Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break?

Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code.

If a developer opted in to use it, it had no effect.

A search in wp.org's plugin and themes repo showed no instances of this experimental setting.

Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break.

References:
* [WordPress/gutenberg#45300 Gutenberg PR 45300]
* [WordPress/gutenberg#45334 Gutenberg PR 45334]

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.

git-svn-id: https://develop.svn.wordpress.org/trunk@55175 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Feb 1, 2023
This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. 

In this changeset:

* Adds support in `theme.json`.
* Adds support in the style engine.
* Adds support in `wp_apply_dimensions_support()`.
* Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`.
* Adds PHPUnit tests.

Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break?

Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code.

If a developer opted in to use it, it had no effect.

A search in wp.org's plugin and themes repo showed no instances of this experimental setting.

Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break.

References:
* [WordPress/gutenberg#45300 Gutenberg PR 45300]
* [WordPress/gutenberg#45334 Gutenberg PR 45334]

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.
Built from https://develop.svn.wordpress.org/trunk@55175


git-svn-id: http://core.svn.wordpress.org/trunk@54708 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Feb 1, 2023
This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. 

In this changeset:

* Adds support in `theme.json`.
* Adds support in the style engine.
* Adds support in `wp_apply_dimensions_support()`.
* Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`.
* Adds PHPUnit tests.

Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break?

Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code.

If a developer opted in to use it, it had no effect.

A search in wp.org's plugin and themes repo showed no instances of this experimental setting.

Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break.

References:
* [WordPress/gutenberg#45300 Gutenberg PR 45300]
* [WordPress/gutenberg#45334 Gutenberg PR 45334]

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.
Built from https://develop.svn.wordpress.org/trunk@55175


git-svn-id: https://core.svn.wordpress.org/trunk@54708 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@bph bph mentioned this pull request Feb 6, 2023
47 tasks
@andrewserong
Copy link
Contributor Author

Dev notes for 6.2

Note: if there's room, this dev note could potentially be combined with other design tools in a larger dev note. Draft below:


Minimum Height dimensions block support

In WordPress 6.2, a new minimum height block 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.

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 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 minHeight to a block theme. The simplest is to opt in to the appearanceTools setting, which automatically enables a number of design tools (read more in the developer handbook).

For themes that wish to have more granular control over which UI 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 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


@bph for visibility, here's a draft dev note for the minHeight dimensions block support. It could potentially be grouped together with other design tools (e.g. position support?) in a bigger dev note.

@bph bph added has dev note when dev note is done (for upcoming WordPress release) and removed Needs Dev Note Requires a developer note for a major WordPress release cycle labels Feb 28, 2023
@bph
Copy link
Contributor

bph commented Feb 28, 2023

@andrewserong thank you so much for taking care of this dev note. I am leaning towards single post dev note for visibility in the Fieldguide and because it adds so much more flexibility for themes. Would you have bandwidth to add it to the Make blog as a draft, so it can be added to the publishing queue in time for the Fieldguide deadline (later this week)? LMK, if not, and I can do it for you.

@andrewserong
Copy link
Contributor Author

Thanks @bph, here's a draft on the Make blog for minHeight: https://make.wordpress.org/core/?p=103001&preview=1&_ppp=6452826240

VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
This changeset adds the new dimension feature's PHP code for supporting minimum height in the block editor inspector and in global styles. Minimum height is quite useful for defining the minimum vertical dimensions of a block, while allowing it to expand beyond that size. 

In this changeset:

* Adds support in `theme.json`.
* Adds support in the style engine.
* Adds support in `wp_apply_dimensions_support()`.
* Renames the setting from `'__experimentalDimensions'` to `dimensions` in `wp_register_dimensions_support()`.
* Adds PHPUnit tests.

Is renaming `'__experimentalDimensions'` a backwards-compatibility (BC) break?

Though the setting has been in the code since 5.9.0, it was never wired to anything, ie it did not expose any controls or styles. Notice in `wp_register_dimensions_support()` and `wp_apply_dimensions_support()` prior to this changeset, there are inline comments as placeholders for height and width support, but no code.

If a developer opted in to use it, it had no effect.

A search in wp.org's plugin and themes repo showed no instances of this experimental setting.

Given there was no functionality attached to it (until this changeset), no change in behavior or effect from removing it, and no usage found in the plugins and themes repository, it does appear to be a BC break.

References:
* [WordPress/gutenberg#45300 Gutenberg PR 45300]
* [WordPress/gutenberg#45334 Gutenberg PR 45334]

Follow-up to [53076], [52069].

Props andrewserong, aaronrobertshaw , costdev, hellofromTonya, isabel_brison, joen, paaljoachim, mukesh27, ntsekouras, oandregal, ramonopoly.
Fixes #57582.
Built from https://develop.svn.wordpress.org/trunk@55175


git-svn-id: http://core.svn.wordpress.org/trunk@54708 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@merijnponzo
Copy link

Awesome work, will minHeight will be supported for the image block as well?

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 has dev note when dev note is done (for upcoming WordPress release) Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.