BoxControl Edit

This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

BoxControl components let users set values for Top, Right, Bottom, and Left. This can be used as an input control for values like padding or margin.

Usage

import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const Example = () => {
    const [ values, setValues ] = useState( {
        top: '50px',
        left: '10%',
        right: '10%',
        bottom: '50px',
    } );

    return (
        <BoxControl
            values={ values }
            onChange={ ( nextValues ) => setValues( nextValues ) }
        />
    );
};

Top ↑

Props

Top ↑

allowReset

If this property is true, a button to reset the box control is rendered.

  • Type: Boolean
  • Required: No
  • Default: true

Top ↑

splitOnAxis

If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.

  • Type: Boolean
  • Required: No
  • Default: false

Top ↑

inputProps

Props for the internal InputControl components.

  • Type: Object
  • Required: No

Top ↑

label

Heading label for BoxControl.

  • Type: String
  • Required: No
  • Default: Box Control

Top ↑

onChange

A callback function when an input value changes.

  • Type: Function
  • Required: Yes

Top ↑

resetValues

The top, right, bottom, and left box dimension values to use when the control is reset.

  • Type: Object
  • Required: No

Top ↑

sides

Collection of sides to allow control of. If omitted or empty, all sides will be available.

  • Type: Array<Object>
  • Required: No

Top ↑

units

Collection of available units which are compatible with UnitControl.

  • Type: Array<Object>
  • Required: No

Top ↑

values

The top, right, bottom, and left box dimension values.

  • Type: Object
  • Required: No