When inserting block from title, replace block if appropriate (#16574)

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

@@ -61,15 +61,19 @@ export class BlockList extends Component {
 		// create an empty block of the selected type
 		const newBlock = createBlock( itemValue );
 
-		this.finishBlockAppendingOrReplacing( newBlock );
+		this.finishInsertingOrReplacingBlock( newBlock );
 	}
 
-	finishBlockAppendingOrReplacing( newBlock ) {
-		// now determine whether we need to replace the currently selected block (if it's empty)
-		// or just add a new block as usual
+	finishInsertingOrReplacingBlock( newBlock ) {
 		if ( this.isReplaceable( this.props.selectedBlock ) ) {
-			// do replace here
+			// replace selected block
 			this.props.replaceBlock( this.props.selectedBlockClientId, newBlock );
+		} else if ( this.props.isPostTitleSelected && this.isReplaceable( this.props.firstBlock ) ) {
+			// replace first block in post: there is no selected block when the post title is selected,
+			// so replaceBlock does not select the new block and we need to manually select the new block
+			const { clientId: firstBlockId } = this.props.firstBlock;
+			this.props.replaceBlock( firstBlockId, newBlock );
+			this.props.selectBlock( newBlock.clientId );
 		} else {
 			this.props.insertBlock( newBlock, this.getNewBlockInsertionIndex() );
 		}
@@ -110,7 +114,7 @@ export class BlockList extends Component {
 			newMediaBlock.attributes.id = payload.mediaId;
 
 			// finally append or replace as appropriate
-			this.finishBlockAppendingOrReplacing( newMediaBlock );
+			this.finishInsertingOrReplacingBlock( newMediaBlock );
 		} );
 	}
 
@@ -260,7 +264,7 @@ export class BlockList extends Component {
 		const paragraphBlock = createBlock( 'core/paragraph' );
 		return (
 			<TouchableWithoutFeedback onPress={ () => {
-				this.finishBlockAppendingOrReplacing( paragraphBlock );
+				this.finishInsertingOrReplacingBlock( paragraphBlock );
 			} } >
 				<View style={ styles.blockListFooter } />
 			</TouchableWithoutFeedback>
@@ -277,6 +281,7 @@ export class BlockList extends Component {
 export default compose( [
 	withSelect( ( select, { rootClientId } ) => {
 		const {
+			getBlock,
 			getBlockCount,
 			getBlockName,
 			getBlockIndex,
@@ -287,13 +292,15 @@ export default compose( [
 		} = select( 'core/block-editor' );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
+		const blockClientIds = getBlockOrder( rootClientId );
 
 		return {
-			blockClientIds: getBlockOrder( rootClientId ),
+			blockClientIds,
 			blockCount: getBlockCount( rootClientId ),
 			getBlockName,
 			isBlockSelected,
 			selectedBlock: getSelectedBlock(),
+			firstBlock: getBlock( blockClientIds[ 0 ] ),
 			selectedBlockClientId,
 			selectedBlockOrder: getBlockIndex( selectedBlockClientId ),
 		};
@@ -303,12 +310,14 @@ export default compose( [
 			insertBlock,
 			replaceBlock,
 			clearSelectedBlock,
+			selectBlock,
 		} = dispatch( 'core/block-editor' );
 
 		return {
 			clearSelectedBlock,
 			insertBlock,
 			replaceBlock,
+			selectBlock,
 		};
 	} ),
 ] )( BlockList );