From 1881f341fb6cc2be452449727fd0e3f702dee5d6 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 11 Aug 2022 00:18:13 +0900 Subject: [PATCH 1/5] AlignmentMatrixControl: Display tooltip labels considering RTL language --- .../src/alignment-matrix-control/utils.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/utils.js b/packages/components/src/alignment-matrix-control/utils.js index 4934e422d196cb..7787cc8bb48552 100644 --- a/packages/components/src/alignment-matrix-control/utils.js +++ b/packages/components/src/alignment-matrix-control/utils.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; export const GRID = [ [ 'top left', 'top center', 'top right' ], @@ -11,15 +11,15 @@ export const GRID = [ // Stored as map as i18n __() only accepts strings (not variables) export const ALIGNMENT_LABEL = { - 'top left': __( 'Top Left' ), + 'top left': ! isRTL() ? __( 'Top Left' ) : __( 'Top Right' ), 'top center': __( 'Top Center' ), - 'top right': __( 'Top Right' ), - 'center left': __( 'Center Left' ), + 'top right': ! isRTL() ? __( 'Top Right' ) : __( 'Top Left' ), + 'center left': ! isRTL() ? __( 'Center Left' ) : __( 'Center Right' ), 'center center': __( 'Center Center' ), - 'center right': __( 'Center Right' ), - 'bottom left': __( 'Bottom Left' ), + 'center right': ! isRTL() ? __( 'Center Right' ) : __( 'Center Left' ), + 'bottom left': ! isRTL() ? __( 'Bottom Left' ) : __( 'Bottom Right' ), 'bottom center': __( 'Bottom Center' ), - 'bottom right': __( 'Bottom Right' ), + 'bottom right': ! isRTL() ? __( 'Bottom Right' ) : __( 'Bottom Left' ), }; // Transforms GRID into a flat Array of values. From 53269d7afda127235ad2f3b298c95ba27ce472aa Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Fri, 12 Aug 2022 16:37:04 +0900 Subject: [PATCH 2/5] USe wrapper function --- .../src/alignment-matrix-control/cell.js | 4 +-- .../src/alignment-matrix-control/utils.js | 29 +++++++++++++++---- 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/cell.js b/packages/components/src/alignment-matrix-control/cell.js index 2aeb839831c0c0..19fbc26a066763 100644 --- a/packages/components/src/alignment-matrix-control/cell.js +++ b/packages/components/src/alignment-matrix-control/cell.js @@ -8,14 +8,14 @@ import { VisuallyHidden } from '../visually-hidden'; /** * Internal dependencies */ -import { ALIGNMENT_LABEL } from './utils'; +import { getAlignmentLabel } from './utils'; import { Cell as CellView, Point, } from './styles/alignment-matrix-control-styles'; export default function Cell( { isActive = false, value, ...props } ) { - const tooltipText = ALIGNMENT_LABEL[ value ]; + const tooltipText = getAlignmentLabel( value ); return ( diff --git a/packages/components/src/alignment-matrix-control/utils.js b/packages/components/src/alignment-matrix-control/utils.js index 7787cc8bb48552..83416b828f2fc2 100644 --- a/packages/components/src/alignment-matrix-control/utils.js +++ b/packages/components/src/alignment-matrix-control/utils.js @@ -11,15 +11,15 @@ export const GRID = [ // Stored as map as i18n __() only accepts strings (not variables) export const ALIGNMENT_LABEL = { - 'top left': ! isRTL() ? __( 'Top Left' ) : __( 'Top Right' ), + 'top left': __( 'Top Left' ), 'top center': __( 'Top Center' ), - 'top right': ! isRTL() ? __( 'Top Right' ) : __( 'Top Left' ), - 'center left': ! isRTL() ? __( 'Center Left' ) : __( 'Center Right' ), + 'top right': __( 'Top Right' ), + 'center left': __( 'Center Left' ), 'center center': __( 'Center Center' ), - 'center right': ! isRTL() ? __( 'Center Right' ) : __( 'Center Left' ), - 'bottom left': ! isRTL() ? __( 'Bottom Left' ) : __( 'Bottom Right' ), + 'center right': __( 'Center Right' ), + 'bottom left': __( 'Bottom Left' ), 'bottom center': __( 'Bottom Center' ), - 'bottom right': ! isRTL() ? __( 'Bottom Right' ) : __( 'Bottom Left' ), + 'bottom right': __( 'Bottom Right' ), }; // Transforms GRID into a flat Array of values. @@ -65,3 +65,20 @@ export function getAlignmentIndex( alignment = 'center' ) { return index > -1 ? index : undefined; } + +/** + * Retrieves the alignment label from a value. + * + * @param {string} alignment Value to check. + * + * @return {number} The label of a matching alignment. + */ +export function getAlignmentLabel( alignment = 'center' ) { + // Swap left and right in RTL languages. + const newAlignment = isRTL() + ? alignment.replace( /left|right/, ( match ) => + match === 'left' ? 'right' : 'left' + ) + : alignment; + return ALIGNMENT_LABEL[ newAlignment ] || undefined; +} From b2d19dc1fa84c49bda34f772fd808d3e8fe5b33f Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 18 Aug 2022 20:54:20 +0900 Subject: [PATCH 3/5] AlignmentMatrixControl: keep physical direction --- .../src/alignment-matrix-control/cell.js | 4 ++-- .../styles/alignment-matrix-control-styles.js | 1 + .../src/alignment-matrix-control/utils.js | 19 +------------------ 3 files changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/components/src/alignment-matrix-control/cell.js b/packages/components/src/alignment-matrix-control/cell.js index 19fbc26a066763..2aeb839831c0c0 100644 --- a/packages/components/src/alignment-matrix-control/cell.js +++ b/packages/components/src/alignment-matrix-control/cell.js @@ -8,14 +8,14 @@ import { VisuallyHidden } from '../visually-hidden'; /** * Internal dependencies */ -import { getAlignmentLabel } from './utils'; +import { ALIGNMENT_LABEL } from './utils'; import { Cell as CellView, Point, } from './styles/alignment-matrix-control-styles'; export default function Cell( { isActive = false, value, ...props } ) { - const tooltipText = getAlignmentLabel( value ); + const tooltipText = ALIGNMENT_LABEL[ value ]; return ( diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js index 1e35a4195460c6..88ac2a4a68cd15 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js @@ -38,6 +38,7 @@ export const Root = styled.div` export const Row = styled.div` box-sizing: border-box; + direction: ltr; display: grid; grid-template-columns: repeat( 3, 1fr ); `; diff --git a/packages/components/src/alignment-matrix-control/utils.js b/packages/components/src/alignment-matrix-control/utils.js index 83416b828f2fc2..4934e422d196cb 100644 --- a/packages/components/src/alignment-matrix-control/utils.js +++ b/packages/components/src/alignment-matrix-control/utils.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __, isRTL } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; export const GRID = [ [ 'top left', 'top center', 'top right' ], @@ -65,20 +65,3 @@ export function getAlignmentIndex( alignment = 'center' ) { return index > -1 ? index : undefined; } - -/** - * Retrieves the alignment label from a value. - * - * @param {string} alignment Value to check. - * - * @return {number} The label of a matching alignment. - */ -export function getAlignmentLabel( alignment = 'center' ) { - // Swap left and right in RTL languages. - const newAlignment = isRTL() - ? alignment.replace( /left|right/, ( match ) => - match === 'left' ? 'right' : 'left' - ) - : alignment; - return ALIGNMENT_LABEL[ newAlignment ] || undefined; -} From c5725349d7f49a94dbc3d56762dbf86bfdeabae2 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 18 Aug 2022 22:18:33 +0900 Subject: [PATCH 4/5] Update cover block to match AlignmentMatrixControl specifications --- .../src/cover/edit/block-controls.js | 18 +++++++++++++++--- .../styles/alignment-matrix-control-styles.js | 2 +- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js index 59aaaaffe77d75..65b6f3765765fd 100644 --- a/packages/block-library/src/cover/edit/block-controls.js +++ b/packages/block-library/src/cover/edit/block-controls.js @@ -9,7 +9,7 @@ import { __experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl, __experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl, } from '@wordpress/block-editor'; -import { __ } from '@wordpress/i18n'; +import { __, isRTL } from '@wordpress/i18n'; /** * Internal dependencies @@ -58,15 +58,27 @@ export default function CoverBlockControls( { } ); }; + // Flip value horizontally to match the physical direction indicated by + // AlignmentMatrixControl with the logical direction indicated by cover + // block in RTL languages. + const flipHorizontalPosition = ( ltrContentPosition ) => { + return isRTL() + ? ltrContentPosition.replace( /left|right/, ( match ) => + match === 'left' ? 'right' : 'left' + ) + : ltrContentPosition; + }; + return ( <> setAttributes( { - contentPosition: nextPosition, + contentPosition: + flipHorizontalPosition( nextPosition ), } ) } isDisabled={ ! hasInnerBlocks } diff --git a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js index 88ac2a4a68cd15..40e6e26eb21628 100644 --- a/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js +++ b/packages/components/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js @@ -13,6 +13,7 @@ export const rootBase = () => { return css` border-radius: 2px; box-sizing: border-box; + direction: ltr; display: grid; grid-template-columns: repeat( 3, 1fr ); outline: none; @@ -38,7 +39,6 @@ export const Root = styled.div` export const Row = styled.div` box-sizing: border-box; - direction: ltr; display: grid; grid-template-columns: repeat( 3, 1fr ); `; From d27efd2f764f9e3f973591e8c815be1cde1bfdb4 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Thu, 18 Aug 2022 22:21:55 +0900 Subject: [PATCH 5/5] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index a4216b292e8847..0e7cdced658f1a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,6 +8,7 @@ ### Bug Fix +- `AlignmentMatrixControl`: keep the physical direction in RTL languages ([#43126](https://github.com/WordPress/gutenberg/pull/43126)). - `SelectControl`, `CustomSelectControl`: Truncate long option strings ([#43301](https://github.com/WordPress/gutenberg/pull/43301)). - `Popover`: fix and improve opening animation ([#43186](https://github.com/WordPress/gutenberg/pull/43186)). - `Popover`: fix incorrect deps in hooks resulting in incorrect positioning after calling `update` ([#43267](https://github.com/WordPress/gutenberg/pull/43267/)).