WordPress.org

Make WordPress Core

Opened 4 months ago

Last modified 6 weeks ago

#52885 new defect (bug)

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

Reported by: rafaelgalani Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch
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:

  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.

Attachments (3)

111912478-81822300-8a48-11eb-8653-e359f2546fa0.png (52.0 KB) - added by rafaelgalani 4 months ago.
Drop cap with wrong alignment
111912427-3cf68780-8a48-11eb-8bca-be1baa8574f8.png (32.9 KB) - added by rafaelgalani 4 months ago.
CSS rule using left alignment in a RTL context
52885.patch (561 bytes) - added by sabernhardt 4 months ago.
removing float: left from the editor stylesheet

Download all attachments as: .zip

Change History (7)

@rafaelgalani
4 months ago

Drop cap with wrong alignment

@rafaelgalani
4 months ago

CSS rule using left alignment in a RTL context

#1 @peterwilsoncc
4 months ago

  • Version changed from trunk to 5.6

@sabernhardt
4 months ago

removing float: left from the editor stylesheet

#2 follow-up: @sabernhardt
4 months 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 months ago

#4 in reply to: ↑ 2 @ryancurban
6 weeks 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

Note: See TracTickets for help on using tickets.