Merge mobile development branch into master (v2)

packages/block-editor/src/components/default-block-appender/index.native.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { RichText } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
 import { decodeEntities } from '@wordpress/html-entities';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -21,6 +22,7 @@ export function DefaultBlockAppender( {
 	isVisible,
 	onAppend,
 	placeholder,
+	containerStyle,
 } ) {
 	if ( isLocked || ! isVisible ) {
 		return null;
@@ -32,16 +34,10 @@ export function DefaultBlockAppender( {
 		<TouchableWithoutFeedback
 			onPress={ onAppend }
 		>
-			<View style={ styles.blockHolder } pointerEvents="box-only">
-				<View style={ styles.blockContainer }>
-					<TextInput
-						style={ styles.textView }
-						textAlignVertical="top"
-						multiline
-						numberOfLines={ 0 }
-						value={ value }
-					/>
-				</View>
+			<View style={ [ styles.blockHolder, containerStyle ] } pointerEvents="box-only">
+				<RichText
+					placeholder={ value }
+				/>
 			</View>
 		</TouchableWithoutFeedback>
 	);

packages/block-editor/src/components/default-block-appender/style.native.scss

@@ -1,8 +1,5 @@
 // @format
 
-@import "variables.scss";
-@import "colors.scss";
-
 .blockHolder {
 	flex: 1 1 auto;
 }

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

@@ -0,0 +1,22 @@
+// Block Creation Components
+export { default as BlockControls } from './block-controls';
+export { default as BlockEdit } from './block-edit';
+export { default as BlockFormatControls } from './block-format-controls';
+export * from './colors';
+export * from './font-sizes';
+export { default as InspectorControls } from './inspector-controls';
+export { default as PlainText } from './plain-text';
+export {
+	default as RichText,
+	RichTextShortcut,
+	RichTextToolbarButton,
+	UnstableRichTextInputEvent,
+} from './rich-text';
+export { default as MediaPlaceholder } from './media-placeholder';
+export { default as URLInput } from './url-input';
+
+// Content Related Components
+export { default as DefaultBlockAppender } from './default-block-appender';
+
+// State Related Components
+export { default as BlockEditorProvider } from './provider';

packages/block-editor/src/components/plain-text/style.native.scss

@@ -1,4 +1,3 @@
-@import "variables.scss";
 
 .block-editor-plain-text {
 	font-family: $default-regular-font;

packages/block-editor/src/components/provider/index.native.js

@@ -0,0 +1,150 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { SlotFillProvider } from '@wordpress/components';
+import { withDispatch, RegistryConsumer } from '@wordpress/data';
+import { createHigherOrderComponent, compose } from '@wordpress/compose';
+
+/**
+ * Higher-order component which renders the original component with the current
+ * registry context passed as its `registry` prop.
+ *
+ * @param {WPComponent} OriginalComponent Original component.
+ *
+ * @return {WPComponent} Enhanced component.
+ */
+const withRegistry = createHigherOrderComponent(
+	( OriginalComponent ) => ( props ) => (
+		<RegistryConsumer>
+			{ ( registry ) => (
+				<OriginalComponent
+					{ ...props }
+					registry={ registry }
+				/>
+			) }
+		</RegistryConsumer>
+	),
+	'withRegistry'
+);
+
+class BlockEditorProvider extends Component {
+	componentDidMount() {
+		this.props.updateSettings( this.props.settings );
+		this.props.resetBlocks( this.props.value );
+		this.attachChangeObserver( this.props.registry );
+	}
+
+	componentDidUpdate( prevProps ) {
+		const {
+			settings,
+			updateSettings,
+			value,
+			resetBlocks,
+			registry,
+		} = this.props;
+
+		if ( settings !== prevProps.settings ) {
+			updateSettings( settings );
+		}
+
+		if ( registry !== prevProps.registry ) {
+			this.attachChangeObserver( registry );
+		}
+
+		if ( this.isSyncingOutcomingValue ) {
+			this.isSyncingOutcomingValue = false;
+		} else if ( value !== prevProps.value ) {
+			this.isSyncingIncomingValue = true;
+			resetBlocks( value );
+		}
+	}
+
+	componentWillUnmount() {
+		if ( this.unsubscribe ) {
+			this.unsubscribe();
+		}
+	}
+
+	/**
+	 * Given a registry object, overrides the default dispatch behavior for the
+	 * `core/block-editor` store to interpret a state change and decide whether
+	 * we should call `onChange` or `onInput` depending on whether the change
+	 * is persistent or not.
+	 *
+	 * This needs to be done synchronously after state changes (instead of using
+	 * `componentDidUpdate`) in order to avoid batching these changes.
+	 *
+	 * @param {WPDataRegistry} registry     Registry from which block editor
+	 *                                      dispatch is to be overriden.
+	 */
+	attachChangeObserver( registry ) {
+		if ( this.unsubscribe ) {
+			this.unsubscribe();
+		}
+
+		const {
+			getBlocks,
+			isLastBlockChangePersistent,
+		} = registry.select( 'core/block-editor' );
+
+		let blocks = getBlocks();
+		let isPersistent = isLastBlockChangePersistent();
+
+		this.unsubscribe = registry.subscribe( () => {
+			const {
+				onChange,
+				onInput,
+			} = this.props;
+			const newBlocks = getBlocks();
+			const newIsPersistent = isLastBlockChangePersistent();
+			if ( newBlocks !== blocks && this.isSyncingIncomingValue ) {
+				this.isSyncingIncomingValue = false;
+				blocks = newBlocks;
+				isPersistent = newIsPersistent;
+				return;
+			}
+
+			if (
+				newBlocks !== blocks ||
+				// This happens when a previous input is explicitely marked as persistent.
+				( newIsPersistent && ! isPersistent )
+			) {
+				blocks = newBlocks;
+				isPersistent = newIsPersistent;
+
+				this.isSyncingOutcomingValue = true;
+				if ( isPersistent ) {
+					onChange( blocks );
+				} else {
+					onInput( blocks );
+				}
+			}
+		} );
+	}
+
+	render() {
+		const { children } = this.props;
+
+		return (
+			<SlotFillProvider>
+				{ children }
+			</SlotFillProvider>
+		);
+	}
+}
+
+export default compose( [
+	withDispatch( ( dispatch ) => {
+		const {
+			updateSettings,
+			resetBlocks,
+		} = dispatch( 'core/block-editor' );
+
+		return {
+			updateSettings,
+			resetBlocks,
+		};
+	} ),
+	withRegistry,
+] )( BlockEditorProvider );

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

@@ -86,6 +86,7 @@ export class RichText extends Component {
 			start: 0,
 			end: 0,
 			formatPlaceholder: null,
+			height: 0,
 		};
 	}
 
@@ -96,9 +97,16 @@ export class RichText extends Component {
 	 */
 	getRecord() {
 		const { formatPlaceholder, start, end } = this.state;
+
+		let value = this.props.value === undefined ? null : this.props.value;
+
 		// Since we get the text selection from Aztec we need to be in sync with the HTML `value`
 		// Removing leading white spaces using `trim()` should make sure this is the case.
-		const { formats, replacements, text } = this.formatToValue( this.props.value === undefined ? undefined : this.props.value.trimLeft() );
+		if ( typeof value === 'string' || value instanceof String ) {
+			value = value.trimLeft();
+		}
+
+		const { formats, replacements, text } = this.formatToValue( value );
 
 		return { formats, replacements, formatPlaceholder, text, start, end };
 	}
@@ -189,6 +197,12 @@ export class RichText extends Component {
 		} );
 		if ( newContent && newContent !== this.props.value ) {
 			this.props.onChange( newContent );
+			if ( record.needsSelectionUpdate && record.start && record.end ) {
+				this.setState( { start: record.start, end: record.end } );
+			}
+			this.setState( {
+				needsSelectionUpdate: record.needsSelectionUpdate,
+			} );
 		} else {
 			// make sure the component rerenders without refreshing the text on gutenberg
 			// (this can trigger other events that might update the active formats on aztec)
@@ -235,9 +249,7 @@ export class RichText extends Component {
 
 	onContentSizeChange( contentSize ) {
 		const contentHeight = contentSize.height;
-		this.props.onContentSizeChange( {
-			aztecHeight: contentHeight,
-		} );
+		this.setState( { height: contentHeight } );
 	}
 
 	// eslint-disable-next-line no-unused-vars
@@ -501,6 +513,13 @@ export class RichText extends Component {
 			this.lastEventCount = undefined; // force a refresh on the native side
 		}
 
+		let minHeight = styles[ 'block-editor-rich-text' ].minHeight;
+		if ( style && style.minHeight ) {
+			minHeight = style.minHeight;
+		}
+
+		const selection = this.state.needsSelectionUpdate ? { start: this.state.start, end: this.state.end } : null;
+
 		return (
 			<View>
 				{ isSelected && (
@@ -516,7 +535,11 @@ export class RichText extends Component {
 							this.props.setRef( ref );
 						}
 					} }
-					text={ { text: html, eventCount: this.lastEventCount } }
+					style={ {
+						...style,
+						minHeight: Math.max( minHeight, this.state.height ),
+					} }
+					text={ { text: html, eventCount: this.lastEventCount, selection } }
 					placeholder={ this.props.placeholder }
 					placeholderTextColor={ this.props.placeholderTextColor || styles[ 'block-editor-rich-text' ].textDecorationColor }
 					onChange={ this.onChange }
@@ -533,11 +556,11 @@ export class RichText extends Component {
 					blockType={ { tag: tagName } }
 					color={ 'black' }
 					maxImagesWidth={ 200 }
-					style={ style }
 					fontFamily={ this.props.fontFamily || styles[ 'block-editor-rich-text' ].fontFamily }
 					fontSize={ this.props.fontSize }
 					fontWeight={ this.props.fontWeight }
 					fontStyle={ this.props.fontStyle }
+					disableEditingMenu={ this.props.disableEditingMenu }
 				/>
 				{ isSelected && <FormatEdit value={ record } onChange={ this.onFormatChange } /> }
 			</View>

packages/block-editor/src/components/rich-text/style.native.scss

@@ -1,7 +1,6 @@
-@import "variables.scss";
-@import "colors.scss";
 
 .block-editor-rich-text {
 	font-family: $default-regular-font;
 	text-decoration-color: $gray;
+	min-height: $min-height-paragraph;
 }

packages/block-library/src/code/theme.native.scss

@@ -1,7 +1,5 @@
 /* stylelint-disable font-family-no-missing-generic-family-keyword */
 
-@import "variables.scss";
-
 .blockCode {
 	font-family: $default-monospace-font;
 }

packages/block-library/src/heading/editor.native.scss

@@ -0,0 +1,4 @@
+
+.wp-block-heading {
+	min-height: $min-height-heading;
+}

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

@@ -34,6 +34,7 @@ import {
 } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
+import { doAction, hasAction } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
@@ -87,6 +88,10 @@ class ImageEdit extends React.Component {
 	}
 
 	componentWillUnmount() {
+		// this action will only exist if the user pressed the trash button on the block holder
+		if ( hasAction( 'blocks.onRemoveBlockCheckUpload' ) && this.state.isUploadInProgress ) {
+			doAction( 'blocks.onRemoveBlockCheckUpload', this.props.attributes.id );
+		}
 		this.removeMediaUploadListener();
 	}
 

packages/block-library/src/image/styles.native.scss

@@ -1,7 +1,5 @@
 // @format
 
-@import "variables.scss";
-
 .imageContainer {
 	flex: 1;
 	justify-content: center;

packages/block-library/src/nextpage/editor.native.scss

@@ -1,7 +1,5 @@
 // @format
 
-@import "variables.scss";
-
 .block-library-nextpage__container {
 	align-items: center;
 	padding: 4px 4px 4px 4px;

packages/edit-post/package.json

@@ -19,6 +19,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.3.1",
 		"@wordpress/a11y": "file:../a11y",