WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#30031 closed defect (bug) (fixed)

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

Reported by: westonruter Owned by: ocean90
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch
Focuses: javascript Cc:
PR Number:

Description (last modified by 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.

Attachments (1)

30031.diff (3.9 KB) - added by westonruter 5 years ago.
https://github.com/xwpco/wordpress-develop/pull/33

Download all attachments as: .zip

Change History (6)

#1 @westonruter
5 years ago

  • Description modified (diff)
  • Keywords has-patch added

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.

#2 @ocean90
5 years ago

  • Owner set to ocean90
  • Status changed from new to reviewing

This ticket was mentioned in Slack in #core by westonruter. View the logs.


5 years ago

This ticket was mentioned in Slack in #core by ocean90. View the logs.


5 years ago

#5 @ocean90
5 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

Note: See TracTickets for help on using tickets.