WordPress.org

Make WordPress Core

Opened 2 days ago

Last modified 43 hours ago

#52294 new defect (bug)

Twenty-Twentyone: editor styles are broken in RTL

Reported by: yoavf Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords:
Focuses: rtl Cc:

Description (last modified by yoavf)

The editor-styles in Twenty Twenty-One do not have an RTL version.
This causes major style issues in the editor when in RTL mode.

For example, this is how a nested ordered list looks like:

Notice all items are on the same horizontal level.

This is how it looks with the theme editor styles turned off:

Details of the problem

Currently add_editor_style RTL support is pretty limited. It will, if the file exists, load a style-editor-rtl.css file, in addition to the main style-editor.css file (similarly to how rtl.css is loaded for themes).

The problem with this method is that we don't currently have the tooling to generate that addon rtl file, which only overwrites the necessary CSS declarations.

With the complexity of Twenty Twenty-One style-editor.css file (~2500 lines, SASS generated), creating a manual addon file is not reasonable.

Possible solutions

Any solution should start by generating a fully mirrored style-editor-rtl.css file automatically, using rtlcss.

I considered a couple of possible solutions - and I'd be happy to hear opinions on this:

  1. We could use the Twenty Twenty method in twentytwenty_block_editor_styles - it doesn't use add_editor_style and instead calls wp_enqueue_style, and then uses wp_style_add_data to define that the RTL version should replace the ltr version.
  1. We could update add_editor_style to support loading an additional parameter. I'm attaching an example of how this could be done.

Attachments (3)

method-2-example.diff (3.0 KB) - added by yoavf 2 days ago.
adding a new param to add_editor_style to allow replacing the css file with RTL version
editor-styles-broken.png (54.3 KB) - added by yoavf 2 days ago.
editor-styles-disabled.png (45.6 KB) - added by yoavf 2 days ago.

Download all attachments as: .zip

Change History (7)

@yoavf
2 days ago

adding a new param to add_editor_style to allow replacing the css file with RTL version

#1 @yoavf
2 days ago

  • Version set to 5.6

#2 @yoavf
2 days ago

  • Description modified (diff)

#3 @SergeyBiryukov
2 days ago

  • Component changed from Themes to Bundled Theme

#4 @joyously
43 hours ago

Another alternative is for the stylesheet to contain both LTR and RTL styles. I do this in my theme. It makes it much easier to keep the styles consistent when they are together.

Note: See TracTickets for help on using tickets.