diff --git a/packages/editor/src/components/default-block-appender/index.native.js b/packages/editor/src/components/default-block-appender/index.native.js new file mode 100644 index 0000000000000..436ecc5772b00 --- /dev/null +++ b/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 ( + + + + + + + + ); +} + +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 ); diff --git a/packages/editor/src/components/default-block-appender/style.native.scss b/packages/editor/src/components/default-block-appender/style.native.scss new file mode 100644 index 0000000000000..cc08f6c820ca9 --- /dev/null +++ b/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; +} diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index dc651f9e7e0a6..229efa5879cc3 100644 --- a/packages/editor/src/components/index.native.js +++ b/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';