Color Picker not showing up

[Douglas Mitchell]

Hi, I'm trying to implement this into a theme I'm building, but I can't seem to get it to work, even with the example code you provided in the readme. All I get are plain text boxes with the color code inside and nothing happens when I click them.

I verified that the php file is getting fetched and that the css and js files are being loaded correctly. I have no errors in the console.

[Braad]

Hello MitchDoogle,

I'm happy to help you get it working. Can you share the code you're using to register one of your settings and controls, and how you're requiring/including the Alpha Color Picker?

It sounds like the JS isn't firing. Can you try putting console.log( 'Alpha Color Picker is firing' ); at the top of your alpha-color-picker.js file and tell me if you see "Alpha Color Picker is firing" in the console after a page refresh?

One gotcha is that you need to update the paths used in alpha-color-picker.php:

    public function enqueue() {
        wp_enqueue_script(
            'alpha-color-picker',
            UPDATE_THIS_PATH . 'alpha-color-picker/alpha-color-picker.js',
            array( 'jquery', 'wp-color-picker' ),
            '1.0.0',
            true
        );
        wp_enqueue_style(
            'alpha-color-picker',
            UPDATE_THIS_PATH . 'alpha-color-picker/alpha-color-picker.css',
            array( 'wp-color-picker' ),
            '1.0.0'
        );
    }

I should be able to tell what is going on if you can share your code for adding the settings and controls and including the Alpha Color Picker.

-Braad

[Douglas Mitchell]

Thanks for helping,

I am including the Alpha Color Picker with this line:

require_once( dirname( __FILE__ ) . '\alpha-color-picker.php' );

because I've located the color picker in the same directory as my customizer functions php file. I verified it is loading with an echo call. Here is how I add a new setting for Alpha Color Picker:

$wp_customize->add_setting( 'billboard-msg-font-color',
        array(
            'default'     => 'rgba(209,0,55,0.7)',
            'type'        => 'theme_mod',
            'capability'  => 'edit_theme_options',
            'transport'   => 'postMessage'
        )
    );
$wp_customize->add_control( new Customize_Alpha_Color_Control( 
        $wp_customize, 'billboard-msg-font-color', 
            array(
                'label'     => __( 'Billboard Message Text Color', 'b2b_s' ),
                'section'   => 'b2b_s_home_page_styles',
                'settings'  => 'billboard-msg-font-color',
                'show_opacity' => true,
                'palette'   => 
                array (
                    'rgba(0,0,0,0.5)',
                    'rgba(255,255,255,0.5)',
                    'rgb(100,100,200)',
                    '#2aa4d4'
                )
            ) 
        ) 
    );

Both the js and css file are loading with the customizer page and the console displays the message as expected when I add

console.log('Alpha Color Picker is firing!');

to the javascript file.

[Braad]

Hmm, the code you've shared looks good. The only thing that stands out to me is using hyphens instead of underscores (billboard-msg-font-color vs. billboard_msg_font_color) as your setting ID, but I can't find anything that says this isn't allowed, so maybe it's fine.

There are a couple more things that we can check to confirm everything is in the right place. Fundamentally, the Alpha Color Picker control outputs a text input with the class alpha-color-picker, then in alpha-color-picker.js we do this:

// Loop over each control and transform it into our color picker.
$( '.alpha-color-control' ).each( function() {
    // Transform our text inputs into color pickers...
}

If you are seeing <input class="alpha-color-control" /> as the HTML of the text inputs that are outputting, then the HTML is ready for the JS to come along and do its thing, so the issue must be that the JS isn't firing on it correctly. Inside alpha-color-picker.js you can try:

// Loop over each control and transform it into our color picker.
$( '.alpha-color-control' ).each( function() {
    console.log( this );

Then look in the console, and if you nothing then you know that the $( '.alpha-color-control' ) part isn't matching anything, and if you see your text inputs then the issue is further down in the JS.

If you aren't seeing any of the inputs printing in the console when you add that code, try typing jQuery( '.alpha-color-control' ) directly into the console. This will return any elements that match that selector, and if it does match then it means that the control JS might not be firing at the right time or at all, and if it doesn't match it means there is an issue with the inputs getting the right class.

One other thing to verify, the alpha-color-picker.js file needs to be loading in the Customizer itself rather than the site preview iframe. It should be loading in the correct place if you used the enqueue function in the Customize_Alpha_Color_Control class, but if you used wp_enqueue_script directly outside of that function then it might be loading in the preview. If you share your enqueue function code I'll be able to tell whether there are any issues there.

If you're on the WordPress Slack team you're welcome to reach out to me there also. My username there is Braad. Then you could send me your complete code and I can try it out myself and see if I can figure out the issue.

[Braad]

Closing this since I haven't heard from you in a while.