Custom Color picker action

WordPress · Jul 10, 2020 · 96b1582 · 96b1582
1 parent 508f015
commit 96b1582
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js
@@ -22,6 +22,7 @@ import {
 	ToolbarGroup,
 	Gradient,
 	ColorPalette,
+	ColorPicker,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -102,6 +103,7 @@ const Cover = ( {
 	overlayColor,
 	setAttributes,
 	openGeneralSidebar,
+	closeSettingsBottomSheet,
 } ) => {
 	const {
 		backgroundType,
@@ -269,6 +271,20 @@ const Cover = ( {
 		</InspectorControls>
 	);
 
+	const colorPickerControls = (
+		<InspectorControls>
+			<ColorPicker
+				shouldEnableBottomSheetScroll={ () => {} }
+				shouldDisableBottomSheetMaxHeight={ () => {} }
+				setColor={ () => {} }
+				onApply={ setColor }
+				onNavigationBack={ closeSettingsBottomSheet }
+				onCloseBottomSheet={ () => {} }
+				isBottomSheetContentScrolling={ () => {} }
+			/>
+		</InspectorControls>
+	);
+
 	const renderBackground = ( {
 		open: openMediaOptions,
 		getMediaOptions,
@@ -338,6 +354,7 @@ const Cover = ( {
 	if ( ! hasBackground ) {
 		return (
 			<View>
+				{ colorPickerControls }
 				<MediaPlaceholder
 					icon={ placeholderIcon }
 					labels={ {
@@ -417,8 +434,10 @@ export default compose( [
 		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
 
 		return {
-			openGeneralSidebar: () =>
-				openGeneralSidebar( 'edit-post/block' ),
+			openGeneralSidebar: () => openGeneralSidebar( 'edit-post/block' ),
+			closeSettingsBottomSheet() {
+				dispatch( 'core/edit-post' ).closeGeneralSidebar();
+			},
 		};
 	} ),
 	withPreferredColorScheme,

diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js
@@ -26,6 +26,7 @@ function ColorPicker( {
 	isGradientColor,
 	onNavigationBack,
 	onCloseBottomSheet,
+	onApply,
 } ) {
 	const isIOS = Platform.OS === 'ios';
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
@@ -98,7 +99,12 @@ function ColorPicker( {
 		onNavigationBack();
 		onCloseBottomSheet( null );
 		shouldDisableBottomSheetMaxHeight( true );
-		setColor( action === 'apply' ? currentColor : savedColor );
+		if ( action === 'apply' ) {
+			setColor( currentColor );
+			if ( onApply !== undefined ) onApply( currentColor );
+		} else {
+			setColor( savedColor );
+		}
 	}
 
 	return (

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
@@ -10,6 +10,7 @@ export {
 } from '@wordpress/primitives';
 export { default as ColorIndicator } from './color-indicator';
 export { default as ColorPalette } from './color-palette';
+export { default as ColorPicker } from './color-picker';
 export { default as Dashicon } from './dashicon';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';