wp-color-picker-alpha

[LebCit]

Hello,

Could you please add an example of Alpha Color with wp-color-picker-alpha ? This one overwrites Iris and WP Color Picker.

Side note : In The WordPress Customizer – A Developers Guide (Part 1), Under 1. Registering Customizer Content, The end of mytheme_customize_register is wrong. It should be a closing brace } and not a closing parentheses );

Thanks a lot for your time (digging in the core) and all your efforts bringing the Customizer much closer.

[maddisondesigns]

Thanks for pointing out that small error with the braces. I've fixed that up now.

If I get some time, I'll look into that wp-color-picker-alpha.

[maddisondesigns]

I've created a new control that uses the modified WP ColorPicker script. You can find the details of its usage in the readme file.

I've also update my original blog post with those usage details as well.

Just as a sidenote, you're not able to specify the default colour palette with this control (i.e. the small colour swatches at the bottom of the control). I tried getting that functionality to work but had some issues with getting the control to render properly. I'm pretty sure the default Color Control in Core doesn't support specifying those Palette options either so I'll need to look into it further to see if it's actually possible. It might be a limitation with WPColorPicker. I'm not sure yet so I'll need to do some more investigation. In the meantime though, the actual control with Alpha channel selection works as expected.

[maddisondesigns]

I've worked out how to specify the palette colours now, so I've updated the control to allow you to specify the 8 palette colours that appear at the bottom of the control.

The WPColorPicker script has issues when mixing HEX colours and RGBa colours in the palette. I recommend not mixing colours and either use all HEX values, or all RGBa values.

When specifying all Hex values in the Palette, it’s best to set 'resetalpha' => true (or just don’t specify this option as the default value is true). When using all RGBa values in the Palette, it’s best to set 'resetalpha' => false.

[ASL07]

Hi, I am trying to pass a palette to the control but it doesn't work. I followed the instructions on your blog. This is my control:

$wp_customize->add_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'primary_nav_text_color', array(
                    'label'      => __( 'Text color', 'rwp' ),
                    'section'    => 'primary_navigation_section',
                    'settings'   => 'primary_nav_text_color',
                    'input_attrs' => array(
                        'palette' => array(
                            '#aaaaaa',
                            '#ffffff',
                            '#dd3333',
                            '#dd9933',
                            '#eeee22',
                            '#81d742',
                            '#1e73be',
                            '#8224e3',
                        )
                    ),
                )
            )
        );

But the palette is not applied:

I have also tried to modify the colors of the default palette here and it does not make any difference either. Do you have any suggestions? :

class Skyrocket_Alpha_Color_Control extends WP_Customize_Control {
        /**
         * The type of control being rendered
         */
        public $type = 'wpcolorpicker-alpha-color';
        /**
         * ColorPicker Attributes
         */
        public $attributes = "";
        /**
         * Color palette defaults
         */
        public $defaultPalette = array(
            '#cf00ea',
            '#e82586',
            '#dd3333',
            '#dd9933',
            '#eeee22',
            '#81d742',
            '#1e73be',
            '#8224e3',
        );

[maddisondesigns]

@ASL07 This appears to be working fine for me.

I just copied your colours into my sample theme, and the palette changed as expected.

Here's a short vid of that: https://share.getcloudapp.com/geuWOeXr

Also, here's a screenshot of where I've changed the palette to a selection of greys, without any issue:

This is a sample theme with all my Custom Controls and all the default Customizer Controls, which you're welcome to download and try.

https://github.com/maddisondesigns/Customizer-Custom-Controls-Sample-Theme

And here's the code from that last screenshot:

$wp_customize->add_control( new Skyrocket_Alpha_Color_Control( $wp_customize, 'sample_wpcolorpicker_alpha_color',
    array(
        'label' => __( 'WP ColorPicker Alpha Color Picker', 'skyrocket' ),
        'description' => esc_html__( 'Sample color control with Alpha channel', 'skyrocket' ),
        'section' => 'sample_custom_controls_section',
        'input_attrs' => array(
            'palette' => array(
                '#aaaaaa',
                '#bbbbbb',
                '#cccccc',
                '#eeeeee',
                '#ffffff',
                '#333333',
                '#222222',
                '#000000',
            )
        ),
    )
) );