Kirki is conflicting with the native customizer controls

[guillaumemolter]

Issue description:

• I have a 3rd party plugin using WordPress Core customizer controls using html5 text inputs (number, urls)
• A section with controls and fields added by Kirki

My Kirki controls are working well, the 3rd party plugin controls are partially working but all the html5 text inputs (number, urls) are broken.

Without Kirki activated:

With Kirki activated:

Values are not showing, the number field is now a text field...etc...

Version used:

2.3.1

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

Add a section , control and setting using Wordpress Core constrols with a "number" type.
Add a random section with Kirki

[aristath]

Can you please send me a copy of that 3rd-party plugin so that I may replicate the issue?

[guillaumemolter]

Reproduce:

1. Clean install of wordpress 4.5, using Twenty15
2. Install the following code as a plugin:

<?php
/*
Plugin Name: Goodbye Dolly
Plugin URI: http://wordpress.org/plugins/hello-dolly/
Description: This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generation summed up in two words sung most famously by Louis Armstrong: Hello, Dolly. When activated you will randomly see a lyric from <cite>Hello, Dolly</cite> in the upper right of your admin screen on every page.
Version: 1.0
*/

class HSPH_Theme_Customize {

    public static function register ( $wp_customize ) {

        // add the hsph footer options section
        $wp_customize->add_section( 'hsph_footer_options',
            array(
                'title'      => __( 'Site Footer', 'hsph' ),
                'priority'   => 150,
            )
        );

        //1. Register new settings to the WP database...
        $wp_customize->add_setting( 'hsph_twitter_footer_link',
            array(
                'default' => '', //Default setting/value to save
                'type' => 'option', 
                'sanitize_callback' => 'esc_url_raw',
            )
        );

        //2. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
        $wp_customize->add_control( 'hsph_twitter_footer_link_control',
            array(
                'label'          => __( 'Twitter Link:', 'hsph' ),
                'section'        => 'hsph_footer_options',
                'settings'       => 'hsph_twitter_footer_link',
                'type'           => 'url',
            )
        );

        //1. Register new settings to the WP database...
        $wp_customize->add_setting( 'hsph_twitter_footer_tweets_count',
            array(
                'default' => 5, //Default setting/value to save
                'type' => 'option', 
                'sanitize_callback' => 'absint',
            )
        );

        //2. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)...
        $wp_customize->add_control( 'hsph_twitter_footer_tweets_count_control', //Set a unique ID for the control
            array(
                'label'          => __( 'Number of Tweets to show:', 'hsph' ),
                'section'        => 'hsph_footer_options',
                'settings'       => 'hsph_twitter_footer_tweets_count',
                'type'           => 'number',
                'input_attrs'    => array(
                    'min'  => 0,
                    'max'   => 10
                )
            )
        );



    }// end function register
} // end class HSPH_Theme_Customize

// Setup the Theme Customizer settings and controls...
add_action( 'customize_register' , array( 'HSPH_Theme_Customize' , 'register' ) );

3. go to customize, see it works and display correctly, add value save refresh...etc...it works
4. install Kirki plugin, activate
5. go back to customizer and notice that the fields are appearing differently and are "empty".

[guillaumemolter]

@aristath any clue? I'm pretty sure this was not an issue before 4.5. I haven't got time to reinstall a 4.4 and test. I'll try to test it later on today.

[guillaumemolter]

@aristath I'm 99% sure that the issue is on the PHP side, commenting https://github.com/aristath/kirki/blob/develop/includes/class-kirki-init.php#L106 solve the problem for the number field. Changing public $type = 'number'; to public $type = 'kirki-number'; inside of Kirki_Controls_Number_Control also solves the problem.

[aristath]

yup, the main issue is that all kirki controls need prefixing.
so instead of number it should be kirki-number etc so I'm prefixing all controls as we speak.

[guillaumemolter]

Yeah I think it safer to prefix everything internally. I'm still not entirely sure why it is a problem, the Customize Control should not really conflict with native controls...

[aristath]

part of the issue is the global.scss as well as some pretty old code... cleaning that up now.
It's just a bit time-consuming. I should have things fixed in a few hours

[aristath]

almost all controls have been prefixed (with a couple exceptions 'cause it's just too late and I'm sleepy).
I'll continue working on this tomorrow 👍

[guillaumemolter]

So I tried the dev branch on my local dev. It fixes the number field issue. However the look it still a little weird, because as you mentioned global.sass is still styling the other fields but not this one. I think it is king of risky to style fields that are not added via Kirki. A 3rd party dev could be using its own styling and Kirki would be conflicting. Should all sections/panels/fields html elements use a standard "kirki" class that would be used as prefix for all styling?

[guillaumemolter]

I think this should do the trick right?