Add content alignment options in paragraphs

[hypest]

Add support for left/center/right alignment of text in paragraph blocks.

Aztec-Android supports it, Aztec-iOS doesn't.

[mchowning]

👋 @iamthomasbishop! Any thoughts on the UI for this? I assume we'll use the relevant dash-icons (i.e., TinyMCE alignleft)? Where do you think these buttons should go? They seem less important than the bold, emphasis, etc. controls for paragraphs, so I was thinking to the right of those with the scrolling toolbar for the time being (that is where they were on Android-Aztec). I don't think we're going to be at the too-many-icons point yet with the paragraph block with this approach, but we may be there once we add alignment to the heading block.

[iamthomasbishop]

We can probably just utilize the same icons that Core is using, if that's easy enough. I believe they're either using Dashicons or Material.

In terms of placement, we should probably replicate where Core has them – right after the block type selector. Something like this (first example is collapsed(**) example, which we don't yet have. Second example is closer to what we have now):

** I'd love to start collapsing groups of similar controls (like alignment) but that would probably be a separate project.

You mentioned Heading block – this is how I'd imagine that would look like w/ collapsed section for alignment:

[koke]

A user in 2299402-zen is asking about the option to justify text in the app editor.

[hypest]

Related #575

[mchowning]

2 PRs related to addressing this:

1. Allow paragraph spans that do not extend AlignmentSpan AztecEditor-Android#851
2. [RNMobile] Add content alignment options to paragraph block WordPress/gutenberg#17577

[mchowning]

Hey @iamthomasbishop ! I was working on this and doing some RTL checking when I noticed that because the toolbar is reversed for RTL languages, the alignment buttons end up with a very (imo) unintuitive order such that the button for right alignment is the left-most of the alignment, and the button for left alignment is the right-most of the alignment buttons. This screenshot shows what it looks like RTL language (this is a simulated RTL language, so that's why you're still seeing English):

Assuming we do want the toolbar reversed for RTL languages, it seems like we should double-reverse the alignment buttons so that right alignment remains the right-most alignment button. WDYT?

[mchowning]

Assuming we do want the toolbar reversed for RTL languages, it seems like we should double-reverse the alignment buttons so that right alignment remains the right-most alignment button. WDYT?

Or maybe it's not worth bothering since we want to move the alignment buttons to a dropdown soon:

I'd love to start collapsing groups of similar controls (like alignment) but that would probably be a separate project.

[koke]

I noticed something similar in #1461 and it seems it's not addressed on the web either (WordPress/gutenberg#17922 WordPress/gutenberg#8674 and likely more).

[iamthomasbishop]

@mchowning This is an interesting one. I don't have RTL capabilities set up at the moment, and I won't be able to dig in today. My first question is "what are we doing on Aztec?" because I think @etoledom did some RTL work on Aztec a while back so that would be worth considering. Another thing we should do is reference what other apps like Google Docs, Notion, etc. do in RTL cases – might be some clues there.

My suggestion would be to find a quick solution, and if there isn't one then let's focus on bringing the dropdowns into the mix. Although something tells me we're going to have to figure out the order of those buttons as well, so maybe worth the investigation regardless 😄

[hypest]

Fixed with #1489