Add stretch alignment to Column block. #53325
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tellthemachines
added
[Type] Enhancement
|
Size Change: +68 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
This is a great feature. Looks good in editor and frontend. 2023-08-04.16.21.19.mp4 |
andrewserong
reviewed
Aug 7, 2023
There was a problem hiding this comment.
Cool idea! Unfortunately, I'm having a bit of trouble testing this out — apologies, I'm sure I'm missing something obvious 😅
I tried the test markup in the PR description, but I'm getting a bunch of block validation errors (I think because I don't have the image files locally).
In the linked issue, there's an example of Heading + Paragraph + Buttons where the idea would be for the Buttons block to be aligned to the bottom, so I thought I'd give that a try. With this PR applied, I'm not too sure how to get it to stretch in the expected way. Here's some test markup:
Test markup
<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">A heading</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Nunc quis libero nulla. Maecenas pellentesque quam ultrices, sollicitudin mauris in, pretium dui. Nam ut aliquet nibh. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse gravida magna a faucibus dignissim. Sed at sapien est.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">More info</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">A heading</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In urna velit, congue non laoreet id, consequat at metus. Etiam lobortis consequat ante, ac feugiat tellus sollicitudin et. Integer vitae tempus tortor, ac rhoncus ante. Donec efficitur pharetra ornare. Nunc quis libero nulla. Maecenas pellentesque quam ultrices, sollicitudin mauris in, pretium dui. Nam ut aliquet nibh. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse gravida magna a faucibus dignissim. Sed at sapien est.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">More info</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">A heading</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Another paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">More info</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->With that markup, I added some background colors to the individual column blocks, and played around with setting each column to stretch, but I couldn't quite work out what stretch was doing that's different to the default state which uses flex-grow: 1 (visually, both the default vertical alignment and stretch appeared to be the same), or how to get Buttons to stick to the bottom:
2023-08-07.11.24.42.mp4
Is there a particular set of steps you had in mind for what stretch unlocks? Happy to do further testing / playing around, of course!
|
Sorry I could have explained that more clearly. In order for this to work, the Column content should be wrapped in a Stack block set to some markup that should work<!-- wp:columns {"verticalAlignment":null,"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"stretch","width":"22.22%"} -->
<div class="wp-block-column is-vertically-aligned-stretch" style="flex-basis:22.22%"><!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between"}} -->
<div class="wp-block-group" style="min-height:100%"><!-- wp:paragraph -->
<p>column 1</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"44.45%"} -->
<div class="wp-block-column" style="flex-basis:44.45%"><!-- wp:paragraph -->
<p>column 2</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --> |
andrewserong
approved these changes
Aug 7, 2023
There was a problem hiding this comment.
Ah, excellent, thanks for the test markup! That's working for me now. I notice that it's also working on trunk, though, without the stretch option, but just by using the default orientation of the Column block:
That said, I think it's a good idea to include the stretch option, because as a user the list of orientation options feels like a complete list of what's available to me, rather than something where I should know to toggle one of the options off.
2023-08-07.14.51.27.mp4
This is all testing nicely for me, and feels like a good UI improvement to me. LGTM! ✨
|
Thanks for reviewing!
🤔 good point. This line in the block styles is making sure stretch is the default value. Still the control can be helpful to make things clear. |
9 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #52825.
Adds a "stretch" option to the Column block vertical alignments, so that blocks inside it can stretch to 100% of its height.
Testing Instructions
Add the following markup to a post
Check that the groups in the left hand column stick to top and bottom of the column, like so:
Testing Instructions for Keyboard
Screenshots or screencast