Mobile - Highlight words

packages/components/src/button/index.native.js

@@ -93,15 +93,29 @@ export function Button( props ) {
 		label,
 		shortcut,
 		tooltipPosition,
+		isActiveStyle,
+		customContainerStyles,
 	} = props;
 	const preferredColorScheme = usePreferredColorScheme();
 
 	const isDisabled = ariaDisabled || disabled;
 
+	const containerStyle = [
+		styles.container,
+		customContainerStyles && { ...customContainerStyles },
+	];
+
 	const buttonViewStyle = {
 		opacity: isDisabled ? 0.3 : 1,
 		...( fixedRatio && styles.fixedRatio ),
 		...( isPressed ? styles.buttonActive : styles.buttonInactive ),
+		...( isPressed &&
+			isActiveStyle?.borderRadius && {
+				borderRadius: isActiveStyle.borderRadius,
+			} ),
+		...( isActiveStyle?.backgroundColor && {
+			backgroundColor: isActiveStyle.backgroundColor,
+		} ),
 	};
 
 	const states = [];
@@ -159,7 +173,7 @@ export function Button( props ) {
 			accessibilityHint={ hint }
 			onPress={ onClick }
 			onLongPress={ onLongPress }
-			style={ styles.container }
+			style={ containerStyle }
 			disabled={ isDisabled }
 			testID={ testID }
 		>

packages/components/src/mobile/color-settings/index.native.js

@@ -28,6 +28,7 @@ const ColorSettingsMemo = memo(
 		gradientValue,
 		onGradientChange,
 		label,
+		hideNavigation,
 	} ) => {
 		useEffect( () => {
 			shouldEnableBottomSheetMaxHeight( true );
@@ -44,6 +45,7 @@ const ColorSettingsMemo = memo(
 						gradientValue,
 						onGradientChange,
 						label,
+						hideNavigation,
 					} }
 				>
 					<PaletteScreen />

packages/components/src/mobile/color-settings/palette.screen.native.js

@@ -26,7 +26,7 @@ import { colorsUtils } from './utils';
 
 import styles from './style.scss';
 
-const HIT_SLOP = { top: 22, bottom: 22, left: 22, right: 22 };
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
 
 const PaletteScreen = () => {
 	const route = useRoute();
@@ -38,6 +38,7 @@ const PaletteScreen = () => {
 		onGradientChange,
 		colorValue,
 		defaultSettings,
+		hideNavigation = false,
 	} = route.params || {};
 	const { segments, isGradient } = colorsUtils;
 	const [ currentValue, setCurrentValue ] = useState( colorValue );
@@ -164,10 +165,12 @@ const PaletteScreen = () => {
 	}
 	return (
 		<View>
-			<NavBar>
-				<NavBar.BackButton onPress={ navigation.goBack } />
-				<NavBar.Heading>{ label } </NavBar.Heading>
-			</NavBar>
+			{ ! hideNavigation && (
+				<NavBar>
+					<NavBar.BackButton onPress={ navigation.goBack } />
+					<NavBar.Heading>{ label } </NavBar.Heading>
+				</NavBar>
+			) }
 			<ColorPalette
 				setColor={ setColor }
 				activeColor={ currentValue }

packages/components/src/mobile/color-settings/style.native.scss

@@ -45,7 +45,7 @@
 }
 
 .clearButtonContainer {
-	align-items: flex-end;
+	align-self: flex-end;
 }
 
 .clearButton {

packages/format-library/src/default-formats.native.js

@@ -5,5 +5,6 @@ import { bold } from './bold';
 import { italic } from './italic';
 import { link } from './link';
 import { strikethrough } from './strikethrough';
+import { textColor } from './text-color';
 
-export default [ bold, italic, link, strikethrough ];
+export default [ bold, italic, link, strikethrough, textColor ];

packages/format-library/src/text-color/index.native.js

@@ -0,0 +1,191 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { BlockControls, useSetting } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
+import { Icon, textColor as textColorIcon } from '@wordpress/icons';
+import { removeFormat } from '@wordpress/rich-text';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getActiveColors } from './inline.js';
+import { transparentValue } from './index.js';
+import { default as InlineColorUI } from './inline';
+import styles from './style.scss';
+
+const name = 'core/text-color';
+const title = __( 'Text color' );
+
+const EMPTY_ARRAY = [];
+
+function getComputedStyleProperty( element, property ) {
+	const {
+		props: { style = {} },
+	} = element;
+
+	if ( property === 'background-color' ) {
+		const { backgroundColor, baseColors } = style;
+
+		if ( backgroundColor !== 'transparent' ) {
+			return backgroundColor;
+		} else if ( baseColors && baseColors?.color?.background ) {
+			return baseColors?.color?.background;
+		}
+
+		return 'transparent';
+	}
+}
+
+function fillComputedColors( element, { color, backgroundColor } ) {
+	if ( ! color && ! backgroundColor ) {
+		return;
+	}
+
+	return {
+		color: color || getComputedStyleProperty( element, 'color' ),
+		backgroundColor: getComputedStyleProperty(
+			element,
+			'background-color'
+		),
+	};
+}
+
+function TextColorEdit( {
+	value,
+	onChange,
+	isActive,
+	activeAttributes,
+	contentRef,
+} ) {
+	const allowCustomControl = useSetting( 'color.custom' );
+	const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+	const [ isAddingColor, setIsAddingColor ] = useState( false );
+	const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [
+		setIsAddingColor,
+	] );
+	const disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [
+		setIsAddingColor,
+	] );
+	const colorIndicatorStyle = useMemo(
+		() =>
+			fillComputedColors(
+				contentRef,
+				getActiveColors( value, name, colors )
+			),
+		[ value, colors ]
+	);
+
+	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
+
+	const onPressButton = useCallback( () => {
+		if ( hasColorsToChoose ) {
+			enableIsAddingColor();
+		} else {
+			onChange( removeFormat( value, name ) );
+		}
+	}, [ hasColorsToChoose, value ] );
+
+	const outlineStyle = usePreferredColorSchemeStyle(
+		styles[ 'components-inline-color__outline' ],
+		styles[ 'components-inline-color__outline--dark' ]
+	);
+
+	if ( ! hasColorsToChoose && ! isActive ) {
+		return null;
+	}
+
+	const isActiveStyle = {
+		...colorIndicatorStyle,
+		...( ! colorIndicatorStyle?.backgroundColor
+			? { backgroundColor: 'transparent' }
+			: {} ),
+		...styles[ 'components-inline-color--is-active' ],
+	};
+
+	const customContainerStyles =
+		styles[ 'components-inline-color__button-container' ];
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					{ isActive && (
+						<View style={ outlineStyle } pointerEvents="none" />
+					) }
+
+					<ToolbarButton
+						name="text-color"
+						isActive={ isActive }
+						icon={
+							<Icon
+								icon={ textColorIcon }
+								style={
+									colorIndicatorStyle?.color && {
+										color: colorIndicatorStyle.color,
+									}
+								}
+							/>
+						}
+						title={ title }
+						extraProps={ {
+							isActiveStyle,
+							customContainerStyles,
+						} }
+						// If has no colors to choose but a color is active remove the color onClick
+						onClick={ onPressButton }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			{ isAddingColor && (
+				<InlineColorUI
+					name={ name }
+					onClose={ disableIsAddingColor }
+					activeAttributes={ activeAttributes }
+					value={ value }
+					onChange={ onChange }
+					contentRef={ contentRef }
+				/>
+			) }
+		</>
+	);
+}
+
+export const textColor = {
+	name,
+	title,
+	tagName: 'mark',
+	className: 'has-inline-color',
+	attributes: {
+		style: 'style',
+		class: 'class',
+	},
+	/*
+	 * Since this format relies on the <mark> tag, it's important to
+	 * prevent the default yellow background color applied by most
+	 * browsers. The solution is to detect when this format is used with a
+	 * text color but no background color, and in such cases to override
+	 * the default styling with a transparent background.
+	 *
+	 * @see https://github.com/WordPress/gutenberg/pull/35516
+	 */
+	__unstableFilterAttributeValue( key, value ) {
+		if ( key !== 'style' ) return value;
+		// We should not add a background-color if it's already set
+		if ( value && value.includes( 'background-color' ) ) return value;
+		const addedCSS = [ 'background-color', transparentValue ].join( ':' );
+		// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+		// rules will already include a `;`.
+		return value ? [ addedCSS, value ].join( ';' ) : addedCSS;
+	},
+	edit: TextColorEdit,
+};

packages/format-library/src/text-color/inline.js

@@ -42,7 +42,7 @@ function parseCSS( css = '' ) {
 	}, {} );
 }
 
-function parseClassName( className = '', colorSettings ) {
+export function parseClassName( className = '', colorSettings ) {
 	return className.split( ' ' ).reduce( ( accumulator, name ) => {
 		// `colorSlug` could contain dashes, so simply match the start and end.
 		if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {