[RNMobile] Fix crash bringing gutenberg master to mobile

.travis.yml

@@ -20,6 +20,7 @@ cache:
 branches:
   only:
     - master
+    - rnmobile/master
 
 env:
   global:

packages/api-fetch/src/index.native.js

@@ -0,0 +1,10 @@
+
+function apiFetch( options ) {
+	// eslint-disable-next-line no-console
+	console.warn( 'apiFetch called with options', options );
+
+	// return a promise that never resolves
+	return new Promise( () => {} );
+}
+
+export default apiFetch;

packages/block-directory/package.json

@@ -19,6 +19,7 @@
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
+	"react-native": "src/index",
 	"dependencies": {
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/block-editor": "file:../block-editor",

packages/block-editor/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Master
+
+### Deprecation
+
+- `dropZoneUIOnly` prop in `MediaPlaceholder` component has been deprecated in favor of `disableMediaButtons` prop.
+
 ## 3.0.0 (2019-08-05)
 
 ### New Features

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

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { Path, Icon, SVG } from '@wordpress/components';
+
+export default function BlockIcon( { icon, showColors = false } ) {
+	if ( get( icon, [ 'src' ] ) === 'block-default' ) {
+		icon = {
+			src: <SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><Path d="M19 7h-1V5h-4v2h-4V5H6v2H5c-1.1 0-2 .9-2 2v10h18V9c0-1.1-.9-2-2-2zm0 10H5V9h14v8z" /></SVG>,
+		};
+	}
+
+	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const style = showColors ? {
+		backgroundColor: icon && icon.background,
+		color: icon && icon.foreground,
+	} : {};
+
+	return (
+		<View style={ style }>
+			{ renderedIcon }
+		</View>
+	);
+}

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

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withSelect } from '@wordpress/data';
+import { getDefaultBlockName } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import DefaultBlockAppender from '../default-block-appender';
+import styles from './style.scss';
+
+function BlockListAppender( {
+	blockClientIds,
+	rootClientId,
+	canInsertDefaultBlock,
+	isLocked,
+	renderAppender: CustomAppender,
+} ) {
+	if ( isLocked ) {
+		return null;
+	}
+
+	if ( CustomAppender ) {
+		return (
+			<CustomAppender />
+		);
+	}
+
+	if ( canInsertDefaultBlock ) {
+		return (
+			<DefaultBlockAppender
+				rootClientId={ rootClientId }
+				lastBlockClientId={ last( blockClientIds ) }
+				containerStyle={ styles.blockListAppender }
+				placeholder={ blockClientIds.length > 0 ? '' : null }
+			/>
+		);
+	}
+
+	return null;
+}
+
+export default withSelect( ( select, { rootClientId } ) => {
+	const {
+		getBlockOrder,
+		canInsertBlockType,
+		getTemplateLock,
+	} = select( 'core/block-editor' );
+
+	return {
+		isLocked: !! getTemplateLock( rootClientId ),
+		blockClientIds: getBlockOrder( rootClientId ),
+		canInsertDefaultBlock: canInsertBlockType( getDefaultBlockName(), rootClientId ),
+	};
+} )( BlockListAppender );

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

@@ -0,0 +1,8 @@
+
+.blockListAppender {
+	padding-left: 16;
+	padding-right: 16;
+	padding-top: 12;
+	padding-bottom: 0; // will be flushed into inline toolbar height
+	border-color: transparent;
+}

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

