diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js index 84cadbb78f21b8..5326cbd79b0e47 100644 --- a/packages/block-library/src/list-item/edit.native.js +++ b/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 } /> diff --git a/packages/block-library/src/list-item/style.native.scss b/packages/block-library/src/list-item/style.native.scss index f4946ff39c7cd5..b5cdd3e8919ca6 100644 --- a/packages/block-library/src/list-item/style.native.scss +++ b/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; +}