Global Styles: Add alignment support in global typography styles

[danielbachhuber]

Before we land #48146, we'd like to first support alignment in global typography styles. Alignment support can include justification, as long as it also supports hyphenation.

To properly handle hyphenation, we'll need lang support on the block level at least, too: https://github.com/WordPress/gutenberg/issues/15349

Related https://github.com/WordPress/gutenberg/issues/27300, https://github.com/WordPress/gutenberg/issues/8450

Done is:

• It's possible to set alignment in global styles.
• Alignment is only applied to post content.
• Justify is included in the alignment options.
• Hyphenation is also available as a global style.

[sejas]

I can start investigating this issue next week 👌

[jasmussen]

A couple of notes on justified text:

• It is required in some news rooms and schools, and therefore necessary to support
• It is in most cases harder to read than aligned text, providing an opportunity to show a legibility warning in context
• Justified text in almost all cases is a global set it and forget it setting, unlike center/right aligned text, and therefore makes great sense in global styles. It makes less sense on a per-block basis, as we generally wouldn't want anyone who needs to use justified text to select all and choose "justified" across every post on a site.

In that light, here's a way way obsolete mockup of justified text in a global interface:

The icons, colors, all of the above are off, so do not take this as a design. Purely as an example of one way this interface might be put together.

[strarsis]

Would this be also a good place for adding controls for text-align-last?

[jasmussen]

Potentially. I haven't used that one very much.

[Thelmachido]

Hi folks, thank you for working on this. Just making a note that this was requested in forums here: https://wordpress.org/support/topic/space-between-header-and-body-on-pages-drives-me-crazy/#post-16789630

[ghost]

Baby, I just want to add that I miss very very very much the Justify alignment. OMG.

I understand the necessary precaution...

Because of it, you guys could plan the necessary implementation steps.

It seems that there are more than one issues involved. First, to support the "justify" in theme.json? In a later issue, support justify in text-align component? In a later issue, support it the global styles interface (the current issue) and think about the SVG icon?

I was so happy when I saw https://github.com/WordPress/gutenberg/pull/48146 ... so fast it came, so fast it went 🤣

[jasmussen]

Per recent conversation, here's a refreshed version of how this could look:

[sejas]

I unassigned me from this issue since we won't focus on this in the short time.

[t-hamano]

textAlign block support has been added in #59531. After that, we are first trying to add text alignment support at the block level.

Related issues/PRs:

• https://github.com/WordPress/gutenberg/issues/60762
• https://github.com/WordPress/gutenberg/pull/60841

[richtabor]

Why not put this within the Text and Headings views, rather than add another to this top-level typography? It could be hierarchal as well.

[jasmussen]

Seems fine to do that. Figma if you want to tinker.

[richtabor]

I added an alternate to the Figma. What do you think?

Based on https://github.com/WordPress/gutenberg/pull/59531.

[jasmussen]

Looks good! Whether it's the row of 4 icons or a vertical stack with labels, I've less of a strong opinion on, happy to defer.

What I'd deem important is to show the yellow notice below the justified text option when selected, I'm assuming that's still present?

[richtabor]

What I'd deem important is to show the yellow notice below the justified text option when selected, I'm assuming that's still present?

Sure, I had missed that.

[t-hamano]

If all four of left, center, right, and justify are allowed, I think we can use the TextAlignmentControl component added in #60841 as is.

However, the original design only allows two types at the root level: left and justfiy.

Which options should be allowed?

[jasmussen]

Good point to clarify. I omitted center from the original designs because it seems borderline useless as a default layout for text, arguably even less legible than justified text. Though I suppose if it substantially eases implementation, and if the center option would carry a similar legibility warning as justified does, perhaps it might be fine, so as to unstick this?

[richtabor]

I say we include them all, even without legibility notices. Sure, it may not be ideal, but I can see it working in some cases. And I'm hesitant to have some controls available in some places, while not in others.

[t-hamano]

Thanks for the feedback!

As suggested in #60762, I am thinking of adding the text alignment UI at the block level first. If it ships successfully, I would like to come back to this issue.

[jasmussen]

I say we include them all, even without legibility notices. Sure, it may not be ideal, but I can see it working in some cases.

I would not omit the legibility notice, at least from the justified text one. It's a very common question why WordPress doesn't support justified text in the text alignment dropdown, and showing the legibility notice in context of the global control would provide the answer right there.