[RNmobile] Scroll to new-block indicator

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

@@ -117,6 +117,7 @@ export class BlockListItem extends Component {
 			marginHorizontal,
 			blockName,
 			blockWidth,
+			onLayout,
 			...restProps
 		} = this.props;
 		const readableContentViewStyle =
@@ -141,6 +142,7 @@ export class BlockListItem extends Component {
 				<View
 					style={ this.getContentStyles( readableContentViewStyle ) }
 					pointerEvents={ isReadOnly ? 'box-only' : 'auto' }
+					onLayout={ onLayout }
 				>
 					{ shouldShowInsertionPointBefore && (
 						<BlockInsertionPoint />

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

@@ -69,9 +69,6 @@ export class BlockList extends Component {
 		);
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
-		this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind(
-			this
-		);
 		this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind(
 			this
 		);
@@ -80,6 +77,10 @@ export class BlockList extends Component {
 
 		this.onLayout = this.onLayout.bind( this );
 
+		this.listHeight = 0;
+		this.offsetOfIndex = this.offsetOfIndex.bind( this );
+		this.itemHeights = [];
+
 		this.state = {
 			blockWidth: this.props.blockWidth || 0,
 		};
@@ -102,10 +103,6 @@ export class BlockList extends Component {
 		this.scrollViewRef = ref;
 	}
 
-	shouldFlatListPreventAutomaticScroll() {
-		return this.props.isBlockInsertionPointVisible;
-	}
-
 	shouldShowInnerBlockAppender() {
 		const { blockClientIds, renderAppender } = this.props;
 		return renderAppender && blockClientIds.length > 0;
@@ -155,6 +152,9 @@ export class BlockList extends Component {
 		const { blockWidth } = this.state;
 		const { isRootList, maxWidth } = this.props;
 
+		// update the known list height. Using it to compute how much empty space to reserve in the footer
+		this.listHeight = layout.height;
+
 		const layoutWidth = Math.floor( layout.width );
 		if ( isRootList && blockWidth !== layoutWidth ) {
 			this.setState( {
@@ -165,6 +165,59 @@ export class BlockList extends Component {
 		}
 	}
 
+	/* eslint-disable jsdoc/require-param */
+	/**
+	 * Computes the offset of a block in pixels, by adding up all the block heights before it.
+	 */
+	/* eslint-enable jsdoc/require-param */
+	offsetOfIndex( heights, blockClientIds, index ) {
+		const ITEM_HEIGHT = 30; // just a kinda arbitrary default height, just to have it non zero.
+		const offset = blockClientIds
+			.slice( 0, index + 1 ) // only add up to the index we want (adding 1 to include the indexed item itself too)
+			.reduce(
+				// accumulate the heights of the items
+				( acc, id ) =>
+					heights[ id ] && heights[ id ] > 0
+						? acc + heights[ id ]
+						: acc + ITEM_HEIGHT,
+				0
+			);
+		return offset;
+	}
+
+	componentDidUpdate( prevProps ) {
+		const {
+			isBlockInsertionPointVisible,
+			insertionPoint,
+			blockClientIds,
+		} = this.props;
+
+		// if we're now showing the new-block indicator, trigger a scroll to it
+		if (
+			isBlockInsertionPointVisible !==
+			prevProps.isBlockInsertionPointVisible
+		) {
+			const insertionPointInRootList =
+				insertionPoint.rootClientId === undefined;
+			if ( insertionPointInRootList && isBlockInsertionPointVisible ) {
+				const jumpToIndex = insertionPoint.index - 1; // scrolling goes to the bottom of the item so, let's scroll to one above
+				const offset =
+					jumpToIndex < 0
+						? 0
+						: this.offsetOfIndex(
+								this.itemHeights,
+								blockClientIds,
+								jumpToIndex
+						  );
+				if ( Platform.OS === 'android' ) {
+					this.scrollViewRef.scrollToOffset( { offset } );
+				} else {
+					this.scrollViewRef.scrollTo( { y: offset } );
+				}
+			}
+		}
+	}
+
 	render() {
 		const { isRootList } = this.props;
 		// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks
@@ -276,9 +329,6 @@ export class BlockList extends Component {
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
-					shouldPreventAutomaticScroll={
-						this.shouldFlatListPreventAutomaticScroll
-					}
 					title={ title }
 					ListHeaderComponent={ header }
 					ListEmptyComponent={ ! isReadOnly && this.renderEmptyList }
@@ -332,6 +382,11 @@ export class BlockList extends Component {
 					this.shouldShowInnerBlockAppender
 				}
 				blockWidth={ blockWidth }
+				onLayout={
+					( object ) =>
+						( this.itemHeights[ clientId ] =
+							object.nativeEvent.layout.height ) // Capture the block height. We'll use the list of heights to compute offsets.
+				}
 			/>
 		);
 	}
@@ -345,6 +400,11 @@ export class BlockList extends Component {
 		} = this.props;
 
 		if ( ! isReadOnly && withFooter ) {
+			const footerHeight = Math.max(
+				( this.listHeight * 3 ) / 4, // set the footer to 3 quarters of the list height to give room for the inserter *plus* the insertion point
+				styles.blockListFooter.minHeight
+			);
+
 			return (
 				<>
 					<TouchableWithoutFeedback
@@ -354,7 +414,12 @@ export class BlockList extends Component {
 							this.addBlockToEndOfPost( paragraphBlock );
 						} }
 					>
-						<View style={ styles.blockListFooter } />
+						<View
+							style={ [
+								styles.blockListFooter,
+								{ height: footerHeight },
+							] }
+						/>
 					</TouchableWithoutFeedback>
 				</>
 			);
@@ -372,6 +437,7 @@ export default compose( [
 				getBlockCount,
 				getBlockOrder,
 				getSelectedBlockClientId,
+				getBlockInsertionPoint,
 				isBlockInsertionPointVisible,
 				getSettings,
 			} = select( blockEditorStore );
@@ -394,11 +460,15 @@ export default compose( [
 
 			const isFloatingToolbarVisible =
 				!! selectedBlockClientId && hasRootInnerBlocks;
+
+			const insertionPoint = getBlockInsertionPoint();
+
 			return {
 				blockClientIds,
 				blockCount,
-				isBlockInsertionPointVisible:
-					Platform.OS === 'ios' && isBlockInsertionPointVisible(),
+				insertionPoint,
+				isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
+				selectedBlockClientId,
 				isReadOnly,
 				isRootList: rootClientId === undefined,
 				isFloatingToolbarVisible,

packages/block-editor/src/components/block-list/style.native.scss

@@ -63,7 +63,7 @@
 }
 
 .blockListFooter {
-	height: 80px;
+	min-height: 80px;
 }
 
 .defaultBlock {

packages/components/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -10,7 +10,7 @@ import KeyboardAvoidingView from '../keyboard-avoiding-view';
 
 export const KeyboardAwareFlatList = ( props ) => (
 	<KeyboardAvoidingView style={ { flex: 1 } }>
-		<FlatList { ...props } />
+		<FlatList ref={ props.innerRef } { ...props } />
 	</KeyboardAvoidingView>
 );
 

packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -14,7 +14,6 @@ const List = memo( FlatList, isEqual );
 
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
-	shouldPreventAutomaticScroll,
 	innerRef,
 	autoScroll,
 	scrollViewStyle,
@@ -41,8 +40,7 @@ export const KeyboardAwareFlatList = ( {
 			setTimeout( () => {
 				if (
 					! this.keyboardWillShowIndicator &&
-					this.latestContentOffsetY !== undefined &&
-					! shouldPreventAutomaticScroll()
+					this.latestContentOffsetY !== undefined
 				) {
 					// Reset the content position if keyboard is still closed
 					if ( this.scrollViewRef ) {

packages/react-native-editor/CHANGELOG.md

@@ -13,6 +13,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [*] Gallery block - Fix gallery images caption text formatting [#32351]
 -   [*] Image block: "Set as featured" button within image block settings. (Android only) [#31705]
 -   [***] Audio block now available on WP.com sites on the free plan. [#31966]
+-   [**] Scrolling to the new-block indicator when adding a block. [#31144]
 
 ## 1.54.0
 -   [***] Slash inserter [#29772]

packages/react-native-editor/__device-tests__/pages/editor-page.js

@@ -99,9 +99,9 @@ class EditorPage {
 	}
 
 	async getFirstBlockVisible() {
-		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row ")]`;
+		const firstBlockLocator = `//*[contains(@${ this.accessibilityIdXPathAttrib }, " Block. Row 1")]`; // notice the `1`, looking only for the first block but the "Block. Row 1" text is there in many of the parent components
 		const elements = await this.driver.elementsByXPath( firstBlockLocator );
-		return elements[ 0 ];
+		return elements[ elements.length - 1 ]; // return the last found as it will be the innermost
 	}
 
 	async getLastBlockVisible() {