Update native more block styling (#12767)

* Update styling of more block * Fix CI test * Update spaces * Convert indentation to tabs * Fix lint issues * Remove key attribute * Set fixed width to the text input
WordPress · Dec 11, 2018 · 81843bd · 81843bd
1 parent 5821ec7
commit 81843bd
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 29 deletions.
diff --git a/packages/block-library/src/more/edit.native.js b/packages/block-library/src/more/edit.native.js
@@ -47,29 +47,39 @@ export default class MoreEdit extends Component {
 		this.props.setAttributes( { customText: value } );
 	}
 
-	render() {
+	renderLine() {
+		return <View style={ styles[ 'block-library-more__line' ] } />
+	}
+
+	renderText() {
 		const { attributes, onFocus, onBlur } = this.props;
 		const { customText } = attributes;
 		const defaultText = __( 'Read more' );
 		const value = customText !== undefined ? customText : defaultText;
 
 		return (
-			<View style={ styles[ 'block-library-more__container' ] }>
-				<View style={ styles[ 'block-library-more__sub-container' ] }>
-					<Text style={ styles[ 'block-library-more__left-marker' ] }>&lt;!--</Text>
-					<PlainText
-						style={ styles[ 'block-library-more__plain-text' ] }
-						value={ value }
-						multiline={ true }
-						underlineColorAndroid="transparent"
-						onChange={ this.onChangeInput }
-						placeholder={ defaultText }
-						isSelected={ this.props.isSelected }
-						onFocus={ onFocus }
-						onBlur={ onBlur }
-					/>
-					<Text style={ styles[ 'block-library-more__right-marker' ] }>--&gt;</Text>
-				</View>
+			<View>
+				<PlainText
+					style={ styles[ 'block-library-more__text' ] }
+					value={ value }
+					multiline={ true }
+					underlineColorAndroid="transparent"
+					onChange={ this.onChangeInput }
+					placeholder={ defaultText }
+					isSelected={ this.props.isSelected }
+					onFocus={ onFocus }
+					onBlur={ onBlur }
+				/>
+			</View>
+		)
+	}
+
+	render() {
+		return (
+			<View style={ styles[ 'block-library-more__container' ]}>
+				{ this.renderLine() }
+				{ this.renderText() }
+				{ this.renderLine() }
 			</View>
 		);
 	}

diff --git a/packages/block-library/src/more/editor.native.scss b/packages/block-library/src/more/editor.native.scss
@@ -2,21 +2,22 @@
 
 .block-library-more__container {
 	align-items: center;
-	padding-left: 4;
-	padding-right: 4;
-	padding-top: 4;
-	padding-bottom: 4;
-}
-
-.block-library-more__sub-container {
-	align-items: center;
+	padding: 4px;
 	flex-direction: row;
 }
 
-.block-library-more__left-marker {
-	padding-right: 4;
+.block-library-more__line {
+	background-color: #555d66;
+	height: 2;
+	flex: 1;
 }
 
-.block-library-more__right-marker {
-	padding-left: 4;
+.block-library-more__text {
+	text-decoration-style: solid;
+	flex: 0;
+	width: 200;
+	text-align: center;
+	margin-left: 15;
+	margin-right: 15;
+	margin-bottom: 5;
 }