[wp-trac] [WordPress Trac] #52294: Twenty-Twentyone: editor styles are broken in RTL

[WordPress Trac]

#52294: Twenty-Twentyone: editor styles are broken in RTL
--------------------------+-----------------------------
 Reporter:  yoavf         |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Themes        |    Version:
 Severity:  normal        |   Keywords:
  Focuses:  rtl           |
--------------------------+-----------------------------
 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:
 [[Image(https://user-
 images.githubusercontent.com/844866/104574730-09ba0580-565f-11eb-81ea-
 f86c6a2e2c7a.png)]]

 Notice all items are on the same horizontal level.

 This is how it looks with the theme editor styles turned off:
 [[Image(https://user-
 images.githubusercontent.com/844866/104574735-0b83c900-565f-11eb-8e3e-
 e21e068f1f75.png)]]

 === 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.

 2. We could update `add_editor_style` to support loading an additional
 parameter. I'm attaching an example of how this could be done.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52294>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform