[RNMobile] Use default placeholder text color for native List Item (#…

…43353)

* Use default placeholder text color for native List Item

* Move list item placeholder hex value to stylesheet

* Resolve test failure

* Add opacity to list block placeholder color styles

* Update List block v2 placholder currentTextColor

* Mobile - List Item - Check if currentTextColor is not undefined and moves opacity value into a const

* Mobile - List Item - Add optional chaining for style.color

Co-authored-by: Gerardo <[email protected]>

packages/block-library/src/list-item/edit.native.js

@@ -14,6 +14,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState, useCallback } from '@wordpress/element';
 
@@ -26,6 +27,8 @@ import { IndentUI } from './edit.js';
 import styles from './style.scss';
 import ListStyleType from './list-style-type';
 
+const OPACITY = '9e';
+
 export default function ListItemEdit( {
 	attributes,
 	setAttributes,
@@ -84,11 +87,35 @@ export default function ListItemEdit( {
 	const blockProps = useBlockProps( {
 		...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ),
 	} );
+
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 		useCompactList: true,
 	} );
 
+	// Set default placeholder text color from light/dark scheme or base colors
+	const defaultPlaceholderFromScheme = usePreferredColorSchemeStyle(
+		styles[ 'wp-block-list-item__list-item-placeholder' ],
+		styles[ 'wp-block-list-item__list-item-placeholder--dark' ]
+	);
+
+	const currentTextColor = style?.color || style?.baseColors?.color?.text;
+
+	const defaultPlaceholderTextColor = currentTextColor
+		? currentTextColor
+		: defaultPlaceholderFromScheme?.color;
+
+	// Add hex opacity to default placeholder text color and style object
+	const defaultPlaceholderTextColorWithOpacity =
+		defaultPlaceholderTextColor + OPACITY;
+
+	const styleWithPlaceholderOpacity = {
+		...style,
+		...( style?.color && {
+			placeholderColor: style.color + OPACITY,
+		} ),
+	};
+
 	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
 	const onLayout = useCallback( ( { nativeEvent } ) => {
@@ -128,12 +155,15 @@ export default function ListItemEdit( {
 						}
 						value={ content }
 						placeholder={ placeholder || __( 'List' ) }
+						placeholderTextColor={
+							defaultPlaceholderTextColorWithOpacity
+						}
 						onSplit={ onSplit }
 						onMerge={ onMerge }
 						onReplace={ ( blocks, ...args ) => {
 							onReplace( convertToListItems( blocks ), ...args );
 						} }
-						style={ style }
+						style={ styleWithPlaceholderOpacity }
 						deleteEnter={ true }
 						containerWidth={ contentWidth }
 					/>

packages/block-library/src/list-item/style.native.scss

@@ -47,3 +47,11 @@
 .wp-block-list-item__list-item-container {
 	margin-right: 8;
 }
+
+.wp-block-list-item__list-item-placeholder {
+	color: $gray;
+}
+
+.wp-block-list-item__list-item-placeholder--dark {
+	color: $gray-50;
+}