Make WordPress Core

Opened 7 years ago

Closed 5 years ago

#30964 closed defect (bug) (maybelater)

Color picker doesn't handles empty values from javascript correctly

Reported by: katazina Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.1
Component: Customize Keywords: reporter-feedback has-patch
Focuses: javascript Cc:

Description

I have one template which is highly customizable and I created "subtemplates" from that by javascript using the wp.customize api. (more detail: #30951)

If I set empty for color in one subtemplate and I changed from a subtemplate which had this color set, then the color value is empty, but the color box, beside the input is colored.
api.instance('background_color').set(''); <- I mean that for empty

I attached an image about this.

  1. Left to the "Current Color" text, the box is colored, (not correct behaviour)
  2. but no hexa value is added. (correct behaviour)

Attachments (2)

wp-customizer-color-picker.jpg (12.8 KB) - added by katazina 7 years ago.
30964.diff (498 bytes) - added by dlh 5 years ago.

Download all attachments as: .zip

Change History (7)

#1 @westonruter
7 years ago

  • Keywords reporter-feedback added
  • Milestone changed from Awaiting Review to Future Release

Currently the ColorControl is doing this when the setting changes:

this.setting.bind( function ( value ) {
        picker.val( value );
        picker.wpColorPicker( 'color', value );
});

From looking the wpColorPicker JS, I think we are missing something. It looks like maybe what needs to happen is this:

this.setting.bind( function ( value ) {
        picker.val( value );
        if ( ! value ) {
                value = picker.wpColorPicker( 'defaultColor' ); // best option to reset the UI for color picker?
        }
        picker.wpColorPicker( 'color', value );
});

It looks like maybe the Iris library doesn't support a UI with an unset value.

Please try it out, and see if this is the answer.

@dlh
5 years ago

#2 @dlh
5 years ago

  • Keywords has-patch added

wpColorPicker contains some logic that could handle this situation. One of them is to trigger a change event on the colorpicker's element, which is the approach in 30964.diff.

Alternatively, the background color could be set manually, or a separate function could be added to ColorPicker for clearing the color and firing callbacks.

#3 @westonruter
5 years ago

@mattwiebe Do you have any feedback on the the problem and fix?

This ticket was mentioned in Slack in #core-customize by melchoyce. View the logs.


5 years ago

#5 @melchoyce
5 years ago

  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.