Merge rnmobile/mobile in as a single commit

Squashed commit of the following: commit df025a6 Author: Luke Walczak <[email protected]> Date: Thu Sep 26 11:11:53 2019 +0200 Fix lint issue (#17598) commit 1c9b133 Author: Sérgio Estêvão <[email protected]> Date: Wed Sep 25 22:30:59 2019 +0100 Add missing heading levels to the UI (H4, H5, H6) (#17533) commit ae6d2ce Author: Tugdual de Kerviler <[email protected]> Date: Wed Sep 25 13:19:10 2019 +0200 [RNMobile] Refactor Dark Mode HOC (#17552) * [RNMobile] Refactor the Dark Mode HOC to fix naming antipatterns * Fix lint errors * Add .native.js suffix to usePreferredColorScheme * Update usage of theme props renamed to preferredColorScheme * Update usage of theme props renamed to preferredColorScheme commit 69da85e Author: Danilo Ercoli <[email protected]> Date: Wed Sep 25 11:08:33 2019 +0200 Autosave monitor - Make the mobile editor ping the native at each keystroke, since the deboucing logic is already well defined in the apps. (#17548) commit e99d365 Author: Luke Walczak <[email protected]> Date: Wed Sep 25 10:29:20 2019 +0200 Add isAppender functionality on mobile (#17195) * Add isAppender functionality on mobile * refactor isAppender conditions * Replace dropZoneUIOnly in favour of showMediaSelectionUI * deprecate dropZoneUIOnly and add disableMediaSelection prop * Update test * Refactor tests and change prop name * Remove redundant empty lines * Refactor conditions inside MediaPlaceholder * Update block-editor CHANGELOG * Update packages/block-editor/CHANGELOG.md Co-Authored-By: Grzegorz (Greg) Ziółkowski <[email protected]> commit 648a1b9 Author: Danilo Ercoli <[email protected]> Date: Thu Sep 19 09:47:44 2019 -0400 [RNMobile] Add autosave to mobile apps (#17329) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193) * Add a preliminary version of the AutosaveMonitor for mobile that calls the "bridge" and asks the native side to save the content * Add autosave mock function for tests * Fix merge conflicts * Fix lint * Re-add autosave on mobile that was removed erroneously during import-merge from rnmobile/master * Remove native variant of AutosaveMonitor and introduces changes at editor store level * Default to false for `isEditedPostAutosaveable` on mobile. There was a typo in the returing value on the previous commit. * Make sure to consider edits to the Title when checking if auto-save is needed * Fix lint commit 264b178 Author: etoledom <[email protected]> Date: Wed Sep 4 14:03:38 2019 +0200 [RNMobile] DarkMode improvements (#17309) * Remove the need to import `useStyle` and pass the theme prop on every instance that `withStyle` is used * Implement dark-mode refactor on all components * Fix broken native tests * Fix default block appender background color on DarkMode * DarkMode: Make `useStyle` a class function commit fc8c3da Author: Luke Walczak <[email protected]> Date: Wed Sep 4 14:02:20 2019 +0200 Remove redundant bg color within button appender (#17325) commit 89664eb Author: Luke Walczak <[email protected]> Date: Tue Sep 3 12:18:11 2019 +0200 Support group block on mobile (#17251) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots * Support group block on mobile * Extend shouldShowInsertionPoint condition to be false when group is selected * Code refactor * Update package-lock commit 14d482b Author: Matt Chowning <[email protected]> Date: Tue Aug 6 17:04:35 2019 -0400 [RNMobile] Insure tapping at end of post inserts at end Previously, tapping at the end of the post would insert a block immediately after the currently selected block. In addition, this commit is cleaning out a few unusued props in the block-list file. commit 7b12673 Author: etoledom <[email protected]> Date: Fri Aug 30 18:09:31 2019 +0200 Recover border colors (#17269) commit f9fa455 Author: Gerardo Pacheco <[email protected]> Date: Fri Aug 30 11:06:27 2019 +0200 [RNMobile] Fix dismiss keyboard button for the post title (#17260) commit 7aa44a2 Author: Luke Walczak <[email protected]> Date: Fri Aug 30 11:03:46 2019 +0200 Unify media placeholder and upload props within media-text (#17268) commit 3db95b7 Author: Drapich Piotr <[email protected]> Date: Fri Aug 30 09:05:11 2019 +0200 MediaUpload and MediaPlaceholder unify props (#17145) commit a78f204 Author: Tugdual de Kerviler <[email protected]> Date: Thu Aug 29 16:53:06 2019 +0200 Add native support for the MediaText block (#16305) * First working version of the MediaText component for native mobile * Fix adding a block to an innerblock list * Disable mediaText on production * MediaText native: improve editor visuals * Move BlockToolbar from BlockList to Layout * Remove BlockEditorProvider from BlockList and add native version of EditorProvider to Editor. Plus support InsertionPoint and BlockListAppender * Update BlockMover for native to hide if locked or if it's the only block * Make the vertical align button work, add more styling options for toolbar buttons * Make sure registerCoreBlocks does not break in production * Copy docblock comment from the web version for registerCoreBlocks * Fix focusing on the media placeholder * Only support adding image for now * Update usage of MediaPlaceholder in MediaContainer * Enable autoScroll for just the out most block list * Fix JS Unit tests * Roll back to IconButton refactor and fix tests * Fix BlockVerticalAlignmentToolbar buttons style on mobile * Fix thing for web and ensure ariaPressed is always passed down * Use AriaPressed directly to style SVG on mobile * Update snapshots commit 643c1b2 Author: etoledom <[email protected]> Date: Wed Aug 28 12:16:19 2019 +0200 Activate Travis CI on rnmobile/master branch (#17229) commit 635108e Author: etoledom <[email protected]> Date: Wed Aug 28 10:31:39 2019 +0200 [RNMobile] Native mobile release v1.11.0 (#17181) * [RNMobile] Fix crash when adding separator * Build: remove global install of latest npm since we want to use the paired node/npm version (#17134) * Build: remove global install of latest npm since we want to use the paired node/npm version * Also update travis to remove --latest-npm flag * [RNMobile] Try dark mode (iOS) (#17067) * Adding dark mode component implemented on list and list block * Adding DarkMode handling to RichText, ToolBar and SafeArea * Mobile: Using DarkMode as HOC * iOS DarkMode: Modified colors on block list and block container * iOS DarkMode: Improved Header Toolbar colors * iOS DarkMode: Removing background from buttons * iOS DarkMode warning and unsupported * iOS DarkMode: MediaPlaceholder * iOS DarkMode: BottomSheets * iOS DarkMode: Inserter * iOS DarkMode: DefaultBlockAppender * iOS DarkMode: PostTite * Update hardcoded colors with variables * iOS DarkMode: Fix bottom-sheet cell value color * iOS DarkMode: More - PageBreak - Add Block Here * iOS DarkMode: Better text color * iOS Darkmode: Code block * iOS DarkMode: HTML View * iOS DarkMode: Improve colors on SafeArea * Fix toolbar not avoiding keyboard regression * Fix native unit tests * Fix gutenberg-mobile unit tests * Adding RNDarkMode mocks * RNMobile: Fix crash when viewing HTML on iOS * [RNMobile] Remove toolbar from html view * [RNMobile] Fix MaxListenersExceededWarning caused by dark-mode event emitter (#17186) * Fix MaxListenersExceededWarning caused by dark-mode event emitter * Checking for setMaxListeners trying to avoid CI error * Adding remove listener to DarkMode HOC * DarkMode: Binding this.onModeChanged to `this` * DarkMode: Adding conditional needed to pass UI Tests on CI * Fix focus title on new posts regression (#17180) * BottomSheet: Setting DashIcon color directly when theme is default (light) (#17193)
WordPress · Sep 26, 2019 · 8fd916a · 8fd916a
1 parent ad8d8d5
commit 8fd916a
Show file tree

Hide file tree

Showing 96 changed files with 1,853 additions and 368 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -20,6 +20,7 @@ cache:
 branches:
   only:
     - master
+    - rnmobile/master
 
 env:
   global:

diff --git a/packages/block-editor/CHANGELOG.md b/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

diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/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>
+	);
+}
diff --git a/packages/block-editor/src/components/block-list-appender/index.native.js b/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 );
diff --git a/packages/block-editor/src/components/block-list-appender/style.native.scss b/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;
+}
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/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 } /> }

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/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;

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/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 );
 
diff --git a/packages/block-editor/src/components/block-list/insertion-point.native.js b/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 );
diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/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;
 }