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 }