Opened 4 months ago
Last modified 3 months ago
#52294 new defect (bug)
Twenty-Twentyone: editor styles are broken in RTL
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | 5.6 |
Component: | Bundled Theme | Keywords: | |
Focuses: | rtl | Cc: |
Description (last modified by )
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:
- We could use the Twenty Twenty method in
twentytwenty_block_editor_styles
- it doesn't useadd_editor_style
and instead callswp_enqueue_style
, and then useswp_style_add_data
to define that the RTL version should replace the ltr version.
- 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)
Change History (10)
#4
follow-up:
↓ 5
@
4 months 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.
#5
in reply to:
↑ 4
@
4 months ago
Replying to joyously:
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.
That works (by targeting the .rtl body class), but do you have a solution to automate the generation of the RTL CSS in the main stylesheet?
#6
@
4 months ago
I like the idea of making the new parameter available for all themes.
I searched Trac to see if there were any duplicates. I did not find any but
perhaps it could be paired with #42645, Support passing version number to add_editor_style().
adding a new param to add_editor_style to allow replacing the css file with RTL version