Mobile Release v1.81.1

packages/block-editor/src/components/block-list/block-list-compact.native.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+	const {
+		marginHorizontal = styles.defaultBlock.marginLeft,
+		marginVertical = styles.defaultBlock.marginTop,
+		rootClientId,
+	} = props;
+	const { blockClientIds } = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			const blockOrder = getBlockOrder( rootClientId );
+
+			return {
+				blockClientIds: blockOrder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const containerStyle = {
+		marginVertical: -marginVertical,
+		marginHorizontal: -marginHorizontal,
+	};
+
+	return (
+		<View style={ containerStyle }>
+			{ blockClientIds.map( ( currentClientId ) => (
+				<BlockListBlock
+					clientId={ currentClientId }
+					key={ currentClientId }
+					marginHorizontal={ marginHorizontal }
+					marginVertical={ marginVertical }
+				/>
+			) ) }
+		</View>
+	);
+}
+
+export default BlockListCompact;

packages/block-editor/src/components/inner-blocks/index.native.js

@@ -21,6 +21,7 @@ import getBlockContext from './get-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
+import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
+		useCompactList,
 	} = props;
 
 	const block = useSelect(
@@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
+	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
+
 	let blockList = (
-		<BlockList
+		<BlockListComponent
 			marginVertical={ marginVertical }
 			marginHorizontal={ marginHorizontal }
 			rootClientId={ clientId }

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' ],
-		renderAppender: false,
+		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/list-style-type.native.js

@@ -8,6 +8,7 @@ import { View, Text } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -109,9 +110,15 @@ export default function ListStyleType( {
 		style?.fontSize ? style.fontSize : defaultFontSize,
 		10
 	);
+
+	const colorWithPreferredScheme = usePreferredColorSchemeStyle(
+		styles[ 'wp-block-list-item__list-item--default' ],
+		styles[ 'wp-block-list-item__list-item--default--dark' ]
+	);
+
 	const defaultColor = style?.baseColors?.color?.text
 		? style.baseColors.color.text
-		: styles[ 'wp-block-list-item__list-item--default' ].color;
+		: colorWithPreferredScheme.color;
 	const color = style?.color ? style.color : defaultColor;
 
 	if ( ordered ) {

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

@@ -28,6 +28,10 @@
 	font-size: $editor-font-size;
 }
 
+.wp-block-list-item__list-item--default--dark {
+	color: $white;
+}
+
 .wp-block-list-item__list-item-ordered--default {
 	margin-top: 2;
 }
@@ -43,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;
+}