Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global Styles: Add alignment support in global typography styles #48202

Open
danielbachhuber opened this issue Feb 17, 2023 · 19 comments
Open

Global Styles: Add alignment support in global typography styles #48202

danielbachhuber opened this issue Feb 17, 2023 · 19 comments
Labels
[Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@danielbachhuber
Copy link
Member

danielbachhuber commented Feb 17, 2023

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: #15349

Related #27300, #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.
@danielbachhuber danielbachhuber added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 17, 2023
@sejas
Copy link
Contributor

sejas commented Feb 17, 2023

I can start investigating this issue next week 👌

@kathrynwp kathrynwp added [Type] Enhancement A suggestion for improvement. [Feature] Typography Font and typography-related issues and PRs labels Feb 20, 2023
@jasmussen
Copy link
Contributor

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:

oldler-justified-mockup

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
Copy link
Contributor

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

@jasmussen
Copy link
Contributor

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

@Thelmachido
Copy link

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
Copy link

ghost commented Jul 5, 2023

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
#48146 ... so fast it came, so fast it went 🤣

@jasmussen
Copy link
Contributor

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

Justified text

@sejas sejas removed their assignment Apr 5, 2024
@sejas
Copy link
Contributor

sejas commented Apr 5, 2024

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

@t-hamano
Copy link
Contributor

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:

@richtabor
Copy link
Member

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.

CleanShot 2024-04-24 at 17 51 35

@jasmussen
Copy link
Contributor

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

@richtabor
Copy link
Member

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

Justified text alternate

Based on #59531.

@jasmussen
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

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
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor

t-hamano commented May 1, 2024

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
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

8 participants