Twenty Twenty-One: wrong drop cap alignment in RTL context

[rafaelgalani]

Drop cap is not correctly aligned when using RTL context along with Gutenberg editor (e.g. using WordPress in Arabic language. It's specific to the twenty twenty-one theme. There's ​an issue open for it in Gutenberg's repo.

From what we found, the culprit might be here: ​https://github.com/WordPress/twentytwentyone/blob/trunk/assets/css/ie-editor.css#L3220

Steps to discover:

1. Set WordPress language to Arabic;
2. Create a new post and add a new paragraph block (using Gutenberg);
3. When you enable drop cap, the alignment is wrong - it aligns left instead of right.

Gutenberg has an implementation for handling RTL, basically replacing all "right" rules' values for "left". Not sure if this can be applied here, though.

There's also the float: inline-start ​solution, but it's in draft state in MDN.

[rafaelgalani]

Drop cap with wrong alignment

[rafaelgalani]

CSS rule using left alignment in a RTL context

[sabernhardt]

removing float: left from the editor stylesheet

[sabernhardt]

Twenty Twenty-One has a compiled RTL version for the front end, but not the editor. I think the editor needs to switch left/right for other elements, too.

If only the initial letter needs changing, though, 52885.patch​ removes the float property from the editor stylesheet so it does not override Gutenberg's styles (which float the letter properly).

[ryancurban]

Replying to sabernhardt:

Twenty Twenty-One has a compiled RTL version for the front end, but not the editor. I think the editor needs to switch left/right for other elements, too.

This is indeed the case (that there is not an RTL stylesheet for the block editor for this theme). I just discovered this as well using a select field. It looks like there is a ticket to more holistically address this here: #52294

[karmatosed]

Thank you everyone for the work on this so far. I am going to add testing and future release to this to see about progressing.

[karmatosed]

In 58583:

Twenty Twenty-One: Resolves wrong drop cap alignment in RTL.

Drop cap was not aligning correct for RTL. This removes the float property.

Props rafaelgalani, peterwilsoncc, ryancurban, sabernhardt.
Fixes #52885.