wp26061-demo.php

<?php
/**
 * Plugin Name: Demo Plugin for #26061
 * Description: Registers a new setting for a non-scalar value (i.e. an assoc array) and a control which allows the setting to be updated by pressing a button.
 * Author: Weston Ruter, X-Team
 * Author URI: http://x-team.com/profile/weston-ruter/
 */

function wp26061_customize_register( $wp_customize ) {

	class WP26061_Customize_Control extends WP_Customize_Control {

		public $type = 'wp26061';

		public function render_content() {
			?>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<div class="customize-control-content">
				<p>
					<label>Foo: <input type="text" name="foo" value="<?php echo esc_attr( $this->setting->default['foo'] ) ?>"></label>
				</p>
				<p>
					<label>Bar: <input type="text" name="bar" value="<?php echo esc_attr( $this->setting->default['bar'] ) ?>"></label>
				</p>
				<p>
					<label>Baz: <input type="text" name="baz" value="<?php echo esc_attr( $this->setting->default['baz'] ) ?>"></label>
				</p>
				<p>
					<button class="button-secondary" type="button">Update</button>
				</p>
				<p>
					Updating the setting for this control will trigger a change even if none of the properties of the non-scalar setting changed. This is because in JS, <code>{a:1} !== {a:1}</code>. This would be resolved if we used <code>_.isEqual()</code> instead, or its equivalent.
				</p>
			</div>
			<?php
		}
	}

	$wp_customize->add_section( 'wp26061', array(
		'title' => '#26061',
	) );

	$wp_customize->add_setting( 'wp26061', array(
		'default' => array(
			'foo' => 'Foo',
			'bar' => 'Bar',
			'baz' => 'Baz',
		),
	) );

	$control = new WP26061_Customize_Control(
		$wp_customize,
		'wp26061',
		array( 'section' => 'wp26061' )
	);

	$wp_customize->add_control( $control );
	add_action( 'customize_controls_print_footer_scripts', 'wp26061_control_js' );
}

add_action( 'customize_register', 'wp26061_customize_register' );


function wp26061_control_js() {
	wp_print_scripts( array( 'jquery', 'customize-controls' ) );
	?>
	<script>
	(function() {
		wp.customize.controlConstructor.wp26061 = wp.customize.Control.extend({
			ready: function() {
				var control = this;
				control.container.find( 'button' ).on( 'click', function () {
					var setting = {};
					setting.foo = control.container.find('[name=foo]' ).val();
					setting.bar = control.container.find('[name=bar]' ).val();
					setting.baz = control.container.find('[name=baz]' ).val();
					control.setting( setting );
				} );
				control.setting.bind( function ( to, from ) {
					control.container.find('[name=foo]' ).val( to.foo );
					control.container.find('[name=bar]' ).val( to.bar );
					control.container.find('[name=baz]' ).val( to.baz );
				} );
			}
		});
	}());
	</script>
	<?php
}