Skip to content

Commit

Permalink
Fixed the RTL resizing issue
Browse files Browse the repository at this point in the history
  • Loading branch information
rohitmathur-7 committed Sep 3, 2024
1 parent 6986b13 commit 39cfde5
Showing 1 changed file with 16 additions and 6 deletions.
22 changes: 16 additions & 6 deletions packages/block-editor/src/components/grid/grid-item-resizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -55,6 +56,7 @@ function GridItemResizerInner( {
left: false,
right: false,
} );
const rtl = isRTL();

useEffect( () => {
const observer = new window.ResizeObserver( () => {
Expand Down Expand Up @@ -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(
Expand Down

0 comments on commit 39cfde5

Please sign in to comment.