[RNMobile] fix group appender behaviour

packages/block-editor/src/components/add-block-separator/index.native.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withPreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const AddBlockSeparator = ( { getStylesFromColorScheme } ) => {
+	const lineStyle = getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+	const labelStyle = 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>
+	);
+};
+
+export default withPreferredColorScheme( AddBlockSeparator )
+;

packages/block-editor/src/components/add-block-separator/style.native.scss

@@ -0,0 +1,26 @@
+.lineStyleAddHere {
+	flex: 1;
+	background-color: #0087be; // blue_wordpress
+	align-self: center;
+	height: 2px;
+}
+
+.lineStyleAddHereDark {
+	background-color: $gray-50;
+}
+
+.labelStyleAddHere {
+	flex: 1;
+	text-align: center;
+	font-family: $default-monospace-font;
+	font-size: 12px;
+	font-weight: bold;
+}
+
+.labelStyleAddHereDark {
+	color: $gray-20;
+}
+
+.containerStyleAddHere {
+	flex-direction: row;
+}

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 AddBlockSeparator from '../add-block-separator';
 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 ) && <AddBlockSeparator /> }
 				{ 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 ) && <AddBlockSeparator /> }
 			</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/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 AddBlockSeparator from '../add-block-separator';
 
 const defaultRenderToggle = ( { onToggle, disabled, style } ) => (
 	<ToolbarButton
@@ -57,7 +58,11 @@ class Inserter extends Component {
 			disabled,
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
+			showSeparator,
 		} = this.props;
+		if ( showSeparator && isOpen ) {
+			return <AddBlockSeparator />;
+		}
 		const style = getStylesFromColorScheme( styles.addBlockButton, styles.addBlockButtonDark );
 		return renderToggle( { onToggle, isOpen, disabled, style } );
 	}