The dimensions control allows you to control multiple dimensions on the same control. You can define the properties it will use in the field’s default argument.

Examples

Controlling the width and height:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'dimensions_1',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'section_id',
	'default'     => [
		'width'  => '100px',
		'height' => '100px',
	],
] );

Controlling the padding:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'dimensions_2',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'section_id',
	'default'     => [
		'padding-top'    => '1em',
		'padding-bottom' => '10rem',
		'padding-left'   => '1vh',
		'padding-right'  => '10px',
	],
] );

You can use any dimensions and define the labels using a snippet like this:

Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'dimensions_3',
	'label'       => esc_html__( 'Dimension Control', 'kirki' ),
	'description' => esc_html__( 'Description Here.', 'kirki' ),
	'section'     => 'section_id',
	'default'     => [
		'min-width'  => '100px',
		'max-width'  => '500px',
		'min-height' => '50px',
		'max-height' => '10em',
	],
	'choices'     => [
		'labels' => [
			'min-width'  => esc_html__( 'Min Width', 'kirki' ),
			'max-width'  => esc_html__( 'Max Width', 'kirki' ),
			'min-height' => esc_html__( 'Min Height', 'kirki' ),
			'max-height' => esc_html__( 'Max Height', 'kirki' ),
		],
	],
] );