From 0122f4de19c59f74136f1989b5ba8702e1211778 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 7 Sep 2022 22:08:06 +0900
Subject: [PATCH] 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
---
 .../src/cover/edit/block-controls.js           | 18 +++---------------
 packages/block-library/src/cover/style.scss    |  4 ++++
 2 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/cover/edit/block-controls.js b/packages/block-library/src/cover/edit/block-controls.js
index 65b6f3765765fd..59aaaaffe77d75 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 { __, 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 }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 0338e0ce904fad..95fab91763886e 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/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 {