Add border on Title when focused

__mocks__/styleMock.js

@@ -25,4 +25,7 @@ module.exports = {
 	'editor-plain-text': {
 		fontFamily: 'serif',
 	},
+	blockHolderFocused: {
+		borderColor: 'gray',
+	},
 };

src/block-management/block-holder.js

@@ -8,8 +8,6 @@ import {
 	View,
 	Text,
 	TouchableWithoutFeedback,
-	Dimensions,
-	LayoutChangeEvent,
 	NativeSyntheticEvent,
 	NativeTouchEvent,
 } from 'react-native';
@@ -34,6 +32,8 @@ type PropsType = BlockType & {
 	isFirstBlock: boolean,
 	isLastBlock: boolean,
 	showTitle: boolean,
+	borderStyle: Object,
+	focusedBorderColor: string,
 	getBlockIndex: ( clientId: string, rootClientId: string ) => number,
 	getPreviousBlockClientId: ( clientId: string ) => string,
 	getNextBlockClientId: ( clientId: string ) => string,
@@ -125,19 +125,6 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
 		}
 	};
 
-	onBlockHolderLayout = ( event: LayoutChangeEvent ) => {
-		const { width: fullWidth } = Dimensions.get( 'window' );
-		const { width } = event.nativeEvent.layout;
-		const isFullyBordered = fullWidth > width;
-		if ( isFullyBordered !== this.state.isFullyBordered ) {
-			this.setState( { ...this.state, isFullyBordered } );
-		}
-	}
-
-	blockHolderFocusedStyle() {
-		return this.state.isFullyBordered ? styles.blockHolderFocusedFullBordered : styles.blockHolderFocusedSemiBordered;
-	}
-
 	renderToolbar() {
 		if ( ! this.props.isSelected ) {
 			return null;
@@ -178,11 +165,13 @@ export class BlockHolder extends React.Component<PropsType, StateType> {
 	}
 
 	render() {
-		const { isSelected } = this.props;
+		const { isSelected, borderStyle, focusedBorderColor } = this.props;
+
+		const borderColor = isSelected ? focusedBorderColor : 'transparent';
 
 		return (
-			<TouchableWithoutFeedback onPress={ this.onFocus } onLayout={ this.onBlockHolderLayout } >
-				<View style={ [ styles.blockHolder, isSelected && this.blockHolderFocusedStyle() ] }>
+			<TouchableWithoutFeedback onPress={ this.onFocus } >
+				<View style={ [ styles.blockHolder, borderStyle, { borderColor } ] }>
 					{ this.props.showTitle && this.renderBlockTitle() }
 					<View style={ [ ! isSelected && styles.blockContainer, isSelected && styles.blockContainerFocused ] }>{ this.getBlockForType() }</View>
 					{ this.renderToolbar() }

src/block-management/block-holder.scss

@@ -7,22 +7,6 @@
 	flex: 1 1 auto;
 }
 
-.blockHolderFocusedSemiBordered {
-	border-color: $gray-lighten-30;
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-	border-left-width: 0;
-	border-right-width: 0;
-}
-
-.blockHolderFocusedFullBordered {
-	border-color: $gray-lighten-30;
-	border-top-width: 1px;
-	border-bottom-width: 1px;
-	border-left-width: 1px;
-	border-right-width: 1px;
-}
-
 .blockContainer {
 	background-color: white;
 	padding-left: 16;

src/block-management/block-manager.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import React from 'react';
 import { identity } from 'lodash';
 
-import { Text, View, Keyboard, LayoutChangeEvent, SafeAreaView } from 'react-native';
+import { Text, View, Keyboard, LayoutChangeEvent, SafeAreaView, Dimensions } from 'react-native';
 import BlockHolder from './block-holder';
 import type { BlockType } from '../store/types';
 import styles from './block-manager.scss';
@@ -52,11 +52,12 @@ type StateType = {
 	isKeyboardVisible: boolean,
 	rootViewHeight: number;
 	safeAreaBottomInset: number;
+	isFullyBordered: boolean;
 };
 
 export class BlockManager extends React.Component<PropsType, StateType> {
 	scrollViewRef: Object;
-	titleViewRef: Object;
+	postTitleRef: ?Object;
 	subscriptionParentSetFocusOnTitle: ?Object;
 
 	constructor( props: PropsType ) {
@@ -73,12 +74,14 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		( this: any ).keyboardDidHide = this.keyboardDidHide.bind( this );
 		( this: any ).onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
 		( this: any ).scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
+		( this: any ).onContentViewLayout = this.onContentViewLayout.bind( this );
 
 		this.state = {
 			blockTypePickerVisible: false,
 			isKeyboardVisible: false,
 			rootViewHeight: 0,
 			safeAreaBottomInset: 0,
+			isFullyBordered: false,
 		};
 		SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate );
 	}
@@ -124,13 +127,26 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 		} );
 	}
 
+	onContentViewLayout = ( event: LayoutChangeEvent ) => {
+		const { width: fullWidth } = Dimensions.get( 'window' );
+		const { width } = event.nativeEvent.layout;
+		const isFullyBordered = fullWidth > width + 1; //+1 is for not letting fraction differences effect the result on Android
+		if ( isFullyBordered !== this.state.isFullyBordered ) {
+			this.setState( { ...this.state, isFullyBordered } );
+		}
+	}
+
+	blockHolderBorderStyle() {
+		return this.state.isFullyBordered ? styles.blockHolderFullBordered : styles.blockHolderSemiBordered;
+	}
+
 	componentDidMount() {
 		Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
 		Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );
 		SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate );
 		this.subscriptionParentSetFocusOnTitle = subscribeSetFocusOnTitle( ( ) => {
-			if ( this.titleViewRef ) {
-				this.titleViewRef.focus();
+			if ( this.postTitleRef ) {
+				this.postTitleRef.focus();
 			}
 		} );
 	}
