From 8890a4ab96a00a27d9174ec0254b28abadd8ee2b Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Tue, 25 Dec 2018 11:02:30 +0200
Subject: [PATCH 01/10] [rnmobile]: Convert image-block into class

---
 .../block-library/src/image/edit.native.js    | 103 ++++++++++--------
 1 file changed, 59 insertions(+), 44 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 5b4132e19a2b24..6d282aad90ae0c 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -9,67 +9,82 @@ import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
  */
 import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton } from '@wordpress/components';
+import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-export default function ImageEdit( props ) {
-	const { attributes, isSelected, setAttributes } = props;
-	const { url, caption } = attributes;
+class ImageEdit extends Component {
 
-	const onUploadPress = () => {
+	constructor() {
+		super( ...arguments );
+		this.onMediaLibraryPress = this.onMediaLibraryPress.bind( this );
+		this.onUploadPress = this.onUploadPress.bind( this );
+		this.toolbarEditButton = this.toolbarEditButton.bind( this );
+	}
+
+	onUploadPress() {
 		// This method should present an image picker from
 		// the device.
 		//TODO: Implement upload image method.
 	};
 
-	const onMediaLibraryPress = () => {
+	onMediaLibraryPress() {
 		RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
 			if ( mediaUrl ) {
-				setAttributes( { url: mediaUrl } );
+				this.props.setAttributes( { url: mediaUrl } );
 			}
 		} );
 	};
 
-	if ( ! url ) {
+	toolbarEditButton() {
 		return (
-			<MediaPlaceholder
-				onUploadPress={ onUploadPress }
-				onMediaLibraryPress={ onMediaLibraryPress }
-			/>
+			<Toolbar>
+				<ToolbarButton
+					className="components-toolbar__control"
+					label={ __( 'Edit image' ) }
+					icon="edit"
+					onClick={ this.onMediaLibraryPress }
+				/>
+			</Toolbar>
 		);
 	}
 
-	const toolbarEditButton = (
-		<Toolbar>
-			<ToolbarButton
-				className="components-toolbar__control"
-				label={ __( 'Edit image' ) }
-				icon="edit"
-				onClick={ onMediaLibraryPress }
-			/>
-		</Toolbar>
-	);
+	render() {
+		const { attributes, isSelected, setAttributes } = this.props;
+		const { url, caption } = attributes;
 
-	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>
-	);
+		if ( ! url ) {
+			return (
+				<MediaPlaceholder
+					onUploadPress={ this.onUploadPress }
+					onMediaLibraryPress={ this.onMediaLibraryPress }
+				/>
+			);
+		}
+
+		return (
+			<View style={ { flex: 1 } }>
+				<BlockControls>
+					{ this.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>
+		);
+	}
 }
+
+export default ImageEdit;

From 4f8cbabcbf2e51f64761f540bea6541315abd8ff Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Tue, 25 Dec 2018 11:49:28 +0200
Subject: [PATCH 02/10] [rnmobile]: Creating mobile version of `image-size`.

---
 .../block-library/src/image/edit.native.js    | 40 ++++++--
 .../src/image/image-size.native.js            | 94 +++++++++++++++++++
 2 files changed, 127 insertions(+), 7 deletions(-)
 create mode 100644 packages/block-library/src/image/image-size.native.js

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 6d282aad90ae0c..0d02bf790d612c 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -11,6 +11,7 @@ import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor';
 import { Toolbar, ToolbarButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import ImageSize from './image-size';
 
 class ImageEdit extends Component {
 
@@ -50,7 +51,7 @@ class ImageEdit extends Component {
 
 	render() {
 		const { attributes, isSelected, setAttributes } = this.props;
-		const { url, caption } = attributes;
+		const { url, caption, height, width } = attributes;
 
 		if ( ! url ) {
 			return (
@@ -64,13 +65,38 @@ class ImageEdit extends Component {
 		return (
 			<View style={ { flex: 1 } }>
 				<BlockControls>
-					{ this.toolbarEditButton }
+					{ this.toolbarEditButton() }
 				</BlockControls>
-				<Image
-					style={ { width: '100%', height: 200 } }
-					resizeMethod="scale"
-					source={ { uri: url } }
-				/>
+				<ImageSize src={ url } >
+					{ ( sizes ) => {
+						const {
+							imageWidthWithinContainer,
+							imageHeightWithinContainer,
+							imageWidth,
+							imageHeight,
+						} = sizes;
+
+						let finalHeight = imageHeightWithinContainer;
+						if ( height > 0 && height < imageHeightWithinContainer ) {
+							finalHeight = height;
+						}
+
+						let finalWidth = imageWidthWithinContainer;
+						if ( width > 0 && width < imageWidthWithinContainer ) {
+							finalWidth = width;
+						}
+
+						return (
+							<View style={ { flex: 1 } } >
+								<Image
+									style={ { width: finalWidth, height: finalHeight } }
+									resizeMethod="scale"
+									source={ { uri: url } }
+								/>
+							</View>
+						)
+					}}
+				</ImageSize>
 				{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
 					<View style={ { padding: 12, flex: 1 } }>
 						<TextInput
diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
new file mode 100644
index 00000000000000..5860306a345fa1
--- /dev/null
+++ b/packages/block-library/src/image/image-size.native.js
@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+* External dependencies
+*/
+import { View, Image } from 'react-native';
+
+class ImageSize extends Component {
+	constructor() {
+		super( ...arguments );
+		this.state = {
+			width: undefined,
+			height: undefined,
+		};
+		this.bindContainer = this.bindContainer.bind( this );
+        this.calculateSize = this.calculateSize.bind( this );
+        this.onLayout = this.onLayout.bind( this );
+	}
+
+	bindContainer( ref ) {
+		this.container = ref;
+	}
+
+	componentDidUpdate( prevProps ) {
+		if ( this.props.src !== prevProps.src ) {
+			this.setState( {
+				width: undefined,
+				height: undefined,
+			} );
+			this.fetchImageSize();
+		}
+
+		if ( this.props.dirtynessTrigger !== prevProps.dirtynessTrigger ) {
+			this.calculateSize();
+		}
+	}
+
+	componentDidMount() {
+		this.fetchImageSize();
+	}
+
+	fetchImageSize() {
+		Image.getSize( this.props.src, ( imageRealWidth, imageRealHeight ) => {
+			const image = {};
+			image.width = imageRealWidth;
+			image.height = imageRealHeight;
+            this.image = image;
+            this.calculateSize();
+		} );
+	}
+
+	calculateSize() {
+		if ( this.image === undefined || this.container === undefined ) {
+			return;
+		}
+
+		const maxWidth = this.container.clientWidth;
+		const exceedMaxWidth = this.image.width > maxWidth;
+		const ratio = this.image.height / this.image.width;
+		const width = exceedMaxWidth ? maxWidth : this.image.width;
+		const height = exceedMaxWidth ? maxWidth * ratio : this.image.height;
+		this.setState( { width, height } );
+	}
+
+	onLayout( event ) {
+		const { width, height } = event.nativeEvent.layout;
+		const container = {};
+		container.clientWidth = width;
+		container.clientHeight = height;
+        this.container = container;
+        this.calculateSize();
+	}
+
+	render() {
+		const sizes = {
+			imageWidth: this.image && this.image.width,
+			imageHeight: this.image && this.image.height,
+			containerWidth: this.container && this.container.clientWidth,
+			containerHeight: this.container && this.container.clientHeight,
+			imageWidthWithinContainer: this.state.width,
+			imageHeightWithinContainer: this.state.height,
+		};
+		return (
+			<View onLayout={ this.onLayout }>
+				{ this.props.children( sizes ) }
+			</View>
+		);
+	}
+}
+
+export default ImageSize;
\ No newline at end of file

From 8d792a13d436fc4f851599e84e741dddb9eae30e Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Tue, 25 Dec 2018 13:49:00 +0200
Subject: [PATCH 03/10] [rnmobile]: Adding util to image-block to share math
 between image-size components.

---
 .../block-library/src/image/edit.native.js    |  1 +
 .../block-library/src/image/image-size.js     | 11 +++---
 .../src/image/image-size.native.js            | 36 ++++++++-----------
 packages/block-library/src/image/utils.js     |  9 +++++
 4 files changed, 30 insertions(+), 27 deletions(-)
 create mode 100644 packages/block-library/src/image/utils.js

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 0d02bf790d612c..a17d110b3b8011 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -92,6 +92,7 @@ class ImageEdit extends Component {
 									style={ { width: finalWidth, height: finalHeight } }
 									resizeMethod="scale"
 									source={ { uri: url } }
+									key={ url }
 								/>
 							</View>
 						)
diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js
index 0a1b88aed12d71..955ea6cc4e6806 100644
--- a/packages/block-library/src/image/image-size.js
+++ b/packages/block-library/src/image/image-size.js
@@ -9,6 +9,11 @@ import { noop } from 'lodash';
 import { withGlobalEvents } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { calculatePreferedImageSize } from './utils'
+
 class ImageSize extends Component {
 	constructor() {
 		super( ...arguments );
@@ -55,11 +60,7 @@ class ImageSize extends Component {
 	}
 
 	calculateSize() {
-		const maxWidth = this.container.clientWidth;
-		const exceedMaxWidth = this.image.width > maxWidth;
-		const ratio = this.image.height / this.image.width;
-		const width = exceedMaxWidth ? maxWidth : this.image.width;
-		const height = exceedMaxWidth ? maxWidth * ratio : this.image.height;
+		const { width, height } = calculatePreferedImageSize(this.image, this.container);
 		this.setState( { width, height } );
 	}
 
diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 5860306a345fa1..9ee444086c91e9 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -8,6 +8,11 @@ import { Component } from '@wordpress/element';
 */
 import { View, Image } from 'react-native';
 
+/**
+ * Internal dependencies
+ */
+import { calculatePreferedImageSize } from './utils'
+
 class ImageSize extends Component {
 	constructor() {
 		super( ...arguments );
@@ -15,15 +20,10 @@ class ImageSize extends Component {
 			width: undefined,
 			height: undefined,
 		};
-		this.bindContainer = this.bindContainer.bind( this );
         this.calculateSize = this.calculateSize.bind( this );
         this.onLayout = this.onLayout.bind( this );
 	}
 
-	bindContainer( ref ) {
-		this.container = ref;
-	}
-
 	componentDidUpdate( prevProps ) {
 		if ( this.props.src !== prevProps.src ) {
 			this.setState( {
@@ -43,11 +43,8 @@ class ImageSize extends Component {
 	}
 
 	fetchImageSize() {
-		Image.getSize( this.props.src, ( imageRealWidth, imageRealHeight ) => {
-			const image = {};
-			image.width = imageRealWidth;
-			image.height = imageRealHeight;
-            this.image = image;
+		Image.getSize( this.props.src, ( width, height ) => {
+			this.image = { width, height };
             this.calculateSize();
 		} );
 	}
@@ -56,21 +53,16 @@ class ImageSize extends Component {
 		if ( this.image === undefined || this.container === undefined ) {
 			return;
 		}
-
-		const maxWidth = this.container.clientWidth;
-		const exceedMaxWidth = this.image.width > maxWidth;
-		const ratio = this.image.height / this.image.width;
-		const width = exceedMaxWidth ? maxWidth : this.image.width;
-		const height = exceedMaxWidth ? maxWidth * ratio : this.image.height;
+        const { width, height } = calculatePreferedImageSize(this.image, this.container);
 		this.setState( { width, height } );
 	}
 
 	onLayout( event ) {
 		const { width, height } = event.nativeEvent.layout;
-		const container = {};
-		container.clientWidth = width;
-		container.clientHeight = height;
-        this.container = container;
+		this.container = {
+            clientWidth: width,
+            clientHeight: height,
+        };
         this.calculateSize();
 	}
 
@@ -78,8 +70,8 @@ class ImageSize extends Component {
 		const sizes = {
 			imageWidth: this.image && this.image.width,
 			imageHeight: this.image && this.image.height,
-			containerWidth: this.container && this.container.clientWidth,
-			containerHeight: this.container && this.container.clientHeight,
+			containerWidth: this.container && this.container.width,
+			containerHeight: this.container && this.container.height,
 			imageWidthWithinContainer: this.state.width,
 			imageHeightWithinContainer: this.state.height,
 		};
diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js
new file mode 100644
index 00000000000000..7831c68d744160
--- /dev/null
+++ b/packages/block-library/src/image/utils.js
@@ -0,0 +1,9 @@
+
+export function calculatePreferedImageSize(image, container) {
+    const maxWidth = container.clientWidth;
+    const exceedMaxWidth = image.width > maxWidth;
+    const ratio = image.height / image.width;
+    const width = exceedMaxWidth ? maxWidth : image.width;
+    const height = exceedMaxWidth ? maxWidth * ratio : image.height;
+    return { width, height };
+}

From b8afe45e9fd8154c5bb202dca55edb6bbf9b70d7 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Tue, 25 Dec 2018 13:54:14 +0200
Subject: [PATCH 04/10] [rnmobile]: Adding newline at the end of
 image-size.native.js file

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

diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 9ee444086c91e9..db3a35de51954e 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -83,4 +83,4 @@ class ImageSize extends Component {
 	}
 }
 
-export default ImageSize;
\ No newline at end of file
+export default ImageSize;

From 82e74bfad943e8b10db800d79c935861b294566c Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Tue, 25 Dec 2018 13:57:56 +0200
Subject: [PATCH 05/10] [rnmobile]: Replace wrong tabs characters

---
 .../block-library/src/image/image-size.native.js | 16 ++++++++--------
 packages/block-library/src/image/utils.js        | 12 ++++++------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index db3a35de51954e..21c4bea7f22f6e 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -20,8 +20,8 @@ class ImageSize extends Component {
 			width: undefined,
 			height: undefined,
 		};
-        this.calculateSize = this.calculateSize.bind( this );
-        this.onLayout = this.onLayout.bind( this );
+		this.calculateSize = this.calculateSize.bind( this );
+		this.onLayout = this.onLayout.bind( this );
 	}
 
 	componentDidUpdate( prevProps ) {
@@ -45,7 +45,7 @@ class ImageSize extends Component {
 	fetchImageSize() {
 		Image.getSize( this.props.src, ( width, height ) => {
 			this.image = { width, height };
-            this.calculateSize();
+			this.calculateSize();
 		} );
 	}
 
@@ -53,17 +53,17 @@ class ImageSize extends Component {
 		if ( this.image === undefined || this.container === undefined ) {
 			return;
 		}
-        const { width, height } = calculatePreferedImageSize(this.image, this.container);
+		const { width, height } = calculatePreferedImageSize(this.image, this.container);
 		this.setState( { width, height } );
 	}
 
 	onLayout( event ) {
 		const { width, height } = event.nativeEvent.layout;
 		this.container = {
-            clientWidth: width,
-            clientHeight: height,
-        };
-        this.calculateSize();
+			clientWidth: width,
+			clientHeight: height,
+		};
+		this.calculateSize();
 	}
 
 	render() {
diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js
index 7831c68d744160..19583963498a66 100644
--- a/packages/block-library/src/image/utils.js
+++ b/packages/block-library/src/image/utils.js
@@ -1,9 +1,9 @@
 
 export function calculatePreferedImageSize(image, container) {
-    const maxWidth = container.clientWidth;
-    const exceedMaxWidth = image.width > maxWidth;
-    const ratio = image.height / image.width;
-    const width = exceedMaxWidth ? maxWidth : image.width;
-    const height = exceedMaxWidth ? maxWidth * ratio : image.height;
-    return { width, height };
+	const maxWidth = container.clientWidth;
+	const exceedMaxWidth = image.width > maxWidth;
+	const ratio = image.height / image.width;
+	const width = exceedMaxWidth ? maxWidth : image.width;
+	const height = exceedMaxWidth ? maxWidth * ratio : image.height;
+	return { width, height };
 }

From 5b696e652e9c4bff122422c23dc80852b1669d9c Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 26 Dec 2018 10:11:17 +0200
Subject: [PATCH 06/10] [rnmobile]: Clear image size when url changes.

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

diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 21c4bea7f22f6e..fda16f90379ffe 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -26,6 +26,8 @@ class ImageSize extends Component {
 
 	componentDidUpdate( prevProps ) {
 		if ( this.props.src !== prevProps.src ) {
+			this.image = {};
+
 			this.setState( {
 				width: undefined,
 				height: undefined,

From 76545215a985f6ececd885fbc5ee152459d4dd5e Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 26 Dec 2018 19:18:16 +0200
Subject: [PATCH 07/10] [rnmobile]: Fixed lint issues

---
 packages/block-library/src/image/edit.native.js       | 11 ++++-------
 packages/block-library/src/image/image-size.js        |  4 ++--
 packages/block-library/src/image/image-size.native.js |  4 ++--
 packages/block-library/src/image/utils.js             |  2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index a17d110b3b8011..42f2e00eec9555 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -14,7 +14,6 @@ import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 
 class ImageEdit extends Component {
-
 	constructor() {
 		super( ...arguments );
 		this.onMediaLibraryPress = this.onMediaLibraryPress.bind( this );
@@ -26,7 +25,7 @@ class ImageEdit extends Component {
 		// This method should present an image picker from
 		// the device.
 		//TODO: Implement upload image method.
-	};
+	}
 
 	onMediaLibraryPress() {
 		RNReactNativeGutenbergBridge.onMediaLibraryPress( ( mediaUrl ) => {
@@ -34,7 +33,7 @@ class ImageEdit extends Component {
 				this.props.setAttributes( { url: mediaUrl } );
 			}
 		} );
-	};
+	}
 
 	toolbarEditButton() {
 		return (
@@ -72,8 +71,6 @@ class ImageEdit extends Component {
 						const {
 							imageWidthWithinContainer,
 							imageHeightWithinContainer,
-							imageWidth,
-							imageHeight,
 						} = sizes;
 
 						let finalHeight = imageHeightWithinContainer;
@@ -95,8 +92,8 @@ class ImageEdit extends Component {
 									key={ url }
 								/>
 							</View>
-						)
-					}}
+						);
+					} }
 				</ImageSize>
 				{ ( ! RichText.isEmpty( caption ) > 0 || isSelected ) && (
 					<View style={ { padding: 12, flex: 1 } }>
diff --git a/packages/block-library/src/image/image-size.js b/packages/block-library/src/image/image-size.js
index 955ea6cc4e6806..bc7ebaeaa59b46 100644
--- a/packages/block-library/src/image/image-size.js
+++ b/packages/block-library/src/image/image-size.js
@@ -12,7 +12,7 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { calculatePreferedImageSize } from './utils'
+import { calculatePreferedImageSize } from './utils';
 
 class ImageSize extends Component {
 	constructor() {
@@ -60,7 +60,7 @@ class ImageSize extends Component {
 	}
 
 	calculateSize() {
-		const { width, height } = calculatePreferedImageSize(this.image, this.container);
+		const { width, height } = calculatePreferedImageSize( this.image, this.container );
 		this.setState( { width, height } );
 	}
 
diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index fda16f90379ffe..303c22ab3caad7 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -11,7 +11,7 @@ import { View, Image } from 'react-native';
 /**
  * Internal dependencies
  */
-import { calculatePreferedImageSize } from './utils'
+import { calculatePreferedImageSize } from './utils';
 
 class ImageSize extends Component {
 	constructor() {
@@ -55,7 +55,7 @@ class ImageSize extends Component {
 		if ( this.image === undefined || this.container === undefined ) {
 			return;
 		}
-		const { width, height } = calculatePreferedImageSize(this.image, this.container);
+		const { width, height } = calculatePreferedImageSize( this.image, this.container );
 		this.setState( { width, height } );
 	}
 
diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js
index 19583963498a66..32bdb9d71564c7 100644
--- a/packages/block-library/src/image/utils.js
+++ b/packages/block-library/src/image/utils.js
@@ -1,5 +1,5 @@
 
-export function calculatePreferedImageSize(image, container) {
+export function calculatePreferedImageSize( image, container ) {
 	const maxWidth = container.clientWidth;
 	const exceedMaxWidth = image.width > maxWidth;
 	const ratio = image.height / image.width;

From 5664ae79ff8480a97bd92bd3f9ab227437424a7f Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 26 Dec 2018 19:38:25 +0200
Subject: [PATCH 08/10] [rnmobile]: Removing unnecessary binding calls

---
 packages/block-library/src/image/edit.native.js       | 7 -------
 packages/block-library/src/image/image-size.native.js | 2 --
 2 files changed, 9 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 42f2e00eec9555..7a69f4a7d9e00e 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -14,13 +14,6 @@ import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 
 class ImageEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onMediaLibraryPress = this.onMediaLibraryPress.bind( this );
-		this.onUploadPress = this.onUploadPress.bind( this );
-		this.toolbarEditButton = this.toolbarEditButton.bind( this );
-	}
-
 	onUploadPress() {
 		// This method should present an image picker from
 		// the device.
diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 303c22ab3caad7..35009d6a9211a9 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -20,8 +20,6 @@ class ImageSize extends Component {
 			width: undefined,
 			height: undefined,
 		};
-		this.calculateSize = this.calculateSize.bind( this );
-		this.onLayout = this.onLayout.bind( this );
 	}
 
 	componentDidUpdate( prevProps ) {

From b72c99b204e59b4fe82cac52be7df1530eda8db2 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Wed, 26 Dec 2018 19:52:40 +0200
Subject: [PATCH 09/10] [rnmobile]: Added necessary this.onLayout.bind( this )

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

diff --git a/packages/block-library/src/image/image-size.native.js b/packages/block-library/src/image/image-size.native.js
index 35009d6a9211a9..8b29b9607e81e2 100644
--- a/packages/block-library/src/image/image-size.native.js
+++ b/packages/block-library/src/image/image-size.native.js
@@ -20,6 +20,7 @@ class ImageSize extends Component {
 			width: undefined,
 			height: undefined,
 		};
+		this.onLayout = this.onLayout.bind( this );
 	}
 
 	componentDidUpdate( prevProps ) {

From a90eb0d624879e356c2ab69c9c3ee3db39d3dc56 Mon Sep 17 00:00:00 2001
From: etoledom <etoledom@icloud.com>
Date: Thu, 3 Jan 2019 08:39:16 +0200
Subject: [PATCH 10/10] [rnmobile]: Adding missing bind to
 `onMediaLibraryPress`.

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

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 7a69f4a7d9e00e..476dea2981b155 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -14,6 +14,11 @@ import { __ } from '@wordpress/i18n';
 import ImageSize from './image-size';
 
 class ImageEdit extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onMediaLibraryPress = this.onMediaLibraryPress.bind( this );
+	}
+
 	onUploadPress() {
 		// This method should present an image picker from
 		// the device.