diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index ff626aada27646..c41a1263b6a5ab 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -8,9 +8,15 @@ import { withDispatch } from '@wordpress/data';
import { withFocusOutside } from '@wordpress/components';
import { withInstanceId, compose } from '@wordpress/compose';
+import { View } from 'react-native';
+
+import styles from './style.scss';
+
const minHeight = 30;
class PostTitle extends Component {
+ titleViewRef: Object;
+
constructor() {
super( ...arguments );
@@ -23,10 +29,23 @@ class PostTitle extends Component {
};
}
+ componentDidMount() {
+ if ( this.props.ref ) {
+ this.props.ref( this );
+ }
+ }
+
handleFocusOutside() {
this.onUnselect();
}
+ focus() {
+ if ( this.titleViewRef ) {
+ this.titleViewRef.focus();
+ this.setState( { isSelected: true } );
+ }
+ }
+
onSelect() {
this.setState( { isSelected: true } );
this.props.clearSelectedBlock();
@@ -41,34 +60,41 @@ class PostTitle extends Component {
placeholder,
style,
title,
+ focusedBorderColor,
+ borderStyle,
} = this.props;
const decodedPlaceholder = decodeEntities( placeholder );
+ const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent';
return (
- {
- this.props.onUpdate( value );
- } }
- onContentSizeChange={ ( event ) => {
- this.setState( { aztecHeight: event.aztecHeight } );
- } }
- placeholder={ decodedPlaceholder }
- value={ title }
- onSplit={ this.props.onEnterPress }
- setRef={ this.props.setRef }
- >
-
+
+ {
+ this.props.onUpdate( value );
+ } }
+ onContentSizeChange={ ( event ) => {
+ this.setState( { aztecHeight: event.aztecHeight } );
+ } }
+ placeholder={ decodedPlaceholder }
+ value={ title }
+ onSplit={ this.props.onEnterPress }
+ setRef={ ( ref ) => {
+ this.titleViewRef = ref;
+ } }
+ >
+
+
);
}
}
diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss
new file mode 100644
index 00000000000000..51879fd555c6b4
--- /dev/null
+++ b/packages/editor/src/components/post-title/style.native.scss
@@ -0,0 +1,6 @@
+
+.titleContainer {
+ padding-left: 16;
+ padding-right: 16;
+ margin-top: 24;
+}