Add initial setup for RTL support

[swissspidy]

Since styled components now supports this more or less out of the box, adding RTL support was rather trivial.

Fixes #55.
Fixes #317.

To-do

• Fix Movable issues when dragging elements on a "flipped" canvas -> could be in new PR
• Reverse arrow navigation in library tabs (Implement correct interactive library tabs #361)
• Verify carousel navigation
• Verify grid view slider

Before this PR:

After this PR:

[swissspidy]

Still early, and not a priority, just curious to hear some thoughts about where the issues might be.

How to test

1. Check out this branch, build
2. Option A: Change your WordPress site's language to a RTL locale like Arabic
3. Option B (easier): Install the RTL Tester plugin (search for RTL Tester on the plugins screen) and use the new RTL Tester switch in the admin toolbar to switch back and forth
4. Drag around elements on the screen

[spacedmonkey]

Do you think we should add rtl-tester plugin to the build to make it easier to test?

[swissspidy]

@spacedmonkey Do you mean adding RTL Tester plugin to the test environment? Or the docker setup?

I was also looking into storybook support with https://www.npmjs.com/package/storybook-addon-rtl

[spacedmonkey]

Do you mean adding RTL Tester plugin to the test environment? Or the docker setup?

Both I guess. I originally meant docker setup, but testing environment makes sense too.

[github-actions]

Size Change: +2.27 kB (0%)

Total Size: 346 kB

Filename	Size	Change
assets/js/edit-story.js	305 kB	+2.27 kB (0%)

ℹ️ View Unchanged

Filename	Size	Change
assets/css/edit-story.css	189 B	0 B
assets/css/stories-dashboard.css	165 B	0 B
assets/js/stories-dashboard.js	40.9 kB	0 B

_{compressed-size-action}

[spacedmonkey]

Are these icons undo / redo the right way around?

[spacedmonkey]

Insert element is broken.

[swissspidy]

Are these icons undo / redo the right way around?

I first had this as a to-do, but realized Gutenberg displays them the same way, so it seems to be correct 🤷‍♂

Insert element is broken.

Yeah I think that's the same issue as in the screenshot at the top. Not sure what exactly is the culprit though. Have yet to check it out.

[swissspidy]

So far Movable seems to be the biggest remaining issue here.

[swissspidy]

@miina Perhaps you have some ideas on the Movable part (not urgent)

Changes have been applied; many changes since then

[spacedmonkey]

Everything looking good in my testing. The only thing I found was the dragabout elements, as noted here.

Fix Movable issues when dragging elements on a "flipped" canvas -> could be in new PR

Going to loop @miina and @dvoytenko for this one. Feels like it is a simple inversion of axioses, but I could be wrong.

Plenty of changes since initial review