From 49bb394f97d5051a9eb13968aeabf591fd994079 Mon Sep 17 00:00:00 2001
From: Mario Zorz <mariozorz@gmail.com>
Date: Thu, 20 Dec 2018 09:02:38 -0300
Subject: [PATCH 01/37] temporarily disable link formatting

---
 .../editor/src/components/rich-text/index.native.js   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index f6796a97fdbaa8..d8f9a1cfb04766 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -40,11 +40,12 @@ const FORMATTING_CONTROLS = [
 		title: __( 'Italic' ),
 		format: 'italic',
 	},
-	{
-		icon: 'admin-links',
-		title: __( 'Link' ),
-		format: 'link',
-	},
+	// TODO: get this back after alpha
+	// {
+	// 	icon: 'admin-links',
+	// 	title: __( 'Link' ),
+	// 	format: 'link',
+	// },
 	{
 		icon: 'editor-strikethrough',
 		title: __( 'Strikethrough' ),

From 96a73c5864262e02fa3bf907723eb43e6515c9d7 Mon Sep 17 00:00:00 2001
From: Jorge Bernal <jbernal@gmail.com>
Date: Thu, 20 Dec 2018 19:21:34 +0100
Subject: [PATCH 02/37] Make sure RichText resigns focus when unmounted
 (#13048)

---
 packages/editor/src/components/rich-text/index.native.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index d8f9a1cfb04766..fd9d074472f5ad 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -291,6 +291,12 @@ export class RichText extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		if ( this._editor.isFocused() ) {
+			this._editor.blur();
+		}
+	}
+
 	componentDidUpdate( prevProps ) {
 		if ( this.props.isSelected && ! prevProps.isSelected ) {
 			this._editor.focus();

From 93057b2e9215f2d7cbcae8f90c004c8167c93d7d Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 14:27:52 +0100
Subject: [PATCH 03/37] Implemented react native spinner

---
 packages/components/src/index.native.js         |  1 +
 packages/components/src/spinner/index.native.js | 13 +++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 packages/components/src/spinner/index.native.js

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 3e44bdec61e509..d4f1af254fce38 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -5,6 +5,7 @@ export { default as Toolbar } from './toolbar';
 export { default as ToolbarButton } from './toolbar-button';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export { default as IconButton } from './icon-button';
+export { default as Spinner } from './spinner';
 export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components
diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
new file mode 100644
index 00000000000000..d72990f4acacb1
--- /dev/null
+++ b/packages/components/src/spinner/index.native.js
@@ -0,0 +1,13 @@
+import { View } from 'react-native';
+
+export default function Spinner(props) {
+	const {progress} = props;
+
+	const width = progress + '%';
+
+	return (
+		<View style={{flex: 1, height:5, backgroundColor: '#a8bece'}}>
+            <View style={{width: width, height:5, backgroundColor: '#0087be'}}/>
+         </View>
+	);
+}

From 0a0764e59d3a50a1c9d66ef6c8067beef1d843e5 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 14:28:10 +0100
Subject: [PATCH 04/37] Add upload button in media placeholder

---
 .../src/components/media-placeholder/index.native.js       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index 6a64523a43962c..cb5de6c2fc5f30 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -5,6 +5,8 @@ import { View, Text, Button } from 'react-native';
 
 import styles from './styles.scss';
 
+import { __ } from '@wordpress/i18n';
+
 function MediaPlaceholder( props ) {
 	return (
 		<View style={ styles.emptyStateContainer }>
@@ -12,10 +14,11 @@ function MediaPlaceholder( props ) {
                 Image
 			</Text>
 			<Text style={ styles.emptyStateDescription }>
-                Select an image from your library.
+				Upload a new image or select a file from your library.
 			</Text>
 			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title="Media Library" onPress={ props.onMediaLibraryPress } />
+				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPress } />
+				<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPress } />
 			</View>
 		</View>
 	);

From 1876d22c600f0e6a17216dfca84943a591387cee Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 14:29:23 +0100
Subject: [PATCH 05/37] Transform ImageEdit from function to class Add upload
 media file callback Show spinner and opacity when image is uploading

---
 .../block-library/src/image/edit.native.js    | 180 ++++++++++++------
 1 file changed, 119 insertions(+), 61 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 5b4132e19a2b24..75323dffe97535 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -1,75 +1,133 @@
 /**
  * External dependencies
  */
-import { View, Image, TextInput } from 'react-native';
+import React from 'react';
+import { View, Image, TextInput, NativeEventEmitter } from 'react-native';
 import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
+const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge )
+
 /**
  * Internal dependencies
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ImageEdit( props ) {
-	const { attributes, isSelected, setAttributes } = props;
-	const { url, caption } = attributes;
-
-	const onUploadPress = () => {
-		// This method should present an image picker from
-		// the device.
-		//TODO: Implement upload image method.
-	};
-
-	const onMediaLibraryPress = () => {
-		RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
-			if ( mediaUrl ) {
-				setAttributes( { url: mediaUrl } );
-			}
-		} );
-	};
-
-	if ( ! url ) {
+export default class ImageEdit extends React.Component {
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			progress: 0
+		};
+
+		this.mediaUpload = this.mediaUpload.bind( this );
+		this.addMediaUploadListener = this.addMediaUploadListener.bind( this );
+		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
+		this.finishMediaUploading = this.finishMediaUploading.bind( this );
+	}
+
+	mediaUpload ( payload ) {
+		
+		if ( payload.state == 1 ) {
+			this.setState( { progress: payload.progress } );
+		}
+		else if ( payload.state === 2 || payload.state == 3) {
+			this.finishMediaUploading( payload );
+		}
+	} 
+
+	finishMediaUploading( payload ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( { url: payload.mediaUrl, id: payload.mediaId } );
+		this.setState( { progress: payload.progress } );
+		this.removeMediaUploadListener( payload.mediaId );
+	}
+
+	addMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.addListener( 'mediaUpload'+ mediaId, this.mediaUpload );
+	}
+
+	removeMediaUploadListener( mediaId ) {
+		gutenbergBridgeEvents.removeListener( 'mediaUpload'+ mediaId, this.mediaUpload );
+	}
+
+	render() {
+
+		const { attributes, isSelected, setAttributes } = this.props;
+		const { url, id, caption } = attributes;
+
+		const onMediaLibraryPress = () => {
+			RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
+				if ( mediaUrl ) {
+					setAttributes( { url: mediaUrl } );
+				}
+			} );
+		};
+
+		if ( ! url ) {
+
+			const onUploadMediaPress = () => {
+				RNReactNativeGutenbergBridge.onUploadMediaPress( ( mediaId, mediaUri ) => {
+					if ( mediaUri ) {
+						
+						this.addMediaUploadListener( mediaId )
+						setAttributes( { url: mediaUri, id: mediaId } );
+					}
+				} );
+			};
+
+			return (
+				<MediaPlaceholder
+					onUploadMediaPress={ onUploadMediaPress }
+					onMediaLibraryPress={ onMediaLibraryPress }
+				/>
+			);
+		}
+
+		const toolbarEditButton = (
+			<Toolbar>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Edit image' ) }
+					icon="edit"
+					onClick={ onMediaLibraryPress }
+				/>
+			</Toolbar>
+		);
+		
+		const http = 'http';
+		const showSpinner = url !== undefined ? ! url.includes(http) : false;
+		const progress = this.state.progress * 100;
+		const opacity = showSpinner ? 0.3 : 1;
+
 		return (
-			<MediaPlaceholder
-				onUploadPress={ onUploadPress }
-				onMediaLibraryPress={ onMediaLibraryPress }
-			/>
+			<View style={ { flex: 1 } }>
+
+				{showSpinner && <Spinner progress={ progress }/>}
+				<BlockControls>
+					{ toolbarEditButton }
+				</BlockControls>
+				<Image
+					style={ { width: '100%', height: 200, opacity: opacity } }
+					resizeMethod="scale"
+					source={ { uri: url } }
+				/>
+				{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
+					<View style={ { padding: 12, flex: 1 } }>
+						<TextInput
+							style={ { textAlign: 'center' } }
+							underlineColorAndroid="transparent"
+							value={ caption }
+							placeholder={ 'Write caption…' }
+							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
+						/>
+					</View>
+				) }
+			</View>
 		);
 	}
-
-	const toolbarEditButton = (
-		<Toolbar>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Edit image' ) }
-				icon="edit"
-				onClick={ onMediaLibraryPress }
-			/>
-		</Toolbar>
-	);
-
-	return (
-		<View style={ { flex: 1 } }>
-			<BlockControls>
-				{ toolbarEditButton }
-			</BlockControls>
-			<Image
-				style={ { width: '100%', height: 200 } }
-				resizeMethod="scale"
-				source={ { uri: url } }
-			/>
-			{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-				<View style={ { padding: 12, flex: 1 } }>
-					<TextInput
-						style={ { textAlign: 'center' } }
-						underlineColorAndroid="transparent"
-						value={ caption }
-						placeholder={ 'Write caption…' }
-						onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-					/>
-				</View>
-			) }
-		</View>
-	);
-}
+}
\ No newline at end of file

From 8a363f98e6d7df7892f4c2e29b2bf11136b3d46c Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 16:15:55 +0100
Subject: [PATCH 06/37] Fixed lint issues

---
 .../block-library/src/image/edit.native.js    | 34 +++++++++----------
 .../components/src/spinner/index.native.js    | 10 +++---
 2 files changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 75323dffe97535..152c0057a29bdb 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -5,7 +5,7 @@ import React from 'react';
 import { View, Image, TextInput, NativeEventEmitter } from 'react-native';
 import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
-const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge )
+const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
 
 /**
  * Internal dependencies
@@ -14,13 +14,17 @@ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const MEDIA_UPLOAD_STATE_UPLOADING = 1;
+const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
+const MEDIA_UPLOAD_STATE_FAILED = 3;
+
 export default class ImageEdit extends React.Component {
 
-	constructor(props) {
-		super(props);
+	constructor( props ) {
+		super( props );
 
 		this.state = {
-			progress: 0
+			progress: 0,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
@@ -29,12 +33,10 @@ export default class ImageEdit extends React.Component {
 		this.finishMediaUploading = this.finishMediaUploading.bind( this );
 	}
 
-	mediaUpload ( payload ) {
-		
-		if ( payload.state == 1 ) {
+	mediaUpload( payload ) {
+		if( payload.state === MEDIA_UPLOAD_STATE_UPLOADING ) {
 			this.setState( { progress: payload.progress } );
-		}
-		else if ( payload.state === 2 || payload.state == 3) {
+		} else if( payload.state === MEDIA_UPLOAD_STATE_SUCCEEDED || payload.state === MEDIA_UPLOAD_STATE_FAILED) {
 			this.finishMediaUploading( payload );
 		}
 	} 
@@ -48,17 +50,16 @@ export default class ImageEdit extends React.Component {
 	}
 
 	addMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.addListener( 'mediaUpload'+ mediaId, this.mediaUpload );
+		gutenbergBridgeEvents.addListener( 'mediaUpload' + mediaId, this.mediaUpload );
 	}
 
 	removeMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.removeListener( 'mediaUpload'+ mediaId, this.mediaUpload );
+		gutenbergBridgeEvents.removeListener( 'mediaUpload' + mediaId, this.mediaUpload );
 	}
 
 	render() {
-
 		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, id, caption } = attributes;
+		const { url, caption } = attributes;
 
 		const onMediaLibraryPress = () => {
 			RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
@@ -69,11 +70,9 @@ export default class ImageEdit extends React.Component {
 		};
 
 		if ( ! url ) {
-
 			const onUploadMediaPress = () => {
 				RNReactNativeGutenbergBridge.onUploadMediaPress( ( mediaId, mediaUri ) => {
 					if ( mediaUri ) {
-						
 						this.addMediaUploadListener( mediaId )
 						setAttributes( { url: mediaUri, id: mediaId } );
 					}
@@ -106,8 +105,7 @@ export default class ImageEdit extends React.Component {
 
 		return (
 			<View style={ { flex: 1 } }>
-
-				{showSpinner && <Spinner progress={ progress }/>}
+				{ showSpinner && <Spinner progress={ progress } />}
 				<BlockControls>
 					{ toolbarEditButton }
 				</BlockControls>
@@ -130,4 +128,4 @@ export default class ImageEdit extends React.Component {
 			</View>
 		);
 	}
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
index d72990f4acacb1..4c99dadcd0e02f 100644
--- a/packages/components/src/spinner/index.native.js
+++ b/packages/components/src/spinner/index.native.js
@@ -1,13 +1,13 @@
 import { View } from 'react-native';
 
-export default function Spinner(props) {
-	const {progress} = props;
+export default function Spinner( props 	) {
+	const { progress } = props;
 
 	const width = progress + '%';
 
 	return (
-		<View style={{flex: 1, height:5, backgroundColor: '#a8bece'}}>
-            <View style={{width: width, height:5, backgroundColor: '#0087be'}}/>
-         </View>
+		<View style={ { flex: 1, height: 5, backgroundColor: '#a8bece' } }>
+			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } }/>
+		</View>
 	);
 }

From db23d431f08c57847321659e553bf31f1bfca1ad Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 16:36:07 +0100
Subject: [PATCH 07/37] Fixed lint errors

---
 packages/block-library/src/image/edit.native.js | 15 +++++++--------
 packages/components/src/spinner/index.native.js |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 152c0057a29bdb..53967001b85767 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -19,7 +19,6 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
 const MEDIA_UPLOAD_STATE_FAILED = 3;
 
 export default class ImageEdit extends React.Component {
-
 	constructor( props ) {
 		super( props );
 
@@ -34,12 +33,12 @@ export default class ImageEdit extends React.Component {
 	}
 
 	mediaUpload( payload ) {
-		if( payload.state === MEDIA_UPLOAD_STATE_UPLOADING ) {
+		if ( payload.state === MEDIA_UPLOAD_STATE_UPLOADING ) {
 			this.setState( { progress: payload.progress } );
-		} else if( payload.state === MEDIA_UPLOAD_STATE_SUCCEEDED || payload.state === MEDIA_UPLOAD_STATE_FAILED) {
+		} else if ( payload.state === MEDIA_UPLOAD_STATE_SUCCEEDED || payload.state === MEDIA_UPLOAD_STATE_FAILED ) {
 			this.finishMediaUploading( payload );
 		}
-	} 
+	}
 
 	finishMediaUploading( payload ) {
 		const { setAttributes } = this.props;
@@ -73,7 +72,7 @@ export default class ImageEdit extends React.Component {
 			const onUploadMediaPress = () => {
 				RNReactNativeGutenbergBridge.onUploadMediaPress( ( mediaId, mediaUri ) => {
 					if ( mediaUri ) {
-						this.addMediaUploadListener( mediaId )
+						this.addMediaUploadListener( mediaId );
 						setAttributes( { url: mediaUri, id: mediaId } );
 					}
 				} );
@@ -97,15 +96,15 @@ export default class ImageEdit extends React.Component {
 				/>
 			</Toolbar>
 		);
-		
+
 		const http = 'http';
-		const showSpinner = url !== undefined ? ! url.includes(http) : false;
+		const showSpinner = url !== undefined ? ! url.includes( http ) : false;
 		const progress = this.state.progress * 100;
 		const opacity = showSpinner ? 0.3 : 1;
 
 		return (
 			<View style={ { flex: 1 } }>
-				{ showSpinner && <Spinner progress={ progress } />}
+				{ showSpinner && <Spinner progress={ progress } /> }
 				<BlockControls>
 					{ toolbarEditButton }
 				</BlockControls>
diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
index 4c99dadcd0e02f..b5ad93d6bf7fc1 100644
--- a/packages/components/src/spinner/index.native.js
+++ b/packages/components/src/spinner/index.native.js
@@ -7,7 +7,7 @@ export default function Spinner( props 	) {
 
 	return (
 		<View style={ { flex: 1, height: 5, backgroundColor: '#a8bece' } }>
-			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } }/>
+			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } } />
 		</View>
 	);
 }

From ff11770171f9d255dd8ee3cae87211d41c1c98af Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 17:13:05 +0100
Subject: [PATCH 08/37] Put some space between components in media-placeholder

---
 .../editor/src/components/media-placeholder/index.native.js   | 4 ++--
 .../src/components/media-placeholder/styles.native.scss       | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index cb5de6c2fc5f30..e4179a157e816a 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -11,10 +11,10 @@ function MediaPlaceholder( props ) {
 	return (
 		<View style={ styles.emptyStateContainer }>
 			<Text style={ styles.emptyStateTitle }>
-                Image
+				{ __( 'Image' ) }
 			</Text>
 			<Text style={ styles.emptyStateDescription }>
-				Upload a new image or select a file from your library.
+				{ __( 'Upload a new image or select a file from your library.' ) }
 			</Text>
 			<View style={ styles.emptyStateButtonsContainer }>
 				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPress } />
diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss
index e05681743ee961..75a1663cd27c7b 100644
--- a/packages/editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/editor/src/components/media-placeholder/styles.native.scss
@@ -18,6 +18,8 @@
 }
 
 .emptyStateButtonsContainer {
+	margin-top: 15;
 	flex-direction: row;
-	align-items: center;
+	justify-content: space-evenly;
+	width: 100%;
 }

From 704b7558fb88b607944fcc0dfb6d51ee5e94f281 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 28 Dec 2018 17:25:37 +0100
Subject: [PATCH 09/37] Rename state constants to match style convention

---
 packages/block-library/src/image/edit.native.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 53967001b85767..95104aa29061a5 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -14,9 +14,9 @@ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const MEDIA_UPLOAD_STATE_UPLOADING = 1;
-const MEDIA_UPLOAD_STATE_SUCCEEDED = 2;
-const MEDIA_UPLOAD_STATE_FAILED = 3;
+const mediaUploadStateUploading = 1;
+const mediaUploadStateSucceeded = 2;
+const mediaUploadStateFailed = 3;
 
 export default class ImageEdit extends React.Component {
 	constructor( props ) {
@@ -33,9 +33,9 @@ export default class ImageEdit extends React.Component {
 	}
 
 	mediaUpload( payload ) {
-		if ( payload.state === MEDIA_UPLOAD_STATE_UPLOADING ) {
+		if ( payload.state === mediaUploadStateUploading ) {
 			this.setState( { progress: payload.progress } );
-		} else if ( payload.state === MEDIA_UPLOAD_STATE_SUCCEEDED || payload.state === MEDIA_UPLOAD_STATE_FAILED ) {
+		} else if ( payload.state === mediaUploadStateSucceeded || payload.state === mediaUploadStateFailed ) {
 			this.finishMediaUploading( payload );
 		}
 	}

From e2b08e1dab2ab073d0294c63dc47130daa387090 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Fri, 4 Jan 2019 16:49:05 -0300
Subject: [PATCH 10/37] Implements a native version of post-title.

---
 .../editor/src/components/index.native.js     |   1 +
 .../src/components/post-title/index.native.js | 123 ++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 packages/editor/src/components/post-title/index.native.js

diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js
index 229efa5879cc37..d226b4fe46480c 100644
--- a/packages/editor/src/components/index.native.js
+++ b/packages/editor/src/components/index.native.js
@@ -7,5 +7,6 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as DefaultBlockAppender } from './default-block-appender';
+export { default as PostTitle } from './post-title';
 export { default as EditorHistoryRedo } from './editor-history/redo';
 export { default as EditorHistoryUndo } from './editor-history/undo';
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
new file mode 100644
index 00000000000000..7d2194ba91ad2c
--- /dev/null
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -0,0 +1,123 @@
+/**
+ * External dependencies
+ */
+import { TextInput } from 'react-native';
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { ENTER } from '@wordpress/keycodes';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { KeyboardShortcuts } from '@wordpress/components';
+import { withInstanceId, compose } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import PostTypeSupportCheck from '../post-type-support-check';
+
+/**
+ * Constants
+ */
+const REGEXP_NEWLINES = /[\r\n]+/g;
+
+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.onKeyDown = this.onKeyDown.bind( this );
+		this.redirectHistory = this.redirectHistory.bind( this );
+
+		console.log( "Arguments: " +  JSON.stringify(arguments) );
+
+		this.state = {
+			isSelected: false,
+		};
+	}
+
+	handleFocusOutside() {
+		this.onUnselect();
+	}
+
+	onSelect() {
+		this.setState( { isSelected: true } );
+		this.props.clearSelectedBlock();
+	}
+
+	onUnselect() {
+		this.setState( { isSelected: false } );
+	}
+
+	onChange( title ) {
+		this.props.onUpdate( title );
+	}
+
+	onKeyDown( event ) {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			this.props.onEnterPress();
+		}
+	}
+
+	/**
+	 * Emulates behavior of an undo or redo on its corresponding key press
+	 * combination. This is a workaround to React's treatment of undo in a
+	 * controlled textarea where characters are updated one at a time.
+	 * Instead, leverage the store's undo handling of title changes.
+	 *
+	 * @see https://github.com/facebook/react/issues/8514
+	 *
+	 * @param {KeyboardEvent} event Key event.
+	 */
+	redirectHistory( event ) {
+		if ( event.shiftKey ) {
+			this.props.onRedo();
+		} else {
+			this.props.onUndo();
+		}
+
+		event.preventDefault();
+	}
+
+	render() {
+		const {
+			hasFixedToolbar,
+			isCleanNewPost,
+			isFocusMode,
+			isPostTypeViewable,
+			instanceId,
+			placeholder,
+			style,
+			title,
+		} = this.props;
+		
+		const { isSelected } = this.state;
+		const decodedPlaceholder = decodeEntities( placeholder );
+
+		console.log("Placeholder: " + placeholder);
+		console.log("Decoded: " + decodedPlaceholder);
+
+		return (
+			<TextInput
+				blurOnSubmit={ true }
+				textAlignVertical="top"
+				multiline
+				numberOfLines={ 0 }
+				onChangeText={ this.onChange }
+				placeholder={ decodedPlaceholder }
+				style={ style }
+				value={ title }>
+			</TextInput>
+		);
+	}
+}
+
+export default compose(
+	withInstanceId,
+)( PostTitle );

