Mobile Block Placeholder fixes (#13945)

* Use correct font and padding for block placeholder. * Match text for placeholder for paragraph to block placeholder. * Make placeholder text simpler. * Make min height smaller to make component entered. * Fix default placeholder color. * Use variable for color. * Change minimum height of text blocks. * Remove top padding on the appender.
WordPress · Mar 6, 2019 · 8d4aaeb · 8d4aaeb
1 parent 1917d51
commit 8d4aaeb
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 9 deletions.
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
@@ -21,7 +21,7 @@ import { createBlock } from '@wordpress/blocks';
  */
 import './editor.scss';
 
-const minHeight = 50;
+const minHeight = 24;
 
 class HeadingEdit extends Component {
 	constructor( props ) {

diff --git a/packages/block-library/src/paragraph/edit.native.js b/packages/block-library/src/paragraph/edit.native.js
@@ -125,7 +125,7 @@ class ParagraphEdit extends Component {
 					onContentSizeChange={ ( event ) => {
 						this.setState( { aztecHeight: event.aztecHeight } );
 					} }
-					placeholder={ placeholder || __( 'Add text or type / to add content' ) }
+					placeholder={ placeholder || __( 'Start writing…' ) }
 				/>
 			</View>
 		);

diff --git a/packages/block-library/src/paragraph/style.native.scss b/packages/block-library/src/paragraph/style.native.scss
@@ -1,3 +1,3 @@
 .blockText {
-	min-height: 50;
+	min-height: 24;
 }
diff --git a/packages/editor/src/components/default-block-appender/index.native.js b/packages/editor/src/components/default-block-appender/index.native.js
@@ -6,7 +6,7 @@ import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -26,7 +26,7 @@ export function DefaultBlockAppender( {
 		return null;
 	}
 
-	const value = decodeEntities( placeholder ) || sprintf( __( 'Start writing or press %s to add content' ), '\u2295' );
+	const value = decodeEntities( placeholder ) || __( 'Start writing…' );
 
 	return (
 		<TouchableWithoutFeedback

diff --git a/packages/editor/src/components/default-block-appender/style.native.scss b/packages/editor/src/components/default-block-appender/style.native.scss
@@ -1,14 +1,21 @@
+// @format
+
+@import "variables.scss";
+@import "colors.scss";
 
 .blockHolder {
 	flex: 1 1 auto;
 }
 
 .blockContainer {
 	background-color: $white;
-	padding: 8px;
+	padding-top: 0;
+	padding-left: 16px;
+	padding-right: 16px;
 }
 
 .textView {
-	color: #87a6bc;
+	color: $gray;
 	font-size: 16px;
+	font-family: $default-regular-font;
 }
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
@@ -8,7 +8,7 @@ import { withDispatch } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
-const minHeight = 53;
+const minHeight = 30;
 
 class PostTitle extends Component {
 	constructor() {

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
@@ -501,7 +501,7 @@ export class RichText extends Component {
 					} }
 					text={ { text: html, eventCount: this.lastEventCount } }
 					placeholder={ this.props.placeholder }
-					placeholderTextColor={ this.props.placeholderTextColor || 'lightgrey' }
+					placeholderTextColor={ this.props.placeholderTextColor || styles[ 'editor-rich-text' ].textDecorationColor }
 					onChange={ this.onChange }
 					onFocus={ this.props.onFocus }
 					onBlur={ this.props.onBlur }

diff --git a/packages/editor/src/components/rich-text/style.native.scss b/packages/editor/src/components/rich-text/style.native.scss
@@ -1,5 +1,7 @@
 @import "variables.scss";
+@import "colors.scss";
 
 .editor-rich-text {
 	font-family: $default-regular-font;
+	text-decoration-color: $gray;
 }