Mobile - RichText - Update logic for the placeholder text color (#54259)

* Mobile - RichText - Update logic for the placeholder text color * Mobile - DefaultBlockAppender - Set font size to match Paragraph's block font size for block-based themes * Mobile - DefaultBlockAppender - Filter supported text styles * Update changelog
WordPress · Sep 13, 2023 · 7652de9 · 7652de9
1 parent b05bee7
commit 7652de9
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -24,6 +24,7 @@ const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 const noop = () => {};
 
 export function DefaultBlockAppender( {
+	baseGlobalStyles,
 	isLocked,
 	isVisible,
 	onAppend,
@@ -34,6 +35,15 @@ export function DefaultBlockAppender( {
 	if ( isLocked || ! isVisible ) {
 		return null;
 	}
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];
+	const { fontSize, lineHeight } = blockGlobalStyles?.typography || {};
+
+	const textStyles = blockGlobalStyles?.typography
+		? {
+				...( fontSize && { fontSize } ),
+				...( lineHeight && { lineHeight } ),
+		  }
+		: undefined;
 
 	const value =
 		typeof placeholder === 'string'
@@ -51,7 +61,12 @@ export function DefaultBlockAppender( {
 				{ showSeparator ? (
 					<BlockInsertionPoint />
 				) : (
-					<RichText placeholder={ value } onChange={ noop } />
+					<RichText
+						placeholder={ value }
+						onChange={ noop }
+						tagName="p"
+						style={ textStyles }
+					/>
 				) }
 			</View>
 		</Pressable>
@@ -60,16 +75,24 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } =
-			select( blockEditorStore );
+		const {
+			getBlockCount,
+			getBlockName,
+			getSettings,
+			isBlockValid,
+			getTemplateLock,
+		} = select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const isLastBlockDefault =
 			getBlockName( ownProps.lastBlockClientId ) ===
 			getDefaultBlockName();
 		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
+		const globalStylesBaseStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles;
 
 		return {
+			baseGlobalStyles: globalStylesBaseStyles,
 			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 		};

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -11,6 +11,7 @@ For each user feature we should also add a importance categorization label  to i
 
 ## Unreleased
 -   [*] Fix the obscurred "Insert from URL" input for media blocks when using a device in landscape orientation. [#54096]
+-   [**] RichText - Update logic for the placeholder text color [#54259]
 
 ## 1.103.2
 -   [*] Fix issue with missing characters in Add Media placeholder button [#54281]

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -1059,6 +1059,41 @@ export class RichText extends Component {
 			: defaultColor;
 	}
 
+	getPlaceholderTextColor() {
+		const {
+			baseGlobalStyles,
+			getStylesFromColorScheme,
+			placeholderTextColor,
+			style,
+		} = this.props;
+
+		// Default placeholder text color.
+		const placeholderStyle = getStylesFromColorScheme(
+			styles.richTextPlaceholder,
+			styles.richTextPlaceholderDark
+		);
+		const { color: defaultPlaceholderTextColor } = placeholderStyle;
+		// Custom 63% opacity for theme and inherited colors.
+		const placeholderOpacity = 'A1';
+
+		// Determine inherited placeholder color if available.
+		const inheritPlaceholderColor = style?.placeholderColor
+			? `${ style.placeholderColor }${ placeholderOpacity }`
+			: undefined;
+
+		// If using block-based themes, derive the placeholder color from global styles.
+		const globalStylesPlaceholderColor = baseGlobalStyles?.color?.text
+			? `${ baseGlobalStyles.color.text }${ placeholderOpacity }`
+			: undefined;
+
+		return (
+			inheritPlaceholderColor ??
+			placeholderTextColor ??
+			globalStylesPlaceholderColor ??
+			defaultPlaceholderTextColor
+		);
+	}
+
 	render() {
 		const {
 			tagName,
@@ -1085,12 +1120,6 @@ export class RichText extends Component {
 		const editableProps = this.getEditableProps();
 		const blockUseDefaultFont = this.getBlockUseDefaultFont();
 
-		const placeholderStyle = getStylesFromColorScheme(
-			styles.richTextPlaceholder,
-			styles.richTextPlaceholderDark
-		);
-
-		const { color: defaultPlaceholderTextColor } = placeholderStyle;
 		const fontSize = currentFontSize;
 		const lineHeight = this.getLineHeight();
 
@@ -1218,12 +1247,7 @@ export class RichText extends Component {
 						tag: tagName,
 					} }
 					placeholder={ this.props.placeholder }
-					placeholderTextColor={
-						style?.placeholderColor ||
-						this.props.placeholderTextColor ||
-						( baseGlobalStyles && baseGlobalStyles?.color?.text ) ||
-						defaultPlaceholderTextColor
-					}
+					placeholderTextColor={ this.getPlaceholderTextColor() }
 					deleteEnter={ this.props.deleteEnter }
 					onChange={ this.onChangeFromAztec }
 					onFocus={ this.onFocus }