[Mobile]Fix placeholder position of block appender (#14386)

* Fix placeholder position of block appender * Remove unused import * Change import position * Remove unused import in css file * Remove extra container view * Update travis.yml from master branch to fix CI issues
WordPress · Mar 13, 2019 · 18470fa · 18470fa
1 parent b958b6c
commit 18470fa
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 24 deletions.
diff --git a/packages/block-editor/src/components/default-block-appender/index.native.js b/packages/block-editor/src/components/default-block-appender/index.native.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/editor';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -21,6 +22,7 @@ export function DefaultBlockAppender( {
 	isVisible,
 	onAppend,
 	placeholder,
+	containerStyle,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -32,16 +34,10 @@ export function DefaultBlockAppender( {
 		<TouchableWithoutFeedback
 			onPress={ onAppend }
 		>
-			<View style={ styles.blockHolder } pointerEvents="box-only">
-				<View style={ styles.blockContainer }>
-					<TextInput
-						style={ styles.textView }
-						textAlignVertical="top"
-						multiline
-						numberOfLines={ 0 }
-						value={ value }
-					/>
-				</View>
+			<View style={ [ styles.blockHolder, containerStyle ] } pointerEvents="box-only">
+				<RichText
+					placeholder={ value }
+				/>
 			</View>
 		</TouchableWithoutFeedback>
 	);

diff --git a/packages/block-editor/src/components/default-block-appender/style.native.scss b/packages/block-editor/src/components/default-block-appender/style.native.scss
@@ -3,16 +3,3 @@
 .blockHolder {
 	flex: 1 1 auto;
 }
-
-.blockContainer {
-	background-color: $white;
-	padding-top: 0;
-	padding-left: 16px;
-	padding-right: 16px;
-}
-
-.textView {
-	color: $gray;
-	font-size: 16px;
-	font-family: $default-regular-font;
-}