Skip to content

Commit

Permalink
Site Editor: Make resizable frame compatible with RTL languages (#65545)
Browse files Browse the repository at this point in the history 
* Site Editor: Make resizable frame compatible with RTL languages

* Update packages/edit-site/src/components/resizable-frame/index.js

Co-authored-by: Mitchell Austin <[email protected]>

* Fix dragging behaviour

---------

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: stokesman <[email protected]>
  • Loading branch information
@t-hamano @stokesman
3 people authored Sep 24, 2024
1 parent efd622d commit 8357fce
Showing 1 changed file with 14 additions and 8 deletions.
22 changes: 14 additions & 8 deletions packages/edit-site/src/components/resizable-frame/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
} from '@wordpress/components';
import { useInstanceId, useReducedMotion } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { __, isRTL } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -171,7 +171,10 @@ function ResizableFrame( {
event.preventDefault();

const step = 20 * ( event.shiftKey ? 5 : 1 );
const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 );
const delta =
step *
( event.key === 'ArrowLeft' ? 1 : -1 ) *
( isRTL() ? -1 : 1 );
const newWidth = Math.min(
Math.max(
FRAME_MIN_WIDTH,
Expand Down Expand Up @@ -200,15 +203,17 @@ function ResizableFrame( {
const resizeHandleVariants = {
hidden: {
opacity: 0,
left: 0,
...( isRTL() ? { right: 0 } : { left: 0 } ),
},
visible: {
opacity: 1,
left: -14, // Account for the handle's width.
// Account for the handle's width.
...( isRTL() ? { right: -14 } : { left: -14 } ),
},
active: {
opacity: 1,
left: -14, // Account for the handle's width.
// Account for the handle's width.
...( isRTL() ? { right: -14 } : { left: -14 } ),
scaleY: 1.3,
},
};
Expand Down Expand Up @@ -246,10 +251,11 @@ function ResizableFrame( {
size={ frameSize }
enable={ {
top: false,
right: false,
bottom: false,
// Resizing will be disabled until the editor content is loaded.
left: isReady,
...( isRTL()
? { right: isReady, left: false }
: { left: isReady, right: false } ),
topRight: false,
bottomRight: false,
bottomLeft: false,
Expand All @@ -269,7 +275,7 @@ function ResizableFrame( {
onMouseOver={ () => setShouldShowHandle( true ) }
onMouseOut={ () => setShouldShowHandle( false ) }
handleComponent={ {
left: canvasMode === 'view' && (
[ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && (
<>
<Tooltip text={ __( 'Drag to resize' ) }>
{ /* Disable reason: role="separator" does in fact support aria-valuenow */ }
Expand Down

1 comment on commit 8357fce

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 8357fce.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11011891642
📝 Reported issues:

Please sign in to comment.