Color Picker (iris) in widget – refresh when edited in Customizer


I have added the WordPress Core color picker (iris) to a widget I developed, but when I edit the color, there is no change triggered. As a result, the iframe (live preview) for the Customizer does not update unless you trigger a change in another input field.

JavaScript to initialize the color picker:

var myOptions = {
// you can declare a default color here,
// or in the data-default-color attribute on the input
defaultColor: '#000',
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){

// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
// or, supply an array of colors to customize further
palettes: true

// Add Color Picker to all inputs that have 'color-field' class $('.color-field').wpColorPicker(myOptions);

Note: I tested adding the code below to the change callback.

change: function(event, ui){

This will trigger a change and update the iframe when the user clicks the color picker, but it happens before the color value is saved.

Does anyone happen to know how to access the event after the color chosen has been saved?

, , scendo 4 years 2020-02-08T08:38:30-05:00 0 Answers 71 views 0

Leave an answer