AlignmentMatrixControl: keep the physical direction in RTL languages (#…

…43126) * AlignmentMatrixControl: Display tooltip labels considering RTL language * USe wrapper function * AlignmentMatrixControl: keep physical direction * Update cover block to match AlignmentMatrixControl specifications * Update changelog
WordPress · Aug 26, 2022 · b40b540 · b40b540
1 parent fc372b5
commit b40b540
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git 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 (
 		<>
 			<BlockControls group="block">
 				<BlockAlignmentMatrixControl
 					label={ __( 'Change content position' ) }
-					value={ contentPosition }
+					value={ flipHorizontalPosition( contentPosition ) }
 					onChange={ ( nextPosition ) =>
 						setAttributes( {
-							contentPosition: nextPosition,
+							contentPosition:
+								flipHorizontalPosition( nextPosition ),
 						} )
 					}
 					isDisabled={ ! hasInnerBlocks }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 ### Bug Fix
 
+-   `AlignmentMatrixControl`: keep the physical direction in RTL languages ([#43126](https://github.com/WordPress/gutenberg/pull/43126)).
 -   `AlignmentMatrixControl`: Fix the `width` prop so it works as intended ([#43482](https://github.com/WordPress/gutenberg/pull/43482)).
 -   `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)).

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
@@ -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;

diff --git a/packages/data/tsconfig.json b/packages/data/tsconfig.json
@@ -14,7 +14,5 @@
 		{ "path": "../priority-queue" },
 		{ "path": "../redux-routine" }
 	],
-	"include": [
-		"src/**/*"
-	]
+	"include": [ "src/**/*" ]
 }