Merge branch 'master' into rnmobile/improve-perf-rest

packages/block-library/src/cover/edit.native.js

@@ -93,6 +93,8 @@ const Cover = ( {
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
 	isSelected,
+	selectBlock,
+	blockWidth,
 } ) => {
 	const {
 		backgroundType,
@@ -172,11 +174,14 @@ const Cover = ( {
 		onSelect( media );
 	};
 
-	const onHeightChange = useCallback( ( value ) => {
-		if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
-			setAttributes( { minHeight: value } );
-		}
-	}, [] );
+	const onHeightChange = useCallback(
+		( value ) => {
+			if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
+				setAttributes( { minHeight: value } );
+			}
+		},
+		[ minHeight ]
+	);
 
 	const onOpacityChange = useCallback( ( value ) => {
 		setAttributes( { dimRatio: value } );
@@ -205,7 +210,7 @@ const Cover = ( {
 	const onClearMedia = useCallback( () => {
 		setAttributes( { id: undefined, url: undefined } );
 		closeSettingsBottomSheet();
-	}, [] );
+	}, [ closeSettingsBottomSheet ] );
 
 	function setColor( color ) {
 		setAttributes( {
@@ -290,6 +295,12 @@ const Cover = ( {
 		} );
 	}, [] );
 
+	const onBottomSheetClosed = useCallback( () => {
+		InteractionManager.runAfterInteractions( () => {
+			setCustomColorPickerShowing( false );
+		} );
+	}, [] );
+
 	const controls = (
 		<InspectorControls>
 			<OverlayColorSettings

packages/block-library/src/missing/edit.native.js

@@ -198,22 +198,23 @@ export class UnsupportedBlockEdit extends Component {
 					) }
 				</View>
 				{ ( isUnsupportedBlockEditorSupported ||
-					canEnableUnsupportedBlockEditor ) && (
-					<>
-						<TextControl
-							label={ missingBlockActionButton }
-							separatorType="topFullWidth"
-							onPress={ this.requestFallback }
-							labelStyle={ actionButtonStyle }
-						/>
-						<TextControl
-							label={ __( 'Dismiss' ) }
-							separatorType="topFullWidth"
-							onPress={ this.toggleSheet }
-							labelStyle={ actionButtonStyle }
-						/>
-					</>
-				) }
+					canEnableUnsupportedBlockEditor ) &&
+					isEditableInUnsupportedBlockEditor && (
+						<>
+							<TextControl
+								label={ missingBlockActionButton }
+								separatorType="topFullWidth"
+								onPress={ this.requestFallback }
+								labelStyle={ actionButtonStyle }
+							/>
+							<TextControl
+								label={ __( 'Dismiss' ) }
+								separatorType="topFullWidth"
+								onPress={ this.toggleSheet }
+								labelStyle={ actionButtonStyle }
+							/>
+						</>
+					) }
 			</BottomSheet>
 		);
 	}

packages/components/src/footer-message-control/index.native.js

@@ -1,14 +1,14 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import React from 'react';
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import FooterMessageCell from '../mobile/bottom-sheet/footer-message-cell';
 
-const FooterMessageControl = React.memo( ( { ...props } ) => {
+function FooterMessageControl( { ...props } ) {
 	return <FooterMessageCell { ...props } />;
-} );
+}
 
 export default memo( FooterMessageControl );

packages/components/src/query-controls/index.native.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import React from 'react';
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -38,7 +34,7 @@ const options = [
 	},
 ];
 
-const QueryControls = React.memo(
+const QueryControls = memo(
 	( {
 		categoriesList,
 		selectedCategoryId,

packages/components/src/range-control/index.native.js

@@ -1,14 +1,14 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import React from 'react';
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import RangeCell from '../mobile/bottom-sheet/range-cell';
 import StepperCell from '../mobile/bottom-sheet/stepper-cell';
 
-const RangeControl = React.memo(
+const RangeControl = memo(
 	( {
 		className,
 		currentInput,

packages/components/src/select-control/index.native.js

@@ -1,13 +1,13 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import React from 'react';
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import PickerCell from '../mobile/bottom-sheet/picker-cell';
 
-const SelectControl = React.memo(
+const SelectControl = memo(
 	( {
 		help,
 		instanceId,

packages/components/src/text-control/index.native.js

@@ -1,41 +1,39 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import React from 'react';
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import Cell from '../mobile/bottom-sheet/cell';
 
-const TextControl = React.memo(
-	( {
-		label,
-		hideLabelFromVision,
-		value,
-		help,
-		className,
-		instanceId,
-		onChange,
-		type = 'text',
-		...props
-	} ) => {
-		const id = `inspector-text-control-${ instanceId }`;
+function TextControl( {
+	label,
+	hideLabelFromVision,
+	value,
+	help,
+	className,
+	instanceId,
+	onChange,
+	type = 'text',
+	...props
+} ) {
+	const id = `inspector-text-control-${ instanceId }`;
 
-		return (
-			<Cell
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-				id={ id }
-				help={ help }
-				className={ className }
-				type={ type }
-				value={ value }
-				onChangeValue={ onChange }
-				aria-describedby={ !! help ? id + '__help' : undefined }
-				{ ...props }
-			/>
-		);
-	}
-);
+	return (
+		<Cell
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			id={ id }
+			help={ help }
+			className={ className }
+			type={ type }
+			value={ value }
+			onChangeValue={ onChange }
+			aria-describedby={ !! help ? id + '__help' : undefined }
+			{ ...props }
+		/>
+	);
+}
 
 export default memo( TextControl );

packages/components/src/toggle-control/index.native.js

@@ -1,13 +1,13 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import React from 'react';
+import { memo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import SwitchCell from '../mobile/bottom-sheet/switch-cell';
 
-const ToggleControl = React.memo(
+const ToggleControl = memo(
 	( { label, checked, help, instanceId, className, onChange, ...props } ) => {
 		const id = `inspector-toggle-control-${ instanceId }`;