`border-width` and `border-radius` are not working properly with the `dimensions` field

[rahulv3a]

Issue description:

border-width and border-radius are not working properly with the dimensions field

1. Customizer live preview doesn't work but CSS out does. When all values are changed to 10px, in the previw the following CSS is injected:

top-width: 10px;
bottom-width: 10px;
right-width: 10px;
left-width: 10px;
top-left-radius: 10px;
top-right-radius: 10px;
bottom-right-radius: 10px;
bottom-left-radius: 10px;

Notice that the border is missing in front of all properties. In the actual CSS output everything is ok.

2. Field labels are not corrent. They are

Version used:

Commit b2a192f 9 days ago

Using theme_mods or options?

theme_mods

Code to reproduce the issue (config + field(s))

Kirki::add_config( 'theme_config_id', array(
	'capability'    => 'edit_theme_options',
	'option_type'   => 'theme_mod',
) );

Kirki::add_field( 'theme_config_id', array(
	'type'        => 'dimensions',
	'settings'    => 'border_width_setting',
	'label'       => esc_attr__( 'Border Width', 'textdomain' ),
	'section'     => 'section_id',
	'default'     => [
		'top-width'    => '0px',
		'right-width'  => '0px',
		'bottom-width' => '0px',
		'left-width'   => '0px',
	],
	'choices'     => [
		'top-width'    => esc_attr__( 'Top', 'textdomain' ),
		'right-width'  => esc_attr__( 'Bottom', 'textdomain' ),
		'bottom-width' => esc_attr__( 'Left', 'textdomain' ),
		'left-width'   => esc_attr__( 'Right', 'textdomain' ),
	],
	'transport'   => 'auto',
	'output'      => [
		[
			'property' => 'border',
			'element'  => '.site-info',
		],
	],
) );


Kirki::add_field( 'theme_config_id', [
	'type'        => 'dimensions',
	'settings'    => 'border_radius_setting',
	'section'     => 'section_id',
	'label'       => esc_attr__( 'Border Radius', 'textdomain' ),
	'default'     => [
		'top-left-radius'     => '0px',
		'top-right-radius'    => '0px',
		'bottom-left-radius'  => '0px',
		'bottom-right-radius' => '0px',
	],
	'choices'     => [
		'top-left-radius'     => esc_attr__( 'Top Left', 'textdomain' ),
		'top-right-radius'    => esc_attr__( 'Top Right', 'textdomain' ),
		'bottom-left-radius'  => esc_attr__( 'Bottom Left', 'textdomain' ),
		'bottom-right-radius' => esc_attr__( 'Bottom Right', 'textdomain' ),
	],
	'transport'   => 'auto',
	'output'    => [
		[
			'property' => 'border',
			'element'  => '.site-info',
		],
	]
] );

[aristath]

Confirmed and marked as a bug.

[ariona]

Any update on this issue? my customizer output is only border not border-top-width etc.

[kadimi]

This seems to work:

In the field definition (replace my-selector with yours):

    // ...
    'output' => [
        [
            'element' => '.my-selector',
            'property' => '--my-selector-border-width',
        ],
    ],

And then in your CSS file (replace my-selector with yours):

:root {
    --my-selector-border-width-top: 0px;
    --my-selector-border-width-right: 0px;
    --my-selector-border-width-bottom: 0px;
    --my-selector-border-width-left: 0px;
}
.my-selector {
    border-width:
        var(--my-selector-border-width-top)
        var(--my-selector-border-width-right)
        var(--my-selector-border-width-bottom)
        var(--my-selector-border-width-left)
    ;
}

[mapsteps]

Hello and thank you for reporting this issue.

We are closing most open GitHub issues with the release of Kirki 4 to start fresh with this major release.

If you are still running into issues after you have tested your theme with Kirki 4, please let us know so we can reopen the issue.

Please note that Kirki 3 is no longer actively supported. Moving forward, we will only provide support the very latest version of Kirki.

Thank you for your understanding.

Best, David

[rahulv3a]

The issue persists with v4. Please reopen this one.