diff --git a/__mocks__/styleMock.js b/__mocks__/styleMock.js index 505dc720a4..28bd419865 100644 --- a/__mocks__/styleMock.js +++ b/__mocks__/styleMock.js @@ -25,4 +25,7 @@ module.exports = { 'editor-plain-text': { fontFamily: 'serif', }, + blockHolderFocused: { + borderColor: 'gray', + }, }; diff --git a/gutenberg b/gutenberg index 811fbe02ca..7c32d3aa8b 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 811fbe02ca71e63246732e21f4c1636081d3c625 +Subproject commit 7c32d3aa8b38e20acd4a17814128e62bf900a331 diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 0c0ebc1196..42fdedf4af 100644 --- a/src/block-management/block-holder.js +++ b/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 { } }; - 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 { } render() { - const { isSelected } = this.props; + const { isSelected, borderStyle, focusedBorderColor } = this.props; + + const borderColor = isSelected ? focusedBorderColor : 'transparent'; return ( - - + + { this.props.showTitle && this.renderBlockTitle() } { this.getBlockForType() } { this.renderToolbar() } diff --git a/src/block-management/block-holder.scss b/src/block-management/block-holder.scss index 5dd7646924..de18de2591 100644 --- a/src/block-management/block-holder.scss +++ b/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; diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index 792737e842..2707592111 100644 --- a/src/block-management/block-manager.js +++ b/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 { scrollViewRef: Object; - titleViewRef: Object; + postTitleRef: ?Object; subscriptionParentSetFocusOnTitle: ?Object; constructor( props: PropsType ) { @@ -73,12 +74,14 @@ export class BlockManager extends React.Component { ( 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 { } ); } + 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 { renderHeader() { return ( - - { - this.titleViewRef = ref; - } } - title={ this.props.title } - onUpdate={ this.props.setTitleAction } - placeholder={ __( 'Add title' ) } /> - + { + this.postTitleRef = ref; + } } + title={ this.props.title } + onUpdate={ this.props.setTitleAction } + placeholder={ __( 'Add title' ) } + borderStyle={ this.blockHolderBorderStyle() } + focusedBorderColor={ styles.blockHolderFocused.borderColor } /> ); } renderList() { return ( - + { 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 { clientId={ clientId } rootClientId={ this.props.rootClientId } onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange } + borderStyle={ this.blockHolderBorderStyle() } + focusedBorderColor={ styles.blockHolderFocused.borderColor } /> { this.state.blockTypePickerVisible && this.props.isBlockSelected( clientId ) && ( diff --git a/src/block-management/block-manager.scss b/src/block-management/block-manager.scss index e1e4572c38..742f0f92bc 100644 --- a/src/block-management/block-manager.scss +++ b/src/block-management/block-manager.scss @@ -1,6 +1,7 @@ /** @format */ @import '../variables.scss'; +@import 'colors.scss'; .container { flex: 1; @@ -8,13 +9,6 @@ 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; } \ No newline at end of file