From ef20d94c6c22361dd1149104ad7a6c7b08e6a237 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 1 Jan 2021 10:31:15 +0100
Subject: [PATCH] Fix the RTL editor styles and the theme styles option

---
 lib/client-assets.php                             | 12 +++++++++---
 packages/edit-post/src/components/layout/index.js |  4 ++--
 packages/edit-post/src/editor.js                  | 14 ++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/lib/client-assets.php b/lib/client-assets.php
index 47d178667b2ba6..1e978a73ff7a9c 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -579,7 +579,9 @@ function gutenberg_register_vendor_script( $scripts, $handle, $src, $deps = arra
  * @return array Filtered editor settings.
  */
 function gutenberg_extend_block_editor_styles( $settings ) {
-	$editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css';
+	$editor_styles_file = is_rtl() ?
+		gutenberg_dir_path() . 'build/editor/editor-styles-rtl.css' :
+		gutenberg_dir_path() . 'build/editor/editor-styles.css';
 
 	/*
 	 * If, for whatever reason, the built editor styles do not exist, avoid
@@ -601,7 +603,9 @@ function gutenberg_extend_block_editor_styles( $settings ) {
 		 */
 
 		$default_styles = file_get_contents(
-			ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
+			is_rtl() ?
+				ABSPATH . WPINC . '/css/dist/editor/editor-styles-rtl.css' :
+				ABSPATH . WPINC . '/css/dist/editor/editor-styles.css'
 		);
 
 		/*
@@ -640,7 +644,9 @@ function gutenberg_extend_block_editor_styles( $settings ) {
  * @return array Filtered editor settings.
  */
 function gutenberg_extend_block_editor_settings_with_default_editor_styles( $settings ) {
-	$editor_styles_file              = gutenberg_dir_path() . 'build/editor/editor-styles.css';
+	$editor_styles_file              = is_rtl() ?
+		gutenberg_dir_path() . 'build/editor/editor-styles-rtl.css' :
+		gutenberg_dir_path() . 'build/editor/editor-styles.css';
 	$settings['defaultEditorStyles'] = array(
 		array(
 			'css' => file_get_contents( $editor_styles_file ),
diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
index 67628820b61550..b6771c7e4ffcb9 100644
--- a/packages/edit-post/src/components/layout/index.js
+++ b/packages/edit-post/src/components/layout/index.js
@@ -71,7 +71,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function Layout( { settings } ) {
+function Layout( { styles } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const {
@@ -171,7 +171,7 @@ function Layout( { settings } ) {
 	const ref = useRef();
 
 	useDrop( ref );
-	useEditorStyles( ref, settings.styles );
+	useEditorStyles( ref, styles );
 	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
 		onClose: () => setIsInserterOpened( false ),
 	} );
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index 5487f88b4fd36f..90cf95d5a8c173 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -99,9 +99,7 @@ function Editor( {
 
 	const editorSettings = useMemo( () => {
 		const result = {
-			...( hasThemeStyles
-				? settings
-				: omit( settings, [ 'defaultEditorStyles' ] ) ),
+			...omit( settings, [ 'defaultEditorStyles', 'styles' ] ),
 			__experimentalPreferredStyleVariations: {
 				value: preferredStyleVariations,
 				onChange: updatePreferredStyleVariations,
@@ -114,9 +112,6 @@ function Editor( {
 			// This is marked as experimental to give time for the quick inserter to mature.
 			__experimentalSetIsInserterOpened: setIsInserterOpened,
 			keepCaretInsideBlock,
-			styles: hasThemeStyles
-				? settings.styles
-				: settings.defaultEditorStyles,
 		};
 
 		// Omit hidden block types if exists and non-empty.
@@ -141,7 +136,6 @@ function Editor( {
 		hasFixedToolbar,
 		focusMode,
 		hasReducedUI,
-		hasThemeStyles,
 		hiddenBlockTypes,
 		blockTypes,
 		preferredStyleVariations,
@@ -151,6 +145,10 @@ function Editor( {
 		keepCaretInsideBlock,
 	] );
 
+	const styles = useMemo( () => {
+		return hasThemeStyles ? settings.styles : settings.defaultEditorStyles;
+	}, [ settings, hasThemeStyles ] );
+
 	if ( ! post ) {
 		return null;
 	}
@@ -172,7 +170,7 @@ function Editor( {
 						>
 							<ErrorBoundary onError={ onError }>
 								<EditorInitialization postId={ postId } />
-								<Layout settings={ settings } />
+								<Layout styles={ styles } />
 								<KeyboardShortcuts
 									shortcuts={ preventEventDiscovery }
 								/>