Vertical alignment tools: Show help text explaining they require height to work

[jasmussen]

The Stack block has vertical alignment tools in its block toolbar:

But these options—middle, bottom, space-between—only work if the Stack itself has a height that is taller than the contents inside:

This can be confusing for anyone looking at these tools, they might think the vertical alignment tools affect the containers presence in a parent, as opposed to what it actually does, affect the items inside itself. Either way, unless your Stack block has a height, it will be confusing to try those options and see no change.

Suggestion: we add a separator and some help text to the dropdown:

[jasmussen]

CC: @WordPress/gutenberg-design @mtias

[t-hamano]

Another idea would be to replace it with DropdownMenu V2.

This component allows us to add a prefix icon and help text to each menu item.

https://wordpress.github.io/gutenberg/?path=/story/components-experimental-dropdownmenu-v2--default

There seems to be a discussion about migrating to DropdownMenu V2 in #61094.

[jameskoster]

I suppose we can't conditionally show the notice because height could be added by custom css? It's a bit of a shame to pollute the UI in irrelevant situations.

"Show up" reads a little strange to me. I wonder if that should be something like "Vertical alignments will only work if the..."

[jasmussen]

I suppose we can't conditionally show the notice because height could be added by custom css? It's a bit of a shame to pollute the UI in irrelevant situations.

That was a first instinct too, but I also don't see a way this could work.

There are also cases where the height can be dynamic. Imagine one of the child blocks has a block connection to a dynamic external source, so the height changes on every reload.

DropdownMenu V2 could work too, though we'd still need to decide what help text to show, and where. I.e. 3 of 4 options would all be affected by this, it feel duplicative to write it out for each.

[jasmussen]

"Show up" reads a little strange to me. I wonder if that should be something like "Vertical alignments will only work if the..."

Oh yes I should've clarified, I'd very much like suggestions on the entire copy. It's not reading that well to me, what I suggested. Yours is an improvement, but just want to invite full alternatives too.

[richtabor]

Either way, unless your Stack block has a height, it will be confusing to try those options and see no change.

It's not only when a stack has a height, it also when the height in influenced by surrounding flex elements.

I'm not certain this is necessary, nor quite helpful, really.