Cover Padding: Fix reset + hook namespace + Visualize on hover (#23041)

packages/block-editor/src/hooks/padding.js

@@ -37,7 +37,22 @@ export function PaddingEdit( props ) {
 	const onChange = ( next ) => {
 		const newStyle = {
 			...style,
-			padding: next,
+			spacing: {
+				padding: next,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const onChangeShowVisualizer = ( next ) => {
+		const newStyle = {
+			...style,
+			visualizers: {
+				padding: next,
+			},
 		};
 
 		setAttributes( {
@@ -49,8 +64,9 @@ export function PaddingEdit( props ) {
 		web: (
 			<>
 				<BoxControl
-					values={ style?.padding }
+					values={ style?.spacing?.padding }
 					onChange={ onChange }
+					onChangeShowVisualizer={ onChangeShowVisualizer }
 					label={ __( 'Padding' ) }
 					units={ units }
 				/>
@@ -61,8 +77,8 @@ export function PaddingEdit( props ) {
 }
 
 export const paddingStyleMappings = {
-	paddingTop: [ 'padding', 'top' ],
-	paddingRight: [ 'padding', 'right' ],
-	paddingBottom: [ 'padding', 'bottom' ],
-	paddingLeft: [ 'padding', 'left' ],
+	paddingTop: [ 'spacing', 'padding', 'top' ],
+	paddingRight: [ 'spacing', 'padding', 'right' ],
+	paddingBottom: [ 'spacing', 'padding', 'bottom' ],
+	paddingLeft: [ 'spacing', 'padding', 'left' ],
 };

packages/block-editor/src/hooks/style.js

@@ -74,11 +74,17 @@ export function getInlineStyles( styles = {} ) {
 	};
 
 	const output = {};
-	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
-		if ( has( styles, objectKey ) ) {
-			output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
+	Object.entries( mappings ).forEach(
+		( [ styleKey, ...otherObjectKeys ] ) => {
+			const [ objectKeys ] = otherObjectKeys;
+
+			if ( has( styles, objectKeys ) ) {
+				output[ styleKey ] = compileStyleValue(
+					get( styles, objectKeys )
+				);
+			}
 		}
-	} );
+	);
 
 	return output;
 }

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

@@ -475,7 +475,10 @@ function CoverEdit( {
 		<>
 			{ controls }
 			<Block.div className={ classes } data-url={ url } style={ style }>
-				<BoxControlVisualizer values={ styleAttribute?.padding } />
+				<BoxControlVisualizer
+					values={ styleAttribute?.spacing?.padding }
+					showValues={ styleAttribute?.visualizers?.padding }
+				/>
 				<ResizableCover
 					className="block-library-cover__resize-container"
 					onResizeStart={ () => {

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

@@ -111,7 +111,14 @@ Heading label for BoxControl.
 
 ### onChange
 
-A function that receives the values of the inputs.
+A callback function when an input value changes.
+
+-   Type: `Function`
+-   Required: Yes
+
+### onChangeShowVisualizer
+
+A callback function for visualizer changes, based on input hover interactions.
 
 -   Type: `Function`
 -   Required: Yes

packages/components/src/box-control/all-input-control.js

@@ -6,16 +6,19 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
-import { LABELS, getAllValue, isValuesMixed } from './utils';
+import { LABELS, getAllValue, isValuesMixed, isValuesDefined } from './utils';
 
 export default function AllInputControl( {
 	onChange = noop,
 	onFocus = noop,
+	onHoverOn = noop,
+	onHoverOff = noop,
 	values,
 	...props
 } ) {
 	const allValue = getAllValue( values );
-	const isMixed = isValuesMixed( values );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values );
 
 	const allPlaceholder = isMixed ? LABELS.mixed : null;
 
@@ -34,6 +37,24 @@ export default function AllInputControl( {
 		onChange( nextValues );
 	};
 
+	const handleOnHoverOn = () => {
+		onHoverOn( {
+			top: true,
+			bottom: true,
+			left: true,
+			right: true,
+		} );
+	};
+
+	const handleOnHoverOff = () => {
+		onHoverOff( {
+			top: false,
+			bottom: false,
+			left: false,
+			right: false,
+		} );
+	};
+
 	return (
 		<UnitControl
 			{ ...props }
@@ -42,6 +63,8 @@ export default function AllInputControl( {
 			value={ allValue }
 			onChange={ handleOnChange }
 			onFocus={ handleOnFocus }
+			onHoverOn={ handleOnHoverOn }
+			onHoverOff={ handleOnHoverOff }
 			placeholder={ allPlaceholder }
 		/>
 	);

packages/components/src/box-control/index.js

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -26,7 +26,12 @@ import {
 	Header,
 	HeaderControlWrapper,
 } from './styles/box-control-styles';
-import { DEFAULT_VALUES, isValuesMixed } from './utils';
+import {
+	DEFAULT_VALUES,
+	DEFAULT_VISUALIZER_VALUES,
+	isValuesMixed,
+	isValuesDefined,
+} from './utils';
 import { useControlledState } from '../utils/hooks';
 
 const defaultInputProps = {
@@ -43,17 +48,21 @@ export default function BoxControl( {
 	id: idProp,
 	inputProps = defaultInputProps,
 	onChange = noop,
+	onChangeShowVisualizer = noop,
 	label = __( 'Box Control' ),
-	values: valuesProp = DEFAULT_VALUES,
+	values: valuesProp,
 	units,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp );
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( valuesProp );
 
-	const [ isDirty, setIsDirty ] = useState( false );
-	const [ isLinked, setIsLinked ] = useState( ! isValuesMixed( values ) );
-	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
+	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues )
+	);
 
-	const initialValuesRef = useRef( values );
+	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
 
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
@@ -73,8 +82,16 @@ export default function BoxControl( {
 		setIsDirty( true );
 	};
 
+	const handleOnHoverOn = ( next = {} ) => {
+		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
+	};
+
+	const handleOnHoverOff = ( next = {} ) => {
+		onChangeShowVisualizer( { ...DEFAULT_VISUALIZER_VALUES, ...next } );
+	};
+
 	const handleOnReset = () => {
-		const initialValues = initialValuesRef.current;
+		const initialValues = DEFAULT_VALUES;
 
 		onChange( initialValues );
 		setValues( initialValues );
@@ -85,9 +102,11 @@ export default function BoxControl( {
 		...inputProps,
 		onChange: handleOnChange,
 		onFocus: handleOnFocus,
+		onHoverOn: handleOnHoverOn,
+		onHoverOff: handleOnHoverOff,
 		isLinked,
 		units,
-		values,
+		values: inputValues,
 	};
 
 	return (

packages/components/src/box-control/input-controls.js

@@ -13,13 +13,23 @@ import { LayoutContainer, Layout } from './styles/box-control-styles';
 export default function BoxInputControls( {
 	onChange = noop,
 	onFocus = noop,
+	onHoverOn = noop,
+	onHoverOff = noop,
 	values,
 	...props
 } ) {
 	const createHandleOnFocus = ( side ) => ( event ) => {
 		onFocus( event, { side } );
 	};
 
+	const createHandleOnHoverOn = ( side ) => () => {
+		onHoverOn( { [ side ]: true } );
+	};
+
+	const createHandleOnHoverOff = ( side ) => () => {
+		onHoverOff( { [ side ]: false } );
+	};
+
 	const handleOnChange = ( nextValues ) => {
 		onChange( nextValues );
 	};
@@ -69,20 +79,26 @@ export default function BoxInputControls( {
 					value={ top }
 					onChange={ createHandleOnChange( 'top' ) }
 					onFocus={ createHandleOnFocus( 'top' ) }
+					onHoverOn={ createHandleOnHoverOn( 'top' ) }
+					onHoverOff={ createHandleOnHoverOff( 'top' ) }
 					label={ LABELS.top }
 				/>
 				<UnitControl
 					{ ...props }
 					value={ right }
 					onChange={ createHandleOnChange( 'right' ) }
 					onFocus={ createHandleOnFocus( 'right' ) }
+					onHoverOn={ createHandleOnHoverOn( 'right' ) }
+					onHoverOff={ createHandleOnHoverOff( 'right' ) }
 					label={ LABELS.right }
 				/>
 				<UnitControl
 					{ ...props }
 					value={ bottom }
 					onChange={ createHandleOnChange( 'bottom' ) }
 					onFocus={ createHandleOnFocus( 'bottom' ) }
+					onHoverOn={ createHandleOnHoverOn( 'bottom' ) }
+					onHoverOff={ createHandleOnHoverOff( 'bottom' ) }
 					label={ LABELS.bottom }
 				/>
 				<UnitControl
@@ -91,6 +107,8 @@ export default function BoxInputControls( {
 					value={ left }
 					onChange={ createHandleOnChange( 'left' ) }
 					onFocus={ createHandleOnFocus( 'left' ) }
+					onHoverOn={ createHandleOnHoverOn( 'left' ) }
+					onHoverOff={ createHandleOnHoverOff( 'left' ) }
 					label={ LABELS.left }
 				/>
 			</Layout>

packages/components/src/box-control/stories/index.js

@@ -28,6 +28,8 @@ function DemoExample() {
 		left: '10px',
 	} );
 
+	const [ showVisualizer, setShowVisualizer ] = useState( {} );
+
 	return (
 		<Container align="top" gap={ 8 }>
 			<FlexBlock>
@@ -36,13 +38,17 @@ function DemoExample() {
 						label="Padding"
 						values={ values }
 						onChange={ setValues }
+						onChangeShowVisualizer={ setShowVisualizer }
 					/>
 				</Content>
 			</FlexBlock>
 			<FlexBlock>
 				<Content>
 					<BoxContainer>
-						<BoxControlVisualizer values={ values }>
+						<BoxControlVisualizer
+							showValues={ showVisualizer }
+							values={ values }
+						>
 							<Box />
 						</BoxControlVisualizer>
 					</BoxContainer>

packages/components/src/box-control/unit-control.js

@@ -1,3 +1,9 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+import { useHover } from 'react-use-gesture';
+
 /**
  * Internal dependencies
  */
@@ -8,12 +14,22 @@ export default function BoxUnitControl( {
 	isFirst,
 	isLast,
 	isOnly,
+	onHoverOn = noop,
+	onHoverOff = noop,
 	label,
 	value,
 	...props
 } ) {
+	const bindHoverGesture = useHover( ( { event, ...state } ) => {
+		if ( state.hovering ) {
+			onHoverOn( event, state );
+		} else {
+			onHoverOff( event, state );
+		}
+	} );
+
 	return (
-		<UnitControlWrapper aria-label={ label }>
+		<UnitControlWrapper aria-label={ label } { ...bindHoverGesture() }>
 			<Tooltip text={ label }>
 				<UnitControl
 					className="component-box-control__unit-control"