DimensionControl

DimensionControl is a component designed to provide a UI to control spacing and/or dimensions.

Usage

import { useState } from 'react';
import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';

export default function MyCustomDimensionControl() {
    const [ paddingSize, setPaddingSize ] = useState( '' );

    return (
        <DimensionControl
            __nextHasNoMarginBottom
            __next40pxDefaultSize
            label={ 'Padding' }
            icon={ 'desktop' }
            onChange={ ( value ) => setPaddingSize( value ) }
            value={ paddingSize }
        />
    );
}

Note: by default, if you do not provide an initial value prop for the current dimension value, then no value will be selected (ie: there is no default dimension set).

Props

label

• Type: string
• Required: Yes

The human readable label for the control.

value

• Type: string
• Required: No

The current value of the dimension UI control. If provided the UI with automatically select the value.

sizes

• Type: { name: string; slug: string }[]
• Default: See packages/block-editor/src/components/dimension-control/sizes.ts
• Required: No

An optional array of size objects in the following shape:

[
    {
        name: __( 'Small' ),
        slug: 'small',
    },
        {
        name: __( 'Medium' ),
        slug: 'small',
    },
    // ...etc
]

By default a set of relative sizes (small, medium…etc) are provided. See packages/block-editor/src/components/dimension-control/sizes.js.

icon

• Type: string
• Required: No

An optional dashicon to display before to the control label.

onChange

• Type: ( value?: string ) => void;
• Required: No
• Arguments::
  • size – a string representing the selected size (eg: medium)

A callback which is triggered when a spacing size value changes (is selected/clicked).

className

• Type: string
• Default: ''
• Required: No

A string of classes to be added to the control component.

__next40pxDefaultSize

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

Start opting into the larger default height that will become the default size in a future version.

__nextHasNoMarginBottom

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

Start opting into the new margin-free styles that will become the default in a future version.