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

Consider adding text alignment support to the List block #39071

Open
richtabor opened this issue Feb 24, 2022 · 5 comments
Open

Consider adding text alignment support to the List block #39071

richtabor opened this issue Feb 24, 2022 · 5 comments
Labels
[Block] List Affects the List Block [Type] Enhancement A suggestion for improvement.

Comments

@richtabor
Copy link
Member

What problem does this address?

While other text-related/content blocks support text alignment, the List block is omitted. Let's consider adding text alignment support to the List block, just like the Paragraph block supports.

Currently the only way to modify it's text alignment is to do so manually with a utility class.

CleanShot 2022-02-24 at 13 29 12@2x

@richtabor richtabor added [Type] Enhancement A suggestion for improvement. [Block] List Affects the List Block labels Feb 24, 2022
@carolinan
Copy link
Contributor

Should the number or bullet also be aligned?

@ellatrix
Copy link
Member

Cc @t-hamano

@t-hamano
Copy link
Contributor

If we just want a UI for applying text-align to the List block, the new textAlign support introduced in #59531 will do the trick. However, there is currently an issue that we cannot override alignments applied via the global styles from a block instance, as we are trying to solve in #62260.

Furthermore, textAlign doesn't take numbers and bullets into account, so we'll end up with something like this:

image

What is expected of this issue is to center the numbers and bullets left and right as shown below?

image

@carolinan
Copy link
Contributor

Personally I would always expect the bullets to be in close proximity to the text, for the readability. So option two.

@t-hamano
Copy link
Contributor

So option two.

Achieving this would be difficult with block support. This is because, generally, if we want to center a list that includes bullets or numbers left and right, we need to apply display:inline-block to the list and text-align:center to the parent element.

By the way, this layout can also be achieved by wrapping the List block with a Row block with Justification set to center:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] List Affects the List Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants