[RNMobile] Synced Patterns: Ensure title is always visible (#55399)

Ensure the title section of Synced Patterns is visible within the editor when a block-based theme is used with a background that contrasts the device's dark/light mode.
WordPress · Oct 20, 2023 · 4afae15 · 4afae15 · github-actions · Oct 20, 2023
1 parent fb7c9c5
commit 4afae15
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/block-library/src/block/edit-title.native.js b/packages/block-library/src/block/edit-title.native.js
@@ -6,7 +6,7 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon } from '@wordpress/components';
+import { Icon, useGlobalStyles } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';
@@ -17,18 +17,21 @@ import { help, lock } from '@wordpress/icons';
 import styles from './editor.scss';
 
 function EditTitle( { getStylesFromColorScheme, title } ) {
-	const lockIconStyle = getStylesFromColorScheme(
-		styles.lockIcon,
-		styles.lockIconDark
-	);
-	const titleStyle = getStylesFromColorScheme(
-		styles.title,
-		styles.titleDark
-	);
-	const infoIconStyle = getStylesFromColorScheme(
-		styles.infoIcon,
-		styles.infoIconDark
-	);
+	const globalStyles = useGlobalStyles();
+	const baseColors = globalStyles?.baseColors?.color;
+
+	const lockIconStyle = [
+		getStylesFromColorScheme( styles.lockIcon, styles.lockIconDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const titleStyle = [
+		getStylesFromColorScheme( styles.title, styles.titleDark ),
+		baseColors && { color: baseColors.text },
+	];
+	const infoIconStyle = [
+		getStylesFromColorScheme( styles.infoIcon, styles.infoIconDark ),
+		baseColors && { color: baseColors.text },
+	];
 	const separatorStyle = getStylesFromColorScheme(
 		styles.separator,
 		styles.separatorDark

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Synced Patterns: Fix visibility of heading section when used with block based themes in dark mode [#55399]
 -   [*] Classic block: Add option to convert to blocks [#55461]
 
 ## 1.106.0