From af6a6a1e7ec133883ddca281b645245e965ece65 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Sat, 21 Sep 2024 22:22:11 +0900 Subject: [PATCH 1/3] Site Editor: Make resizable frame compatible with RTL languages --- .../src/components/resizable-frame/index.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index b589a3861c75d3..0585a3182de3b5 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -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 @@ -171,7 +171,12 @@ function ResizableFrame( { event.preventDefault(); const step = 20 * ( event.shiftKey ? 5 : 1 ); - const delta = step * ( event.key === 'ArrowLeft' ? 1 : -1 ); + const delta = + step * + ( ( ! isRTL() && event.key === 'ArrowLeft' ) || + ( isRTL() && event.key === 'ArrowRight' ) + ? 1 + : -1 ); const newWidth = Math.min( Math.max( FRAME_MIN_WIDTH, @@ -200,15 +205,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, }, }; From 00ad6ecd2b660ea91c3f26ed6025b029aa05ba48 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 24 Sep 2024 12:47:06 +0900 Subject: [PATCH 2/3] Update packages/edit-site/src/components/resizable-frame/index.js Co-authored-by: Mitchell Austin --- packages/edit-site/src/components/resizable-frame/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index 0585a3182de3b5..e07235bffcf573 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -173,10 +173,8 @@ function ResizableFrame( { const step = 20 * ( event.shiftKey ? 5 : 1 ); const delta = step * - ( ( ! isRTL() && event.key === 'ArrowLeft' ) || - ( isRTL() && event.key === 'ArrowRight' ) - ? 1 - : -1 ); + ( event.key === 'ArrowLeft' ? 1 : -1 ) * + ( isRTL() ? -1 : 1 ); const newWidth = Math.min( Math.max( FRAME_MIN_WIDTH, From 375b05a3b60ef6eaeff29bfc65dd03a8bf70fb3c Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 24 Sep 2024 12:51:08 +0900 Subject: [PATCH 3/3] Fix dragging behaviour --- packages/edit-site/src/components/resizable-frame/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index e07235bffcf573..b5aae01918e691 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -251,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, @@ -274,7 +275,7 @@ function ResizableFrame( { onMouseOver={ () => setShouldShowHandle( true ) } onMouseOut={ () => setShouldShowHandle( false ) } handleComponent={ { - left: canvasMode === 'view' && ( + [ isRTL() ? 'right' : 'left' ]: canvasMode === 'view' && ( <> { /* Disable reason: role="separator" does in fact support aria-valuenow */ }