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
index 82ff8b7c8d4029..330b860029b6f7 100644
--- 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 ? (
) : (
-
+
) }
@@ -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
index 1f1d4cba4dd991..f65c060906db22 100644
--- 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
index e4beb09acaa443..47b47d58c59885 100644
--- 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 }