@@ -172,21 +188,21 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 
 	renderHeader() {
 		return (
-			<View style={ styles.titleContainer }>
-				<PostTitle
-					setRef={ ( ref ) => {
-						this.titleViewRef = ref;
-					} }
-					title={ this.props.title }
-					onUpdate={ this.props.setTitleAction }
-					placeholder={ __( 'Add title' ) } />
-			</View>
+			<PostTitle
+				innerRef={ ( ref ) => {
+					this.postTitleRef = ref;
+				} }
+				title={ this.props.title }
+				onUpdate={ this.props.setTitleAction }
+				placeholder={ __( 'Add title' ) }
+				borderStyle={ this.blockHolderBorderStyle() }
+				focusedBorderColor={ styles.blockHolderFocused.borderColor } />
 		);
 	}
 
 	renderList() {
 		return (
-			<View style={ { flex: 1 } } >
+			<View style={ { flex: 1 } } onLayout={ this.onContentViewLayout }>
 				<KeyboardAwareFlatList
 					innerRef={ this.scrollViewInnerRef }
 					blockToolbarHeight={ toolbarStyles.container.height }
@@ -196,6 +212,7 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 					keyboardShouldPersistTaps="always"
 					style={ styles.list }
 					data={ this.props.blockClientIds }
+					extraData={ [ this.state.isFullyBordered ] }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
 					shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll }
@@ -259,6 +276,8 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 					clientId={ clientId }
 					rootClientId={ this.props.rootClientId }
 					onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
+					borderStyle={ this.blockHolderBorderStyle() }
+					focusedBorderColor={ styles.blockHolderFocused.borderColor }
 				/>
 				{ this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && (
 					<View style={ styles.containerStyleAddHere } >

src/block-management/block-manager.scss

@@ -1,20 +1,14 @@
 /** @format */
 
 @import '../variables.scss';
+@import 'colors.scss';
 
 .container {
 	flex: 1;
 	justify-content: flex-start;
 	background-color: #fff;
 }
 
-.titleContainer {
-	padding-left: 16;
-	padding-right: 16;
-	padding-top: 32;
-	padding-bottom: 16;	
-}
-
 .list {
 	flex: 1;
 }
@@ -56,4 +50,22 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
+}
+
+.blockHolderSemiBordered {
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 0;
+	border-right-width: 0;
+}
+
+.blockHolderFullBordered {
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	border-left-width: 1px;
+	border-right-width: 1px;
+}
+
+.blockHolderFocused {
+	border-color: $gray-lighten-30;
 }