BoxControl: Allow configurable sides

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

@@ -14,6 +14,7 @@ export default function AllInputControl( {
 	onHoverOn = noop,
 	onHoverOff = noop,
 	values,
+	sides,
 	...props
 } ) {
 	const allValue = getAllValue( values );
@@ -26,13 +27,15 @@ export default function AllInputControl( {
 		onFocus( event, { side: 'all' } );
 	};
 
+	const isSideDisabled = ( side ) => sides && sides[ side ] === false;
+
 	const handleOnChange = ( next ) => {
 		const nextValues = { ...values };
 
-		nextValues.top = next;
-		nextValues.bottom = next;
-		nextValues.left = next;
-		nextValues.right = next;
+		nextValues.top = isSideDisabled( 'top' ) ? values.top : next;
+		nextValues.right = isSideDisabled( 'right' ) ? values.right : next;
+		nextValues.bottom = isSideDisabled( 'bottom' ) ? values.bottom : next;
+		nextValues.left = isSideDisabled( 'left' ) ? values.left : next;
 
 		onChange( nextValues );
 	};

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

@@ -15,12 +15,22 @@ const BASE_ICON_SIZE = 24;
 export default function BoxControlIcon( {
 	size = 24,
 	side = 'all',
+	sides,
 	...props
 } ) {
-	const top = getSide( side, 'top' );
-	const right = getSide( side, 'right' );
-	const bottom = getSide( side, 'bottom' );
-	const left = getSide( side, 'left' );
+	const isSideDisabled = ( value ) => sides && sides[ value ] === false;
+	const getSide = ( value ) => {
+		if ( isSideDisabled( value ) ) {
+			return false;
+		}
+
+		return side === 'all' || side === value;
+	};
+
+	const top = getSide( 'top' );
+	const right = getSide( 'right' );
+	const bottom = getSide( 'bottom' );
+	const left = getSide( 'left' );
 
 	// Simulates SVG Icon scaling
 	const scale = size / BASE_ICON_SIZE;
@@ -36,7 +46,3 @@ export default function BoxControlIcon( {
 		</Root>
 	);
 }
-
-function getSide( side, value ) {
-	return side === 'all' || side === value;
-}

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

@@ -7,7 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
+import { useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -51,13 +51,22 @@ export default function BoxControl( {
 	label = __( 'Box Control' ),
 	values: valuesProp,
 	units,
+	sides,
+	resetToInitialValues = false,
 } ) {
 	const [ values, setValues ] = useControlledState( valuesProp, {
 		fallback: DEFAULT_VALUES,
 	} );
 	const inputValues = values || DEFAULT_VALUES;
 	const hasInitialValue = isValuesDefined( valuesProp );
 
+	// Determine which values the reset button should apply.
+	// Global styles generally prefer to reset to the initial value likely
+	// coming from a theme.
+	const resetValues = useRef(
+		resetToInitialValues && valuesProp ? valuesProp : DEFAULT_VALUES
+	);
+
 	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
 	const [ isLinked, setIsLinked ] = useState(
 		! hasInitialValue || ! isValuesMixed( inputValues )
@@ -92,10 +101,8 @@ export default function BoxControl( {
 	};
 
 	const handleOnReset = () => {
-		const initialValues = DEFAULT_VALUES;
-
-		onChange( initialValues );
-		setValues( initialValues );
+		onChange( resetValues.current );
+		setValues( resetValues.current );
 		setIsDirty( false );
 	};
 
@@ -107,6 +114,7 @@ export default function BoxControl( {
 		onHoverOff: handleOnHoverOff,
 		isLinked,
 		units,
+		sides,
 		values: inputValues,
 	};
 
@@ -135,7 +143,7 @@ export default function BoxControl( {
 			</Header>
 			<HeaderControlWrapper className="component-box-control__header-control-wrapper">
 				<FlexItem>
-					<BoxControlIcon side={ side } />
+					<BoxControlIcon side={ side } sides={ sides } />
 				</FlexItem>
 				{ isLinked && (
 					<FlexBlock>

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

@@ -10,12 +10,38 @@ import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
+const getFirstLastAndOnlySides = ( sides ) => {
+	// Handle default config allowing all sides to be configured.
+	if ( ! sides ) {
+		return { first: 'top', last: 'left', only: undefined };
+	}
+
+	let first, last;
+
+	// Check which sides have been opted-into to determine which are first,
+	// last & only.
+	[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+		if ( sides && sides[ side ] ) {
+			if ( ! first ) {
+				first = side;
+			}
+
+			last = side;
+		}
+	} );
+
+	const only = first === last && first;
+
+	return { first, last, only };
+};
+
 export default function BoxInputControls( {
 	onChange = noop,
 	onFocus = noop,
 	onHoverOn = noop,
 	onHoverOff = noop,
 	values,
+	sides,
 	...props
 } ) {
 	const createHandleOnFocus = ( side ) => ( event ) => {
@@ -66,51 +92,72 @@ export default function BoxInputControls( {
 		handleOnChange( nextValues );
 	};
 
+	const isSideDisabled = ( side ) => sides && sides[ side ] === false;
+	const { first, last, only } = getFirstLastAndOnlySides( sides );
+
 	return (
 		<LayoutContainer className="component-box-control__input-controls-wrapper">
 			<Layout
 				gap={ 0 }
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				<UnitControl
-					{ ...props }
-					isFirst
-					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
-					{ ...props }
-					isLast
-					value={ left }
-					onChange={ createHandleOnChange( 'left' ) }
-					onFocus={ createHandleOnFocus( 'left' ) }
-					onHoverOn={ createHandleOnHoverOn( 'left' ) }
-					onHoverOff={ createHandleOnHoverOff( 'left' ) }
-					label={ LABELS.left }
-				/>
+				{ ! isSideDisabled( 'top' ) && (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === 'top' }
+						isLast={ last === 'top' }
+						isOnly={ only === 'top' }
+						value={ top }
+						onChange={ createHandleOnChange( 'top' ) }
+						onFocus={ createHandleOnFocus( 'top' ) }
+						onHoverOn={ createHandleOnHoverOn( 'top' ) }
+						onHoverOff={ createHandleOnHoverOff( 'top' ) }
+						label={ LABELS.top }
+					/>
+				) }
+				{ ! isSideDisabled( 'right' ) && (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === 'right' }
+						isLast={ last === 'right' }
+						isOnly={ only === 'right' }
+						value={ right }
+						onChange={ createHandleOnChange( 'right' ) }
+						onFocus={ createHandleOnFocus( 'right' ) }
+						onHoverOn={ createHandleOnHoverOn( 'right' ) }
+						onHoverOff={ createHandleOnHoverOff( 'right' ) }
+						label={ LABELS.right }
+					/>
+				) }
+				{ ! isSideDisabled( 'bottom' ) && (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === 'bottom' }
+						isLast={ last === 'bottom' }
+						isOnly={ only === 'bottom' }
+						value={ bottom }
+						onChange={ createHandleOnChange( 'bottom' ) }
+						onFocus={ createHandleOnFocus( 'bottom' ) }
+						onHoverOn={ createHandleOnHoverOn( 'bottom' ) }
+						onHoverOff={ createHandleOnHoverOff( 'bottom' ) }
+						label={ LABELS.bottom }
+					/>
+				) }
+				{ ! isSideDisabled( 'left' ) && (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === 'left' }
+						isLast={ last === 'left' }
+						isOnly={ only === 'left' }
+						value={ left }
+						onChange={ createHandleOnChange( 'left' ) }
+						onFocus={ createHandleOnFocus( 'left' ) }
+						onHoverOn={ createHandleOnHoverOn( 'left' ) }
+						onHoverOff={ createHandleOnHoverOff( 'left' ) }
+						label={ LABELS.left }
+					/>
+				) }
 			</Layout>
 		</LayoutContainer>
 	);

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

@@ -40,6 +40,7 @@ export const Layout = styled( Flex )`
 	position: relative;
 	height: 100%;
 	width: 100%;
+	justify-content: flex-start;
 `;
 
 const unitControlBorderRadiusStyles = ( { isFirst, isLast, isOnly } ) => {

packages/components/src/input-control/input-field.js

@@ -71,7 +71,7 @@ function InputField(
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
 	/*
-	 * Handles syncronization of external and internal value state.
+	 * Handles synchronization of external and internal value state.
 	 * If not focused and did not hold a dirty value[1] on blur
 	 * updates the value from the props. Otherwise if not holding
 	 * a dirty value[1] propagates the value and event through onChange.
@@ -155,6 +155,9 @@ function InputField(
 	const dragGestureProps = useDrag(
 		( dragProps ) => {
 			const { distance, dragging, event } = dragProps;
+			// The event is persisted to prevent errors in components using this
+			// to check if a modifier key was held while dragging.
+			event.persist();
 
 			if ( ! distance ) return;
 			event.stopPropagation();