Row Block: Add support for centering the middle item when the left and right are unequal

[danielbachhuber]

What problem does this address?

I recently recreated my brochure site using the Site Editor. On the original site, my 'Hand Built' site title was centered, even though the left and right items were unequal in size:

Using the Row Block with 'Space Between Items', the 'Hand Built' site title ends up slightly off center:

It would be great if the Row Block could properly center the middle item, even when the left and right items are unequal in size.

Here's block JSON you can add to the Header template in Twenty Twenty-Three to reproduce the issue:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph -->
<p>Some really long text on the left</p>
<!-- /wp:paragraph -->

<!-- wp:site-title /-->

<!-- wp:paragraph -->
<p>Small text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

What is your proposed solution?

Here's some Stack Overflow exploration of the problem: https://stackoverflow.com/questions/32378953/keep-the-middle-item-centered-when-side-items-have-different-widths

While it seems hacky, assigning flex-grow: 1; flex-basis: 0; to the left element and flex-grow: 1; flex-basis: 0; text-align: right; achieves the effect I want:

[andrewserong]

Thanks for opening this @danielbachhuber! There's a PR from @tellthemachines in #45364 that looks like it should allow you to create a layout like that (by setting the first and last elements to "Fill"). If you have the time, it might be worth testing out that PR to check that it does what you're looking for.

[danielbachhuber]

@andrewserong Thanks! Followed up on the PR.

[danielbachhuber]

@andrewserong I don't think #45364 did it for me, unfortunately 😞

Here's my block JSON:

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"flex","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide" style="padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:paragraph {"style":{"layout":{"selfStretch":"fill","flexSize":null}}} -->
<p>Some really long text on the left</p>
<!-- /wp:paragraph -->

<!-- wp:site-title {"textAlign":"center","style":{"typography":{"fontStyle":"italic","fontWeight":"400"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->

<!-- wp:paragraph {"align":"right","style":{"layout":{"selfStretch":"fill","flexSize":null}}} -->
<p class="has-text-align-right">Small text</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Here's the result:

Is there something I'm missing?

[tellthemachines]

This would be trivial to do with a grid layout: we'd only need 3 equal-sized columns and justify-self: center the middle item. I'm planning to look into that soon!

[danielbachhuber]

This would be trivial to do with a grid layout: we'd only need 3 equal-sized columns and justify-self: center the middle item. I'm planning to look into that soon!

@tellthemachines Awesome! If you want to drop some direction on this issue, someone from my team might pick it up for you.

Also, just to be clear: #45364 didn't fix the issue, correct?

[andrewserong]

Also, just to be clear: #45364 didn't fix the issue, correct?

Very interesting! The more we play with these flex-based controls, the more it seems that flex is quite challenging to work with to get the desired result. A +1 for the idea of us looking into a grid layout.

For the moment, I think it's possible now with the Row block to get something like the following using 33% fixed width for each of the children of the Row block:

Another way that also seems to kinda work is to set the left and right blocks to 100% fixed, and then give the middle block a fixed width also, just one that's smaller than that. It then appears to shrink things in an okay way:

The unfortunate thing with the flex tools, though, is that setting the left and right blocks to fill doesn't appear to achieve it on its own (since the widths are calculated by flex's algorithm, which appears to take the size of content into account? Please correct me if I'm wrong, there!). And setting the left and right blocks to 100% then requires us setting a deliberate width on the middle block to ensure it doesn't shrink down too much.

In principle, I think the added controls should enable a variety of creative designs and patterns, and means that we can (kinda) create this pattern, albeit in an unintuitive way. Hopefully it's enough for the moment for creating some patterns that folks need, but I very much agree that having proper Grid layout controls would get us toward a UI that supports users creating these kinds of patterns in an intuitive way, rather than having to kind of hack at the flex values via the Fixed setting.

For the moment, though, does messing around with the Fixed control get you closer to the current goal?

[andrewserong]

Oh, just adding another one. If you need the Row block to be allowed to wrap to multiple lines, another one to try:

• Left and right blocks set to Fixed at 33% (or whatever the desired percentage is).
• Middle block set to Fill.
• (optional) set block spacing to 0 on the parent Row block to give you maximum space.

I think that's about the neatest I've been able to get it to work so far from a quick hack around:

[danielbachhuber]

Oh, just adding another one. If you need the Row block to be allowed to wrap to multiple lines, another one to try:
* Left and right blocks set to Fixed at 33% (or whatever the desired percentage is).
* Middle block set to Fill.
* (optional) set block spacing to 0 on the parent Row block to give you maximum space.

@andrewserong Nice find! That seems to work great:

<!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group alignwide"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"},"layout":{"selfStretch":"fixed","flexSize":"33%"}},"textColor":"custom-color-1"} -->
<p class="has-custom-color-1-color has-text-color" style="text-transform:uppercase">Technology Leadership</p>
<!-- /wp:paragraph -->

<!-- wp:site-title {"textAlign":"center","style":{"elements":{"link":{"color":{"text":"#36506c"}}},"typography":{"fontSize":"3rem","fontStyle":"italic","fontWeight":"700"}}} /-->

<!-- wp:paragraph {"align":"right","style":{"typography":{"textTransform":"uppercase"},"layout":{"selfStretch":"fixed","flexSize":"33%"}},"textColor":"custom-color-1"} -->
<p class="has-text-align-right has-custom-color-1-color has-text-color" style="text-transform:uppercase">Tualatin, Ore.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Things are a bit squashed on mobile:

It doesn't look like it's possible to conditionally hide those on mobile, though? #19909

[andrewserong]

It doesn't look like it's possible to conditionally hide those on mobile, though? #19909

No, it currently isn't, with the Row block we only have the toggle to switch wrap but not conditionally hide things. Thanks for finding the right related issue, though! Looks like a similar use case to this comment on that one: #19909 (comment). Might be worth dropping a comment on that issue with this use case in mind, since the last comment there was from back in 2021?

[danielbachhuber]

Might be worth dropping a comment on that issue with this use case in mind, since the last comment there was from back in 2021?

For sure! Done: #19909 (comment)

We can consider this issue solved 🕵️ Thanks for your help working through it, @andrewserong !