WP Color Picker Not Accepting All Variables

Hi there –

I have a fantastic implementation of the new wp-color-picker in my theme which allows the user to specify the little swatch colors themselves but I discovered that the strip, horiz, vert, width and mode vars have been hard-coded in color-picker.js and color-picker.min.js, leaving only the pallets var enabled.

Here’s the literal code I’m using:

var cp_preset_1 = $('#cp_preset_1').val();
var cp_preset_2 = $('#cp_preset_2').val();
var cp_preset_3 = $('#cp_preset_3').val();
var cp_preset_4 = $('#cp_preset_4').val();
var cp_preset_5 = $('#cp_preset_5').val();
var cp_preset_6 = $('#cp_preset_6').val();
var cp_preset_7 = $('#cp_preset_7').val();
var cp_preset_8 = $('#cp_preset_8').val();
var cp_preset_9 = $('#cp_preset_9').val();
var cp_preset_10 = $('#cp_preset_10').val();
var cp_preset_11 = $('#cp_preset_11').val();
var cp_preset_12 = $('#cp_preset_12').val();

var pickvars = {
	palettes: [cp_preset_1,cp_preset_2,cp_preset_3,cp_preset_4,cp_preset_5,cp_preset_6,cp_preset_7,cp_preset_8,cp_preset_9,cp_preset_10,cp_preset_11,cp_preset_12],
	mode: 'hsl',
	controls: { strip: 'h', horiz: 's', vert: 'l' },
	width: 400
};

$('.my-color-field').wpColorPicker(pickvars);

It works beautifully for the palettes, but it does not pick up the mode, controls or width values I’ve set because the core code does not appear to be set up to accept them. For example, in color-picker.min.js this is what we have:

target:h.pickerContainer,
hide:true,
width:255,
mode:"hsv",
palettes:h.options.palettes

You can see the palettes variable is set up to accept your vars, but the other two, width and mode are not. I tweaked that file so that width and mode would have similar functions and my pickvars then worked.

So my question is whether that was intentional or just a part of the iterative process? And will the core be updated to allow user vars for these in a future release? Or am I simply not specifying my vars in my js file correctly?

Thanks for the help 🙂