Merge remote-tracking branch 'origin/master' into feature/rich-text-f…

…ormats

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gutenberg-mobile",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "private": true,
   "config": {
     "jsfiles": "./*.js src/*.js src/**/*.js src/**/**/*.js",

react-native-gutenberg-bridge/index.js

@@ -1,11 +1,25 @@
 /** @format */
 
-import { NativeModules, NativeEventEmitter } from 'react-native';
+import { NativeModules, NativeEventEmitter, Platform } from 'react-native';
 
 const { RNReactNativeGutenbergBridge } = NativeModules;
+const isIOS = Platform.OS === 'ios';
 
 const gutenbergBridgeEvents = new NativeEventEmitter( RNReactNativeGutenbergBridge );
 
+// Send messages
+
+export function sendNativeEditorDidLayout() {
+	// For now, this is only needed on iOS to solve layout issues with the toolbar.
+	// If this become necessary on Android in the future, we can try to build a registration API from Native
+	// to register messages it wants to receive, similar to the Native -> JS messages listener system.
+	if ( isIOS ) {
+		RNReactNativeGutenbergBridge.editorDidLayout();
+	}
+}
+
+// Register listeners
+
 export function subscribeParentGetHtml( callback ) {
 	return gutenbergBridgeEvents.addListener( 'requestGetHtml', callback );
 }

react-native-gutenberg-bridge/ios/GutenbergBridgeDelegate.swift

@@ -15,7 +15,19 @@ public protocol GutenbergBridgeDelegate: class {
     ///                       image Url or nil to signal that the action was canceled.
     func gutenbergDidRequestMediaPicker(with callback: @escaping MediaPickerDidPickMediaCallback)
 
-    /// Informs the delegate that the Gutenberg module has finished loading.
+    /// Tells the delegate that the Gutenberg module has finished loading.
     ///
     func gutenbergDidLoad()
+
+
+    /// Tells the delegate every time the editor has finished layout.
+    ///
+    func gutenbergDidLayout()
+}
+
+// MARK: - Optional GutenbergBridgeDelegate methods
+
+public extension GutenbergBridgeDelegate {
+    func gutenbergDidLoad() { }
+    func gutenbergDidLayout() { }
 }

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -4,6 +4,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 
 RCT_EXTERN_METHOD(provideToNative_Html:(NSString *)html changed:(BOOL)changed)
 RCT_EXTERN_METHOD(onMediaLibraryPress:(RCTResponseSenderBlock)callback)
-RCT_EXTERN_METHOD(moduleDidMount)
+RCT_EXTERN_METHOD(editorDidLayout)
 
 @end

react-native-gutenberg-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -1,6 +1,7 @@
 @objc (RNReactNativeGutenbergBridge)
 public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     weak var delegate: GutenbergBridgeDelegate?
+    private var isJSLoading = true
 
     // MARK: - Messaging methods
 
@@ -21,9 +22,9 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     }
 
     @objc
-    func moduleDidMount() {
+    func editorDidLayout() {
         DispatchQueue.main.async {
-            self.delegate?.gutenbergDidLoad()
+            self.delegate?.gutenbergDidLayout()
         }
     }
 }
@@ -42,6 +43,15 @@ extension RNReactNativeGutenbergBridge {
     public override static func requiresMainQueueSetup() -> Bool {
         return true
     }
+
+    public override func batchDidComplete() {
+        if isJSLoading {
+            isJSLoading = false
+            DispatchQueue.main.async {
+                self.delegate?.gutenbergDidLoad()
+            }
+        }
+    }
 }
 
 // MARK: - Helpers

src/app/App.js

@@ -8,7 +8,6 @@ import React from 'react';
 // Gutenberg imports
 import { registerCoreBlocks } from '@wordpress/block-library';
 import { registerBlockType, setUnregisteredTypeHandlerName } from '@wordpress/blocks';
-import RNReactNativeGutenbergBridge from 'react-native-gutenberg-bridge';
 
 import AppContainer from './AppContainer';
 import initialHtml from './initial-html';
@@ -25,26 +24,13 @@ type PropsType = {
 	initialHtmlModeEnabled: boolean,
 };
 
