Make a simple version of DefaultBlockAppender for mobile (#12434)

* Make a simple version of DefaultBlockAppender for mobile

* Use the same padding used for other blocks in DefaultBlockAppender

* Update copy, auto focus and bind keypress

* Do not bind key events

* Change style of placeholder

Author: Tug

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

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/compose';
+import { decodeEntities } from '@wordpress/html-entities';
+import { withSelect, withDispatch } from '@wordpress/data';
+
+import styles from './style.scss';
+
+export function DefaultBlockAppender( {
+	isLocked,
+	isVisible,
+	onAppend,
+	placeholder,
+} ) {
+	if ( isLocked || ! isVisible ) {
+		return null;
+	}
+
+	const value = decodeEntities( placeholder ) || __( 'Start writing or press \u2295 to add content' );
+
+	return (
+		<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>
+		</TouchableWithoutFeedback>
+	);
+}
+
+export default compose(
+	withSelect( ( select, ownProps ) => {
+		const { getBlockCount, getEditorSettings, getTemplateLock } = select( 'core/editor' );
+
+		const isEmpty = ! getBlockCount( ownProps.rootClientId );
+		const { bodyPlaceholder } = getEditorSettings();
+
+		return {
+			isVisible: isEmpty,
+			isLocked: !! getTemplateLock( ownProps.rootClientId ),
+			placeholder: bodyPlaceholder,
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps ) => {
+		const {
+			insertDefaultBlock,
+			startTyping,
+		} = dispatch( 'core/editor' );
+
+		return {
+			onAppend() {
+				const { rootClientId } = ownProps;
+
+				insertDefaultBlock( undefined, rootClientId );
+				startTyping();
+			},
+		};
+	} ),
+)( DefaultBlockAppender );

packages/editor/src/components/default-block-appender/style.native.scss

@@ -0,0 +1,14 @@
+
+.blockHolder {
+	flex: 1 1 auto;
+}
+
+.blockContainer {
+	background-color: $white;
+	padding: 8px;
+}
+
+.textView {
+	color: #87a6bc;
+	font-size: 16px;
+}

packages/editor/src/components/index.native.js

@@ -6,5 +6,6 @@ export { default as MediaPlaceholder } from './media-placeholder';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
+export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';