[RNMobile] Long-press on inserter to show options for "add above" and…

… "add below" (#18791)

* Add onLongPress prop to Button

* Show inserter menu on long press

* Make onLongPress a prop of toggle

* Make withSelect of Inserter return destinationRootClientId

* Insert default block before the selected one on long press

* Add add canReplaceBlock key to the insertionPoint state

* Hide a block in list only if it can be replaced

* Move insertion index logic from menu to inserter

* Update selector tests for newly added key in state

* Add insertionIndexAfter and isAnyBlockSelected props with selector

* Update docs for newly added key in state

* Add insertionType to component state and map to insertion index

* Refactor insertion index logic

* Show BottomSheet on long press to choose to insert before or after

* Update UI strings to be title case

* Hide cancel button from Bottom Sheet on Android

* Add icons to Bottom Sheet options on Android

* Add “Replace Current Block” option to menu on long-press

* Scroll to newly added block if it doesn't trigger keyboard to open

* Change “Replace Current Block” menu icon on Android

* Use shorter syntax for setState

* Rename getShouldReplaceBlock method to shouldReplaceBlock

* Revert "Scroll to newly added block if it doesn't trigger keyboard to open"

This reverts commit 9c1c71d25eb573427ca09761bd3154286d19539b.

* Revert “Add canReplaceBlock key to the insertionPoint state"

* Remove Block show/hide logic from BlockList

* Update Inserter local state to store block insertion information

* Make InserterMenu add/remove unmodified default block during replace

* Handle replacing last remaining block

* Fix Inserter test

* Fix code style issue

* Move insertion options into getInsertionOptions function

* Add comment about removing last block case

* Use findByProps instead of toJSON when testing Inserter

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

@@ -10,7 +10,7 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
 
 /**
@@ -127,17 +127,9 @@ export class BlockList extends Component {
 		);
 	}
 
-	isReplaceable( block ) {
-		if ( ! block ) {
-			return false;
-		}
-		return isUnmodifiedDefaultBlock( block );
-	}
-
-	renderItem( { item: clientId, index } ) {
+	renderItem( { item: clientId } ) {
 		const {
 			isReadOnly,
-			shouldShowBlockAtIndex,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
 		} = this.props;
@@ -146,15 +138,14 @@ export class BlockList extends Component {
 			<ReadableContentView>
 				<View pointerEvents={ isReadOnly ? 'box-only' : 'auto' }>
 					{ shouldShowInsertionPointBefore( clientId ) && <BlockInsertionPoint /> }
-					{ shouldShowBlockAtIndex( index ) && (
-						<BlockListBlock
-							key={ clientId }
-							showTitle={ false }
-							clientId={ clientId }
-							rootClientId={ this.props.rootClientId }
-							onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
-							isSmallScreen={ ! this.props.isFullyBordered }
-						/> ) }
+					<BlockListBlock
+						key={ clientId }
+						showTitle={ false }
+						clientId={ clientId }
+						rootClientId={ this.props.rootClientId }
+						onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
+						isSmallScreen={ ! this.props.isFullyBordered }
+					/>
 					{ ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) && <BlockInsertionPoint /> }
 				</View>
 			</ReadableContentView>
@@ -180,25 +171,17 @@ export default compose( [
 	withSelect( ( select, { rootClientId } ) => {
 		const {
 			getBlockCount,
-			getBlockIndex,
 			getBlockOrder,
 			getSelectedBlockClientId,
 			getBlockInsertionPoint,
 			isBlockInsertionPointVisible,
-			getSelectedBlock,
 			getSettings,
 		} = select( 'core/block-editor' );
 
-		const {
-			getGroupingBlockName,
-		} = select( 'core/blocks' );
-
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const blockClientIds = getBlockOrder( rootClientId );
 		const insertionPoint = getBlockInsertionPoint();
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
-		const selectedBlock = getSelectedBlock();
-		const hasInnerBlocks = selectedBlock && selectedBlock.name === getGroupingBlockName();
 		const shouldShowInsertionPointBefore = ( clientId ) => {
 			return (
 				blockInsertionPointIsVisible &&
@@ -224,26 +207,12 @@ export default compose( [
 			);
 		};
 
-		const selectedBlockIndex = getBlockIndex( selectedBlockClientId, rootClientId );
-
-		const shouldShowBlockAtIndex = ( index ) => {
-			const shouldHideBlockAtIndex = (
-				! hasInnerBlocks && blockInsertionPointIsVisible &&
-				// if `index` === `insertionPoint.index`, then block is replaceable
-				index === insertionPoint.index &&
-				// only hide selected block
-				index === selectedBlockIndex
-			);
-			return ! shouldHideBlockAtIndex;
-		};
-
 		const isReadOnly = getSettings().readOnly;
 
 		return {
 			blockClientIds,
 			blockCount: getBlockCount( rootClientId ),
 			isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
-			shouldShowBlockAtIndex,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
 			selectedBlockClientId,

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

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dropdown, ToolbarButton, Dashicon } from '@wordpress/components';
+import { Dropdown, ToolbarButton, Dashicon, Picker } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -15,7 +15,7 @@ import styles from './style.scss';
 import InserterMenu from './menu';
 import BlockInsertionPoint from '../block-list/insertion-point';
 
-const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
+const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
 	<ToolbarButton
 		title={ __( 'Add block' ) }
 		icon={ ( <Dashicon icon="plus-alt" style={ style } color={ style.color } /> ) }
@@ -25,12 +25,13 @@ const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
 			// testID is present to disambiguate this element for native UI tests. It's not
 			// usually required for components. See: https://git.io/JeQ7G.
 			testID: 'add-block-button',
+			onLongPress,
 		} }
 		isDisabled={ disabled }
 	/>
 );
 
-class Inserter extends Component {
+export class Inserter extends Component {
 	constructor() {
 		super( ...arguments );
 
@@ -39,6 +40,75 @@ class Inserter extends Component {
 		this.renderContent = this.renderContent.bind( this );
 	}
 
+	getInsertionOptions() {
+		const addBeforeOption = {
+			value: 'before',
+			label: __( 'Add Block Before' ),
+			icon: 'insert-before',
+		};
+
+		const replaceCurrentOption = {
+			value: 'replace',
+			label: __( 'Replace Current Block' ),
+			icon: 'plus-alt',
+		};
+
+		const addAfterOption = {
+			value: 'after',
+			label: __( 'Add Block After' ),
+			icon: 'insert-after',
+		};
+
+		const addToBeginningOption = {
+			value: 'before',
+			label: __( 'Add To Beginning' ),
+			icon: 'insert-before',
+		};
+
+		const addToEndOption = {
+			value: 'after',
+			label: __( 'Add To End' ),
+			icon: 'insert-after',
+		};
+
+		const { isAnyBlockSelected, isSelectedBlockReplaceable } = this.props;
+		if ( isAnyBlockSelected ) {
+			if ( isSelectedBlockReplaceable ) {
+				return [ addBeforeOption, replaceCurrentOption, addAfterOption ];
+			}
+			return [ addBeforeOption, addAfterOption ];
+		}
+		return [ addToBeginningOption, addToEndOption ];
+	}
+
+	getInsertionIndex( insertionType ) {
+		const {
+			insertionIndexDefault,
+			insertionIndexBefore,
+			insertionIndexAfter,
+		} = this.props;
+		if ( insertionType === 'before' || insertionType === 'replace' ) {
+			return insertionIndexBefore;
+		}
+		if ( insertionType === 'after' ) {
+			return insertionIndexAfter;
+		}
+		return insertionIndexDefault;
+	}
+
+	shouldReplaceBlock( insertionType ) {
+		const {
+			isSelectedBlockReplaceable,
+		} = this.props;
+		if ( insertionType === 'replace' ) {
+			return true;
+		}
+		if ( insertionType === 'default' && isSelectedBlockReplaceable ) {
+			return true;
+		}
+		return false;
+	}
+
 	onToggle( isOpen ) {
 		const { onToggle } = this.props;
 
@@ -69,7 +139,46 @@ class Inserter extends Component {
 			return <BlockInsertionPoint />;
 		}
 		const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
-		return renderToggle( { onToggle, isOpen, disabled, style } );
+
+		const onPress = () => {
+			this.setState( {
+				destinationRootClientId: this.props.destinationRootClientId,
+				shouldReplaceBlock: this.shouldReplaceBlock( 'default' ),
+				insertionIndex: this.getInsertionIndex( 'default' ),
+			}, onToggle );
+		};
+
+		const onLongPress = () => {
+			if ( this.picker ) {
+				this.picker.presentPicker();
+			}
+		};
+
+		const onPickerSelect = ( insertionType ) => {
+			this.setState( {
+				destinationRootClientId: this.props.destinationRootClientId,
+				shouldReplaceBlock: this.shouldReplaceBlock( insertionType ),
+				insertionIndex: this.getInsertionIndex( insertionType ),
+			}, onToggle );
+		};
+
+		return (
+			<>
+				{ renderToggle( {
+					onToggle: onPress,
+					isOpen,
+					disabled,
+					style,
+					onLongPress,
+				} ) }
+				<Picker
+					ref={ ( instance ) => ( this.picker = instance ) }
+					options={ this.getInsertionOptions() }
+					onChange={ onPickerSelect }
+					hideCancelButton
+				/>
+			</>
+		);
 	}
 
 	/**
@@ -82,16 +191,25 @@ class Inserter extends Component {
 	 * @return {WPElement} Dropdown content element.
 	 */
 	renderContent( { onClose, isOpen } ) {
-		const { rootClientId, clientId, isAppender } = this.props;
-
+		const {
+			clientId,
+			isAppender,
+		} = this.props;
+		const {
+			destinationRootClientId,
+			shouldReplaceBlock,
+			insertionIndex,
+		} = this.state;
 		return (
 			<InserterMenu
 				isOpen={ isOpen }
 				onSelect={ onClose }
 				onDismiss={ onClose }
-				rootClientId={ rootClientId }
+				rootClientId={ destinationRootClientId }
 				clientId={ clientId }
 				isAppender={ isAppender }
+				shouldReplaceBlock={ shouldReplaceBlock }
+				insertionIndex={ insertionIndex }
 			/>
 		);
 	}
@@ -111,23 +229,76 @@ class Inserter extends Component {
 export default compose( [
 	withSelect( ( select, { clientId, isAppender, rootClientId } ) => {
 		const {
-			getInserterItems,
 			getBlockRootClientId,
 			getBlockSelectionEnd,
+			getBlockOrder,
+			getBlockIndex,
+			getBlock,
 		} = select( 'core/block-editor' );
 
-		let destinationRootClientId = rootClientId;
-		if ( ! destinationRootClientId && ! clientId && ! isAppender ) {
-			const end = getBlockSelectionEnd();
-			if ( end ) {
-				destinationRootClientId = getBlockRootClientId( end ) || undefined;
+		const end = getBlockSelectionEnd();
+		// `end` argument (id) can refer to the component which is removed
+		// due to pressing `undo` button, that's why we need to check
+		// if `getBlock( end) is valid, otherwise `null` is passed
+		const isAnyBlockSelected = ( ! isAppender && end && getBlock( end ) );
+		const destinationRootClientId = isAnyBlockSelected ?
+			getBlockRootClientId( end ) :
+			rootClientId;
+		const selectedBlockIndex = getBlockIndex( end, destinationRootClientId );
+		const endOfRootIndex = getBlockOrder( rootClientId ).length;
+		const isSelectedUnmodifiedDefaultBlock = isAnyBlockSelected ?
+			isUnmodifiedDefaultBlock( getBlock( end ) ) :
+			undefined;
+
+		function getDefaultInsertionIndex() {
+			const {
+				getSettings,
+			} = select( 'core/block-editor' );
+
+			const { __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop } = getSettings();
+
+			// if post title is selected insert as first block
+			if ( shouldInsertAtTheTop ) {
+				return 0;
 			}
+
+			// If the clientId is defined, we insert at the position of the block.
+			if ( clientId ) {
+				return getBlockIndex( clientId, rootClientId );
+			}
+
+			// If there is a selected block,
+			if ( isAnyBlockSelected ) {
+				// and the last selected block is unmodified (empty), it will be replaced
+				if ( isSelectedUnmodifiedDefaultBlock ) {
+					return selectedBlockIndex;
+				}
+
+				// we insert after the selected block.
+				return selectedBlockIndex + 1;
+			}
+
+			// Otherwise, we insert at the end of the current rootClientId
+			return endOfRootIndex;
 		}
-		const inserterItems = getInserterItems( destinationRootClientId );
+
+		const insertionIndexBefore = isAnyBlockSelected ?
+			selectedBlockIndex :
+			0;
+
+		const insertionIndexAfter = isAnyBlockSelected ?
+			selectedBlockIndex + 1 :
+			endOfRootIndex;
 
 		return {
-			items: inserterItems.filter( ( { name } ) => name !== getUnregisteredTypeHandlerName() ),
+			destinationRootClientId,
+			insertionIndexDefault: getDefaultInsertionIndex(),
+			insertionIndexBefore,
+			insertionIndexAfter,
+			isAnyBlockSelected,
+			isSelectedBlockReplaceable: isSelectedUnmodifiedDefaultBlock,
 		};
 	} ),
+
 	withPreferredColorScheme,
 ] )( Inserter );