Global Styles: Reset/Publish buttons incorrectly spaced in RTL language (Hebrew)

[ianstewart]

Steps to reproduce the behavior

1. Change your site content language to Hebrew
2. Visit Editor
3. Click on the Global Styles A icon
4. See error

What I expected to happen

Buttons to be spaced as they are in with LTR EN styles.

What actually happened

Buttons too close together.

Browser / OS version

Chrome / MacOS

[jeyip]

I can reproduce this following the given instructions. 👍

After a brief investigation, the issue is with this style for the sidebar publish button apps/editing-toolkit/editing-toolkit-plugin/global-styles/src/global-styles-sidebar.scss:21.

https://github.com/Automattic/wp-calypso/blob/7f95c0c4c316745334ed3709b7f38c3cc8476915/apps/editing-toolkit/editing-toolkit-plugin/global-styles/src/global-styles-sidebar.scss#L20-L22

It isn't being transpiled by rtlcss. In fact, it seems like none of the styles in the editing-toolkit are being transpiled (so none of the editing toolkit styles will be rtl friendly)

I haven't kept up very well with the global styles. @nosolosw I see in apps/editing-toolkit/README.md that this editing toolkit feature is being deprecated. Is it worthwhile to develop rtlcss support? If not, we can probably have a temporary fix that looks like this:

:root[dir="rtl"] .global-styles-sidebar__publish-button {
    margin-right: 1em;
}

[oandregal]

I haven't kept up very well with the global styles. @nosolosw I see in apps/editing-toolkit/README.md that this editing toolkit feature is being deprecated. Is it worthwhile to develop rtlcss support?

:wave: I see this is more about direction than about code. Unfortunately, I don't know anything about the specifics of the editing-toolkit plugin or WordPress.com, so not sure I can provide any help about direction here.