Mobile Release v1.82.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-editor/src/components/rich-text/index.native.js

@@ -114,6 +114,7 @@ function RichTextWrapper(
 		disableSuggestions,
 		disableAutocorrection,
 		containerWidth,
+		onEnter: onCustomEnter,
 		...props
 	},
 	forwardedRef
@@ -345,6 +346,10 @@ function RichTextWrapper(
 				}
 			}
 
+			if ( onCustomEnter ) {
+				onCustomEnter();
+			}
+
 			if ( multiline ) {
 				if ( shiftKey ) {
 					if ( ! disableLineBreaks ) {

packages/block-editor/src/store/actions.js

@@ -1002,21 +1002,49 @@ export const __unstableExpandSelection =
  */
 export const mergeBlocks =
 	( firstBlockClientId, secondBlockClientId ) =>
-	( { select, dispatch } ) => {
+	( { registry, select, dispatch } ) => {
 		const blocks = [ firstBlockClientId, secondBlockClientId ];
 		dispatch( { type: 'MERGE_BLOCKS', blocks } );
 
 		const [ clientIdA, clientIdB ] = blocks;
 		const blockA = select.getBlock( clientIdA );
 		const blockAType = getBlockType( blockA.name );
 
-		// Only focus the previous block if it's not mergeable.
+		if ( ! blockAType ) return;
+
+		const blockB = select.getBlock( clientIdB );
+
 		if ( blockAType && ! blockAType.merge ) {
-			dispatch.selectBlock( blockA.clientId );
+			// If there's no merge function defined, attempt merging inner
+			// blocks.
+			const blocksWithTheSameType = switchToBlockType(
+				blockB,
+				blockAType.name
+			);
+			// Only focus the previous block if it's not mergeable.
+			if ( blocksWithTheSameType?.length !== 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			const [ blockWithSameType ] = blocksWithTheSameType;
+			if ( blockWithSameType.innerBlocks.length < 1 ) {
+				dispatch.selectBlock( blockA.clientId );
+				return;
+			}
+			registry.batch( () => {
+				dispatch.insertBlocks(
+					blockWithSameType.innerBlocks,
+					undefined,
+					clientIdA
+				);
+				dispatch.removeBlock( clientIdB );
+				dispatch.selectBlock(
+					blockWithSameType.innerBlocks[ 0 ].clientId
+				);
+			} );
 			return;
 		}
 
-		const blockB = select.getBlock( clientIdB );
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = select.getSelectionStart();
 		const selectedBlockType =

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

@@ -14,18 +14,21 @@ 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';
+import { useState, useCallback, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { useSplit, useMerge } from './hooks';
+import { useSplit, useMerge, useEnter } from './hooks';
 import { convertToListItems } from './utils';
 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,13 +87,55 @@ 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 preventDefault = useRef( false );
+	const { onEnter } = useEnter( { content, clientId }, preventDefault );
 	const onSplit = useSplit( clientId );
 	const onMerge = useMerge( clientId );
+	const onSplitList = useCallback(
+		( value ) => {
+			if ( ! preventDefault.current ) {
+				return onSplit( value );
+			}
+		},
+		[ clientId, onSplit ]
+	);
+	const onReplaceList = useCallback(
+		( blocks, ...args ) => {
+			if ( ! preventDefault.current ) {
+				onReplace( convertToListItems( blocks ), ...args );
+			}
+		},
+		[ clientId, onReplace, convertToListItems ]
+	);
 	const onLayout = useCallback( ( { nativeEvent } ) => {
 		setContentWidth( ( prevState ) => {
 			const { width } = nativeEvent.layout;
@@ -128,12 +173,14 @@ export default function ListItemEdit( {
 						}
 						value={ content }
 						placeholder={ placeholder || __( 'List' ) }
-						onSplit={ onSplit }
+						placeholderTextColor={
+							defaultPlaceholderTextColorWithOpacity
+						}
+						onSplit={ onSplitList }
 						onMerge={ onMerge }
-						onReplace={ ( blocks, ...args ) => {
-							onReplace( convertToListItems( blocks ), ...args );
-						} }
-						style={ style }
+						onReplace={ onReplaceList }
+						onEnter={ onEnter }
+						style={ styleWithPlaceholderOpacity }
 						deleteEnter={ true }
 						containerWidth={ contentWidth }
 					/>

packages/block-library/src/list-item/hooks/use-enter.native.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	getDefaultBlockName,
+	cloneBlock,
+} from '@wordpress/blocks';
+import { useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import useOutdentListItem from './use-outdent-list-item';
+
+export default function useEnter( props, preventDefault ) {
+	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
+		propsRef.current.clientId
+	);
+
+	return {
+		onEnter() {
+			const { content, clientId } = propsRef.current;
+			if ( content.length ) {
+				return;
+			}
+			preventDefault.current = true;
+			if ( canOutdent ) {
+				outdentListItem();
+				return;
+			}
+			// Here we are in top level list so we need to split.
+			const topParentListBlock = getBlock(
+				getBlockRootClientId( clientId )
+			);
+			const blockIndex = getBlockIndex( clientId );
+			const head = cloneBlock( {
+				...topParentListBlock,
+				innerBlocks: topParentListBlock.innerBlocks.slice(
+					0,
+					blockIndex
+				),
+			} );
+			const middle = createBlock( getDefaultBlockName() );
+			// Last list item might contain a `list` block innerBlock
+			// In that case append remaining innerBlocks blocks.
+			const after = [
+				...( topParentListBlock.innerBlocks[ blockIndex ]
+					.innerBlocks[ 0 ]?.innerBlocks || [] ),
+				...topParentListBlock.innerBlocks.slice( blockIndex + 1 ),
+			];
+			const tail = after.length
+				? [
+						cloneBlock( {
+							...topParentListBlock,
+							innerBlocks: after,
+						} ),
+				  ]
+				: [];
+			replaceBlocks(
+				topParentListBlock.clientId,
+				[ head, middle, ...tail ],
+				1
+			);
+			// We manually change the selection here because we are replacing
+			// a different block than the selected one.
+			selectionChange( middle.clientId );
+		},
+	};
+}

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;
+}