[wp-trac] [WordPress Trac] #30031: Changing a ColorControl's setting via JS fails to update control's state

[WordPress Trac]

#30031: Changing a ColorControl's setting via JS fails to update control's state
--------------------------+-------------------------
 Reporter:  westonruter   |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.1
Component:  Customize     |     Version:  3.4
 Severity:  normal        |  Resolution:
 Keywords:  has-patch     |     Focuses:  javascript
--------------------------+-------------------------
Changes (by westonruter):

 * keywords:   => has-patch


Old description:

> In Twenty Fifteen, the `colorScheme` control has to dynamically change
> other Customizer settings for the colors based on which scheme is
> selected. It currently has to manually interact with the Customizer
> controls for these settings because changes to the underlying model is
> not resulting in an update to the color picker UI:
>
> {{{
> #!js
> var parentSection = this.container.closest( '.control-section' ),
>     backgroundColor  = parentSection.find( '#customize-control-
> background_color .color-picker-hex' );
> // ...
> backgroundColor.val( colorScheme[value].colors[0] )
> backgroundColor.wpColorPicker( 'color', colorScheme[value].colors[0] )
> }}}
>
> Likewise, if you open any instance of Customizer for any theme that has a
> background color, find the background color control and then enter these
> commands in the JS console one by one:
>
> {{{
> wp.customize('background_color').set( '#000000' )
> wp.customize('background_color').set( '#999999' )
> wp.customize('background_color').set( '#FFFFFF' )
> }}}
>
> You'll notice that the Customizer preview gets updated with the
> background color, but the controls do not. The `ColorControl` needs to be
> fixed to automatically  update the color picker state when the setting
> changes.

New description:

 In Twenty Fifteen, the `colorScheme` control has to dynamically change
 other Customizer settings for the colors based on which scheme is
 selected. It currently has to manually interact with the Customizer
 controls for these settings because changes to the underlying model is not
 resulting in an update to the color picker UI:

 {{{
 #!js
 var parentSection = this.container.closest( '.control-section' ),
     backgroundColor = parentSection.find( '#customize-control-
 background_color .color-picker-hex' );
 // ...
 backgroundColor.val( colorScheme[value].colors[0] )
 backgroundColor.wpColorPicker( 'color', colorScheme[value].colors[0] )
 }}}

 Likewise, if you open any instance of Customizer for any theme that has a
 background color, find the background color control and then enter these
 commands in the JS console one by one:

 {{{
 #!js
 wp.customize('background_color').set( '#000000' )
 wp.customize('background_color').set( '#999999' )
 wp.customize('background_color').set( '#FFFFFF' )
 }}}

 You'll notice that the Customizer preview gets updated with the background
 color, but the controls do not. The `ColorControl` needs to be fixed to
 automatically  update the color picker state when the setting changes.

--

Comment:

 In [attachment:30031.diff]:

  * Update `ColorControl`'s `wpColorPicker` to update UI based on setting
 changes
  * Update TwentyFifteen's `colorScheme` control to properly interact with
 the API, using `wp.customize.control()` instead of traversing DOM for
 other controls' container elements; also, now stop manually updating color
 control UIs since setting change will do this automatically now.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30031#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform