From cb7c4132fdcfbd3aef64ce898748b6a5f2a6a192 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Fri, 24 Aug 2018 11:07:57 +0100
Subject: [PATCH 1/8] Update use of content size change event.

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

diff --git a/packages/editor/src/components/rich-text/index.native.js b/packages/editor/src/components/rich-text/index.native.js
index 463e4af84e17a..622a16bfa1733 100644
--- a/packages/editor/src/components/rich-text/index.native.js
+++ b/packages/editor/src/components/rich-text/index.native.js
@@ -82,8 +82,8 @@ export class RichText extends Component {
 	 * Handles any case where the content of the AztecRN instance has changed in size
 	 */
 
-	onContentSizeChange( event ) {
-		const contentHeight = event.nativeEvent.contentSize.height;
+	onContentSizeChange( contentSize ) {
+		const contentHeight = contentSize.height;
 		this.forceUpdate(); // force re-render the component skipping shouldComponentUpdate() See: https://reactjs.org/docs/react-component.html#forceupdate
 		this.props.onContentSizeChange( {
 			aztecHeight: contentHeight,

From 29dc1c1da0a55f3a0083de6b75fa9adc94ff4603 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Fri, 24 Aug 2018 16:27:59 +0100
Subject: [PATCH 2/8] Show toolbar heading specific buttons.

---
 .../block-library/src/heading/edit.native.js  | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
index 640bb963acc33..a873893be674d 100644
--- a/packages/block-library/src/heading/edit.native.js
+++ b/packages/block-library/src/heading/edit.native.js
@@ -2,13 +2,15 @@
  * External dependencies
  */
 import { View } from 'react-native';
+import { range } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/editor';
+import { Toolbar } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -18,6 +20,26 @@ import './editor.scss';
 const minHeight = 50;
 
 class HeadingEdit extends Component {
+	createLevelControl( targetLevel ) {
+		const {
+			attributes,
+			setAttributes,
+		} = this.props;
+
+		const {
+			level,
+		} = attributes;
+
+		return {
+			icon: 'heading',
+			// translators: %s: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive: targetLevel === level,
+			onClick: () => setAttributes( { level: targetLevel } ),
+			subscript: String( targetLevel ),
+		};
+	}
+
 	render() {
 		const {
 			attributes,
@@ -33,6 +55,7 @@ class HeadingEdit extends Component {
 
 		return (
 			<View>
+				<Toolbar controls={ range( 2, 5 ).map( this.createLevelControl.bind( this ) ) } />
 				<RichText
 					tagName={ tagName }
 					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }

From 379d16fdc7aedd6b8f3577f0305301a164b5bced Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Fri, 24 Aug 2018 16:29:52 +0100
Subject: [PATCH 3/8] Implement subscript in button.

---
 packages/components/src/button/index.native.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
index 1aaedd241c87a..f4d2f2b9542a4 100644
--- a/packages/components/src/button/index.native.js
+++ b/packages/components/src/button/index.native.js
@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, Text, View } from 'react-native';
 
 export default function Button( props ) {
-	const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed } = props;
+	const { children, onClick, 'aria-label': ariaLabel, 'aria-pressed': ariaPressed, 'data-subscript': subscript } = props;
 	return (
 		<TouchableOpacity
 			accessible={ true }
@@ -12,7 +12,10 @@ export default function Button( props ) {
 			onPress={ onClick }
 			style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } }
 		>
-			{ children }
+			<View style={ { flex: 1, flexDirection: 'row' } }>
+				{ children }
+				{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ], textAlignVertical: 'bottom' } }>{ subscript }</Text> ) }
+			</View>
 		</TouchableOpacity>
 	);
 }

From 225307aad89edb72096669595f49ca4989e49542 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Mon, 3 Sep 2018 11:43:11 +0100
Subject: [PATCH 4/8] Make viewport implementation empty in native.

---
 packages/viewport/src/index.native.js | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/viewport/src/index.native.js

diff --git a/packages/viewport/src/index.native.js b/packages/viewport/src/index.native.js
new file mode 100644
index 0000000000000..e69de29bb2d1d

From 22085346e55e22b511c7be1db9ea43f285a1c500 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Mon, 3 Sep 2018 13:41:16 +0100
Subject: [PATCH 5/8] Add entry point for React Native in api-fetch package

---
 packages/api-fetch/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/api-fetch/package.json b/packages/api-fetch/package.json
index 87565a1bb018c..077194e17e517 100644
--- a/packages/api-fetch/package.json
+++ b/packages/api-fetch/package.json
@@ -19,6 +19,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime-corejs2": "7.0.0-beta.56",
 		"@wordpress/hooks": "file:../hooks",

From 9b81b297c131e2ccbddeb9911f184bdf1ce78041 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Mon, 3 Sep 2018 22:34:17 +0100
Subject: [PATCH 6/8] Share createLevelControl between React Web and React
 Native

---
 packages/block-library/src/heading/edit.js    | 22 +++++---------
 .../block-library/src/heading/edit.native.js  | 29 +++++--------------
 .../src/heading/level-control.js              | 15 ++++++++++
 3 files changed, 30 insertions(+), 36 deletions(-)
 create mode 100644 packages/block-library/src/heading/level-control.js

diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index 7612dcc8a8ace..dcf6017b557b0 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import createLevelControl from './level-control';
+
 /**
  * External dependencies
  */
@@ -6,7 +11,7 @@ import { range } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 import { PanelBody, Toolbar } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
@@ -23,26 +28,15 @@ export default function HeadingEdit( {
 	const { align, content, level, placeholder } = attributes;
 	const tagName = 'h' + level;
 
-	function createLevelControl( targetLevel ) {
-		return {
-			icon: 'heading',
-			// translators: %s: heading level e.g: "1", "2", "3"
-			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive: targetLevel === level,
-			onClick: () => setAttributes( { level: targetLevel } ),
-			subscript: String( targetLevel ),
-		};
-	}
-
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar controls={ range( 2, 5 ).map( createLevelControl ) } />
+				<Toolbar controls={ range( 2, 5 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Heading Settings' ) }>
 					<p>{ __( 'Level' ) }</p>
-					<Toolbar controls={ range( 1, 7 ).map( createLevelControl ) } />
+					<Toolbar controls={ range( 1, 7 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
 						value={ align }
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
index a873893be674d..0b30c01335dc1 100644
--- a/packages/block-library/src/heading/edit.native.js
+++ b/packages/block-library/src/heading/edit.native.js
@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import createLevelControl from './level-control';
+
 /**
  * External dependencies
  */
@@ -7,7 +12,7 @@ import { range } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/editor';
 import { Toolbar } from '@wordpress/components';
@@ -20,26 +25,6 @@ import './editor.scss';
 const minHeight = 50;
 
 class HeadingEdit extends Component {
-	createLevelControl( targetLevel ) {
-		const {
-			attributes,
-			setAttributes,
-		} = this.props;
-
-		const {
-			level,
-		} = attributes;
-
-		return {
-			icon: 'heading',
-			// translators: %s: heading level e.g: "1", "2", "3"
-			title: sprintf( __( 'Heading %d' ), targetLevel ),
-			isActive: targetLevel === level,
-			onClick: () => setAttributes( { level: targetLevel } ),
-			subscript: String( targetLevel ),
-		};
-	}
-
 	render() {
 		const {
 			attributes,
@@ -55,7 +40,7 @@ class HeadingEdit extends Component {
 
 		return (
 			<View>
-				<Toolbar controls={ range( 2, 5 ).map( this.createLevelControl.bind( this ) ) } />
+				<Toolbar controls={ range( 2, 5 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
 				<RichText
 					tagName={ tagName }
 					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }
diff --git a/packages/block-library/src/heading/level-control.js b/packages/block-library/src/heading/level-control.js
new file mode 100644
index 0000000000000..b0111c762e489
--- /dev/null
+++ b/packages/block-library/src/heading/level-control.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+export default function createLevelControl( targetLevel, selectedLevel, setAttributes ) {
+	return {
+		icon: 'heading',
+		// translators: %s: heading level e.g: "1", "2", "3"
+		title: sprintf( __( 'Heading %d' ), targetLevel ),
+		isActive: targetLevel === selectedLevel,
+		onClick: () => setAttributes( { level: targetLevel } ),
+		subscript: String( targetLevel ),
+	};
+}

From c9fb74a39fc88b7c0cbb144b5746564a13e358c6 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Tue, 4 Sep 2018 10:45:07 +0100
Subject: [PATCH 7/8] Allow headings to have styles (strong, em, del).

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

diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
index 0b30c01335dc1..a06e0857e6301 100644
--- a/packages/block-library/src/heading/edit.native.js
+++ b/packages/block-library/src/heading/edit.native.js
@@ -15,6 +15,7 @@ import { range } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/editor';
+import { parse } from '@wordpress/blocks';
 import { Toolbar } from '@wordpress/components';
 
 /**
@@ -47,8 +48,14 @@ class HeadingEdit extends Component {
 					style={ {
 						minHeight: Math.max( minHeight, typeof attributes.aztecHeight === 'undefined' ? 0 : attributes.aztecHeight ),
 					} }
-					onChange={ ( value ) => {
-						setAttributes( value );
+					onChange={ ( event ) => {
+						// Create a React Tree from the new HTML
+						const newParaBlock = parse( `<!-- wp:heading --><${ tagName }>${ event.content }</${ tagName }><!-- /wp:heading -->` )[ 0 ];
+						setAttributes( {
+							...this.props.attributes,
+							content: newParaBlock.attributes.content,
+							eventCount: event.eventCount,
+						} );
 					} }
 					onContentSizeChange={ ( event ) => {
 						setAttributes( { aztecHeight: event.aztecHeight } );

From ba04e5032265976941cb3a4c80ab2b304c176846 Mon Sep 17 00:00:00 2001
From: SergioEstevao <sergioestevao@gmail.com>
Date: Tue, 4 Sep 2018 11:13:38 +0100
Subject: [PATCH 8/8] Implement heading toolbar.

---
 packages/block-library/src/heading/edit.js    | 13 +++-----
 .../block-library/src/heading/edit.native.js  |  6 ++--
 .../src/heading/heading-toolbar.js            | 33 +++++++++++++++++++
 .../src/heading/level-control.js              | 15 ---------
 4 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 packages/block-library/src/heading/heading-toolbar.js
 delete mode 100644 packages/block-library/src/heading/level-control.js

diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js
index dcf6017b557b0..f0f02afb2579b 100644
--- a/packages/block-library/src/heading/edit.js
+++ b/packages/block-library/src/heading/edit.js
@@ -1,19 +1,14 @@
 /**
  * Internal dependencies
  */
-import createLevelControl from './level-control';
-
-/**
- * External dependencies
- */
-import { range } from 'lodash';
+import HeadingToolbar from './heading-toolbar';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { PanelBody, Toolbar } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
 import { RichText, BlockControls, InspectorControls, AlignmentToolbar } from '@wordpress/editor';
 
@@ -31,12 +26,12 @@ export default function HeadingEdit( {
 	return (
 		<Fragment>
 			<BlockControls>
-				<Toolbar controls={ range( 2, 5 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
+				<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Heading Settings' ) }>
 					<p>{ __( 'Level' ) }</p>
-					<Toolbar controls={ range( 1, 7 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
+					<HeadingToolbar minLevel={ 1 } maxLevel={ 7 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 					<p>{ __( 'Text Alignment' ) }</p>
 					<AlignmentToolbar
 						value={ align }
diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js
index a06e0857e6301..f67662296a944 100644
--- a/packages/block-library/src/heading/edit.native.js
+++ b/packages/block-library/src/heading/edit.native.js
@@ -1,13 +1,12 @@
 /**
  * Internal dependencies
  */
-import createLevelControl from './level-control';
+import HeadingToolbar from './heading-toolbar';
 
 /**
  * External dependencies
  */
 import { View } from 'react-native';
-import { range } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,6 @@ import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import { RichText } from '@wordpress/editor';
 import { parse } from '@wordpress/blocks';
-import { Toolbar } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -41,7 +39,7 @@ class HeadingEdit extends Component {
 
 		return (
 			<View>
-				<Toolbar controls={ range( 2, 5 ).map( ( index ) => createLevelControl( index, level, setAttributes ) ) } />
+				<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
 				<RichText
 					tagName={ tagName }
 					content={ { contentTree: attributes.content, eventCount: attributes.eventCount } }
diff --git a/packages/block-library/src/heading/heading-toolbar.js b/packages/block-library/src/heading/heading-toolbar.js
new file mode 100644
index 0000000000000..b01ff2c1c202a
--- /dev/null
+++ b/packages/block-library/src/heading/heading-toolbar.js
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { range } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { Toolbar } from '@wordpress/components';
+
+class HeadingToolbar extends Component {
+	createLevelControl( targetLevel, selectedLevel, onChange ) {
+		return {
+			icon: 'heading',
+			// translators: %s: heading level e.g: "1", "2", "3"
+			title: sprintf( __( 'Heading %d' ), targetLevel ),
+			isActive: targetLevel === selectedLevel,
+			onClick: () => onChange( targetLevel ),
+			subscript: String( targetLevel ),
+		};
+	}
+
+	render() {
+		const { minLevel, maxLevel, selectedLevel, onChange } = this.props;
+		return (
+			<Toolbar controls={ range( minLevel, maxLevel ).map( ( index ) => this.createLevelControl( index, selectedLevel, onChange ) ) } />
+		);
+	}
+}
+
+export default HeadingToolbar;
diff --git a/packages/block-library/src/heading/level-control.js b/packages/block-library/src/heading/level-control.js
deleted file mode 100644
index b0111c762e489..0000000000000
--- a/packages/block-library/src/heading/level-control.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-
-export default function createLevelControl( targetLevel, selectedLevel, setAttributes ) {
-	return {
-		icon: 'heading',
-		// translators: %s: heading level e.g: "1", "2", "3"
-		title: sprintf( __( 'Heading %d' ), targetLevel ),
-		isActive: targetLevel === selectedLevel,
-		onClick: () => setAttributes( { level: targetLevel } ),
-		subscript: String( targetLevel ),
-	};
-}