Skip to content

Commit

Permalink
Make a simple version of DefaultBlockAppender for mobile (#12434)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
Tug committed Dec 6, 2018
1 parent f62f336 commit 8034516
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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 );
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

.blockHolder {
flex: 1 1 auto;
}

.blockContainer {
background-color: $white;
padding: 8px;
}

.textView {
color: #87a6bc;
font-size: 16px;
}
1 change: 1 addition & 0 deletions packages/editor/src/components/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

0 comments on commit 8034516

Please sign in to comment.