[Mobile]Update PostTitle to apply borders when it is focused (#13970)

* Trigger onFocusStatusChange from PostTitle

* Fix lint issue

* Update post title shadow mechanism

Also open inner ref so that focus state can be updated when focus is made programmatically

* Update props

* Update onRef as ref

* Update title padding&margin

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 (
-			<RichText
-				tagName={ 'p' }
-				rootTagsToEliminate={ [ 'strong' ] }
-				onFocus={ this.onSelect }
-				onBlur={ this.props.onBlur } // always assign onBlur as a props
-				multiline={ false }
-				style={ [ style, {
-					minHeight: Math.max( minHeight, this.state.aztecHeight ),
-				} ] }
-				fontSize={ 24 }
-				fontWeight={ 'bold' }
-				onChange={ ( value ) => {
-					this.props.onUpdate( value );
-				} }
-				onContentSizeChange={ ( event ) => {
-					this.setState( { aztecHeight: event.aztecHeight } );
-				} }
-				placeholder={ decodedPlaceholder }
-				value={ title }
-				onSplit={ this.props.onEnterPress }
-				setRef={ this.props.setRef }
-			>
-			</RichText>
+			<View style={ [ styles.titleContainer, borderStyle, { borderColor } ] }>
+				<RichText
+					tagName={ 'p' }
+					rootTagsToEliminate={ [ 'strong' ] }
+					onFocus={ this.onSelect }
+					onBlur={ this.props.onBlur } // always assign onBlur as a props
+					multiline={ false }
+					style={ [ style, {
+						minHeight: Math.max( minHeight, this.state.aztecHeight ),
+					} ] }
+					fontSize={ 24 }
+					fontWeight={ 'bold' }
+					onChange={ ( value ) => {
+						this.props.onUpdate( value );
+					} }
+					onContentSizeChange={ ( event ) => {
+						this.setState( { aztecHeight: event.aztecHeight } );
+					} }
+					placeholder={ decodedPlaceholder }
+					value={ title }
+					onSplit={ this.props.onEnterPress }
+					setRef={ ( ref ) => {
+						this.titleViewRef = ref;
+					} }
+				>
+				</RichText>
+			</View>
 		);
 	}
 }

packages/editor/src/components/post-title/style.native.scss

@@ -0,0 +1,6 @@
+
+.titleContainer {
+	padding-left: 16;
+	padding-right: 16;
+	margin-top: 24;
+}