Bug Description

The Stories editor is currently not usable at all when using an RTL language. Even with the changes in #2977 applied.

It's mostly arrow icons that are not flipped, and the transform in the EditorCarousel component that doesn't change when isRTL.

Expected Behaviour

The stories editor should work just fine in RTL mode.

Steps to reproduce

1. Install RTL Tester plugin and click on "Switch to RTL" in the admin bar. Or, alternatively, switch user language to an RTL language like Arabic.
2. Open stories editor
3. Notice how not all of the layout elements are "flipped" and the editor is not usable
4. Notice that the context menu doesn't seem to be working either.

Screenshots

Additional context

• WordPress version: 5.3
• Plugin version: current develop
• Gutenberg plugin version (if applicable): 6.6

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The current page in the carousel should be correctly centered and navigation should be possible the same way as in LTR mode
• Iconography should be adapted (flipped) accordingly in the context menu as well as the carousel navigation
• [ ] It should be possible to access the context menu as expected -> see Context menu not accessible in RTL mode #3607
• Dragging between pages should work as expected and highlight the correct target pages
• Resize handles should be displayed the same way as in LTR mode

Implementation brief

• Wherever code changes are needed, select( 'core/block-editor' ).getSettings().isRTL is used to switch the logic for RTL mode.
• If necessary, CSS changes are made to improve RTL compatibility.
• Add rtl:ignore comments for resize handles

QA testing instructions

Setup before any test below

1. Activate RTL Tester plugin
2. Click on "Switch to RTL" in the admin toolbar at the top
3. Create a new story

Verify carousel

1. Create few pages and go through the carousel
2. Verify: the currently selected page should always be shown in the center
3. Verify: carousel arrows should point into the right direction and navigate correctly
4. Verify: dragging pages in carousel works as intended

Verify resize handles

1. Edit text block
2. Verify: the resize handles should be displayed at every location correctly

Verify dragging across pages

1. Drag block to another page
2. Verify: the correct page is highlighted when hovering over it
3. Verify: the correct placement when dropped on another place

Verify CTA block layout

1. Add CTA block on a new page
2. Click on button to edit the URL
3. Verify: the URL input field should not overlap the button

Demo

• https://youtu.be/qfksdQxlFZI

Changelog entry

• Improved RTL support in the editor