[RNMobile] fix group appender behaviour

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

@@ -21,14 +21,15 @@ function BlockListAppender( {
 	canInsertDefaultBlock,
 	isLocked,
 	renderAppender: CustomAppender,
+	showSeparator,
 } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
 	if ( CustomAppender ) {
 		return (
-			<CustomAppender />
+			<CustomAppender showSeparator={ showSeparator } />
 		);
 	}
 
@@ -39,6 +40,7 @@ function BlockListAppender( {
 				lastBlockClientId={ last( blockClientIds ) }
 				containerStyle={ styles.blockListAppender }
 				placeholder={ blockClientIds.length > 0 ? '' : null }
+				showSeparator={ showSeparator }
 			/>
 		);
 	}

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

@@ -2,13 +2,12 @@
  * External dependencies
  */
 import { identity } from 'lodash';
-import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';
+import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
@@ -20,6 +19,7 @@ import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/component
 import styles from './style.scss';
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
+import BlockInsertionPoint from './insertion-point';
 import __experimentalBlockListFooter from '../block-list-footer';
 
 const innerToolbarHeight = 44;
@@ -29,7 +29,6 @@ export class BlockList extends Component {
 		super( ...arguments );
 
 		this.renderItem = this.renderItem.bind( this );
-		this.renderAddBlockSeparator = this.renderAddBlockSeparator.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
 		this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind( this );
 		this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
@@ -59,13 +58,11 @@ export class BlockList extends Component {
 		const willShowInsertionPoint = shouldShowInsertionPointBefore(); // call without the client_id argument since this is the appender
 		return (
 			<ReadableContentView>
-				{ willShowInsertionPoint ?
-					this.renderAddBlockSeparator() :	// show the new-block indicator when we're inserting a block or
-					<BlockListAppender				// show the default appender, as normal, when not inserting a block
-						rootClientId={ this.props.rootClientId }
-						renderAppender={ this.props.renderAppender }
-					/>
-				}
+				<BlockListAppender				// show the default appender, anormal, when not inserting a block
+					rootClientId={ this.props.rootClientId }
+					renderAppender={ this.props.renderAppender }
+					showSeparator={ willShowInsertionPoint }
+				/>
 			</ReadableContentView>
 		);
 	}
@@ -131,7 +128,7 @@ export class BlockList extends Component {
 		const { shouldShowBlockAtIndex, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter } = this.props;
 		return (
 			<ReadableContentView>
-				{ shouldShowInsertionPointBefore( clientId ) && this.renderAddBlockSeparator() }
+				{ shouldShowInsertionPointBefore( clientId ) && <BlockInsertionPoint /> }
 				{ shouldShowBlockAtIndex( index ) && (
 					<BlockListBlock
 						key={ clientId }
@@ -141,23 +138,11 @@ export class BlockList extends Component {
 						onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
 						isSmallScreen={ ! this.props.isFullyBordered }
 					/> ) }
-				{ shouldShowInsertionPointAfter( clientId ) && this.renderAddBlockSeparator() }
+				{ shouldShowInsertionPointAfter( clientId ) && <BlockInsertionPoint /> }
 			</ReadableContentView>
 		);
 	}
 
-	renderAddBlockSeparator() {
-		const lineStyle = this.props.getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
-		const labelStyle = this.props.getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
-		return (
-			<View style={ styles.containerStyleAddHere } >
-				<View style={ lineStyle }></View>
-				<Text style={ labelStyle } >{ __( 'ADD BLOCK HERE' ) }</Text>
-				<View style={ lineStyle }></View>
-			</View>
-		);
-	}
-
 	renderBlockListFooter() {
 		const paragraphBlock = createBlock( 'core/paragraph' );
 		return (

packages/block-editor/src/components/block-list/insertion-point.native.js

@@ -7,40 +7,24 @@ import { Text, View } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withSelect } from '@wordpress/data';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
 
-const BlockInsertionPoint = ( { showInsertionPoint } ) => {
-	if ( ! showInsertionPoint ) {
-		return null;
-	}
+const BlockInsertionPoint = ( { getStylesFromColorScheme } ) => {
+	const lineStyle = getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+	const labelStyle = getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
 
 	return (
 		<View style={ styles.containerStyleAddHere } >
-			<View style={ styles.lineStyleAddHere }></View>
-			<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
-			<View style={ styles.lineStyleAddHere }></View>
+			<View style={ lineStyle }></View>
+			<Text style={ labelStyle } >{ __( 'ADD BLOCK HERE' ) }</Text>
+			<View style={ lineStyle }></View>
 		</View>
 	);
 };
 
-export default withSelect( ( select, { clientId, rootClientId } ) => {
-	const {
-		getBlockIndex,
-		getBlockInsertionPoint,
-		isBlockInsertionPointVisible,
-	} = select( 'core/block-editor' );
-	const blockIndex = getBlockIndex( clientId, rootClientId );
-	const insertionPoint = getBlockInsertionPoint();
-	const showInsertionPoint = (
-		isBlockInsertionPointVisible() &&
-		insertionPoint.index === blockIndex &&
-		insertionPoint.rootClientId === rootClientId
-	);
-
-	return { showInsertionPoint };
-} )( BlockInsertionPoint );
+export default withPreferredColorScheme( BlockInsertionPoint );

packages/block-editor/src/components/button-block-appender/index.native.js

@@ -15,7 +15,7 @@ import { Button, Dashicon } from '@wordpress/components';
 import Inserter from '../inserter';
 import styles from './styles.scss';
 
-function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme } ) {
+function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator } ) {
 	const appenderStyle = { ...styles.appender, ...getStylesFromColorScheme( styles.appenderLight, styles.appenderDark ) };
 	const addBlockButtonStyle = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
 
@@ -41,6 +41,7 @@ function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme } ) {
 					</Button>
 				) }
 				isAppender
+				showSeparator={ showSeparator }
 			/>
 		</>
 	);

packages/block-editor/src/components/inner-blocks/button-block-appender.js

@@ -4,9 +4,9 @@
 import BaseButtonBlockAppender from '../button-block-appender';
 import withClientId from './with-client-id';
 
-export const ButtonBlockAppender = ( { clientId } ) => {
+export const ButtonBlockAppender = ( { clientId, showSeparator } ) => {
 	return (
-		<BaseButtonBlockAppender rootClientId={ clientId } />
+		<BaseButtonBlockAppender rootClientId={ clientId } showSeparator={ showSeparator } />
 	);
 };
 

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

@@ -13,6 +13,7 @@ import { getUnregisteredTypeHandlerName } from '@wordpress/blocks';
  */
 import styles from './style.scss';
 import InserterMenu from './menu';
+import BlockInsertionPoint from '../block-list/insertion-point';
 
 const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
 	<ToolbarButton
@@ -62,7 +63,11 @@ class Inserter extends Component {
 			disabled,
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
+			showSeparator,
 		} = this.props;
+		if ( showSeparator && isOpen ) {
+			return <BlockInsertionPoint />;
+		}
 		const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
 		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}