Clear with transport: auto

[Stas0238]

Issue description:

I noticed that clear button with transport auto as param not working properly. Can you guys take a look at this issue ?

Version used:

Version 3.0.45 WP (Did you try using the develop branch from GitHub? There's a chance your issue has already been addressed there)

Using theme_mods or options?

theme_mods

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

Kirki::add_field( 'my_theme_config', array(
    'type'        => 'color',
    'settings'    => 'my_color',
    'section'     => 'section_02',
    'choices'     => array (
        'alpha' => true
    ),
    'transport' => 'auto',
    'output' => array(
        array(
            'element' => '.top-header',
            'property' => 'border-color',
        ),
    ),
) );

[Stas0238]

@andreg @DannyCooper @aristath @felipeelia @manchumahara can anyone fix it ?

[felipeelia]

It seems to work good here on my end, @Stas0238. Can you please elaborate a bit further? Thanks!

[Stas0238]

@felipeelia yes it looks ok with simple colors but when I use multicontrol like background which has a part of color then clear button is not working - https://gyazo.com/05af00ba5ff193d2296c762ad24f1f09 Also I downloaded your demo https://github.com/aristath/kirki-demo and checked there. But the same deals go on https://gyazo.com/4726fba3fa4310a2bb144e0bf58202fb and with transport not set to auto was the same - it is not clearing on frontend

[felipeelia]

@Stas0238 it seems you're using a modified version of the demo, am I right? Don't you have a default set there, do you? Can you please share the exact code required to reproduce the error? Checking out the kirki-demo it seems to work properly. I've tried to combine two color fields affecting the same element (background-color and border-color) and it worked.

[Stas0238]

Yes, I made some changes just only to check if the reason of not clearing was not in my theme.

The code to reproduce below: Kirki::add_field( 'kirki_demo', [ 'type' => 'background', 'settings' => 'background_setting', 'label' => esc_html__( 'Background Control', 'kirki' ), 'description' => esc_html__( 'Background conrols are pretty complex - but extremely useful if properly used.', 'kirki' ), 'section' => 'color', 'default' => [ 'background-color' => '', 'background-image' => '', 'background-repeat' => '', 'background-position' => '', 'background-size' => '', 'background-attachment' => '', ], 'transport' => 'auto', 'output' => array( array( 'element' => '.control-section-demo.color-control .demo-color-container', ), array( 'choice' => 'background-color', 'element' => '#kirki-color', 'property' => 'background-color', ) ), ] );

[aristath]

Why don't you simply define a normal color instead of an empty string?

[aristath]

The clear in colors doesn't always work. It's not a bug, it's not a design flaw, it's just how it works because there is no other way for it to work. When there is a color already saved, CSS gets generated and that gets echoed in the head of the document. When you are in the customizer and you're changing colors, a new stylesheet gets appended to the head containing the new styles - and that overrides the ones that are already echoed via PHP. When the color in empty, naturally the browser just falls back to the previously valid value, and that is the value in the existing styles. "clear" will only work correctly if the previously saved value when you opened the customizer is empty, or if changing the value refreshes the preview instead of apply the styles via js. It can't work any other way - unless you custom-code something for your specific use-case. My advice would be to just use a normal value for default instead of leaving it empty. Even if the default value is rgba(0,0,0,0) which would make it transparent - therefore empty.

[Stas0238]

@aristath Thanks for so full answer. I have one more about it. How then it works good with simple color control, therefore from your logic only if previous value was empty then it will work good and if the value was already set up then the only way to get in clear is to set it up to rgba(0,0,0,0) but how does it work correct with simple color control ? the value in this control type works with empty value before and clear make it to empty as well ? ->

When you are in the customizer and you're changing colors, a new stylesheet gets appended to the head containing the new styles - and that overrides the ones that are already echoed via PHP. When the color in empty, naturally the browser just falls back to the previously valid value, and that is the value in the existing styles.

[aristath]

It has the same limitations. So if you save a color (not empty value), then exit the customizer and reopen it, it should have the same issue.

[Stas0238]

ok then i will use all my fields with default values. thanks for respond