[RNMobile] Merge mobile release v1.20.0 back into master (#19562)

* styling fixes after navigation feature merge (#19455) * Styling fixes to navigation feature * Add netural styles for toolbar * Fix condition for not registered component * Display 'Unsupported' in breadcrumbs for missing components * Refactor after CR * Remove leftovers * [FIX] rich text focus loop (#19240) * check if onBlur event contains text that is different than value * add check if there is a text in native event * Prevent re-selection of RichText when native selection changes as a result of resigning focus * Fix typo * Check if isSelected only in onSelectionChangeFromAztec Co-authored-by: Jorge Bernal <jbernal@gmail.com> * [RNMobile] Correct displaying photo during upload (#19502) * [RNMobile] Fix crash once adding Group (#19457) * Add extra branch for travis to run tests onto Co-authored-by: Luke Walczak <lukasz.walczak.pwr@gmail.com> Co-authored-by: Drapich Piotr <drapich.piotr@gmail.com> Co-authored-by: Jorge Bernal <jbernal@gmail.com>
WordPress · Jan 10, 2020 · 041394d · 041394d
1 parent 296f94c
commit 041394d
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 14 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -19,7 +19,7 @@ branches:
   only:
     - master
     - rnmobile/master
-    - rnmobile/releases
+    - /rnmobile\/release.*/
     - /wp\/.*/
 
 env:

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -74,7 +74,7 @@ $block-selected-child-border-width: 1px;
 $block-selected-child-padding: 0;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 $block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width;
-$block-custom-appender-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-child-margin + $block-selected-border-width;
+$block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width;
 $block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width;
 
 // Buttons & UI Widgets

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
 import { ToolbarButton, Toolbar } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -188,6 +188,17 @@ class BlockListBlock extends Component {
 		];
 	}
 
+	applyToolbarStyle() {
+		const {
+			hasChildren,
+			isUnregisteredBlock,
+		} = this.props;
+
+		if ( ! hasChildren || isUnregisteredBlock ) {
+			return styles.neutralToolbar;
+		}
+	}
+
 	render() {
 		const {
 			clientId,
@@ -228,7 +239,7 @@ class BlockListBlock extends Component {
 						style={ this.applyBlockStyle() }
 					>
 						{ isValid ? this.getBlockForType() : <BlockInvalidWarning blockTitle={ title } icon={ icon } /> }
-						{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
+						<View style={ this.applyToolbarStyle() } >{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }</View>
 					</View>
 				</TouchableWithoutFeedback>
 			</>
@@ -261,6 +272,8 @@ export default compose( [
 		const isLastBlock = order === getBlocks().length - 1;
 		const block = __unstableGetBlockWithoutInnerBlocks( clientId );
 		const { name, attributes, isValid } = block || {};
+
+		const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
 		const blockType = getBlockType( name || 'core/missing' );
 		const title = blockType.title;
 		const icon = blockType.icon;
@@ -281,7 +294,7 @@ export default compose( [
 		const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
 		const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];
 
-		const hasChildren = !! getBlockCount( clientId );
+		const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId );
 		const hasParent = !! parentId;
 		const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
 		const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
@@ -317,6 +330,7 @@ export default compose( [
 			isTouchable,
 			isDimmed,
 			isRootListInnerBlockHolder,
+			isUnregisteredBlock,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss
@@ -75,12 +75,16 @@
 
 .selectedLeaf {
 	margin: $block-selected-margin;
-	padding: $block-selected-to-content;
+	padding-left: $block-selected-to-content;
+	padding-right: $block-selected-to-content;
+	padding-top: $block-selected-to-content;
 }
 
 .selectedRootLeaf {
 	margin: 0;
-	padding: $block-edge-to-content;
+	padding-left: $block-edge-to-content;
+	padding-right: $block-edge-to-content;
+	padding-top: $block-edge-to-content;
 }
 
 .selectedParent {
@@ -130,3 +134,8 @@
 	background-color: #e9eff3;
 	opacity: 0.4;
 }
+
+.neutralToolbar {
+	margin-left: -$block-edge-to-content;
+	margin-right: -$block-edge-to-content;
+}
diff --git a/packages/block-editor/src/components/block-list/breadcrumb.native.js b/packages/block-editor/src/components/block-list/breadcrumb.native.js
@@ -22,7 +22,11 @@ import styles from './breadcrumb.scss';
 const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
 	return (
 		<View style={ styles.breadcrumbContainer }>
-			<TouchableOpacity style={ styles.button } onPress={ () => {/* Open BottomSheet with markup */} }>
+			<TouchableOpacity
+				style={ styles.button }
+				onPress={ () => {/* Open BottomSheet with markup */} }
+				disabled={ true } /* Disable temporarily since onPress function is empty */
+			>
 				{ rootClientId && rootBlockIcon && (
 					[ <Icon key="parent-icon" size={ 20 } icon={ rootBlockIcon.src } fill={ styles.icon.color } />,
 						<View key="subdirectory-icon" style={ styles.arrow }><SubdirectorSVG fill={ styles.arrow.color } /></View>,

diff --git a/packages/block-library/src/media-text/style.native.scss b/packages/block-library/src/media-text/style.native.scss
@@ -34,7 +34,6 @@
 
 .contentCentered {
 	flex: 1;
-	justify-content: center;
 	align-items: center;
 }
 

diff --git a/packages/block-library/src/missing/index.js b/packages/block-library/src/missing/index.js
@@ -16,7 +16,7 @@ export { metadata, name };
 
 export const settings = {
 	name,
-	title: __( 'Unrecognized Block' ),
+	title: __( 'Unsupported' ),
 	description: __( 'Your site doesn’t include support for this block.' ),
 	supports: {
 		className: false,

diff --git a/packages/components/src/button/index.native.js b/packages/components/src/button/index.native.js
@@ -125,8 +125,8 @@ export function Button( props ) {
 		)
 	);
 
-	const newIcon = cloneElement( ( icon && <Icon icon={ icon } size={ iconSize } /> ),
-		{ colorScheme: props.preferredColorScheme, isPressed } );
+	const newIcon = icon ? cloneElement( ( <Icon icon={ icon } size={ iconSize } /> ),
+		{ colorScheme: props.preferredColorScheme, isPressed } ) : null;
 
 	const element = (
 		<TouchableOpacity

diff --git a/packages/rich-text/src/component/index.native.js b/packages/rich-text/src/component/index.native.js
@@ -411,6 +411,11 @@ export class RichText extends Component {
 	onBlur( event ) {
 		this.isTouched = false;
 
+		// Check if value is up to date with latest state of native AztecView
+		if ( event.nativeEvent.text && event.nativeEvent.text !== this.props.value ) {
+			this.onTextUpdate( event );
+		}
+
 		if ( this.props.onBlur ) {
 			this.props.onBlur( event );
 		}
@@ -457,8 +462,16 @@ export class RichText extends Component {
 		// Make sure there are changes made to the content before upgrading it upward
 		this.onTextUpdate( event );
 
-		this.onSelectionChange( realStart, realEnd );
-
+		// Aztec can send us selection change events after it has lost focus.
+		// For instance the autocorrect feature will complete a partially written
+		// word when resigning focus, causing a selection change event.
+		// Forwarding this selection change could cause this RichText to regain
+		// focus and start a focus loop.
+		//
+		// See https://github.com/wordpress-mobile/gutenberg-mobile/issues/1696
+		if ( this.props.__unstableIsSelected ) {
+			this.onSelectionChange( realStart, realEnd );
+		}
 		// Update lastEventCount to prevent Aztec from re-rendering the content it just sent
 		this.lastEventCount = event.nativeEvent.eventCount;