Spacing: make visualiser appear on focus

packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js

@@ -222,6 +222,8 @@ export default function SpacingInputControl( {
 					<UnitControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						onChange={ ( newSize ) =>
 							onChange( getNewCustomValue( newSize ) )
 						}
@@ -239,6 +241,8 @@ export default function SpacingInputControl( {
 					<RangeControl
 						onMouseOver={ onMouseOver }
 						onMouseOut={ onMouseOut }
+						onFocus={ onMouseOver }
+						onBlur={ onMouseOut }
 						value={ customRangeValue }
 						min={ 0 }
 						max={ CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10 }
@@ -277,6 +281,8 @@ export default function SpacingInputControl( {
 					label={ ariaLabel }
 					hideLabelFromVision={ true }
 					__nextHasNoMarginBottom={ true }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 			{ ! showRangeControl && ! showCustomValueControl && (
@@ -302,6 +308,8 @@ export default function SpacingInputControl( {
 					size={ '__unstable-large' }
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
+					onFocus={ onMouseOver }
+					onBlur={ onMouseOut }
 				/>
 			) }
 		</>

packages/components/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 -   `TabPanel`: Add ability to set icon only tab buttons ([#45005](https://github.com/WordPress/gutenberg/pull/45005)).
 -   `InputControl`, `NumberControl`, `UnitControl`: Add `help` prop for additional description ([#45931](https://github.com/WordPress/gutenberg/pull/45931)).
+-   `CustomSelectControl`, `UnitControl`: Add `onFocus` and `onBlur` props ([#46096](https://github.com/WordPress/gutenberg/pull/46096)).
 
 ### Experimental
 

packages/components/src/custom-select-control/README.md

@@ -145,6 +145,20 @@ A handler for onMouseOut events.
 -   Type: `Function`
 -   Required: No
 
+#### onFocus
+
+A handler for onFocus events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onBlur
+
+A handler for onBlur events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

packages/components/src/custom-select-control/index.js

@@ -79,6 +79,8 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		onFocus,
+		onBlur,
 		__experimentalShowSelectedHint = false,
 	} = props;
 
@@ -103,6 +105,16 @@ export default function CustomSelectControl( props ) {
 
 	const [ isFocused, setIsFocused ] = useState( false );
 
+	function handleOnFocus( e ) {
+		setIsFocused( true );
+		onFocus?.( e );
+	}
+
+	function handleOnBlur( e ) {
+		setIsFocused( false );
+		onBlur?.( e );
+	}
+
 	if ( ! __nextUnconstrainedWidth ) {
 		deprecated(
 			'Constrained width styles for wp.components.CustomSelectControl',
@@ -182,8 +194,8 @@ export default function CustomSelectControl( props ) {
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					as="button"
-					onFocus={ () => setIsFocused( true ) }
-					onBlur={ () => setIsFocused( false ) }
+					onFocus={ handleOnFocus }
+					onBlur={ handleOnBlur }
 					selectSize={ size }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					{ ...getToggleButtonProps( {

packages/components/src/unit-control/README.md

@@ -67,6 +67,12 @@ Callback invoked when either the quantity or unit inputs fire the `blur` event.
 
 -   Required: No
 
+### `onFocus`: `FocusEventHandler< HTMLInputElement | HTMLSelectElement >`
+
+Callback invoked when either the quantity or unit inputs fire the `focus` event.
+
+-   Required: No
+
 ### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
@@ -121,7 +127,9 @@ const Example = () => {
 		{ value: 'em', label: 'em', default: 0 },
 	];
 
-	return <UnitControl onChange={ setValue } value={ value } units={units} />;
+	return (
+		<UnitControl onChange={ setValue } value={ value } units={ units } />
+	);
 };
 ```
 

packages/components/src/unit-control/index.tsx

@@ -60,6 +60,7 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onBlur: onBlurProp,
+		onFocus: onFocusProp,
 		...props
 	} = unitControlProps;
 
@@ -244,6 +245,7 @@ function UnforwardedUnitControl(
 			unit={ unit }
 			units={ units }
 			onBlur={ onBlurProp }
+			onFocus={ onFocusProp }
 		/>
 	) : null;
 
@@ -277,6 +279,7 @@ function UnforwardedUnitControl(
 			value={ parsedQuantity ?? '' }
 			step={ step }
 			__unstableStateReducer={ stateReducer }
+			onFocus={ onFocusProp }
 		/>
 	);
 }

packages/components/src/unit-control/types.ts

@@ -99,4 +99,8 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * Callback when either the quantity or the unit inputs lose focus.
 		 */
 		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Callback when either the quantity or the unit inputs gains focus.
+		 */
+		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
 	};