Add new block indicator should show in place of empty block instead o…

…f below it (#16272) Show "ADD BLOCK HERE" item above block when a block is empty
WordPress · Jun 25, 2019 · 56de120 · 56de120
1 parent 64a8a7c
commit 56de120
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -32,6 +32,7 @@ export class BlockList extends Component {
 		super( ...arguments );
 
 		this.renderItem = this.renderItem.bind( this );
+		this.renderAddBlockSeparator = this.renderAddBlockSeparator.bind( this );
 		this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( this );
 		this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind( this );
 		this.onBlockTypeSelected = this.onBlockTypeSelected.bind( this );
@@ -213,8 +214,10 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId } ) {
+		const shouldReverseContent = this.isReplaceable( this.props.selectedBlock );
+
 		return (
-			<ReadableContentView>
+			<ReadableContentView reversed={ shouldReverseContent }>
 				<BlockListBlock
 					key={ clientId }
 					showTitle={ false }
@@ -224,17 +227,21 @@ export class BlockList extends Component {
 					borderStyle={ this.blockHolderBorderStyle() }
 					focusedBorderColor={ styles.blockHolderFocused.borderColor }
 				/>
-				{ this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && (
-					<View style={ styles.containerStyleAddHere } >
-						<View style={ styles.lineStyleAddHere }></View>
-						<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
-						<View style={ styles.lineStyleAddHere }></View>
-					</View>
-				) }
+				{ this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && this.renderAddBlockSeparator() }
 			</ReadableContentView>
 		);
 	}
 
+	renderAddBlockSeparator() {
+		return (
+			<View style={ styles.containerStyleAddHere } >
+				<View style={ styles.lineStyleAddHere }></View>
+				<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
+				<View style={ styles.lineStyleAddHere }></View>
+			</View>
+		);
+	}
+
 	renderHTML() {
 		return (
 			<HTMLTextInput { ...this.props } parentHeight={ this.props.rootViewHeight } />

diff --git a/packages/components/src/mobile/readable-content-view/index.native.js b/packages/components/src/mobile/readable-content-view/index.native.js
@@ -8,9 +8,9 @@ import { View, Dimensions } from 'react-native';
  */
 import styles from './style.scss';
 
-const ReadableContentView = ( { children } ) => (
+const ReadableContentView = ( { reversed, children } ) => (
 	<View style={ styles.container } >
-		<View style={ styles.centeredContent } >
+		<View style={ reversed ? styles.reversedCenteredContent : styles.centeredContent } >
 			{ children }
 		</View>
 	</View>

diff --git a/packages/components/src/mobile/readable-content-view/style.native.scss b/packages/components/src/mobile/readable-content-view/style.native.scss
@@ -6,3 +6,9 @@
 	width: 100%;
 	max-width: 580;
 }
+
+.reversedCenteredContent {
+	flex-direction: column-reverse;
+	width: 100%;
+	max-width: 580;
+}