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

Examples

Controlling width and height:

new \Kirki\Field\Dimensions(
	[
		'settings'    => 'setting_dimensions_1',
		'label'       => esc_html__( 'Dimensions Control', 'kirki' ),
		'description' => esc_html__( 'Description', 'kirki' ),
		'section'     => 'section_id',
		'default'     => [
			'width'  => '100px',
			'height' => '100px',
		],
	]
);

Controlling padding:

new \Kirki\Field\Dimensions(
	[
		'settings'    => 'setting_dimensions_2',
		'label'       => esc_html__( 'Dimension Control', 'kirki' ),
		'description' => esc_html__( '4 fields - would typically be used for padding or margin', '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 code snippet like this:

new \Kirki\Field\Dimensions(
	[
		'settings'    => 'setting_dimensions_3',
		'label'       => esc_html__( 'Dimension Control', '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' ),
			],
		],
	]
);