Improve consistency of alignment tool placement

[jameskoster]

What problem does this address?

Some alignment tools, e.g. Justification, are present in both the block toolbar and the Inspector.

Others, e.g. Vertical Alignment, Alignment (normal width, wide width, full width), Text Alignment are only available in the block toolbar. This inconsistency can be confusing and make the overall experience feel less predictable and robust.

What is your proposed solution?

In the Inspector these controls would occupy a relatively small footprint, and the Design Tools menu can hide them when not in use. So generally it might be most convenient for these controls to be available in both places. That is to say, if an alignment tool is present in the toolbar it should be present in the Inspector too.

Adding text alignment to the Typography panel would seem fairly trivial:

This would be a non-default typography tool, and be present only if explicitly added, or an alignment was made in the post. But its presence here is also sensible in terms of setting default text alignments in global styles, where we might want to include, for example, justified text as an option. That is a separate exploration.

For block/flex alignments, long term I would be more inclined to combine these into a single control, similar to Figma:

But that's one for a separate issue (#49448).

A nearer term optimization would be to duplicate over the vertical and horizontal justification dropdowns from the block toolbar:

---

Issue updated Apr 13.

[jameskoster]

Adding text alignment to the Typography panel would seem fairly trivial:

As would adding alignment to the Layout panel:

It's a shame they don't fit neatly into two columns, but there's not much we can do to fix that without compromising the individual button size, or increasing the width of the entire Inspector.

Long term I would be more inclined to combine these into a single control, similar to Figma:

But that's one for a separate issue (#49448).

[jasmussen]

Text alignment in Typography somehow feels wrong to me, but I suppose it would make sense there especially in Global Styles, where it needs to be able to encompass justified text.

As far as the longer term, I would agree that the Figma model works relatively well, perhaps with the exception of the space-between property, which hidden in the "spacing mode" advanced options becomes a bit buried. But given that it's a harder to underestand property, it might be appropriate after all.

But I wonder if there isn't a simpler and more compact way to port over the alignments from the block toolbar in the mean time. We have some older mockups. Dropdowns from the block toolbar:

And the inspector would then have the same icons, also showing the same dropdowns:

Because that mockup is old, we'd need to sync it up with the work @SaxonF is doing on the Layout panel, but as is, would this be feasible?

[jameskoster]

That could work if the Figma-esque combined control is too much effort.

Side note: It would be good to install a consistent design for indicating which item is selected in these menus. Should we adopt the check icons more broadly?

[jasmussen]

Side note: It would be good to install a consistent design for indicating which item is selected in these menus. Should we adopt the check icons more broadly?

Yes, good call.

Should I update the ticket with these?

[jameskoster]

Please go ahead :)