Mobile Release v1.76.1

packages/block-editor/src/components/block-draggable/index.native.js

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import { AccessibilityInfo } from 'react-native';
+import {
+	useSafeAreaInsets,
+	useSafeAreaFrame,
+} from 'react-native-safe-area-context';
 import Animated, {
 	runOnJS,
 	runOnUI,
@@ -11,7 +15,6 @@ import Animated, {
 	withDelay,
 	withTiming,
 	ZoomInEasyDown,
-	ZoomOutEasyDown,
 } from 'react-native-reanimated';
 
 /**
@@ -61,10 +64,11 @@ const DEFAULT_IOS_LONG_PRESS_MIN_DURATION =
  *
  * @param {Object}      props          Component props.
  * @param {JSX.Element} props.children Children to be rendered.
+ * @param {boolean}     props.isRTL    Check if current locale is RTL.
  *
  * @return {Function} Render function that passes `onScroll` event handler.
  */
-const BlockDraggableWrapper = ( { children } ) => {
+const BlockDraggableWrapper = ( { children, isRTL } ) => {
 	const [ draggedBlockIcon, setDraggedBlockIcon ] = useState();
 
 	const {
@@ -75,6 +79,10 @@ const BlockDraggableWrapper = ( { children } ) => {
 
 	const { scrollRef } = useBlockListContext();
 	const animatedScrollRef = useAnimatedRef();
+	const { left, right } = useSafeAreaInsets();
+	const { width } = useSafeAreaFrame();
+	const safeAreaOffset = left + right;
+	const contentWidth = width - safeAreaOffset;
 	animatedScrollRef( scrollRef );
 
 	const scroll = {
@@ -198,9 +206,16 @@ const BlockDraggableWrapper = ( { children } ) => {
 	};
 
 	const chipDynamicStyles = useAnimatedStyle( () => {
+		const chipOffset = chip.width.value / 2;
+		const translateX = ! isRTL
+			? chip.x.value - chipOffset
+			: -( contentWidth - ( chip.x.value + chipOffset ) );
+
 		return {
 			transform: [
-				{ translateX: chip.x.value - chip.width.value / 2 },
+				{
+					translateX,
+				},
 				{
 					translateY:
 						chip.y.value -
@@ -215,6 +230,34 @@ const BlockDraggableWrapper = ( { children } ) => {
 		styles[ 'draggable-chip__wrapper' ],
 	];
 
+	const exitingAnimation = ( { currentHeight, currentWidth } ) => {
+		'worklet';
+		const translateX = ! isRTL ? 0 : currentWidth * -1;
+		const duration = 150;
+		const animations = {
+			transform: [
+				{
+					translateY: withTiming( currentHeight, {
+						duration,
+					} ),
+				},
+				{
+					translateX: withTiming( translateX, {
+						duration,
+					} ),
+				},
+				{ scale: withTiming( 0, { duration } ) },
+			],
+		};
+		const initialValues = {
+			transform: [ { translateY: 0 }, { translateX }, { scale: 1 } ],
+		};
+		return {
+			initialValues,
+			animations,
+		};
+	};
+
 	return (
 		<>
 			<DroppingInsertionPoint
@@ -238,7 +281,7 @@ const BlockDraggableWrapper = ( { children } ) => {
 				{ draggedBlockIcon && (
 					<Animated.View
 						entering={ ZoomInEasyDown.duration( 200 ) }
-						exiting={ ZoomOutEasyDown.duration( 150 ) }
+						exiting={ exitingAnimation }
 					>
 						<DraggableChip icon={ draggedBlockIcon } />
 					</Animated.View>

packages/block-editor/src/components/block-list/block-list-item-cell.native.js

@@ -13,7 +13,7 @@ import { useEffect, useCallback } from '@wordpress/element';
  */
 import { useBlockListContext } from './block-list-context';
 
-function BlockListItemCell( { children, clientId, rootClientId } ) {
+function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
 
 	useEffect( () => {
@@ -25,18 +25,25 @@ function BlockListItemCell( { children, clientId, rootClientId } ) {
 		};
 	}, [] );
 
-	const onLayout = useCallback(
-		( { nativeEvent: { layout } } ) => {
+	const onCellLayout = useCallback(
+		( event ) => {
+			const {
+				nativeEvent: { layout },
+			} = event;
 			updateBlocksLayouts( blocksLayouts, {
 				clientId,
 				rootClientId,
 				...layout,
 			} );
+
+			if ( onLayout ) {
+				onLayout( event );
+			}
 		},
-		[ clientId, rootClientId, updateBlocksLayouts ]
+		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
 	);
 
-	return <View onLayout={ onLayout }>{ children }</View>;
+	return <View onLayout={ onCellLayout }>{ children }</View>;
 }
 
 export default BlockListItemCell;

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

@@ -162,12 +162,13 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
-	getCellRendererComponent( { children, item } ) {
+	getCellRendererComponent( { children, item, onLayout } ) {
 		const { rootClientId } = this.props;
 		return (
 			<BlockListItemCell
 				children={ children }
 				clientId={ item }
+				onLayout={ onLayout }
 				rootClientId={ rootClientId }
 			/>
 		);
@@ -189,7 +190,7 @@ export class BlockList extends Component {
 	}
 
 	render() {
-		const { isRootList } = this.props;
+		const { isRootList, isRTL } = this.props;
 		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
 		const blockList = isRootList ? (
 			<BlockListProvider
@@ -198,7 +199,7 @@ export class BlockList extends Component {
 					scrollRef: this.scrollViewRef,
 				} }
 			>
-				<BlockDraggableWrapper>
+				<BlockDraggableWrapper isRTL={ isRTL }>
 					{ ( { onScroll } ) => this.renderList( { onScroll } ) }
 				</BlockDraggableWrapper>
 			</BlockListProvider>
@@ -438,6 +439,8 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+			const isRTL = getSettings().isRTL;
+
 			return {
 				blockClientIds,
 				blockCount,
@@ -448,6 +451,7 @@ export default compose( [
 				isFloatingToolbarVisible,
 				isStackedHorizontally,
 				maxWidth,
+				isRTL,
 			};
 		}
 	),

packages/block-editor/src/components/plain-text/index.native.js

@@ -7,7 +7,7 @@ import { TextInput, Platform, Dimensions } from 'react-native';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { getPxFromCssUnit } from '@wordpress/block-editor';
+import { RichText, getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -18,6 +18,9 @@ export default class PlainText extends Component {
 	constructor() {
 		super( ...arguments );
 		this.isAndroid = Platform.OS === 'android';
+
+		this.onChangeTextInput = this.onChangeTextInput.bind( this );
+		this.onChangeRichText = this.onChangeRichText.bind( this );
 	}
 
 	componentDidMount() {
@@ -44,7 +47,7 @@ export default class PlainText extends Component {
 
 	componentDidUpdate( prevProps ) {
 		if ( ! this.props.isSelected && prevProps.isSelected ) {
-			this._input.blur();
+			this._input?.blur();
 		}
 	}
 
@@ -55,11 +58,11 @@ export default class PlainText extends Component {
 	}
 
 	focus() {
-		this._input.focus();
+		this._input?.focus();
 	}
 
 	blur() {
-		this._input.blur();
+		this._input?.blur();
 	}
 
 	getFontSize() {
@@ -79,20 +82,73 @@ export default class PlainText extends Component {
 		};
 	}
 
+	replaceLineBreakTags( value ) {
+		return value?.replace( RegExp( '<br>', 'gim' ), '\n' );
+	}
+
+	onChangeTextInput( event ) {
+		const { onChange } = this.props;
+		onChange( event.nativeEvent.text );
+	}
+
+	onChangeRichText( value ) {
+		const { onChange } = this.props;
+		// The <br> tags have to be replaced with new line characters
+		// as the content of plain text shouldn't contain HTML tags.
+		onChange( this.replaceLineBreakTags( value ) );
+	}
+
 	render() {
-		const { style } = this.props;
+		const {
+			style,
+			__experimentalVersion,
+			onFocus,
+			...otherProps
+		} = this.props;
 		const textStyles = [
 			style || styles[ 'block-editor-plain-text' ],
 			this.getFontSize(),
 		];
 
+		if ( __experimentalVersion === 2 ) {
+			const disableFormattingProps = {
+				withoutInteractiveFormatting: true,
+				disableEditingMenu: true,
+				__unstableDisableFormats: true,
+				disableSuggestions: true,
+			};
+
+			const forcePlainTextProps = {
+				preserveWhiteSpace: true,
+				__unstablePastePlainText: true,
+				multiline: false,
+			};
+
+			const fontProps = {
+				fontFamily: style?.fontFamily,
+				fontSize: style?.fontSize,
+				fontWeight: style?.fontWeight,
+			};
+
+			return (
+				<RichText
+					{ ...otherProps }
+					{ ...disableFormattingProps }
+					{ ...forcePlainTextProps }
+					{ ...fontProps }
+					identifier="content"
+					style={ style }
+					onChange={ this.onChangeRichText }
+					unstableOnFocus={ onFocus }
+				/>
+			);
+		}
+
 		return (
 			<TextInput
 				{ ...this.props }
 				ref={ ( x ) => ( this._input = x ) }
-				onChange={ ( event ) => {
-					this.props.onChange( event.nativeEvent.text );
-				} }
+				onChange={ this.onChangeTextInput }
 				onFocus={ this.props.onFocus } // Always assign onFocus as a props.
 				onBlur={ this.props.onBlur } // Always assign onBlur as a props.
 				fontFamily={

packages/block-editor/src/components/rich-text/index.js

@@ -76,6 +76,8 @@ function removeNativeProps( props ) {
 		'minWidth',
 		'maxWidth',
 		'setRef',
+		'disableSuggestions',
+		'disableAutocorrection',
 	] );
 }
 

packages/block-editor/src/components/rich-text/index.native.js

@@ -111,6 +111,8 @@ function RichTextWrapper(
 		maxWidth,
 		onBlur,
 		setRef,
+		disableSuggestions,
+		disableAutocorrection,
 		...props
 	},
 	forwardedRef
@@ -635,6 +637,8 @@ function RichTextWrapper(
 			maxWidth={ maxWidth }
 			onBlur={ onBlur }
 			setRef={ setRef }
+			disableSuggestions={ disableSuggestions }
+			disableAutocorrection={ disableAutocorrection }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.