Opened 4 years ago
Closed 8 months ago
#52885 closed defect (bug) (fixed)
Twenty Twenty-One: wrong drop cap alignment in RTL context
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.7 | Priority: | normal |
Severity: | normal | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | has-patch needs-testing commit |
Focuses: | css, rtl | Cc: |
Description
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:
- Set WordPress language to Arabic;
- Create a new post and add a new paragraph block (using Gutenberg);
- 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.
Attachments (3)
Change History (12)
#2
follow-up:
↓ 4
@
4 years ago
- Keywords has-patch added
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).
This ticket was mentioned in Slack in #core-editor by rafaelgalani. View the logs.
4 years ago
#4
in reply to:
↑ 2
@
4 years ago
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
Drop cap with wrong alignment