Format Library: Clean up 'Highlight' format components (#62965)

Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: ellatrix <[email protected]>

Author: Mamaduka

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
 import {
 	Icon,
@@ -66,21 +66,13 @@ function TextColorEdit( {
 		'color.palette'
 	);
 	const [ isAddingColor, setIsAddingColor ] = useState( false );
-	const enableIsAddingColor = useCallback(
-		() => setIsAddingColor( true ),
-		[ setIsAddingColor ]
-	);
-	const disableIsAddingColor = useCallback(
-		() => setIsAddingColor( false ),
-		[ setIsAddingColor ]
-	);
 	const colorIndicatorStyle = useMemo(
 		() =>
 			fillComputedColors(
 				contentRef.current,
 				getActiveColors( value, name, colors )
 			),
-		[ value, colors ]
+		[ contentRef, value, colors ]
 	);
 
 	const hasColorsToChoose = colors.length || ! allowCustomControl;
@@ -107,15 +99,15 @@ function TextColorEdit( {
 				// If has no colors to choose but a color is active remove the color onClick.
 				onClick={
 					hasColorsToChoose
-						? enableIsAddingColor
+						? () => setIsAddingColor( true )
 						: () => onChange( removeFormat( value, name ) )
 				}
 				role="menuitemcheckbox"
 			/>
 			{ isAddingColor && (
 				<InlineColorUI
 					name={ name }
-					onClose={ disableIsAddingColor }
+					onClose={ () => setIsAddingColor( false ) }
 					activeAttributes={ activeAttributes }
 					value={ value }
 					onChange={ onChange }

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

@@ -7,7 +7,7 @@ import { StyleSheet, View } from 'react-native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo, useState } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import {
 	BlockControls,
 	useSettings,
@@ -72,33 +72,17 @@ function TextColorEdit( {
 	const [ allowCustomControl ] = useSettings( 'color.custom' );
 	const colors = useMobileGlobalStylesColors();
 	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 ]
+		[ contentRef, value, colors ]
 	);
 
 	const hasColorsToChoose = colors.length || ! allowCustomControl;
 
-	const onPressButton = useCallback( () => {
-		if ( hasColorsToChoose ) {
-			enableIsAddingColor();
-		} else {
-			onChange( removeFormat( value, name ) );
-		}
-	}, [ hasColorsToChoose, value ] );
-
 	const outlineStyle = [
 		usePreferredColorSchemeStyle(
 			styles[ 'components-inline-color__outline' ],
@@ -153,14 +137,18 @@ function TextColorEdit( {
 							customContainerStyles,
 						} }
 						// If has no colors to choose but a color is active remove the color onClick
-						onClick={ onPressButton }
+						onClick={
+							hasColorsToChoose
+								? () => setIsAddingColor( true )
+								: () => onChange( removeFormat( value, name ) )
+						}
 					/>
 				</ToolbarGroup>
 			</BlockControls>
 			{ isAddingColor && (
 				<InlineColorUI
 					name={ name }
-					onClose={ disableIsAddingColor }
+					onClose={ () => setIsAddingColor( false ) }
 					activeAttributes={ activeAttributes }
 					value={ value }
 					onChange={ onChange }

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import {
 	applyFormat,
@@ -129,14 +129,6 @@ function ColorPicker( { name, property, value, onChange } ) {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().colors ?? [];
 	}, [] );
-	const onColorChange = useCallback(
-		( color ) => {
-			onChange(
-				setColors( value, name, colors, { [ property ]: color } )
-			);
-		},
-		[ colors, onChange, property ]
-	);
 	const activeColors = useMemo(
 		() => getActiveColors( value, name, colors ),
 		[ name, value, colors ]
@@ -145,7 +137,11 @@ function ColorPicker( { name, property, value, onChange } ) {
 	return (
 		<ColorPalette
 			value={ activeColors[ property ] }
-			onChange={ onColorChange }
+			onChange={ ( color ) => {
+				onChange(
+					setColors( value, name, colors, { [ property ]: color } )
+				);
+			} }
 		/>
 	);
 }