Breakages, regressions, and new issues in RTL layout

[etoledom]

Describe the bug
There have been many new issues in RTL layout.
Related old issue: #1461

Placeholders are gone

This one might be iOS only.

• All RichText placeholders seem to be missing.

Toolbar buttons and List Block

• Default text alignment icon is inconsistent with default RTL language alignment
• Undo and Redo should have flipped position.
  • It's still correct to have Undo pointing to the left, and Redo to the right, since it's a representation of time.
• List block has the bullets in the opposite side.
• List block icons need to be flipped (we might need a new ordered list icon if it doesn't exist) cc @iamthomasbishop
  • Keeping "ident" at the left and "unindent" at the right.

Galery block and Inner blocks

• Gallery: Image mover icons are reversed.
• Inner block floating toolbar: Arrows icons need to be flipped.

To Reproduce
Steps to reproduce the behavior:

• On iOS, the best way is to change the device to a RTL language to have the full experience.
• Alternatively you can set forceRTL to true.
  • After doing this, you will need to load Gutenberg two times. (Once to set the setting in native side, other for the changes to take place).
    

    gutenberg-mobile/src/index.js

    Line 36 in 3b62fb9

    I18nManager.forceRTL( false ); // Change to `true` to debug RTL layout easily.

• One more option in Xcode is to set Right to left Pseudo-language in language settings in: Product > Scheme > Edit Scheme > Run > Options > Application Language.

[iamthomasbishop]

Thank you for surfacing these issues, @etoledom!

Placeholders are gone

😱

Toolbar buttons and List Block

Agreed w/ all of this.

List block icons need to be flipped

We'll need a new G2 icon for this, I will ping the designers on web.

Gallery: Image mover icons are reversed.

@mkevins would you mind taking care of this one?

Inner block floating toolbar: Arrows icons need to be flipped.

@jbinda would you mind taking a look at this, as you're currently working on the floating toolbar? If you're not able to, maybe @chipsnyder could take a look?

[jbinda]

@iamthomasbishop

No problem I will add RTL support to FloatingToolbar in my PR here

List block icons need to be flipped
We'll need a new G2 icon for this, I will ping the designers on web.
Gallery: Image mover icons are reversed.
@mkevins would you mind taking care of this one?

I have just added a function to ColumnBlock PR which handle rotate the Block movers. I believe that we can also use to flip/switch icons between mentioned buttons in Gallery and List block (undo/redo)

Here is link to my comment about switch. You can check the whole movers file to get the point in wider scope

[jbinda]

I have implement RTL support for FloatingToolbar:

The changes will be introduce with this PR.

One note here. Does the Save text in right top corned should be reversed in RTL ?

I will also handle rest of breakages in separate PR

[jbinda]

I have also add support in Gallery Block and undo/redo button. See below screenshots and PR here

LTR vs RTL mode

edit:
missing placeholder in paragraph seems to be RichText issue. If you set text-align right I see it also disappears in LTR mode

[iamthomasbishop]

@jbinda looks solid, thank you for fixing that part of this 😄

[jbinda]

@iamthomasbishop

No problem, there's still some work to do according to my PR TODOs list.

@pinarol
I think maybe it's worth to add RTL mode section to our sanity-testing as well after we fix mentioned issue here ? wdyt ?

[pinarol]

No harm documenting RTL test cases for sure but Sanity testing is done to make sure the basic & most commonly used functionality is not broken. RTL tests would be a bit too much to run bi-weekly imo. @jbinda

[jbinda]

I just thought that having this in sanity-test will also point all other places to check if you doing something with RTL. We can also schedule wider timeframe for RTL in sanity-testing schedule (e.g. once per month)

I try to keep sanity-test up to date because it helps me to catch edge case that I might broke in other block during work on some common/shared feature. RTL is one of that kind of feature

Please let me know if something changes.

[jbinda]

According to List block, shouldn't we also rotate the icon for List block in BottomSheet menu in RTL mode ? See screenshot

[etoledom]

According to List block, shouldn't we also rotate the icon for List block in BottomSheet menu in RTL mode ? See screenshot

Good point! I think we should 👍

[jbinda]

I think I will also check other blocks because I have found issue also in MediaText align in horizontal layout. Icons should be reversed as well because it has rotated orientation according to what layout you see

Anyway I will be update the PR code soon. Stay tuned :)

---

edited:
I also think that in vertical layout it should be rotate by 90 degrees. Because in vertical layout it changes places up/down instead right/left.

@iamthomasbishop what do you think ?

[etoledom]

Anyway I will be update the PR code soon. Stay tuned :)

Amazing 😁
Good catch!

I also think that in vertical layout it should be rotate by 90 degrees.

Rotating vertically will make the horizontal lines vertical too, right? We might need a new icon.
But maybe it's not necessary since the layout on the final website will still be horizontal. The vertical layout on small screen sizes is more like a special case.

[jbinda]

Rotating vertically will make the horizontal lines vertical too, right? We might need a new icon.

I think so

But maybe it's not necessary since the layout on the final website will still be horizontal. The vertical layout on small screen sizes is more like a special case.

I think it is kind of UX fix just to be consistent (another example might be the block movers in Columns/Buttons)

Can you take a look once again on PR code ? I dropped some comments

[iamthomasbishop]

According to List block, shouldn't we also rotate the icon for List block in BottomSheet menu in RTL mode ? See screenshot

@jbinda I think that would be good.

I have found issue also in MediaText align in horizontal layout. Icons should be reversed as well because it has rotated orientation according to what layout you see

Good catch. Let's rotate these as well.

I also think that in vertical layout it should be rotate by 90 degrees

I don't think rotating 90% will be a good solution here, we'll need a new icon. Until then let's just use the same mirrored icons as mentioned above. In the long run, this would probably be good, but for now we can just mirror.