AlignmentMatrixControl: keep the physical direction in RTL languages

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 }

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/)).

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;