Mobile - Fix - Drag & drop chip issue with RTL languages

packages/block-editor/src/components/block-draggable/index.native.js

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import { AccessibilityInfo } from 'react-native';
+import {
+	useSafeAreaInsets,
+	useSafeAreaFrame,
+} from 'react-native-safe-area-context';
 import Animated, {
 	runOnJS,
 	runOnUI,
@@ -61,10 +65,11 @@ const DEFAULT_IOS_LONG_PRESS_MIN_DURATION =
  *
  * @param {Object}      props          Component props.
  * @param {JSX.Element} props.children Children to be rendered.
+ * @param {boolean}     props.isRTL    Check if current locale is RTL.
  *
  * @return {Function} Render function that passes `onScroll` event handler.
  */
-const BlockDraggableWrapper = ( { children } ) => {
+const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	const [ draggedBlockIcon, setDraggedBlockIcon ] = useState();
 
 	const {
@@ -75,6 +80,10 @@ const BlockDraggableWrapper = ( { children } ) => {
 
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
+	const { left, right } = useSafeAreaInsets();
+	const { width } = useSafeAreaFrame();
+	const safeAreaOffset = left + right;
+	const maxWidth = width - safeAreaOffset;
 	animatedScrollRef( scrollRef );
 
 	const scroll = {
@@ -198,9 +207,16 @@ const BlockDraggableWrapper = ( { children } ) => {
 	};
 
 	const chipDynamicStyles = useAnimatedStyle( () => {
+		const chipOffset = chip.width.value / 2;
+		const translateX = ! isRTL
+			? chip.x.value - chipOffset
+			: -( maxWidth - ( chip.x.value + chipOffset ) );
+
 		return {
 			transform: [
-				{ translateX: chip.x.value - chip.width.value / 2 },
+				{
+					translateX,
+				},
 				{
 					translateY:
 						chip.y.value -

packages/block-editor/src/components/block-list/index.native.js

@@ -189,7 +189,7 @@ export class BlockList extends Component {
 	}
 
 	render() {
-		const { isRootList } = this.props;
+		const { isRootList, isRTL } = this.props;
 		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 		const blockList = isRootList ? (
 			<BlockListProvider
@@ -198,7 +198,7 @@ export class BlockList extends Component {
 					scrollRef: this.scrollViewRef,
 				} }
 			>
-				<BlockDraggableWrapper>
+				<BlockDraggableWrapper isRTL={ isRTL }>
 					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
 				</BlockDraggableWrapper>
 			</BlockListProvider>
@@ -438,6 +438,8 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+			const isRTL = getSettings().isRTL;
+
 			return {
 				blockClientIds,
 				blockCount,
@@ -448,6 +450,7 @@ export default compose( [
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,
+				isRTL,
 			};
 		}
 	),