@@ -131,7 +131,7 @@ class BlockListBlock extends Component {
 					>
 						{ isValid && this.getBlockForType() }
 						{ ! isValid &&
-						<BlockInvalidWarning blockTitle={ title } icon={ icon } />
+							<BlockInvalidWarning blockTitle={ title } icon={ icon } />
 						}
 					</View>
 					{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }

packages/block-editor/src/components/block-list/block.native.scss

@@ -3,15 +3,13 @@
 }
 
 .blockContainer {
-	background-color: $white;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 12px;
 	padding-bottom: 12px;
 }
 
 .blockContainerFocused {
-	background-color: $white;
 	padding-left: 16px;
 	padding-right: 16px;
 	padding-top: 12px;

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

@@ -10,7 +10,7 @@ import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
 
@@ -19,7 +19,7 @@ import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/component
  */
 import styles from './style.scss';
 import BlockListBlock from './block';
-import DefaultBlockAppender from '../default-block-appender';
+import BlockListAppender from '../block-list-appender';
 
 const innerToolbarHeight = 44;
 
@@ -60,41 +60,47 @@ export class BlockList extends Component {
 	renderDefaultBlockAppender() {
 		return (
 			<ReadableContentView>
-				<DefaultBlockAppender
+				<BlockListAppender
 					rootClientId={ this.props.rootClientId }
-					containerStyle={ [
-						styles.blockContainerFocused,
-						this.blockHolderBorderStyle(),
-						{ borderColor: 'transparent' },
-					] }
+					renderAppender={ this.props.renderAppender }
 				/>
 			</ReadableContentView>
 		);
 	}
 
 	render() {
+		const { clearSelectedBlock, blockClientIds, isFullyBordered, title, header, withFooter = true, renderAppender } = this.props;
+
 		return (
 			<View
 				style={ { flex: 1 } }
-				onAccessibilityEscape={ this.props.clearSelectedBlock }
+				onAccessibilityEscape={ clearSelectedBlock }
 			>
 				<KeyboardAwareFlatList
 					{ ...( Platform.OS === 'android' ? { removeClippedSubviews: false } : {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 					accessibilityLabel="block-list"
+					autoScroll={ this.props.autoScroll }
 					innerRef={ this.scrollViewInnerRef }
 					extraScrollHeight={ innerToolbarHeight + 10 }
 					keyboardShouldPersistTaps="always"
 					style={ styles.list }
-					data={ this.props.blockClientIds }
-					extraData={ [ this.props.isFullyBordered ] }
+					data={ blockClientIds }
+					extraData={ [ isFullyBordered ] }
 					keyExtractor={ identity }
 					renderItem={ this.renderItem }
 					shouldPreventAutomaticScroll={ this.shouldFlatListPreventAutomaticScroll }
-					title={ this.props.title }
-					ListHeaderComponent={ this.props.header }
+					title={ title }
+					ListHeaderComponent={ header }
 					ListEmptyComponent={ this.renderDefaultBlockAppender }
-					ListFooterComponent={ this.renderBlockListFooter }
+					ListFooterComponent={ withFooter && this.renderBlockListFooter }
 				/>
+
+				{ renderAppender && blockClientIds.length > 0 &&
+					<BlockListAppender
+						rootClientId={ this.props.rootClientId }
+						renderAppender={ this.props.renderAppender }
+					/>
+				}
 			</View>
 		);
 	}
@@ -107,6 +113,7 @@ export class BlockList extends Component {
 	}
 
 	renderItem( { item: clientId, index } ) {
+		const blockHolderFocusedStyle = this.props.getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark );
 		const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props;
 		return (
 			<ReadableContentView>
@@ -119,18 +126,20 @@ export class BlockList extends Component {
 						rootClientId={ this.props.rootClientId }
 						onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange }
 						borderStyle={ this.blockHolderBorderStyle() }
-						focusedBorderColor={ styles.blockHolderFocused.borderColor }
+						focusedBorderColor={ blockHolderFocusedStyle.borderColor }
 					/> ) }
 			</ReadableContentView>
 		);
 	}
 
 	renderAddBlockSeparator() {
+		const lineStyle = this.props.getStylesFromColorScheme( styles.lineStyleAddHere, styles.lineStyleAddHereDark );
+		const labelStyle = this.props.getStylesFromColorScheme( styles.labelStyleAddHere, styles.labelStyleAddHereDark );
 		return (
 			<View style={ styles.containerStyleAddHere } >
-				<View style={ styles.lineStyleAddHere }></View>
-				<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
-				<View style={ styles.lineStyleAddHere }></View>
+				<View style={ lineStyle }></View>
+				<Text style={ labelStyle } >{ __( 'ADD BLOCK HERE' ) }</Text>
+				<View style={ lineStyle }></View>
 			</View>
 		);
 	}
@@ -156,12 +165,15 @@ export default compose( [
 			getSelectedBlockClientId,
 			getBlockInsertionPoint,
 			isBlockInsertionPointVisible,
+			getSelectedBlock,
 		} = select( 'core/block-editor' );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 		const blockClientIds = getBlockOrder( rootClientId );
 		const insertionPoint = getBlockInsertionPoint();
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
+		const selectedBlock = getSelectedBlock();
+		const isSelectedGroup = selectedBlock && selectedBlock.name === 'core/group';
 		const shouldShowInsertionPoint = ( clientId ) => {
 			return (
 				blockInsertionPointIsVisible &&
@@ -173,7 +185,7 @@ export default compose( [
 		const selectedBlockIndex = getBlockIndex( selectedBlockClientId );
 		const shouldShowBlockAtIndex = ( index ) => {
 			const shouldHideBlockAtIndex = (
-				blockInsertionPointIsVisible &&
+				! isSelectedGroup && blockInsertionPointIsVisible &&
 				// if `index` === `insertionPoint.index`, then block is replaceable
 				index === insertionPoint.index &&
 				// only hide selected block
@@ -204,5 +216,6 @@ export default compose( [
 			replaceBlock,
 		};
 	} ),
+	withPreferredColorScheme,
 ] )( BlockList );
 

packages/block-editor/src/components/block-list/insertion-point.native.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const BlockInsertionPoint = ( { showInsertionPoint } ) => {
+	if ( ! showInsertionPoint ) {
+		return null;
+	}
+
+	return (
+		<View style={ styles.containerStyleAddHere } >
+			<View style={ styles.lineStyleAddHere }></View>
+			<Text style={ styles.labelStyleAddHere } >{ __( 'ADD BLOCK HERE' ) }</Text>
+			<View style={ styles.lineStyleAddHere }></View>
+		</View>
+	);
+};
+
+export default withSelect( ( select, { clientId, rootClientId } ) => {
+	const {
+		getBlockIndex,
+		getBlockInsertionPoint,
+		isBlockInsertionPointVisible,
+	} = select( 'core/block-editor' );
+	const blockIndex = getBlockIndex( clientId, rootClientId );
+	const insertionPoint = getBlockInsertionPoint();
+	const showInsertionPoint = (
+		isBlockInsertionPointVisible() &&
+		insertionPoint.index === blockIndex &&
+		insertionPoint.rootClientId === rootClientId
+	);
+
+	return { showInsertionPoint };
+} )( BlockInsertionPoint );

packages/block-editor/src/components/block-list/style.native.scss

@@ -26,6 +26,10 @@
 	height: 2px;
 }
 
+.lineStyleAddHereDark {
+	background-color: $gray-50;
+}
+
 .labelStyleAddHere {
 	flex: 1;
 	text-align: center;
@@ -34,9 +38,12 @@
 	font-weight: bold;
 }
 
+.labelStyleAddHereDark {
+	color: $gray-20;
+}
+
 .containerStyleAddHere {
 	flex-direction: row;
-	background-color: $white;
 }
 
 .blockHolderSemiBordered {
@@ -54,7 +61,6 @@
 }
 
 .blockContainerFocused {
-	background-color: $white;
 	padding-left: 16;
 	padding-right: 16;
 	padding-top: 12;
@@ -65,6 +71,10 @@
 	border-color: $gray-lighten-30;
 }
 
+.blockHolderFocusedDark {
+	border-color: $gray-70;
+}
+
 .blockListFooter {
 	height: 80px;
 }