[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;
 }