Cover Block: Keep the inner contents in a physical direction even in RTL languages (#43663)

* Cover Block: Keep the inner contents in a physical direction even in RTL languages

* Remove unnecessary change

Author: t-hamano

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 { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -58,27 +58,15 @@ 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={ flipHorizontalPosition( contentPosition ) }
+					value={ contentPosition }
 					onChange={ ( nextPosition ) =>
 						setAttributes( {
-							contentPosition:
-								flipHorizontalPosition( nextPosition ),
+							contentPosition: nextPosition,
 						} )
 					}
 					isDisabled={ ! hasInnerBlocks }

packages/block-library/src/cover/style.scss

@@ -9,6 +9,8 @@
 	padding: 1em;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.
+	/*rtl:raw: direction: ltr; */
 
 	/**
 	 * Set a default background color for has-background-dim _unless_ it includes another
@@ -105,6 +107,8 @@
 		width: 100%;
 		z-index: z-index(".wp-block-cover__inner-container");
 		color: $white;
+		// Reset the fixed LTR direction at the root of the block in RTL languages.
+		/*rtl:raw: direction: rtl; */
 	}
 
 	&.is-light {