[RNMobile] Fix cover issues related to custom color picker (#28397)

WordPress · Jan 25, 2021 · 48afc04 · 48afc04
1 parent 1e90244
commit 48afc04
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import { View, TouchableWithoutFeedback } from 'react-native';
+import {
+	View,
+	TouchableWithoutFeedback,
+	InteractionManager,
+} from 'react-native';
 import Video from 'react-native-video';
 
 /**
@@ -46,7 +50,7 @@ import {
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import { useEffect, useState, useRef, useCallback } from '@wordpress/element';
 import { cover as icon, replace, image, warning } from '@wordpress/icons';
 import { getProtocol } from '@wordpress/url';
 
@@ -88,6 +92,7 @@ const Cover = ( {
 	setAttributes,
 	openGeneralSidebar,
 	closeSettingsBottomSheet,
+	selectBlock,
 } ) => {
 	const {
 		backgroundType,
@@ -133,8 +138,6 @@ const Cover = ( {
 		setCustomColorPickerShowing,
 	] = useState( false );
 
-	const [ customColor, setCustomColor ] = useState( '' );
-
 	const openMediaOptionsRef = useRef();
 
 	// Used to set a default color for its InnerBlocks
@@ -169,15 +172,15 @@ const Cover = ( {
 		onSelect( media );
 	};
 
-	const onHeightChange = ( value ) => {
+	const onHeightChange = useCallback( ( value ) => {
 		if ( minHeight || value !== COVER_DEFAULT_HEIGHT ) {
 			setAttributes( { minHeight: value } );
 		}
-	};
+	}, [] );
 
-	const onOpacityChange = ( value ) => {
+	const onOpacityChange = useCallback( ( value ) => {
 		setAttributes( { dimRatio: value } );
-	};
+	}, [] );
 
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
@@ -199,10 +202,10 @@ const Cover = ( {
 		setIsVideoLoading( false );
 	};
 
-	const onClearMedia = () => {
+	const onClearMedia = useCallback( () => {
 		setAttributes( { id: undefined, url: undefined } );
 		closeSettingsBottomSheet();
-	};
+	}, [] );
 
 	function setColor( color ) {
 		setAttributes( {
@@ -215,10 +218,9 @@ const Cover = ( {
 	}
 
 	function openColorPicker() {
-		if ( isParentSelected ) {
-			setCustomColorPickerShowing( true );
-			openGeneralSidebar();
-		}
+		selectBlock();
+		setCustomColorPickerShowing( true );
+		openGeneralSidebar();
 	}
 
 	const backgroundColor = getStylesFromColorScheme(
@@ -288,6 +290,12 @@ const Cover = ( {
 		} );
 	};
 
+	const onBottomSheetClosed = useCallback( () => {
+		InteractionManager.runAfterInteractions( () => {
+			setCustomColorPickerShowing( false );
+		} );
+	}, [] );
+
 	const controls = (
 		<InspectorControls>
 			<OverlayColorSettings
@@ -352,20 +360,15 @@ const Cover = ( {
 						shouldEnableBottomSheetMaxHeight={
 							shouldEnableBottomSheetMaxHeight
 						}
-						setColor={ ( color ) => {
-							setCustomColor( color );
-							setColor( color );
-						} }
+						setColor={ setColor }
 						onNavigationBack={ closeSettingsBottomSheet }
 						onHandleClosingBottomSheet={
 							onHandleClosingBottomSheet
 						}
 						onHandleHardwareButtonPress={
 							onHandleHardwareButtonPress
 						}
-						onBottomSheetClosed={ () => {
-							setCustomColorPickerShowing( false );
-						} }
+						onBottomSheetClosed={ onBottomSheetClosed }
 						isBottomSheetContentScrolling={
 							isBottomSheetContentScrolling
 						}
@@ -467,9 +470,10 @@ const Cover = ( {
 				{ isCustomColorPickerShowing && colorPickerControls }
 				<MediaPlaceholder
 					height={ styles.mediaPlaceholderEmptyStateContainer.height }
-					backgroundColor={ customColor }
+					backgroundColor={ customOverlayColor }
 					hideContent={
-						customColor !== '' && customColor !== undefined
+						customOverlayColor !== '' &&
+						customOverlayColor !== undefined
 					}
 					icon={ placeholderIcon }
 					labels={ {
@@ -594,14 +598,16 @@ export default compose( [
 			isParentSelected: selectedBlockClientId === clientId,
 		};
 	} ),
-	withDispatch( ( dispatch ) => {
+	withDispatch( ( dispatch, { clientId } ) => {
 		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
+		const { selectBlock } = dispatch( 'core/block-editor' );
 
 		return {
 			openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
 			closeSettingsBottomSheet() {
 				dispatch( 'core/edit-post' ).closeGeneralSidebar();
 			},
+			selectBlock: () => selectBlock( clientId ),
 		};
 	} ),
 	withPreferredColorScheme,

diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js
@@ -86,7 +86,9 @@ function ColorPicker( {
 	useEffect( () => {
 		shouldEnableBottomSheetMaxHeight( false );
 		onHandleClosingBottomSheet( () => {
-			setColor( savedColor );
+			if ( savedColor ) {
+				setColor( savedColor );
+			}
 			if ( onBottomSheetClosed ) {
 				onBottomSheetClosed();
 			}