diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index 275424e0d4..0ea60ceee2 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/wp-admin/js/customize-controls.js @@ -869,6 +869,11 @@ control.setting.set( false ); } }); + + this.setting.bind( function ( value ) { + picker.val( value ); + picker.wpColorPicker( 'color', value ); + }); } }); diff --git a/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js b/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js index 560d9775f3..94c575385c 100644 --- a/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js +++ b/src/wp-content/themes/twentyfifteen/js/color-scheme-control.js @@ -5,48 +5,38 @@ * Adds listener to Color Scheme control to update other color controls with new values/defaults */ -( function( wp ) { - wp.customize.controlConstructor.select = wp.customize.Control.extend( { +( function( api ) { + api.controlConstructor.select = api.Control.extend( { ready: function() { if ( 'color_scheme' === this.id ) { - var parentSection = this.container.closest( '.control-section' ), - headerTextColor = parentSection.find( '#customize-control-header_textcolor .color-picker-hex' ), - backgroundColor = parentSection.find( '#customize-control-background_color .color-picker-hex' ), - sidebarColor = parentSection.find( '#customize-control-header_background_color .color-picker-hex' ), - sidebarTextColor = parentSection.find( '#customize-control-sidebar_textcolor .color-picker-hex' ); - this.setting.bind( 'change', function( value ) { - // if Header Text is not hidden, update value - if ( 'blank' !== wp.customize( 'header_textcolor' ).get() ) { - wp.customize( 'header_textcolor' ).set( colorScheme[value].colors[4] ); - headerTextColor.val( colorScheme[value].colors[4] ) + // If Header Text is not hidden, update value. + if ( 'blank' !== api( 'header_textcolor' ).get() ) { + api( 'header_textcolor' ).set( colorScheme[value].colors[4] ); + api.control( 'header_textcolor' ).container.find( '.color-picker-hex' ) .data( 'data-default-color', colorScheme[value].colors[4] ) - .wpColorPicker( 'color', colorScheme[value].colors[4] ) .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] ); } - // update Background Color - wp.customize( 'background_color' ).set( colorScheme[value].colors[0] ); - backgroundColor.val( colorScheme[value].colors[0] ) + // Update Background Color. + api( 'background_color' ).set( colorScheme[value].colors[0] ); + api.control( 'background_color' ).container.find( '.color-picker-hex' ) .data( 'data-default-color', colorScheme[value].colors[0] ) - .wpColorPicker( 'color', colorScheme[value].colors[0] ) .wpColorPicker( 'defaultColor', colorScheme[value].colors[0] ); - // update Header/Sidebar Background Color - wp.customize( 'header_background_color' ).set( colorScheme[value].colors[1] ); - sidebarColor.val( colorScheme[value].colors[1] ) + // Update Header/Sidebar Background Color. + api( 'header_background_color' ).set( colorScheme[value].colors[1] ); + api.control( 'header_background_color' ).container.find( '.color-picker-hex' ) .data( 'data-default-color', colorScheme[value].colors[1] ) - .wpColorPicker( 'color', colorScheme[value].colors[1] ) .wpColorPicker( 'defaultColor', colorScheme[value].colors[1] ); - // update Sidebar Text Color - wp.customize( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] ); - sidebarTextColor.val( colorScheme[value].colors[4] ) + // Update Sidebar Text Color. + api( 'sidebar_textcolor' ).set( colorScheme[value].colors[4] ); + api.control( 'sidebar_textcolor' ).container.find( '.color-picker-hex' ) .data( 'data-default-color', colorScheme[value].colors[4] ) - .wpColorPicker( 'color', colorScheme[value].colors[4] ) .wpColorPicker( 'defaultColor', colorScheme[value].colors[4] ); } ); } } } ); -} )( this.wp ); \ No newline at end of file +} )( wp.customize );