From 39cfde5052c71712e4d0f6337f39c523e3830785 Mon Sep 17 00:00:00 2001 From: rohitmathur-7 Date: Tue, 3 Sep 2024 11:08:18 +0530 Subject: [PATCH] Fixed the RTL resizing issue --- .../src/components/grid/grid-item-resizer.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/grid/grid-item-resizer.js b/packages/block-editor/src/components/grid/grid-item-resizer.js index da3eb824fe92e5..35a03822b4f6ba 100644 --- a/packages/block-editor/src/components/grid/grid-item-resizer.js +++ b/packages/block-editor/src/components/grid/grid-item-resizer.js @@ -3,6 +3,7 @@ */ import { ResizableBox } from '@wordpress/components'; import { useState, useEffect } from '@wordpress/element'; +import { isRTL } from '@wordpress/i18n'; // Import the isRTL utility /** * Internal dependencies @@ -55,6 +56,7 @@ function GridItemResizerInner( { left: false, right: false, } ); + const rtl = isRTL(); useEffect( () => { const observer = new window.ResizeObserver( () => { @@ -129,12 +131,20 @@ function GridItemResizerInner( { target.setPointerCapture( pointerId ); } } onResizeStart={ ( event, direction ) => { - /* - * The container justification and alignment need to be set - * according to the direction the resizer is being dragged in, - * so that it resizes in the right direction. - */ - setResizeDirection( direction ); + if ( rtl ) { + if ( 'left' === direction ) { + setResizeDirection( 'right' ); + } else if ( 'right' === direction ) { + setResizeDirection( 'left' ); + } + } else { + /* + * The container justification and alignment need to be set + * according to the direction the resizer is being dragged in, + * so that it resizes in the right direction. + */ + setResizeDirection( direction ); + } } } onResizeStop={ ( event, direction, boxElement ) => { const columnGap = parseFloat(