Skip to content

Commit

Permalink
[RNMobile] Synced Patterns: Ensure title is always visible (WordPress…
Browse files Browse the repository at this point in the history
…#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.
  • Loading branch information
Siobhan Bamber authored Oct 20, 2023
1 parent fb7c9c5 commit 4afae15
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 13 deletions.
29 changes: 16 additions & 13 deletions packages/block-library/src/block/edit-title.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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
Expand Down
1 change: 1 addition & 0 deletions packages/react-native-editor/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 4afae15

Please sign in to comment.