How to refresh Theme Customizer after change color inside wpColorPicker?

Question

How to refresh Theme Customizer after change color inside wpColorPicker?

Kolya Korobochkin

2022年2月9日 15:07

I develop my custom widget with setting where I can set up custom color for the widget. I use this code to initialize wpColorPicker instead of default text input in form() method of Widget class:

jQuery(document).ready(function($){
    $('#?php echo $this-get_field_id( 'bg_color_1' ); ?').wpColorPicker();
});

All works great but if you are trying change the color in Theme Customizer after changing value nothing happens: the Save button still not active and site page not refreshing with the new color.

Previously trying for triggering change event, but not working:

$('#?php echo $this-get_field_id( 'bg_color_1' ); ?').wpColorPicker({
    change: function(event, ui) {
        $('#?php echo $this-get_field_id( 'bg_color_1' ); ?').change();
    }
});

How to reload the page preview (trigger the event when value inside my input have been changed)?

Topic theme-customizer color-picker widgets Wordpress javascript

Category Web

Hisham Dalal · Accepted Answer · 2020年8月14日 14:32

It's my same problem which solved with this code:

<?php

class my_widget extends WP_Widget 
{
    function __construct() 
    {   
        parent::__construct(__CLASS__, __('Title', TEXT_DOMAIN), array ( 'description' => __( 'Description', TEXT_DOMAIN ), ) );
    
        //...
        
        add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
        add_action( 'admin_footer-widgets.php', array( $this, 'print_widget_scripts' ), 9999 );
    }

    public function enqueue_scripts( $hook_suffix ) {
        if ( 'widgets.php' !== $hook_suffix ) {
            return;
        }

        wp_enqueue_style( 'wp-color-picker' );
        wp_enqueue_script( 'wp-color-picker' );
        wp_enqueue_script( 'underscore' );
    }   

    public function print_widget_scripts() {
        ?>
        <script>
            ( function( $ ){
                function initColorPicker( widget ) {
                    widget.find( '.color-picker' ).wpColorPicker( {
                        change: _.throttle( function() { // For Customizer
                            $(this).trigger( 'change' );
                        }, 3000 )
                    });
                }

                function onFormUpdate( event, widget ) {
                    initColorPicker( widget );
                }

                $( document ).on( 'widget-added widget-updated', onFormUpdate );

                $( document ).ready( function() {
                    $( '.widget:has(.color-picker)' ).each( function () {
                        initColorPicker( $( this ) );
                    } );
                } );
                
            }( jQuery ) );
        </script>
        <?php
    }   
}

Rachel Stinson · Accepted Answer · 2019年4月30日 07:31

Try using the existing WordPress function to modify color palette like:

function my_mce4_options( $init ) {
    $default_colours = '
        "000000", "Black",
        "993300", "Burnt orange",
        "333300", "Dark olive",
        "003300", "Dark green",
        "003366", "Dark azure",
        "000080", "Navy Blue",
        "333399", "Indigo",
        "333333", "Very dark gray",
        "800000", "Maroon",
        "FF6600", "Orange",
        "808000", "Olive",
        "008000", "Green",
        "008080", "Teal",
        "0000FF", "Blue",
        "666699", "Grayish blue",
        "808080", "Gray",
        "FF0000", "Red",
        "FF9900", "Amber",
        "99CC00", "Yellow green",
        "339966", "Sea green",
        "33CCCC", "Turquoise",
        "3366FF", "Royal blue",
        "800080", "Purple",
        "999999", "Medium gray",
        "FF00FF", "Magenta",
        "FFCC00", "Gold",
        "FFFF00", "Yellow",
        "00FF00", "Lime",
        "00FFFF", "Aqua",
        "00CCFF", "Sky blue",
        "993366", "Brown",
        "C0C0C0", "Silver",
        "FF99CC", "Pink",
        "FFCC99", "Peach",
        "FFFF99", "Light yellow",
        "CCFFCC", "Pale green",
        "CCFFFF", "Pale cyan",
        "99CCFF", "Light sky blue",
        "CC99FF", "Plum",
        "FFFFFF", "White"
        ';
    $custom_colours = '
        "e14d43", "Color 1 Name",
        "d83131", "Color 2 Name",
        "ed1c24", "Color 3 Name",
        "f99b1c", "Color 4 Name",
        "50b848", "Color 5 Name",
        "00a859", "Color 6 Name",
        "00aae7", "Color 7 Name",
        "282828", "Color 8 Name"
        ';
    $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
    $init['textcolor_rows'] = 6; // expand colour grid to 6 rows
    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

I hope this helps you out!

How to refresh Theme Customizer after change color inside wpColorPicker?

About