[RNMobile] Use RichText component on Title block (#13548)

* Use RichText component in Title block for mobile. This is required to properly intercpet Enter.key on all platforms/keyboards. We decided to move to RichText since all of the work for Enter.key intercept was laready done there per Para and Heading blocks. * Fix lint * Set font family, weight, and size via RN props for Title, Heading, and Para blocks. * Fix lint * Adds font* props to PlainText for mobile * Make `serif` default family for RichText on mobile * Set the correct font family for Image caption on mobile * Set the correct font family for Nextpage block on mobile * Set the correct font family for Code block on mobile * set the correct font family for Image caption on mobile * Remove extra fontFamily props. * Remaps some font names so that they work in iOS. (#13628) * Remaps some font names so that they work in iOS. * Improved the logic for picking the default font in some components. * Modifies the logic that sets the default font for the code component. * Changes the font family in a css file. * Adds an import to have a default font for native. * Standardizes the default font for the code component. * Simplifies the default font for the code block. * Simplifies the default font for the code block. * Configures the default font for plain-text from a css file. * Fixes the styling for the rich text components and restores a line that was removed by mistake. * Fixes a linting problem. * Fixes some linting issues. * Fixes a linting issue. * Make sure PlainText takes in consideration the fontFamily passed via props before falling back to default styles
WordPress · Feb 5, 2019 · a1d79a9 · a1d79a9
1 parent d36862e
commit a1d79a9
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 25 deletions.
diff --git a/packages/block-library/src/code/edit.native.js b/packages/block-library/src/code/edit.native.js
@@ -36,6 +36,7 @@ export default function CodeEdit( props ) {
 				isSelected={ props.isSelected }
 				onFocus={ onFocus }
 				onBlur={ onBlur }
+				fontFamily={ ( styles.blockCode.fontFamily ) }
 			/>
 		</View>
 	);

diff --git a/packages/block-library/src/code/theme.android.scss b/packages/block-library/src/code/theme.android.scss
diff --git a/...ges/block-library/src/code/theme.ios.scss → .../block-library/src/code/theme.native.scss b/...ges/block-library/src/code/theme.ios.scss → .../block-library/src/code/theme.native.scss
@@ -1,5 +1,8 @@
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
+
+@import "variables.scss";
+
 .blockCode {
-	font-family: courier;
+	font-family: $default-monospace-font;
 }
 
diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -272,6 +272,7 @@ export default class ImageEdit extends React.Component {
 						<View style={ { padding: 12, flex: 1 } }>
 							<TextInput
 								style={ { textAlign: 'center' } }
+								fontFamily={ 'serif' }
 								underlineColorAndroid="transparent"
 								value={ caption }
 								placeholder={ __( 'Write caption…' ) }

diff --git a/packages/block-library/src/nextpage/editor.native.scss b/packages/block-library/src/nextpage/editor.native.scss
@@ -1,5 +1,7 @@
 // @format
 
+@import "variables.scss";
+
 .block-library-nextpage__container {
 	align-items: center;
 	padding: 4px 4px 4px 4px;
@@ -12,4 +14,5 @@
 
 .block-library-nextpage__text {
 	text-decoration-style: solid;
+	font-family: $default-regular-font;
 }
diff --git a/packages/editor/src/components/plain-text/index.native.js b/packages/editor/src/components/plain-text/index.native.js
@@ -47,6 +47,10 @@ export default class PlainText extends Component {
 				} }
 				onFocus={ this.props.onFocus } // always assign onFocus as a props
 				onBlur={ this.props.onBlur } // always assign onBlur as a props
+				fontFamily={ this.props.fontFamily || ( styles[ 'editor-plain-text' ].fontFamily ) }
+				fontSize={ this.props.fontSize }
+				fontWeight={ this.props.fontWeight }
+				fontStyle={ this.props.fontStyle }
 			/>
 		);
 	}

diff --git a/packages/editor/src/components/plain-text/style.native.scss b/packages/editor/src/components/plain-text/style.native.scss
@@ -1,4 +1,7 @@
+@import "variables.scss";
+
 .editor-plain-text {
+	font-family: $default-regular-font;
 	box-shadow: none;
 
 	border-width: 0;

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
@@ -1,27 +1,25 @@
-/**
- * External dependencies
- */
-import { TextInput } from 'react-native';
-
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { RichText } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withDispatch } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
+const minHeight = 53;
+
 class PostTitle extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.onChange = this.onChange.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.onUnselect = this.onUnselect.bind( this );
 
 		this.state = {
 			isSelected: false,
+			aztecHeight: 0,
 		};
 	}
 
@@ -38,10 +36,6 @@ class PostTitle extends Component {
 		this.setState( { isSelected: false } );
 	}
 
-	onChange( title ) {
-		this.props.onUpdate( title );
-	}
-
 	render() {
 		const {
 			placeholder,
@@ -52,18 +46,27 @@ class PostTitle extends Component {
 		const decodedPlaceholder = decodeEntities( placeholder );
 
 		return (
-			<TextInput
-				blurOnSubmit={ true }
-				textAlignVertical="top"
-				multiline={ false }
-				onSubmitEditing={ this.props.onEnterPress }
-				returnKeyType={ 'next' }
-				onChangeText={ this.onChange }
+			<RichText
+				tagName={ 'p' }
 				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={ ( event ) => {
+					this.props.onUpdate( event.content );
+				} }
+				onContentSizeChange={ ( event ) => {
+					this.setState( { aztecHeight: event.aztecHeight } );
+				} }
 				placeholder={ decodedPlaceholder }
-				style={ style }
-				value={ title }>
-			</TextInput>
+				value={ title }
+				onSplit={ this.props.onEnterPress }
+			>
+			</RichText>
 		);
 	}
 }

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
@@ -28,6 +28,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import styles from './style.scss';
 
 const FORMATTING_CONTROLS = [
 	{
@@ -385,6 +386,10 @@ export class RichText extends Component {
 					color={ 'black' }
 					maxImagesWidth={ 200 }
 					style={ style }
+					fontFamily={ this.props.fontFamily || styles[ 'editor-rich-text' ].fontFamily }
+					fontSize={ this.props.fontSize }
+					fontWeight={ this.props.fontWeight }
+					fontStyle={ this.props.fontStyle }
 				/>
 			</View>
 		);

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