-class AppProvider extends React.Component<PropsType> {
-	componentDidMount() {
-		// At this points (apparently) component setup haven't finished yet.
-		// Giving it one extra milisecond does the trick.
-		setTimeout( () => {
-			RNReactNativeGutenbergBridge.moduleDidMount();
-		}, 1 );
+const AppProvider = ( { initialData, initialHtmlModeEnabled }: PropsType ) => {
+	if ( initialData === undefined ) {
+		initialData = initialHtml;
 	}
-
-	render() {
-		let { initialData } = this.props;
-
-		if ( initialData === undefined ) {
-			initialData = initialHtml;
-		}
-
-		return (
-			<AppContainer initialHtml={ initialData } initialHtmlModeEnabled={ this.props.initialHtmlModeEnabled } />
-		);
-	}
-}
+	return (
+		<AppContainer initialHtml={ initialData } initialHtmlModeEnabled={ initialHtmlModeEnabled } />
+	);
+};
 
 export default AppProvider;

src/block-management/block-manager.js

@@ -24,6 +24,7 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { DefaultBlockAppender } from '@wordpress/editor';
+import { sendNativeEditorDidLayout } from 'react-native-gutenberg-bridge';
 
 import EventEmitter from 'events';
 
@@ -149,7 +150,9 @@ export class BlockManager extends React.Component<PropsType, StateType> {
 
 	onRootViewLayout = ( event: LayoutChangeEvent ) => {
 		const { height } = event.nativeEvent.layout;
-		this.setState( { rootViewHeight: height } );
+		this.setState( { rootViewHeight: height }, () => {
+			sendNativeEditorDidLayout();
+		} );
 	}
 
 	componentDidMount() {

src/block-management/block-toolbar.js

@@ -4,7 +4,7 @@
  */
 
 import React, { Component } from 'react';
-import { View, ScrollView, SafeAreaView } from 'react-native';
+import { View, ScrollView } from 'react-native';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { Toolbar, ToolbarButton } from '@wordpress/components';
@@ -36,45 +36,43 @@ export class BlockToolbar extends Component<PropsType> {
 		} = this.props;
 
 		return (
-			<SafeAreaView>
-				<View style={ styles.container }>
-					<ScrollView
-						horizontal={ true }
-						showsHorizontalScrollIndicator={ false }
-						keyboardShouldPersistTaps={ 'always' }
-						alwaysBounceHorizontal={ false }
-					>
-						<Toolbar>
-							<ToolbarButton
-								label={ __( 'Add block' ) }
-								icon="insert"
-								onClick={ onInsertClick }
-							/>
-							<ToolbarButton
-								label={ __( 'Undo' ) }
-								icon="undo"
-								isDisabled={ ! hasUndo }
-								onClick={ undo }
-							/>
-							<ToolbarButton
-								label={ __( 'Redo' ) }
-								icon="redo"
-								isDisabled={ ! hasRedo }
-								onClick={ redo }
-							/>
-						</Toolbar>
-						{ showKeyboardHideButton && ( <Toolbar>
-							<ToolbarButton
-								label={ __( 'Keyboard hide' ) }
-								icon="arrow-down"
-								onClick={ onKeyboardHide }
-							/>
-						</Toolbar> ) }
-						<BlockControls.Slot />
-						<BlockFormatControls.Slot />
-					</ScrollView>
-				</View>
-			</SafeAreaView>
+			<View style={ styles.container }>
+				<ScrollView
+					horizontal={ true }
+					showsHorizontalScrollIndicator={ false }
+					keyboardShouldPersistTaps={ 'always' }
+					alwaysBounceHorizontal={ false }
+				>
+					<Toolbar>
+						<ToolbarButton
+							label={ __( 'Add block' ) }
+							icon="insert"
+							onClick={ onInsertClick }
+						/>
+						<ToolbarButton
+							label={ __( 'Undo' ) }
+							icon="undo"
+							isDisabled={ ! hasUndo }
+							onClick={ undo }
+						/>
+						<ToolbarButton
+							label={ __( 'Redo' ) }
+							icon="redo"
+							isDisabled={ ! hasRedo }
+							onClick={ redo }
+						/>
+					</Toolbar>
+					{ showKeyboardHideButton && ( <Toolbar>
+						<ToolbarButton
+							label={ __( 'Keyboard hide' ) }
+							icon="arrow-down"
+							onClick={ onKeyboardHide }
+						/>
+					</Toolbar> ) }
+					<BlockControls.Slot />
+					<BlockFormatControls.Slot />
+				</ScrollView>
+			</View>
 		);
 	}
 }

src/components/keyboard-aware-flat-list.android.js

@@ -2,7 +2,8 @@
 * @format
 * @flow
 */
-import { FlatList, KeyboardAvoidingView } from 'react-native';
+import { FlatList } from 'react-native';
+import KeyboardAvoidingView from '../components/keyboard-avoiding-view';
 
 type PropsType = {
 	...FlatList.propTypes,

src/components/keyboard-aware-flat-list.ios.js

@@ -22,10 +22,19 @@ const KeyboardAwareFlatList = ( props: PropsType ) => {
 		shouldPreventAutomaticScroll,
 		...listProps
 	} = props;
-	const { height: fullHeight } = Dimensions.get( 'window' );
-	const keyboardVerticalOffset = fullHeight - parentHeight;
-	const blockHolderPadding = 8;
-	const extraScrollHeight = blockToolbarHeight + innerToolbarHeight + blockHolderPadding + keyboardVerticalOffset;
+
+	const extraScrollHeight = ( () => {
+		const { height: fullHeight, width: fullWidth } = Dimensions.get( 'window' );
+		const keyboardVerticalOffset = fullHeight - parentHeight;
+		const blockHolderPadding = 8;
+
+		if ( fullWidth > fullHeight ) { //landscape mode
+			//we won't try to make inner block visible in landscape mode because there's not enough room for it
+			return blockToolbarHeight + keyboardVerticalOffset;
+		}
+		//portrait mode
+		return blockToolbarHeight + keyboardVerticalOffset + blockHolderPadding + innerToolbarHeight;
+	} )();
 
 	return (
 		<KeyboardAwareScrollView