Add text alignment controls to List block toolbar

[ZebulanStanphill]

No way to align List blocks?

The Heading, Paragraph, and Subheading blocks all have text alignment controls in their block toolbars. (The Cover Image and Quote blocks do as well, but those blocks will soon be updated to use nested Paragraph and Heading blocks, so they do not really count.) For some reason, the List block currently lacks these controls.

Solution

Add the text alignment button controls to the block toolbar of the List block.

Related Issues and/or PRs

• Unify the block toolbar for all text blocks #3785
• Issue/3785 - Add alignment controls to heading block toolbar #5635
• Shortcode block need alignment option #5880
• Subhead block doesn't have alignment options? #6447 & Enhancement: Introduce text alignment setting to subhead block #6525
• Move "Heading" block text alignment options to the block toolbar from the sidebar #6673 & Move Heading block alignment settings from sidebar to block toolbar #6675
• Add text alignment controls to Verse block toolbar #6695
• Add link button to Verse block toolbar #6696
• Add text alignment controls to Preformatted block toolbar #6698
• Add text alignment controls to Table block toolbar #6699

[karmatosed]

I'm not sure also about adding these to list. What is your thinking of adding to list? I'll note as have in other issues maybe considering if something should have alignment is a good step over assuming it should in all blocks?

[ZebulanStanphill]

@karmatosed Well, you can text align Paragraph and Heading blocks, and List blocks are often intermixed with those, and it often looks weird to have a center-aligned Paragraph block followed by a left-aligned List block.

[karmatosed]

I'm not convinced lists are the same treatment but if someone wants to work on a PR that's totally fine by me on this.

[ZebulanStanphill]

@karmatosed

I just discovered that just using text-align: right on a List does not work how I expected it to:

I was envisioning the List to be placed on the right, but the list items would retain proper indentation. This is possible if you modify the HTML like so:

<div style="display: flex; justify-content: end">
	<ul>
		<li>sfasfsad
			<ul>
				<li>sdfsdf</li>
				<li>sfsdfs</li>
			</ul>
		</li>
		<li>sfsfsd</li>
	</ul>
</div>

That produces a list that looks like this:

Of course, this requires a wrapper <div> using display: flex and justify-content: end, so this is considerably more difficult to implement than I thought. It looks like the best way to have center or right-aligned lists is to use block alignment instead of text alignment.

So does this mean you should wrap the List block in something like the proposed Section block, or should block alignment tools be added to the List block?

[karmatosed]

Whilst I understand what you are saying regarding having this as an option, what use do you think there is for this as a real use case?

The above is what it looks like in the current editor for example.

[ZebulanStanphill]

@karmatosed That’s what I realized… text alignment on a List block is pretty much useless. It is some sort of block alignment that I now realize is what I really wanted. Should open a new issue for that and close this one?

[karmatosed]

I am still unsure you need it for lists but not against it as an option if you feel there is a use case. I can't see one right now so would encourage thinking about that first. I am closing this as a result.

[gmfunk9]

Client has been using "align center" on lists for many years now.
I'm attempting at remaking her site in a way she is used to using it

Adding text-align:center to my UL works perfectly, but it's not user-friendly in the Gutenberg editor