Merge native mobile release v1.0 to master (#14061)

* Bump plugin version to 5.1.0-rc.1

* RichText: only ignore input types that insert HTML (#13914)

* RichText: only ignore input types that insert HTML

* Mark RichTextInputEvent as unstable

* Use Set

* Bump plugin version to 5.1.0

* Deprecate RichTextInputEvent on mobile too (#13975)

* The undelying RichText component implementation has changed the parameters returned onChange, and we forgot to update the PostTitle component (#13967)

* Fixes wrong state comparison (#13987)

Upload media progress bar is missing while media is uploading new

* Re-add rootTagsToEliminate prop (#14006)

* [Mobile]Update PostTitle to apply borders when it is focused (#13970)

* Trigger onFocusStatusChange from PostTitle

* Fix lint issue

* Update post title shadow mechanism

Also open inner ref so that focus state can be updated when focus is made programmatically

* Update props

* Update onRef as ref

* Update title padding&margin

* Mobile: Rename ref to innerRef on PostTitle (#14024)

* Fixes a red screen in mobile. (#14011)

* Change background color on image placeholder block (#14033)

* Changed upload media icon color

* Changed media placeholder background color

* Fix post title native syntax (#14041)

* Fix unexpected token in native code

* Dummy commit to trigger Travis

* Include the rnmobile release branch to Travis builds

* Mobile: Links UI using BottomSheet component (#13972)

* Mobile: Replaced Links UI with bottom-sheet component

* Mobile links UI: Removed commented code.

* Mobile: Fix lint issues

* Mobile Links UI: Remove autofocus on Android.
This hides an issue where the modal sometimes will be under the keyboard on Android.

* Fixes pasting links. (#14038)

* Update post title vertical paddings (#14040)

* Add try/catch fallback to plain text for pasteHandler (#14044)

* Fix link interface. (#14052)

* [Mobile]Fix title padding on Android (#14057)

* Remove title vertical paddings for Android

* Revert "Remove title vertical paddings for Android"

This reverts commit 09f0d35.

* Import padding variables

* Revert wrong format image color (#14058)

* Stop building the mobile release branch on Travis (#14060)

packages/block-library/src/image/edit.native.js

@@ -124,7 +124,7 @@ class ImageEdit extends React.Component {
 	updateMediaProgress( payload ) {
 		const { setAttributes } = this.props;
 		this.setState( { progress: payload.progress, isUploadInProgress: true, isUploadFailed: false } );
-		if ( payload.mediaUrl !== undefined ) {
+		if ( payload.mediaUrl ) {
 			setAttributes( { url: payload.mediaUrl } );
 		}
 	}

packages/editor/src/components/index.native.js

@@ -5,7 +5,7 @@ export {
 	default as RichText,
 	RichTextShortcut,
 	RichTextToolbarButton,
-	RichTextInputEvent,
+	UnstableRichTextInputEvent,
 } from './rich-text';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as BlockFormatControls } from './block-format-controls';

packages/editor/src/components/media-placeholder/styles.native.scss

@@ -4,7 +4,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	background-color: #f2f2f2;
+	background-color: #e9eff3;
 	padding-left: 12;
 	padding-right: 12;
 	padding-top: 12;

packages/editor/src/components/mobile/bottom-sheet/cell.native.js

@@ -16,10 +16,10 @@ import styles from './styles.scss';
 import platformStyles from './cellStyles.scss';
 
 export default class Cell extends Component {
-	constructor() {
+	constructor( props ) {
 		super( ...arguments );
 		this.state = {
-			isEditingValue: false,
+			isEditingValue: props.autoFocus || false,
 		};
 	}
 
@@ -53,7 +53,7 @@ export default class Cell extends Component {
 
 		const onCellPress = () => {
 			if ( isValueEditable ) {
-				this.setState( { isEditingValue: true } );
+				startEditing();
 			} else if ( onPress !== undefined ) {
 				onPress();
 			}
@@ -63,6 +63,12 @@ export default class Cell extends Component {
 			this.setState( { isEditingValue: false } );
 		};
 
+		const startEditing = () => {
+			if ( this.state.isEditingValue === false ) {
+				this.setState( { isEditingValue: true } );
+			}
+		};
+
 		const separatorStyle = () => {
 			const leftMarginStyle = { ...styles.cellSeparator, ...platformStyles.separatorMarginLeft };
 			switch ( separatorType ) {
@@ -97,6 +103,7 @@ export default class Cell extends Component {
 					onChangeText={ onChangeValue }
 					editable={ isValueEditable }
 					pointerEvents={ this.state.isEditingValue ? 'auto' : 'none' }
+					onFocus={ startEditing }
 					onBlur={ finishEditing }
 					{ ...valueProps }
 				/>

packages/editor/src/components/mobile/bottom-sheet/styles.native.scss

@@ -31,6 +31,7 @@
 	border-top-left-radius: 8px;
 	width: 100%;
 	max-width: 512;
+	padding-bottom: 0;
 }
 
 .content {

packages/editor/src/components/post-title/index.native.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
 /**
  * WordPress dependencies
  */
@@ -8,6 +13,11 @@ import { withDispatch } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
 const minHeight = 30;
 
 class PostTitle extends Component {
@@ -16,17 +26,31 @@ class PostTitle extends Component {
 
 		this.onSelect = this.onSelect.bind( this );
 		this.onUnselect = this.onUnselect.bind( this );
+		this.titleViewRef = null;
 
 		this.state = {
 			isSelected: false,
 			aztecHeight: 0,
 		};
 	}
 
+	componentDidMount() {
+		if ( this.props.innerRef ) {
+			this.props.innerRef( this );
+		}
+	}
+
 	handleFocusOutside() {
 		this.onUnselect();
 	}
 
+	focus() {
+		if ( this.titleViewRef ) {
+			this.titleViewRef.focus();
+			this.setState( { isSelected: true } );
+		}
+	}
+
 	onSelect() {
 		this.setState( { isSelected: true } );
 		this.props.clearSelectedBlock();
@@ -41,33 +65,41 @@ class PostTitle extends Component {
 			placeholder,
 			style,
 			title,
+			focusedBorderColor,
+			borderStyle,
 		} = this.props;
 
 		const decodedPlaceholder = decodeEntities( placeholder );
+		const borderColor = this.state.isSelected ? focusedBorderColor : 'transparent';
 
 		return (
-			<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 }
-				value={ title }
-				onSplit={ this.props.onEnterPress }
-				setRef={ this.props.setRef }
-			>
-			</RichText>
+			<View style={ [ styles.titleContainer, borderStyle, { borderColor } ] }>
+				<RichText
+					tagName={ 'p' }
+					rootTagsToEliminate={ [ 'strong' ] }
+					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={ ( value ) => {
+						this.props.onUpdate( value );
+					} }
+					onContentSizeChange={ ( event ) => {
+						this.setState( { aztecHeight: event.aztecHeight } );
+					} }
+					placeholder={ decodedPlaceholder }
+					value={ title }
+					onSplit={ this.props.onEnterPress }
+					setRef={ ( ref ) => {
+						this.titleViewRef = ref;
+					} }
+				>
+				</RichText>
+			</View>
 		);
 	}
 }

packages/editor/src/components/post-title/style.native.scss

@@ -0,0 +1,10 @@
+
+@import "variables.scss";
+
+.titleContainer {
+	padding-left: 16;
+	padding-right: 16;
+	padding-top: $title-block-padding-top;
+	padding-bottom: $title-block-padding-bottom;
+	margin-top: 24;
+}

packages/editor/src/components/rich-text/index.native.js

@@ -42,6 +42,27 @@ const unescapeSpaces = ( text ) => {
 	return text.replace( / | /gi, ' ' );
 };
 
+/**
+ * Calls {@link pasteHandler} with a fallback to plain text when HTML processing
+ * results in errors
+ *
+ * @param {Object}  [options]     The options to pass to {@link pasteHandler}
+ *
+ * @return {Array|string}         A list of blocks or a string, depending on
+ *                                `handlerMode`.
+ */
+const saferPasteHandler = ( options ) => {
+	try {
+		return pasteHandler( options );
+	} catch ( error ) {
+		window.console.log( 'Pasting HTML failed:', error );
+		window.console.log( 'HTML:', options.HTML );
+		window.console.log( 'Falling back to plain text.' );
+		// fallback to plain text
+		return pasteHandler( { ...options, HTML: '' } );
+	}
+};
+
 const gutenbergFormatNamesToAztec = {
 	'core/bold': 'bold',
 	'core/italic': 'italic',
@@ -289,9 +310,8 @@ export class RichText extends Component {
 					},
 				} );
 				this.lastContent = this.valueToFormat( linkedRecord );
-				this.props.onChange( {
-					content: this.lastContent,
-				} );
+				this.lastEventCount = undefined;
+				this.props.onChange( this.lastContent );
 
 				// Allows us to ask for this information when we get a report.
 				window.console.log( 'Created link:\n\n', trimmedText );
@@ -310,7 +330,7 @@ export class RichText extends Component {
 			mode = 'AUTO';
 		}
 
-		const pastedContent = pasteHandler( {
+		const pastedContent = saferPasteHandler( {
 			HTML: pastedHtml,
 			plainText: pastedText,
 			mode,
@@ -324,9 +344,7 @@ export class RichText extends Component {
 			const newContent = this.valueToFormat( insertedContent );
 			this.lastEventCount = undefined;
 			this.lastContent = newContent;
-			this.props.onChange( {
-				content: this.lastContent,
-			} );
+			this.props.onChange( this.lastContent );
 		} else if ( onSplit ) {
 			if ( ! pastedContent.length ) {
 				return;
@@ -568,4 +586,4 @@ RichTextContainer.Content.defaultProps = {
 export default RichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
-export { RichTextInputEvent } from './input-event';
+export { UnstableRichTextInputEvent } from './input-event';

packages/editor/src/components/rich-text/input-event.native.js

@@ -3,7 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 
-export class RichTextInputEvent extends Component {
+export class UnstableRichTextInputEvent extends Component {
 	render() {
 		return null;
 	}

packages/format-library/src/link/index.native.js

@@ -107,17 +107,15 @@ export const link = {
 
 			return (
 				<Fragment>
-					{ this.state.addingLink &&
-						<ModalLinkUI
-							isVisible
-							isActive={ isActive }
-							activeAttributes={ activeAttributes }
-							onClose={ this.stopAddingLink }
-							onChange={ onChange }
-							onRemove={ this.onRemoveFormat }
-							value={ linkSelection }
-						/>
-					}
+					<ModalLinkUI
+						isVisible={ this.state.addingLink }
+						isActive={ isActive }
+						activeAttributes={ activeAttributes }
+						onClose={ this.stopAddingLink }
+						onChange={ onChange }
+						onRemove={ this.onRemoveFormat }
+						value={ linkSelection }
+					/>
 					<RichTextToolbarButton
 						name="link"
 						icon="admin-links"