Rena Kamariotakis

Ok, sorry. I don’t know which forum it should have been posted to. But at least now you guys are aware of the issue and can follow up with it if you choose to.

It’s not new to 4.0, but I just discovered the bug and I thought I would bring it up in case the wordpress developers want to implement a fix before the next release. It’s ultimately up to them if they want to spend time on it. The related ticket 28676 mentions reading the exif data, but wordpress should also write to that data when a user is editing the image.

Perfect, thanks Dominik

Right, editing the text input field causes a preview refresh, but the color picker by itself does not trigger a javascript change event when the color is changed. I’m hoping the WP Core team can implement a fix for this before releasing 3.9

The color picker used as a theme setting seems to be ok. The issue is when it’s used as a widget setting. I’ve put together a quick plugin to illustrate the issue. Try running this widget in the customizer:

<?php
/*
Plugin Name: ColorTest
Description: color picker test for WP 3.9
*/

class ColorTest extends WP_Widget {

	function __construct() {
		parent::__construct('color-test', 'Color Test', array());
	}

	public function widget($args, $instance) {

		extract($args);
		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));

		echo $before_widget;
		echo $before_title . 'Color Test' . $after_title;
		echo '<p style="color: ' . $instance['color'] . '; font-weight: bold;">' . $instance['text'] . '</p>';
		echo $after_widget;

	}

	public function update($new_instance, $old_instance) {

		$instance = array();
		$instance['color'] = $new_instance['color'];
		$instance['text'] = $new_instance['text'];
		return $instance;

	}

	public function form($instance) {

		$instance = wp_parse_args($instance, array('color'=>'#000000', 'text'=>'Lorem ipsum'));

		wp_enqueue_script('wp-color-picker');
		wp_enqueue_style('wp-color-picker');
		?>
		<p>
		<label>Text Color</label>
		<input type="text" class="color-field" id="<?php echo $this->get_field_id('color'); ?>" name="<?php echo $this->get_field_name('color'); ?>" value="<?php echo esc_attr($instance['color']); ?>" />
		</p>
		<p>
		<label>Text Content</label>
		<input type="text" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>" value="<?php echo esc_attr($instance['text']); ?>" />
		</p>
		<script type="text/javascript">

		jQuery(document).ready(function($) {
			$('.control-section .color-field').wpColorPicker();
			$(document).on('widget-updated widget-synced widget-added', function() {
				$('.control-section .color-field').each(function() {
					if (!$(this).data('wpWpColorPicker')) $(this).wpColorPicker();
				});
			});
		});

		</script>
		<?php

	}

}

add_action('widgets_init', function() { register_widget('ColorTest'); });

Ok thanks

I’m not using a publicly available theme or plugin.

I noticed the same problem is true of theme settings as well. If you try to modify a theme setting or widget setting by assigning the input value via javascript, the preview window doesn’t refresh.

You can test this by running this code:

$('.customize-control-title').click(function() {
	$('#customize-control-blogname input').val('Test Title');
});

The above code will change the Site Title input in the theme settings when you click on the Site Title label. Notice that the preview frame doesn’t reload even though the Site Title value was changed.