What problem does this address?

In a RTL site, when using Gutenberg editor, the content is first shown in LTR, 10 slow seconds later, they turn into RTL. This is a slow, painfull and cheap experiense.

What is your proposed solution?

Use CSS Logical Properties. Use it everywhere and anywhere. There should not be a single CSS property that is not logical. There is literally no reason to not use them.

Instead of text-align: left, it would be text-align: start. Read more. There are also more and better articles about the topic out there on the internet.

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values

No need to have a messed up UI and editor when RTL users try to use the Gutenberg editor. No need to wait for 10s for the editor to turn (only some) things to RTL. Things would just work. Less work, less delay and waiting, less bad experiese, just less bad things. It's super easy to get them working. It's just CSS properties. No need for dependencies and processing and build-step to get RTL working.

The editor settings should drop left/right and just use start/end. This would make things amazing for multi-lang websites. Things would just work.

I'm using the editor on a RTL site, and the experiense is supoer slow, bad and ugly. Solving this easy to solve problem and bring greate value and improve ux significantly.

I can help with this if help needed. If you want a PR, or have questions, I'll help.

This request is about using CSS Logical Properties in both the CSS source code of Gutenberg, Gutenberg user-facing controls and etc. This is also about a future where the wp-admin.php (the dashboard) also supports this. Also the addons for Gutenberg to learn and follow this standard.

Class names, attributes and everything most follow logical properties. Everything and anything!

Related issues:

• Implement Logical CSS Properties #37411 (this one is about the same thing we are asking here).

  Implement Logical CSS Properties #37411 (comment)

  Reply: Yes, absolutely

  Implement Logical CSS Properties #37411 (comment)

  Reply: Exelect idea!

  Implement Logical CSS Properties #37411 (comment)

  Reply:

  • There should not be backward-compatibility that is done by keeping the old non-logical stuff with new logical stuff.
  • We can get rid of all and any RTL files (-rtl.css and -rtl.min.css) with no issues. There is no need to have or keep any RTL specific files.
  • The transform issue is something super easy to solve as explained here (with much other stuff). There is nothing blocking, preventing, causing issues, for us to move forward with CSS Logical Properties.
  • There is no need to have any kinds of spacial steps, like {pre,post}processing, reading and writing some files for RTL stuff... Just nothing!

  • gutenberg/packages/block-library/src/comments-pagination/style.scss

    Line 22 in 604561d

    transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.

    /* this would need to be in some soft of a global styles that loads for block elements. */
    :root {
        --rtl: 1;
    }
    [dir="rtl"] {
        --rtl: -1;
    }
    
    .element {
        transform: scaleX(calc(1 * var(--rtl))); /* result would be -1 because 1 * -1 is -1 */
    }

    Learn more
    Even better: Allow users to select the icon they want instead of limiting them.

• Left/right borders are not styled correctly on RTL sites #44169 (no more issues like this if the editor switches to logical properties). Nore more rtlcss and rtl:ignore.

• Split border control UI is backwards on RTL sites #44171

• How should theme.json support RTL and vertical writing? #52353 (if editor just uses logical properties, then there wouldn't need to be more work done here, if i understood the issue correctly).

• Block toolbar overlaps controls when using the Top Toolbar option with an RTL language #55380

I've been going through RTL related issues, and there is a ton of them, a lot of issues, fixes, discussions, PRs and etc. Tons of time and effort spent on RTL related issues. A portion of these could be avoided by switching to logical properties.

https://wordpress.slack.com/archives/C02QB2JS7/p1758386227133189

@aristath
@skorasaurus
@talldan
@dumitrub
@BicanMarianValeriu