Flex Layout: Allow control over vertical alignment of children

[kjellr]

The current flex layout controls allow us to specify the horizontal justification of child items:

As a pair to that, we should have the ability to specify the vertical alignment of children too (align-items). We can probably reuse icons from the columns block:

Related: #33687

[tellthemachines]

Do we want these controls in the sidebar, or is it enough to have them in the block toolbar?

Also, do we want them to be available for all blocks with flex layout? (I'm thinking of Navigation where these tools are currently disabled)

cc @WordPress/gutenberg-design

[jasmussen]

I think @youknowriad asked some questions about an interface for this a while back, and in response we made this inspector mockup for container blocks (Figma):

I would think presence in the inspector could be a baseline, but for some blocks we'd almost certainly surface them in the block toolbar as well, on a curation basis, such as the Row block:

There's a question on align-self properties for inner blocks. This needs a bit more time in the oven, but this could be the basic idea:

In the case of the inspector controls, we would probably make good use of the ToolsPanel behavior of not showing many of these options by default, allowing you instead to add them from the menu.

[jasmussen]

Sidenote on labels-only mode, that's a good opportunity to trim and revisit the verbiage for the labels, both to enhance glancability and toolbar-width. Instead of Change items justification, perhaps it could just be Justification, and instead of Change vertical alignment it could be reduced to Vertical alignment. What do you think?

[tellthemachines]

In the case of the inspector controls, we would probably make good use of the ToolsPanel behavior of not showing many of these options by default, allowing you instead to add them from the menu.

This is another one for when we migrate Layout to ToolsPanel then 😄

Change items justification, perhaps it could just be Justification, and instead of Change vertical alignment it could be reduced to Vertical alignment. What do you think?

Yes, that would help! We should do something about Move up and down buttons too; would it be ok to make the buttons wider? I don't think we'd want the font size smaller than the current 12px otherwise it becomes unreadable.

[andrewserong]

This is another one for when we migrate Layout to ToolsPanel then 😄

I think this would be great to do! I don't think we already have an issue for this particular task in isolation, so I've written it up in #44560 so that it can be picked up when the time is right 🙂

[jasmussen]

Yes, that would help! We should do something about Move up and down buttons too; would it be ok to make the buttons wider? I don't think we'd want the font size smaller than the current 12px otherwise it becomes unreadable.

I'd like to think that the block toolbar itself could use a further refactor. Many of the items inside are abs-positioned and have fixed widths, I would imagine that we could move towards varous flex properties here instead. A flex-basis as wide as the icon button should be could potentially grow automatically for wider text.

[tellthemachines]

A flex-basis as wide as the icon button should be could potentially grow automatically for wider text.

Agreed, it makes sense for the button to resize according to its contents!

[skorasaurus]

Would love to see this customization as well since as of now, the row variation applies an inlinealign-items: center by default to its immediate children.

[tellthemachines]

@skorasaurus there are already controls in the Row block toolbar to change the vertical alignment:

I also started a PR over in #47099 to remove the default alignment rules, but don't know how feasible that will be in terms of back compat.

It might be time to close this issue as the migration of layout to ToolsPanel is already tracked elsewhere 🤔

[andrewserong]

It might be time to close this issue as the migration of layout to ToolsPanel is already tracked elsewhere 🤔

Agreed. We have an issue for that over in #44560, so I'll close out this one now.