Changing a ColorControl's setting via JS fails to update control's state

[westonruter]

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:

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.

[westonruter]

​https://github.com/xwpco/wordpress-develop/pull/33

[westonruter]

In 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.

[ocean90]

In 30126:

Customizer: Improve ColorControl's wpColorPicker to update UI based on setting changes.

Update Twenty Fifteen's colorScheme control to properly interact with the API, using wp.customize.control() instead of traversing DOM for other controls' container elements and stop manually updating color control UIs.

props westonruter.
fixes #30031.