Fix most pressing RTL issues

assets/src/stories-editor/blocks/amp-story-cta/edit.css

@@ -125,6 +125,7 @@ div[data-type="amp/amp-story-cta"] .amp-overlay {
 	position: absolute;
 	z-index: 10;
 	margin-top: -0.5em;
+	top: 100%;
 }
 
 .is-dragging-components-draggable .amp-block-story-cta__inline-link {

assets/src/stories-editor/components/block-mover/draggable.js

@@ -12,6 +12,7 @@ import PropTypes from 'prop-types';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
 import { withSafeTimeout, compose } from '@wordpress/compose';
 
 /**
@@ -130,6 +131,7 @@ class Draggable extends Component {
 			horizontalTargets,
 			verticalTargets,
 			setHighlightByOffset,
+			isRTL,
 		} = this.props;
 
 		const top = parseInt( this.cloneWrapper.style.top ) + event.clientY - this.cursorTop;
@@ -192,6 +194,10 @@ class Draggable extends Component {
 				-Math.ceil( ( -STORY_PAGE_MARGIN - cursorLeftRelativeToPage ) / PAGE_AND_MARGIN ) :
 				Math.ceil( ( cursorLeftRelativeToPage - PAGE_AND_MARGIN ) / PAGE_AND_MARGIN )
 			);
+
+			if ( isRTL ) {
+				this.pageOffset *= -1;
+			}
 		}
 
 		setHighlightByOffset( this.pageOffset );
@@ -360,11 +366,17 @@ Draggable.propTypes = {
 	setSnapLines: PropTypes.func.isRequired,
 	clearSnapLines: PropTypes.func.isRequired,
 	parentBlockElement: PropTypes.object,
+	isRTL: PropTypes.bool.isRequired,
 };
 
 const enhance = compose(
 	withSnapTargets,
 	withSafeTimeout,
+	withSelect( ( select ) => {
+		return {
+			isRTL: select( 'core/block-editor' ).getSettings().isRTL,
+		};
+	} ),
 );
 
 export default enhance( Draggable );

assets/src/stories-editor/components/editor-carousel/index.js

@@ -25,8 +25,10 @@ const EditorCarousel = () => {
 		previousPage,
 		nextPage,
 		isReordering,
+		isRTL,
 	} = useSelect( ( select ) => {
 		const {
+			getSettings,
 			getBlockOrder,
 			getBlocksByClientId,
 			getAdjacentBlockClientId,
@@ -43,6 +45,7 @@ const EditorCarousel = () => {
 			previousPage: currentPage ? getAdjacentBlockClientId( currentPage, -1 ) : null,
 			nextPage: currentPage ? getAdjacentBlockClientId( currentPage, 1 ) : null,
 			isReordering: _isReordering(),
+			isRTL: getSettings().isRTL,
 		};
 	}, [ currentPage ] );
 
@@ -57,9 +60,14 @@ const EditorCarousel = () => {
 			wrapper.current.style.display = 'none';
 		} else {
 			wrapper.current.style.display = '';
-			wrapper.current.style.transform = `translateX(calc(50% - ${ PAGE_BORDER }px - ${ ( STORY_PAGE_INNER_WIDTH + STORY_PAGE_MARGIN ) / 2 }px - ${ ( currentIndex ) * STORY_PAGE_MARGIN }px - ${ currentIndex * STORY_PAGE_INNER_WIDTH }px))`;
+
+			// Offset is number of pages times margin+width + plus a half.
+			const offset = ( currentIndex + 0.5 ) * ( STORY_PAGE_MARGIN + STORY_PAGE_INNER_WIDTH );
+			// Offset (and base value) changes with reading direction.
+			const factor = isRTL ? -1 : 1;
+			wrapper.current.style.transform = `translateX(calc(${ factor * 50 }% - ${ PAGE_BORDER }px - ${ factor * offset }px))`;
 		}
-	}, [ currentIndex, isReordering, wrapper ] );
+	}, [ currentIndex, isReordering, wrapper, isRTL ] );
 
 	const { setCurrentPage } = useDispatch( 'amp/story' );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
@@ -77,7 +85,7 @@ const EditorCarousel = () => {
 		<DropZoneProvider>
 			<div className="amp-story-editor-carousel-navigation">
 				<IconButton
-					icon="arrow-left-alt2"
+					icon={ isRTL ? 'arrow-right-alt2' : 'arrow-left-alt2' }
 					label={ __( 'Previous Page', 'amp' ) }
 					onClick={ ( e ) => {
 						e.preventDefault();
@@ -91,7 +99,7 @@ const EditorCarousel = () => {
 					onClick={ goToPage }
 				/>
 				<IconButton
-					icon="arrow-right-alt2"
+					icon={ isRTL ? 'arrow-left-alt2' : 'arrow-right-alt2' }
 					label={ __( 'Next Page', 'amp' ) }
 					onClick={ ( e ) => {
 						e.preventDefault();

assets/src/stories-editor/components/resizable-box/edit.css

@@ -19,6 +19,8 @@
 }
 
 .amp-story-resize-container .components-resizable-box__handle-right {
+
+	/*!rtl:ignore*/
 	right: -14px !important;
 }
 
@@ -27,6 +29,8 @@
 }
 
 .amp-story-resize-container .components-resizable-box__handle-left {
+
+	/*!rtl:ignore*/
 	left: -14px !important;
 }