The Margin & Padding controls are 2 dedicated spacing controls. They work flawlessly with the output argument and allow you to specify a unit via the choices argument (see the Padding Control example below). The unit defaults to px if not specified.
The Margin & Padding controls are different from the Dimensions control as they share the same unit across all 4 possible values.
Margin Control
new \Kirki\Pro\Field\Margin(
[
'settings' => 'kirki_pro_margin',
'label' => esc_html__( 'Margin Control', 'kirki' ),
'section' => 'section_id',
'default' => [
'top' => 40,
'right' => 40,
'bottom' => 40,
'left' => 40,
],
'transport' => 'postMessage',
'output' => [
[
'element' => '.container',
],
],
]
);Padding Control
new \Kirki\Pro\Field\Padding(
[
'settings' => 'kirki_pro_padding',
'label' => esc_html__( 'Padding Control', 'kirki' ),
'description' => 'Example description.',
'section' => 'section_id',
'default' => [
'top' => 2,
'bottom' => 2,
],
'transport' => 'postMessage',
'tooltip' => esc_html__( 'Example tooltip', 'kirki' ),
'choices' => [
'unit' => 'em',
],
'output' => [
[
'element' => '.entry-title',
],
],
]
);Usage
To manually retrieve the margin/padding values, you can do something like this:
$margins = get_theme_mod( 'kirki_pro_margin', [] );
$margin_top = isset( $margins['top'] ) ? $margins['top'] : '';
$margin_right = isset( $margins['right'] ) ? $margins['right'] : '';
$margin_bottom = isset( $margins['bottom'] ) ? $margins['bottom'] : '';
$margin_left = isset( $margins['left'] ) ? $margins['left'] : '';