[RNMobile] Display custom color value in mobile Cover Block color pic…

…ker (#51414)

* Display custom color value in mobile color picker

* Update Cover block bottomLabelText to use proper hex color style

* Update text color style

* Update CHANGELOG

* Update getBottomLabelText from a function to a const

* Add test for Cover block custom color picker

* Update Cover block color picker test

* test: Fix Cover block color picker test (#52943)

* test: Mock required styles for Cover block tests

JavaScript logic fails due to undefined references from mocked Sass
files.

* test: Fix Cover block HEX test assertions

Synchronous queries of user-facing text is generally preferred over test
IDs or asynchronous queries. Additionally, the
`react-native-hsv-color-picker` must be mocked to trigger the required
interaction events. Lastly, selecting the white color results in a
non-custom color, which does not appear to display the HEX value in the
picker footer label.

---------

Co-authored-by: David Calhoun <github@davidcalhoun.me>

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

@@ -6,6 +6,7 @@ import {
 	TouchableWithoutFeedback,
 	InteractionManager,
 	AccessibilityInfo,
+	Text,
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
@@ -364,6 +365,19 @@ const Cover = ( {
 		} );
 	}, [] );
 
+	const selectedColorText = getStylesFromColorScheme(
+		styles.selectedColorText,
+		styles.selectedColorTextDark
+	);
+
+	const bottomLabelText = customOverlayColor ? (
+		<Text style={ selectedColorText }>
+			{ customOverlayColor.toUpperCase() }
+		</Text>
+	) : (
+		__( 'Select a color' )
+	);
+
 	const colorPickerControls = (
 		<InspectorControls>
 			<BottomSheetConsumer>
@@ -393,7 +407,7 @@ const Cover = ( {
 						isBottomSheetContentScrolling={
 							isBottomSheetContentScrolling
 						}
-						bottomLabelText={ __( 'Select a color' ) }
+						bottomLabelText={ bottomLabelText }
 					/>
 				) }
 			</BottomSheetConsumer>

packages/block-library/src/cover/style.native.scss

@@ -207,3 +207,14 @@
 .mediaPlaceholderEmptyStateContainer {
 	height: 300;
 }
+
+.selectedColorText {
+	font-family: $default-monospace-font;
+	color: $light-primary;
+	font-size: 16px;
+	font-weight: 400;
+}
+
+.selectedColorTextDark {
+	color: $dark-primary;
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image } from 'react-native';
+import { Image, Pressable } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
@@ -12,6 +12,7 @@ import {
 	getBlock,
 	openBlockSettings,
 } from 'test/helpers';
+import HsvColorPicker from 'react-native-hsv-color-picker';
 
 /**
  * WordPress dependencies
@@ -538,6 +539,39 @@ describe( 'color settings', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'displays the hex color value in the custom color picker', async () => {
+		HsvColorPicker.mockImplementation( ( props ) => {
+			return <Pressable { ...props } testID="hsv-color-picker" />;
+		} );
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
+		} );
+
+		// Select a color from the placeholder palette.
+		const colorButton = screen.getByA11yHint(
+			'Navigates to custom color picker'
+		);
+		fireEvent.press( colorButton );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Assert label text before tapping color picker
+		expect( screen.getByText( 'Select a color' ) ).toBeVisible();
+
+		// Tap color picker
+		const colorPicker = screen.getByTestId( 'hsv-color-picker' );
+		fireEvent( colorPicker, 'onHuePickerPress', {
+			hue: 120,
+			saturation: 12,
+			value: 50,
+		} );
+
+		// Assert label hex value after tapping color picker
+		expect( screen.getByText( '#00FF00' ) ).toBeVisible();
+	} );
 } );
 
 describe( 'minimum height settings', () => {

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

@@ -255,6 +255,7 @@ export class UnsupportedBlockEdit extends Component {
 			styles.unsupportedBlockSubtitle,
 			styles.unsupportedBlockSubtitleDark
 		);
+
 		const subtitle = (
 			<Text style={ subTitleStyle }>{ __( 'Unsupported' ) }</Text>
 		);

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] Display custom color value in mobile Cover Block color picker [#51414]
 
 ## 1.101.0
 -   [*] Remove visual gap in mobile toolbar when a Gallery block is selected [#52966]
@@ -28,8 +29,8 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Add media inserter buttons to editor toolbar [#51827]
 -   [**] Update native BlockOutline component styles to remove blue border from blocks [#51222]
 -   [**] Move the undo/redo buttons to the navigation bar [#51766]
--   [**] Update Editor block inserter button styles and default text input placeholder/selection styles [#52269]
--   [**] Update Editor toolbar icons and colors [#52336]
+-   [**] Update Editor block inserter button styles and default text input placeholder/selection styles [#52269]
+-   [**] Update Editor toolbar icons and colors [#52336]
 -   [*] Update Block Settings button border [#52715]
 
 ## 1.99.1
@@ -77,7 +78,7 @@ For each user feature we should also add a importance categorization label  to i
 -   [**] Fix regression with the Color hook and ColorPanel. [#49917]
 
 ## 1.93.0
--   [***] [iOS] Fixed iOS scroll jumping issue by refactoring KeyboardAwareFlatList improving writing flow and caret focus handling. [#48791]
+-   [***] [iOS] Fixed iOS scroll jumping issue by refactoring KeyboardAwareFlatList improving writing flow and caret focus handling. [#48791]
 
 ## 1.92.1
 -   [*] Avoid empty Gallery block error [#49557]
@@ -572,8 +573,8 @@ For each user feature we should also add a importance categorization label  to i
 ## 1.42.0
 
 -   [***] Adding support for selecting different unit of value in Cover and Columns blocks [#26161]
--   [**] Button block - Add link picker to the block settings [#26206]
--   [**] Support to render background/text colors in Group, Paragraph and Quote blocks [#25994]
+-   [**] Button block - Add link picker to the block settings [#26206]
+-   [**] Support to render background/text colors in Group, Paragraph and Quote blocks [#25994]
 -   [*] Fix theme colors syncing with the editor [#26821]
 -   [**] Fix issue where a blocks would disappear when deleting all of the text inside without requiring the extra backspace to remove the block. [#27583]
 
@@ -868,4 +869,4 @@ For each user feature we should also add a importance categorization label  to i
 ## 1.6.0
 
 -   Fixed issue with link settings where “Open in New Tab” was always OFF on open.
--   Added UI to display a warning when a block has invalid content.
+-   Added UI to display a warning when a block has invalid content.

test/native/__mocks__/styleMock.js

@@ -202,4 +202,6 @@ module.exports = {
 	embed__icon: {
 		fill: 'black',
 	},
+	picker: {},
+	pickerPointer: {},
 };

test/native/setup.js

@@ -188,9 +188,11 @@ jest.mock( 'react-native-linear-gradient', () => () => 'LinearGradient', {
 	virtual: true,
 } );
 
-jest.mock( 'react-native-hsv-color-picker', () => () => 'HsvColorPicker', {
-	virtual: true,
-} );
+jest.mock(
+	'react-native-hsv-color-picker',
+	() => jest.fn( () => 'HsvColorPicker' ),
+	{ virtual: true }
+);
 
 jest.mock( '@react-native-community/blur', () => () => 'BlurView', {
 	virtual: true,