From d5910a871dd4de55aaafb89feecb5ebcbcb8ebfd Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Fri, 4 Jan 2019 19:09:22 -0300
Subject: [PATCH 11/37] Removes some unnecessary log calls.

---
 packages/editor/src/components/post-title/index.native.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 7d2194ba91ad2c..6e4541a4a95251 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -34,8 +34,6 @@ class PostTitle extends Component {
 		this.onKeyDown = this.onKeyDown.bind( this );
 		this.redirectHistory = this.redirectHistory.bind( this );
 
-		console.log( "Arguments: " +  JSON.stringify(arguments) );
-
 		this.state = {
 			isSelected: false,
 		};
@@ -100,9 +98,6 @@ class PostTitle extends Component {
 		const { isSelected } = this.state;
 		const decodedPlaceholder = decodeEntities( placeholder );
 
-		console.log("Placeholder: " + placeholder);
-		console.log("Decoded: " + decodedPlaceholder);
-
 		return (
 			<TextInput
 				blurOnSubmit={ true }

From 047f1d844fbb0fb1f238052598486d49ca9ce201 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Thu, 10 Jan 2019 17:14:53 -0300
Subject: [PATCH 12/37] Submits a few lint fixes.

---
 .../src/components/post-title/index.native.js | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 6e4541a4a95251..948b517f523eba 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -2,27 +2,14 @@
  * External dependencies
  */
 import { TextInput } from 'react-native';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
-import { withSelect, withDispatch } from '@wordpress/data';
-import { KeyboardShortcuts } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import PostTypeSupportCheck from '../post-type-support-check';
-
-/**
- * Constants
- */
-const REGEXP_NEWLINES = /[\r\n]+/g;
 
 class PostTitle extends Component {
 	constructor() {
@@ -85,17 +72,11 @@ class PostTitle extends Component {
 
 	render() {
 		const {
-			hasFixedToolbar,
-			isCleanNewPost,
-			isFocusMode,
-			isPostTypeViewable,
-			instanceId,
 			placeholder,
 			style,
 			title,
 		} = this.props;
 		
-		const { isSelected } = this.state;
 		const decodedPlaceholder = decodeEntities( placeholder );
 
 		return (

From 4f55ba9233d6080f584267615a2adb69abb9ff75 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Thu, 10 Jan 2019 17:29:44 -0300
Subject: [PATCH 13/37] Fixes a linting issue.

---
 packages/editor/src/components/post-title/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 948b517f523eba..3ac4a94f139acf 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -76,7 +76,7 @@ class PostTitle extends Component {
 			style,
 			title,
 		} = this.props;
-		
+
 		const decodedPlaceholder = decodeEntities( placeholder );
 
 		return (

From e5d8d3f6c0108a232911ee64a88521f87661b513 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 15:03:31 +0100
Subject: [PATCH 14/37] Rename callback methods to follow naming convention
 Updated

---
 packages/block-library/src/image/edit.native.js    | 14 +++++++-------
 .../components/media-placeholder/index.native.js   |  4 ++--
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 95104aa29061a5..a3b07307d24200 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -60,8 +60,8 @@ export default class ImageEdit extends React.Component {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption } = attributes;
 
-		const onMediaLibraryPress = () => {
-			RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
+		const onMediaLibraryPressed = () => {
+			RNReactNativeGutenbergBridge.onMediaLibraryPressed( ( mediaUrl ) => {
 				if ( mediaUrl ) {
 					setAttributes( { url: mediaUrl } );
 				}
@@ -69,8 +69,8 @@ export default class ImageEdit extends React.Component {
 		};
 
 		if ( ! url ) {
-			const onUploadMediaPress = () => {
-				RNReactNativeGutenbergBridge.onUploadMediaPress( ( mediaId, mediaUri ) => {
+			const onUploadMediaPressed = () => {
+				RNReactNativeGutenbergBridge.onUploadMediaPressed( ( mediaId, mediaUri ) => {
 					if ( mediaUri ) {
 						this.addMediaUploadListener( mediaId );
 						setAttributes( { url: mediaUri, id: mediaId } );
@@ -80,8 +80,8 @@ export default class ImageEdit extends React.Component {
 
 			return (
 				<MediaPlaceholder
-					onUploadMediaPress={ onUploadMediaPress }
-					onMediaLibraryPress={ onMediaLibraryPress }
+					onUploadMediaPressed={ onUploadMediaPressed }
+					onMediaLibraryPressed={ onMediaLibraryPressed }
 				/>
 			);
 		}
@@ -92,7 +92,7 @@ export default class ImageEdit extends React.Component {
 					className="components-toolbar__control"
 					label={ __( 'Edit image' ) }
 					icon="edit"
-					onClick={ onMediaLibraryPress }
+					onClick={ onMediaLibraryPressed }
 				/>
 			</Toolbar>
 		);
diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index e4179a157e816a..f21a5401575e27 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -17,8 +17,8 @@ function MediaPlaceholder( props ) {
 				{ __( 'Upload a new image or select a file from your library.' ) }
 			</Text>
 			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPress } />
-				<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPress } />
+				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPressed } />
+				<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
 			</View>
 		</View>
 	);

From 2668862ac2e307675f7d7cb351315189119208e9 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 15:03:44 +0100
Subject: [PATCH 15/37] Updated spinner to match the specs

---
 packages/components/src/spinner/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
index b5ad93d6bf7fc1..8f1d685413a3eb 100644
--- a/packages/components/src/spinner/index.native.js
+++ b/packages/components/src/spinner/index.native.js
@@ -6,7 +6,7 @@ export default function Spinner( props 	) {
 	const width = progress + '%';
 
 	return (
-		<View style={ { flex: 1, height: 5, backgroundColor: '#a8bece' } }>
+		<View style={ { flex: 1, height: 5, backgroundColor: '#c8d7e1' } }>
 			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } } />
 		</View>
 	);

From 408cb1ebcd95c1b08f8f921e47d440b98a10a9b0 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 16:10:14 +0100
Subject: [PATCH 16/37] Moved placeholder string to localization format Removed
 className from ToolbarButton

---
 packages/block-library/src/image/edit.native.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index a3b07307d24200..8c5635f123b6f2 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -89,7 +89,6 @@ export default class ImageEdit extends React.Component {
 		const toolbarEditButton = (
 			<Toolbar>
 				<ToolbarButton
-					className="components-toolbar__control"
 					label={ __( 'Edit image' ) }
 					icon="edit"
 					onClick={ onMediaLibraryPressed }
@@ -119,7 +118,7 @@ export default class ImageEdit extends React.Component {
 							style={ { textAlign: 'center' } }
 							underlineColorAndroid="transparent"
 							value={ caption }
-							placeholder={ 'Write caption…' }
+							placeholder={ __( 'Write caption…' )  }
 							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
 						/>
 					</View>

From d840e3062bfda6c2b32a62308845dbf217991888 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 16:20:18 +0100
Subject: [PATCH 17/37] Added isURL method to check if passed url is local or
 web url

---
 .../block-library/src/image/edit.native.js    | 82 +------------------
 1 file changed, 3 insertions(+), 79 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 789666e3735740..6feb1ea91d9483 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -11,16 +11,13 @@ const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBrid
  * Internal dependencies
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
-<<<<<<< HEAD
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
-=======
 import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
->>>>>>> master
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
+import { isURL } from '@wordpress/url'
 
-<<<<<<< HEAD
 const mediaUploadStateUploading = 1;
 const mediaUploadStateSucceeded = 2;
 const mediaUploadStateFailed = 3;
@@ -103,8 +100,7 @@ export default class ImageEdit extends React.Component {
 			</Toolbar>
 		);
 
-		const http = 'http';
-		const showSpinner = url !== undefined ? ! url.includes( http ) : false;
+		const showSpinner = ! isURL( url )
 		const progress = this.state.progress * 100;
 		const opacity = showSpinner ? 0.3 : 1;
 
@@ -114,77 +110,6 @@ export default class ImageEdit extends React.Component {
 				<BlockControls>
 					{ toolbarEditButton }
 				</BlockControls>
-				<Image
-					style={ { width: '100%', height: 200, opacity: opacity } }
-					resizeMethod="scale"
-					source={ { uri: url } }
-				/>
-				{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
-					<View style={ { padding: 12, flex: 1 } }>
-						<TextInput
-							style={ { textAlign: 'center' } }
-							underlineColorAndroid="transparent"
-							value={ caption }
-							placeholder={ __( 'Write caption…' )  }
-							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
-						/>
-					</View>
-				) }
-			</View>
-		);
-	}
-=======
-class ImageEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onMediaLibraryPress = this.onMediaLibraryPress.bind( this );
-	}
-
-	onUploadPress() {
-		// This method should present an image picker from
-		// the device.
-		//TODO: Implement upload image method.
-	}
-
-	onMediaLibraryPress() {
-		RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
-			if ( mediaUrl ) {
-				this.props.setAttributes( { url: mediaUrl } );
-			}
-		} );
-	}
-
-	toolbarEditButton() {
-		return (
-			<Toolbar>
-				<ToolbarButton
-					className="components-toolbar__control"
-					label={ __( 'Edit image' ) }
-					icon="edit"
-					onClick={ this.onMediaLibraryPress }
-				/>
-			</Toolbar>
-		);
-	}
-
-	render() {
-		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption, height, width } = attributes;
-
-		if ( ! url ) {
-			return (
-				<MediaPlaceholder
-					onUploadPress={ this.onUploadPress }
-					onMediaLibraryPress={ this.onMediaLibraryPress }
-				/>
-			);
-		}
-
-		return (
-			<View style={ { flex: 1 } }>
-				<BlockControls>
-					{ this.toolbarEditButton() }
-				</BlockControls>
 				<ImageSize src={ url } >
 					{ ( sizes ) => {
 						const {
@@ -220,7 +145,7 @@ class ImageEdit extends Component {
 							style={ { textAlign: 'center' } }
 							underlineColorAndroid="transparent"
 							value={ caption }
-							placeholder={ 'Write caption…' }
+							placeholder={ __( 'Write caption…' )  }
 							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
 						/>
 					</View>
@@ -228,7 +153,6 @@ class ImageEdit extends Component {
 			</View>
 		);
 	}
->>>>>>> master
 }
 
 export default ImageEdit;

From 5f2889f38125b3e3b29f6e9995fa865f93409684 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 16:27:30 +0100
Subject: [PATCH 18/37] Removed duplicated code

---
 packages/block-library/src/image/edit.native.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 6feb1ea91d9483..3150557e1654fd 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -12,7 +12,6 @@ const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBrid
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
-import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
@@ -154,5 +153,3 @@ export default class ImageEdit extends React.Component {
 		);
 	}
 }
-
-export default ImageEdit;

From 21920fd63d6ef64acf03be05748d24602cdc9b44 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 16:29:11 +0100
Subject: [PATCH 19/37] Add missing attributes

---
 packages/block-library/src/image/edit.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 3150557e1654fd..2dc239bf2d38ed 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -61,7 +61,7 @@ export default class ImageEdit extends React.Component {
 
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption } = attributes;
+		const { url, caption, height, width } = attributes;
 
 		const onMediaLibraryPressed = () => {
 			RNReactNativeGutenbergBridge.onMediaLibraryPressed( ( mediaUrl ) => {

From 876b445dd82f0be27e1b3b2b742f2a82e8bee132 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Wed, 16 Jan 2019 16:31:42 +0100
Subject: [PATCH 20/37] Revert missing opacity

---
 packages/block-library/src/image/edit.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 2dc239bf2d38ed..47c3712e49cef5 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -129,7 +129,7 @@ export default class ImageEdit extends React.Component {
 						return (
 							<View style={ { flex: 1 } } >
 								<Image
-									style={ { width: finalWidth, height: finalHeight } }
+									style={ { width: finalWidth, height: finalHeight, opacity: opacity } }
 									resizeMethod="scale"
 									source={ { uri: url } }
 									key={ url }

From 4c276387aac1b0da9a2dc862b00df5e60b356520 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Wed, 16 Jan 2019 17:59:56 -0300
Subject: [PATCH 21/37] When focusing the title, any focused block loses its
 focus.

---
 .../src/components/post-title/index.native.js       | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 3ac4a94f139acf..f63ba7a6d89a3b 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -9,6 +9,7 @@ import { TextInput } from 'react-native';
 import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
+import { withSelect, withDispatch } from '@wordpress/data';
 import { withInstanceId, compose } from '@wordpress/compose';
 
 class PostTitle extends Component {
@@ -86,6 +87,7 @@ class PostTitle extends Component {
 				multiline
 				numberOfLines={ 0 }
 				onChangeText={ this.onChange }
+				onFocus={ this.onSelect }
 				placeholder={ decodedPlaceholder }
 				style={ style }
 				value={ title }>
@@ -94,6 +96,17 @@ class PostTitle extends Component {
 	}
 }
 
+const applyWithDispatch = withDispatch( ( dispatch ) => {
+	const {
+		clearSelectedBlock,
+	} = dispatch( 'core/editor' );
+
+	return {
+		clearSelectedBlock,
+	};
+} );
+
 export default compose(
+	applyWithDispatch,
 	withInstanceId,
 )( PostTitle );

From 0ab5a1b6aa70d4d8b914eaefa45ac2f19322cd08 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Wed, 16 Jan 2019 18:22:32 -0300
Subject: [PATCH 22/37] FocusOut is now wired for post-title for mobile.

---
 packages/components/src/index.native.js                   | 1 +
 packages/editor/src/components/post-title/index.native.js | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 3e44bdec61e509..cbaae28e089bdd 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -9,3 +9,4 @@ export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot
 
 // Higher-Order Components
 export { default as withFilters } from './higher-order/with-filters';
+export { default as withFocusOutside } from './higher-order/with-focus-outside';
diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index f63ba7a6d89a3b..1b2e8091ac4f5a 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -10,6 +10,7 @@ import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 
 class PostTitle extends Component {
@@ -109,4 +110,5 @@ const applyWithDispatch = withDispatch( ( dispatch ) => {
 export default compose(
 	applyWithDispatch,
 	withInstanceId,
+	withFocusOutside
 )( PostTitle );

From 1f9c722ee4b9a17d2659b8a624927dbe54b2d299 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Wed, 16 Jan 2019 18:26:43 -0300
Subject: [PATCH 23/37] Removes unused some code.

---
 .../src/components/post-title/index.native.js | 30 -------------------
 1 file changed, 30 deletions(-)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index 1b2e8091ac4f5a..cf4af33ca24caf 100644
--- a/packages/editor/src/components/post-title/index.native.js
+++ b/packages/editor/src/components/post-title/index.native.js
@@ -8,7 +8,6 @@ import { TextInput } from 'react-native';
  */
 import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { ENTER } from '@wordpress/keycodes';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
@@ -20,8 +19,6 @@ class PostTitle extends Component {
 		this.onChange = this.onChange.bind( this );
 		this.onSelect = this.onSelect.bind( this );
 		this.onUnselect = this.onUnselect.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
-		this.redirectHistory = this.redirectHistory.bind( this );
 
 		this.state = {
 			isSelected: false,
@@ -45,33 +42,6 @@ class PostTitle extends Component {
 		this.props.onUpdate( title );
 	}
 
-	onKeyDown( event ) {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			this.props.onEnterPress();
-		}
-	}
-
-	/**
-	 * Emulates behavior of an undo or redo on its corresponding key press
-	 * combination. This is a workaround to React's treatment of undo in a
-	 * controlled textarea where characters are updated one at a time.
-	 * Instead, leverage the store's undo handling of title changes.
-	 *
-	 * @see https://github.com/facebook/react/issues/8514
-	 *
-	 * @param {KeyboardEvent} event Key event.
-	 */
-	redirectHistory( event ) {
-		if ( event.shiftKey ) {
-			this.props.onRedo();
-		} else {
-			this.props.onUndo();
-		}
-
-		event.preventDefault();
-	}
-
 	render() {
 		const {
 			placeholder,

From e54d5b9a074276dbd8798531e65c6ceee387e869 Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Wed, 16 Jan 2019 18:27:23 -0300
Subject: [PATCH 24/37] Added a file I failed to commit.

---
 .../with-focus-outside/index.native.js        | 139 ++++++++++++++++++
 1 file changed, 139 insertions(+)
 create mode 100644 packages/components/src/higher-order/with-focus-outside/index.native.js

diff --git a/packages/components/src/higher-order/with-focus-outside/index.native.js b/packages/components/src/higher-order/with-focus-outside/index.native.js
new file mode 100644
index 00000000000000..7d3ae52eaeb787
--- /dev/null
+++ b/packages/components/src/higher-order/with-focus-outside/index.native.js
@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { includes } from 'lodash';
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Input types which are classified as button types, for use in considering
+ * whether element is a (focus-normalized) button.
+ *
+ * @type {string[]}
+ */
+const INPUT_BUTTON_TYPES = [
+	'button',
+	'submit',
+];
+
+/**
+ * Returns true if the given element is a button element subject to focus
+ * normalization, or false otherwise.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+ *
+ * @param {Element} element Element to test.
+ *
+ * @return {boolean} Whether element is a button.
+ */
+function isFocusNormalizedButton( element ) {
+	switch ( element.nodeName ) {
+		case 'A':
+		case 'BUTTON':
+			return true;
+
+		case 'INPUT':
+			return includes( INPUT_BUTTON_TYPES, element.type );
+	}
+
+	return false;
+}
+
+export default createHigherOrderComponent(
+	( WrappedComponent ) => {
+		return class extends Component {
+			constructor() {
+				super( ...arguments );
+
+				this.bindNode = this.bindNode.bind( this );
+				this.cancelBlurCheck = this.cancelBlurCheck.bind( this );
+				this.queueBlurCheck = this.queueBlurCheck.bind( this );
+				this.normalizeButtonFocus = this.normalizeButtonFocus.bind( this );
+			}
+
+			componentWillUnmount() {
+				this.cancelBlurCheck();
+			}
+
+			bindNode( node ) {
+				if ( node ) {
+					this.node = node;
+				} else {
+					delete this.node;
+					this.cancelBlurCheck();
+				}
+			}
+
+			queueBlurCheck( event ) {
+				// React does not allow using an event reference asynchronously
+				// due to recycling behavior, except when explicitly persisted.
+				event.persist();
+
+				// Skip blur check if clicking button. See `normalizeButtonFocus`.
+				if ( this.preventBlurCheck ) {
+					return;
+				}
+
+				this.blurCheckTimeout = setTimeout( () => {
+					if ( 'function' === typeof this.node.handleFocusOutside ) {
+						this.node.handleFocusOutside( event );
+					}
+				}, 0 );
+			}
+
+			cancelBlurCheck() {
+				clearTimeout( this.blurCheckTimeout );
+			}
+
+			/**
+			 * Handles a mousedown or mouseup event to respectively assign and
+			 * unassign a flag for preventing blur check on button elements. Some
+			 * browsers, namely Firefox and Safari, do not emit a focus event on
+			 * button elements when clicked, while others do. The logic here
+			 * intends to normalize this as treating click on buttons as focus.
+			 *
+			 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
+			 *
+			 * @param {MouseEvent} event Event for mousedown or mouseup.
+			 */
+			normalizeButtonFocus( event ) {
+				const { type, target } = event;
+
+				const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+
+				if ( isInteractionEnd ) {
+					this.preventBlurCheck = false;
+				} else if ( isFocusNormalizedButton( target ) ) {
+					this.preventBlurCheck = true;
+				}
+			}
+
+			render() {
+				// Disable reason: See `normalizeButtonFocus` for browser-specific
+				// focus event normalization.
+
+				/* eslint-disable jsx-a11y/no-static-element-interactions */
+				return (
+					<View
+						onFocus={ this.cancelBlurCheck }
+						onMouseDown={ this.normalizeButtonFocus }
+						onMouseUp={ this.normalizeButtonFocus }
+						onTouchStart={ this.normalizeButtonFocus }
+						onTouchEnd={ this.normalizeButtonFocus }
+						onBlur={ this.queueBlurCheck }
+					>
+						<WrappedComponent
+							ref={ this.bindNode }
+							{ ...this.props } />
+					</View>
+				);
+				/* eslint-enable jsx-a11y/no-static-element-interactions */
+			}
+		};
+	}, 'withFocusOutside'
+);

From e2cb5c9ccc9dbc3ed42ed1b13e0db1be17c49839 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Thu, 17 Jan 2019 12:03:07 +0100
Subject: [PATCH 25/37] Revert media upload event to be non dynamic

---
 packages/block-library/src/image/edit.native.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 47c3712e49cef5..56873b6ed7a5e5 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -47,16 +47,15 @@ export default class ImageEdit extends React.Component {
 		const { setAttributes } = this.props;
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaId } );
-		this.setState( { progress: payload.progress } );
 		this.removeMediaUploadListener( payload.mediaId );
 	}
 
 	addMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.addListener( 'mediaUpload' + mediaId, this.mediaUpload );
+		gutenbergBridgeEvents.addListener( 'mediaUpload', this.mediaUpload );
 	}
 
 	removeMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.removeListener( 'mediaUpload' + mediaId, this.mediaUpload );
+		gutenbergBridgeEvents.removeListener( 'mediaUpload', this.mediaUpload );
 	}
 
 	render() {
@@ -100,8 +99,8 @@ export default class ImageEdit extends React.Component {
 		);
 
 		const showSpinner = ! isURL( url )
+		const opacity = ! isURL( url ) ? 0.3 : 1;
 		const progress = this.state.progress * 100;
-		const opacity = showSpinner ? 0.3 : 1;
 
 		return (
 			<View style={ { flex: 1 } }>

From 7f05b9ce0be41622efcd774d79932fccdf40a72c Mon Sep 17 00:00:00 2001
From: Diego Rey Mendez <diegoreymendez@gmail.com>
Date: Thu, 17 Jan 2019 10:06:49 -0300
Subject: [PATCH 26/37] Fixes a linting issue.

---
 packages/editor/src/components/post-title/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/components/post-title/index.native.js b/packages/editor/src/components/post-title/index.native.js
index cf4af33ca24caf..61148e0f4e7a68 100644
--- 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 { TextInput } from 'react-native';
  */
 import { Component } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { withDispatch } from '@wordpress/data';
 import { withFocusOutside } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 

From 77a1fbef0255c4cf015c5c0738ff07928bda32f2 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Thu, 17 Jan 2019 14:59:32 +0100
Subject: [PATCH 27/37] Make sure that we are receiving events for current
 media image

---
 packages/block-library/src/image/edit.native.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 56873b6ed7a5e5..14921399fe5a6b 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -36,10 +36,14 @@ export default class ImageEdit extends React.Component {
 	}
 
 	mediaUpload( payload ) {
-		if ( payload.state === mediaUploadStateUploading ) {
-			this.setState( { progress: payload.progress } );
-		} else if ( payload.state === mediaUploadStateSucceeded || payload.state === mediaUploadStateFailed ) {
-			this.finishMediaUploading( payload );
+		const { attributes } = this.props;
+
+		if (payload.mediaId === attributes.id) {
+			if ( payload.state === mediaUploadStateUploading ) {
+				this.setState( { progress: payload.progress } );
+			} else if ( payload.state === mediaUploadStateSucceeded || payload.state === mediaUploadStateFailed ) {
+				this.finishMediaUploading( payload );
+			}	
 		}
 	}
 

From 8264c52180419890c02b05d972dce909b9640db6 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Thu, 17 Jan 2019 15:12:11 +0100
Subject: [PATCH 28/37] Renamed constants to follow naming convention

---
 packages/block-library/src/image/edit.native.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 14921399fe5a6b..2d36572f214659 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -17,9 +17,9 @@ import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 import { isURL } from '@wordpress/url'
 
-const mediaUploadStateUploading = 1;
-const mediaUploadStateSucceeded = 2;
-const mediaUploadStateFailed = 3;
+const MEDIA_ULOAD_STATE_UPLOADING = 1;
+const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
+const MEDIA_ULOAD_STATE_FAILED = 3;
 
 export default class ImageEdit extends React.Component {
 	constructor( props ) {
@@ -39,9 +39,9 @@ export default class ImageEdit extends React.Component {
 		const { attributes } = this.props;
 
 		if (payload.mediaId === attributes.id) {
-			if ( payload.state === mediaUploadStateUploading ) {
+			if ( payload.state === MEDIA_ULOAD_STATE_UPLOADING ) {
 				this.setState( { progress: payload.progress } );
-			} else if ( payload.state === mediaUploadStateSucceeded || payload.state === mediaUploadStateFailed ) {
+			} else if ( payload.state === MEDIA_ULOAD_STATE_SUCCEEDED || payload.state === MEDIA_ULOAD_STATE_FAILED ) {
 				this.finishMediaUploading( payload );
 			}	
 		}

From c2a8cf5c023695173d051387659a795e88c0da67 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Thu, 17 Jan 2019 17:54:01 +0100
Subject: [PATCH 29/37] Wrap RNReactNativeGutenbergBridge calls inside
 react-native-gutenberg-bridge module

---
 .../block-library/src/image/edit.native.js    | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 2d36572f214659..23922639508e52 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -3,9 +3,11 @@
  */
 import React from 'react';
 import { View, Image, TextInput, NativeEventEmitter } from 'react-native';
-import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
-
-const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
+import {
+	subscribeMediaUpload,
+	onMediaLibraryPressed,
+	onUploadMediaPressed,
+} from 'react-native-gutenberg-bridge';
 
 /**
  * Internal dependencies
@@ -22,6 +24,9 @@ const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
 const MEDIA_ULOAD_STATE_FAILED = 3;
 
 export default class ImageEdit extends React.Component {
+
+	subscriptionParentMediaUpload: ?EmitterSubscription;
+
 	constructor( props ) {
 		super( props );
 
@@ -35,6 +40,10 @@ export default class ImageEdit extends React.Component {
 		this.finishMediaUploading = this.finishMediaUploading.bind( this );
 	}
 
+	componentWillUnmount() {
+		this.removeMediaUploadListener();
+	}
+
 	mediaUpload( payload ) {
 		const { attributes } = this.props;
 
@@ -54,20 +63,24 @@ export default class ImageEdit extends React.Component {
 		this.removeMediaUploadListener( payload.mediaId );
 	}
 
-	addMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.addListener( 'mediaUpload', this.mediaUpload );
+	addMediaUploadListener( ) {
+		this.subscriptionParentMediaUpload = subscribeMediaUpload( ( payload ) => {
+			this.mediaUpload( payload );
+		} );
 	}
 
-	removeMediaUploadListener( mediaId ) {
-		gutenbergBridgeEvents.removeListener( 'mediaUpload', this.mediaUpload );
+	removeMediaUploadListener( ) {
+		if ( this.subscriptionParentMediaUpload ) {
+			this.subscriptionParentMediaUpload.remove();
+		}
 	}
 
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
 		const { url, caption, height, width } = attributes;
 
-		const onMediaLibraryPressed = () => {
-			RNReactNativeGutenbergBridge.onMediaLibraryPressed( ( mediaUrl ) => {
+		const onMediaLibraryButtonPressed = () => {
+			onMediaLibraryPressed( ( mediaUrl ) => {
 				if ( mediaUrl ) {
 					setAttributes( { url: mediaUrl } );
 				}
@@ -75,8 +88,8 @@ export default class ImageEdit extends React.Component {
 		};
 
 		if ( ! url ) {
-			const onUploadMediaPressed = () => {
-				RNReactNativeGutenbergBridge.onUploadMediaPressed( ( mediaId, mediaUri ) => {
+			const onUploadMediaButtonPressed = () => {
+				onUploadMediaPressed( ( mediaId, mediaUri ) => {
 					if ( mediaUri ) {
 						this.addMediaUploadListener( mediaId );
 						setAttributes( { url: mediaUri, id: mediaId } );
@@ -86,8 +99,8 @@ export default class ImageEdit extends React.Component {
 
 			return (
 				<MediaPlaceholder
-					onUploadMediaPressed={ onUploadMediaPressed }
-					onMediaLibraryPressed={ onMediaLibraryPressed }
+					onUploadMediaPressed={ onUploadMediaButtonPressed }
+					onMediaLibraryPressed={ onMediaLibraryButtonPressed }
 				/>
 			);
 		}
@@ -97,7 +110,7 @@ export default class ImageEdit extends React.Component {
 				<ToolbarButton
 					label={ __( 'Edit image' ) }
 					icon="edit"
-					onClick={ onMediaLibraryPressed }
+					onClick={ onMediaLibraryButtonPressed }
 				/>
 			</Toolbar>
 		);

From 08f5cc20b908566253ad8110efbbfd533dbde2ba Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Thu, 17 Jan 2019 18:04:54 +0100
Subject: [PATCH 30/37] Add state isUploadInProgress instead of checking isUrl
 is valid

---
 packages/block-library/src/image/edit.native.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 23922639508e52..7eee5fa59811ca 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -17,7 +17,6 @@ import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
-import { isURL } from '@wordpress/url'
 
 const MEDIA_ULOAD_STATE_UPLOADING = 1;
 const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
@@ -32,6 +31,7 @@ export default class ImageEdit extends React.Component {
 
 		this.state = {
 			progress: 0,
+			isUploadInProgress: false,
 		};
 
 		this.mediaUpload = this.mediaUpload.bind( this );
@@ -49,7 +49,7 @@ export default class ImageEdit extends React.Component {
 
 		if (payload.mediaId === attributes.id) {
 			if ( payload.state === MEDIA_ULOAD_STATE_UPLOADING ) {
-				this.setState( { progress: payload.progress } );
+				this.setState( { progress: payload.progress, isUploadInProgress: true } );
 			} else if ( payload.state === MEDIA_ULOAD_STATE_SUCCEEDED || payload.state === MEDIA_ULOAD_STATE_FAILED ) {
 				this.finishMediaUploading( payload );
 			}	
@@ -60,6 +60,8 @@ export default class ImageEdit extends React.Component {
 		const { setAttributes } = this.props;
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaId } );
+		this.setState( { isUploadInProgress: false } );
+
 		this.removeMediaUploadListener( payload.mediaId );
 	}
 
@@ -115,8 +117,8 @@ export default class ImageEdit extends React.Component {
 			</Toolbar>
 		);
 
-		const showSpinner = ! isURL( url )
-		const opacity = ! isURL( url ) ? 0.3 : 1;
+		const showSpinner = this.state.isUploadInProgress;
+		const opacity =  this.state.isUploadInProgress ? 0.3 : 1;
 		const progress = this.state.progress * 100;
 
 		return (

From 9b2f540470eba3935247b5ad3608d9464160805a Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 18 Jan 2019 11:38:57 +0100
Subject: [PATCH 31/37] Removed private variable so that can pass

---
 packages/block-library/src/image/edit.native.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 7eee5fa59811ca..7bc7487b6c1ff7 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -24,8 +24,6 @@ const MEDIA_ULOAD_STATE_FAILED = 3;
 
 export default class ImageEdit extends React.Component {
 
-	subscriptionParentMediaUpload: ?EmitterSubscription;
-
 	constructor( props ) {
 		super( props );
 

From 5814a4c6b082e2637c1b9157291fd2a049146cc1 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 18 Jan 2019 11:59:27 +0100
Subject: [PATCH 32/37] Fixed lint tests

---
 packages/block-library/src/image/edit.native.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 7bc7487b6c1ff7..b8ea6658876aa2 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React from 'react';
-import { View, Image, TextInput, NativeEventEmitter } from 'react-native';
+import { View, Image, TextInput } from 'react-native';
 import {
 	subscribeMediaUpload,
 	onMediaLibraryPressed,
@@ -14,7 +14,6 @@ import {
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
-import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 
@@ -23,7 +22,6 @@ const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
 const MEDIA_ULOAD_STATE_FAILED = 3;
 
 export default class ImageEdit extends React.Component {
-
 	constructor( props ) {
 		super( props );
 
@@ -45,12 +43,12 @@ export default class ImageEdit extends React.Component {
 	mediaUpload( payload ) {
 		const { attributes } = this.props;
 
-		if (payload.mediaId === attributes.id) {
+		if ( payload.mediaId === attributes.id ) {
 			if ( payload.state === MEDIA_ULOAD_STATE_UPLOADING ) {
 				this.setState( { progress: payload.progress, isUploadInProgress: true } );
 			} else if ( payload.state === MEDIA_ULOAD_STATE_SUCCEEDED || payload.state === MEDIA_ULOAD_STATE_FAILED ) {
 				this.finishMediaUploading( payload );
-			}	
+			}
 		}
 	}
 
@@ -116,7 +114,7 @@ export default class ImageEdit extends React.Component {
 		);
 
 		const showSpinner = this.state.isUploadInProgress;
-		const opacity =  this.state.isUploadInProgress ? 0.3 : 1;
+		const opacity = this.state.isUploadInProgress ? 0.3 : 1;
 		const progress = this.state.progress * 100;
 
 		return (
@@ -160,7 +158,7 @@ export default class ImageEdit extends React.Component {
 							style={ { textAlign: 'center' } }
 							underlineColorAndroid="transparent"
 							value={ caption }
-							placeholder={ __( 'Write caption…' )  }
+							placeholder={ __( 'Write caption…' ) }
 							onChangeText={ ( newCaption ) => setAttributes( { caption: newCaption } ) }
 						/>
 					</View>

From a5a200bdabace56427b710b0d2a5048de1231583 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 18 Jan 2019 16:38:24 +0100
Subject: [PATCH 33/37] Start listen for progress media upload if it's didn't
 finish

---
 packages/block-library/src/image/edit.native.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index b8ea6658876aa2..b837a9d8ca9547 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -16,6 +16,7 @@ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
+import { isURL } from '@wordpress/url'
 
 const MEDIA_ULOAD_STATE_UPLOADING = 1;
 const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
@@ -36,6 +37,14 @@ export default class ImageEdit extends React.Component {
 		this.finishMediaUploading = this.finishMediaUploading.bind( this );
 	}
 
+	componentDidMount() {
+		const { attributes } = this.props;
+		
+		if ( attributes.id && !isURL( attributes.url )) {
+			this.addMediaUploadListener();
+		}
+	}
+
 	componentWillUnmount() {
 		this.removeMediaUploadListener();
 	}
@@ -89,7 +98,7 @@ export default class ImageEdit extends React.Component {
 			const onUploadMediaButtonPressed = () => {
 				onUploadMediaPressed( ( mediaId, mediaUri ) => {
 					if ( mediaUri ) {
-						this.addMediaUploadListener( mediaId );
+						this.addMediaUploadListener( );
 						setAttributes( { url: mediaUri, id: mediaId } );
 					}
 				} );

From 6129033957b251debcaa8356c0266566ab798cdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Est=C3=AAv=C3=A3o?= <sergioestevao@gmail.com>
Date: Wed, 23 Jan 2019 22:57:01 +0000
Subject: [PATCH 34/37] RN Mobile - Upload media file ios (#13421)

* Add serverID to finish media upload with success event.

* Refactor code to have early exit.

* Support setting id when selecting from media library.
---
 .../block-library/src/image/edit.native.js    | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index b837a9d8ca9547..e459a3e2eeed61 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -16,7 +16,7 @@ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
-import { isURL } from '@wordpress/url'
+import { isURL } from '@wordpress/url';
 
 const MEDIA_ULOAD_STATE_UPLOADING = 1;
 const MEDIA_ULOAD_STATE_SUCCEEDED = 2;
@@ -34,13 +34,14 @@ export default class ImageEdit extends React.Component {
 		this.mediaUpload = this.mediaUpload.bind( this );
 		this.addMediaUploadListener = this.addMediaUploadListener.bind( this );
 		this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this );
-		this.finishMediaUploading = this.finishMediaUploading.bind( this );
+		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this );
 	}
 
 	componentDidMount() {
 		const { attributes } = this.props;
-		
-		if ( attributes.id && !isURL( attributes.url )) {
+
+		if ( attributes.id && ! isURL( attributes.url ) ) {
 			this.addMediaUploadListener();
 		}
 	}
@@ -52,31 +53,48 @@ export default class ImageEdit extends React.Component {
 	mediaUpload( payload ) {
 		const { attributes } = this.props;
 
-		if ( payload.mediaId === attributes.id ) {
-			if ( payload.state === MEDIA_ULOAD_STATE_UPLOADING ) {
+		if ( payload.mediaId !== attributes.id ) {
+			return;
+		}
+
+		switch ( payload.state ) {
+			case MEDIA_ULOAD_STATE_UPLOADING:
 				this.setState( { progress: payload.progress, isUploadInProgress: true } );
-			} else if ( payload.state === MEDIA_ULOAD_STATE_SUCCEEDED || payload.state === MEDIA_ULOAD_STATE_FAILED ) {
-				this.finishMediaUploading( payload );
-			}
+				break;
+			case MEDIA_ULOAD_STATE_SUCCEEDED:
+				this.finishMediaUploadWithSuccess( payload );
+				break;
+			case MEDIA_ULOAD_STATE_FAILED:
+				this.finishMediaUploadWithFailure( payload );
+				break;
 		}
 	}
 
-	finishMediaUploading( payload ) {
+	finishMediaUploadWithSuccess( payload ) {
+		const { setAttributes } = this.props;
+
+		setAttributes( { url: payload.mediaUrl, id: payload.mediaServerId } );
+		this.setState( { isUploadInProgress: false } );
+
+		this.removeMediaUploadListener();
+	}
+
+	finishMediaUploadWithFailure( payload ) {
 		const { setAttributes } = this.props;
 
 		setAttributes( { url: payload.mediaUrl, id: payload.mediaId } );
 		this.setState( { isUploadInProgress: false } );
 
-		this.removeMediaUploadListener( payload.mediaId );
+		this.removeMediaUploadListener();
 	}
 
-	addMediaUploadListener( ) {
+	addMediaUploadListener() {
 		this.subscriptionParentMediaUpload = subscribeMediaUpload( ( payload ) => {
 			this.mediaUpload( payload );
 		} );
 	}
 
-	removeMediaUploadListener( ) {
+	removeMediaUploadListener() {
 		if ( this.subscriptionParentMediaUpload ) {
 			this.subscriptionParentMediaUpload.remove();
 		}
@@ -87,9 +105,9 @@ export default class ImageEdit extends React.Component {
 		const { url, caption, height, width } = attributes;
 
 		const onMediaLibraryButtonPressed = () => {
-			onMediaLibraryPressed( ( mediaUrl ) => {
+			onMediaLibraryPressed( ( mediaId, mediaUrl ) => {
 				if ( mediaUrl ) {
-					setAttributes( { url: mediaUrl } );
+					setAttributes( { id: mediaId, url: mediaUrl } );
 				}
 			} );
 		};

From 9fecd693ee0e4e9e1d7074e591bd1b2d711f3816 Mon Sep 17 00:00:00 2001
From: Sergio Estevao <sergioestevao@gmail.com>
Date: Fri, 25 Jan 2019 09:49:41 +0000
Subject: [PATCH 35/37] Fix lint errors.

---
 packages/block-library/src/image/edit.native.js | 2 +-
 packages/components/src/spinner/index.native.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index e459a3e2eeed61..00b0a83598e9bd 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -170,7 +170,7 @@ export default class ImageEdit extends React.Component {
 						return (
 							<View style={ { flex: 1 } } >
 								<Image
-									style={ { width: finalWidth, height: finalHeight, opacity: opacity } }
+									style={ { width: finalWidth, height: finalHeight, opacity } }
 									resizeMethod="scale"
 									source={ { uri: url } }
 									key={ url }
diff --git a/packages/components/src/spinner/index.native.js b/packages/components/src/spinner/index.native.js
index 8f1d685413a3eb..305019bc8b40d4 100644
--- a/packages/components/src/spinner/index.native.js
+++ b/packages/components/src/spinner/index.native.js
@@ -7,7 +7,7 @@ export default function Spinner( props 	) {
 
 	return (
 		<View style={ { flex: 1, height: 5, backgroundColor: '#c8d7e1' } }>
-			<View style={ { width: width, height: 5, backgroundColor: '#0087be' } } />
+			<View style={ { width, height: 5, backgroundColor: '#0087be' } } />
 		</View>
 	);
 }

From 028ab55941f2c36b7e85a07e648c9a9f55dac731 Mon Sep 17 00:00:00 2001
From: Marko Savic <savicmarko1985@gmail.com>
Date: Fri, 25 Jan 2019 10:53:10 +0100
Subject: [PATCH 36/37] Rnmobile/upload captured photo (#13450)

*Upload captured photo
---
 packages/block-library/src/image/edit.native.js       | 11 +++++++++++
 .../src/components/media-placeholder/index.native.js  |  5 +++--
 .../components/media-placeholder/styles.native.scss   |  1 +
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 00b0a83598e9bd..bb3eb530f775b6 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -7,6 +7,7 @@ import {
 	subscribeMediaUpload,
 	onMediaLibraryPressed,
 	onUploadMediaPressed,
+	onCapturePhotoPressed,
 } from 'react-native-gutenberg-bridge';
 
 /**
@@ -122,10 +123,20 @@ export default class ImageEdit extends React.Component {
 				} );
 			};
 
+			const onCapturePhotoButtonPressed = () => {
+				onCapturePhotoPressed( ( mediaId, mediaUri ) => {
+					if ( mediaUri ) {
+						this.addMediaUploadListener( );
+						setAttributes( { url: mediaUri, id: mediaId } );
+					}
+				} );
+			};
+
 			return (
 				<MediaPlaceholder
 					onUploadMediaPressed={ onUploadMediaButtonPressed }
 					onMediaLibraryPressed={ onMediaLibraryButtonPressed }
+					onCapturePhotoPressed={ onCapturePhotoButtonPressed }
 				/>
 			);
 		}
diff --git a/packages/editor/src/components/media-placeholder/index.native.js b/packages/editor/src/components/media-placeholder/index.native.js
index f21a5401575e27..0b70472c2407f9 100644
--- a/packages/editor/src/components/media-placeholder/index.native.js
+++ b/packages/editor/src/components/media-placeholder/index.native.js
@@ -17,9 +17,10 @@ function MediaPlaceholder( props ) {
 				{ __( 'Upload a new image or select a file from your library.' ) }
 			</Text>
 			<View style={ styles.emptyStateButtonsContainer }>
-				<Button title={ __( 'Upload' ) } onPress={ props.onUploadMediaPressed } />
-				<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
+				<Button title={ __( 'Device Library' ) } onPress={ props.onUploadMediaPressed } />
+				<Button title={ __( 'Take photo' ) } onPress={ props.onCapturePhotoPressed } />
 			</View>
+			<Button title={ __( 'Media Library' ) } onPress={ props.onMediaLibraryPressed } />
 		</View>
 	);
 }
diff --git a/packages/editor/src/components/media-placeholder/styles.native.scss b/packages/editor/src/components/media-placeholder/styles.native.scss
index 75a1663cd27c7b..0014afe089ac51 100644
--- a/packages/editor/src/components/media-placeholder/styles.native.scss
+++ b/packages/editor/src/components/media-placeholder/styles.native.scss
@@ -19,6 +19,7 @@
 
 .emptyStateButtonsContainer {
 	margin-top: 15;
+	margin-bottom: 15;
 	flex-direction: row;
 	justify-content: space-evenly;
 	width: 100%;

From 93e6e954f1cfa3a6e4e1d16b7b572aaa91248ade Mon Sep 17 00:00:00 2001
From: mzorz <mariozorz@gmail.com>
Date: Mon, 28 Jan 2019 08:25:22 -0300
Subject: [PATCH 37/37] using onImageQueryReattach (#13516)

---
 packages/block-library/src/image/edit.native.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index bb3eb530f775b6..eb73ef558542d4 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -8,6 +8,7 @@ import {
 	onMediaLibraryPressed,
 	onUploadMediaPressed,
 	onCapturePhotoPressed,
+	onImageQueryReattach,
 } from 'react-native-gutenberg-bridge';
 
 /**
@@ -44,6 +45,7 @@ export default class ImageEdit extends React.Component {
 
 		if ( attributes.id && ! isURL( attributes.url ) ) {
 			this.addMediaUploadListener();
+			onImageQueryReattach();
 		}
 	}