Theme Customizer: Move upload and image controls to subclasses. see #19910.

Instead of grouping together every control parameter into a single  array and passing them all to the JS, use subclasses with custom parameters to implement additional PHP functionality and the  parameter to send only the necessary variables to the JavaScript control.

Replaces WP_Customize_Control->control_params with WP_Customize_Control->json and WP_Customize_Control->to_json(). The to_json() method refreshes the json array passed to the JavaScript control (set to control.param by default).

Creates WP_Customize_Upload_Control and WP_Customize_Image_Control.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20319 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/ajax-actions.php

@@ -1615,7 +1615,7 @@ function wp_ajax_upload_attachment() {
 		$post_id = null;
 	}
 
-	$post_data = is_array( $_REQUEST['post_data'] ) ? $_REQUEST['post_data'] : array();
+	$post_data = isset( $_REQUEST['post_data'] ) ? $_REQUEST['post_data'] : array();
 
 	$attachment_id = media_handle_upload( 'async-upload', $post_id, $post_data );
 

wp-includes/class-wp-customize-control.php

@@ -17,11 +17,11 @@ class WP_Customize_Control {
 	public $priority          = 10;
 	public $section           = '';
 	public $label             = '';
-	// @todo: remove control_params
-	public $control_params    = array();
 	// @todo: remove choices
 	public $choices           = array();
 
+	public $json = array();
+
 	public $visibility;
 
 	public $type = 'text';
@@ -35,7 +35,7 @@ class WP_Customize_Control {
 	 * @since 3.4.0
 	 */
 	function __construct( $manager, $id, $args = array() ) {
-		$keys = array_keys( get_class_vars( __CLASS__ ) );
+		$keys = array_keys( get_object_vars( $this ) );
 		foreach ( $keys as $key ) {
 			if ( isset( $args[ $key ] ) )
 				$this->$key = $args[ $key ];
@@ -90,18 +90,33 @@ class WP_Customize_Control {
 			return $this->settings[ $setting_key ]->value();
 	}
 
-	public function json( $args = array() ) {
+	/**
-		$settings = array();
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 3.4.0
+	 */
+	public function to_json() {
+		$this->json['settings'] = array();
 		foreach ( $this->settings as $key => $setting ) {
-			$settings[ $key ] = $setting->id;
+			$this->json['settings'][ $key ] = $setting->id;
 		}
 
-		return array(
+		$this->json['type'] = $this->type;
-			'type'   => $this->type,
+
-			'params' => wp_parse_args( wp_parse_args( $args, array(
+		if ( $this->visibility ) {
-				'settings' => $settings,
+			if ( is_string( $this->visibility ) ) {
-			) ), $this->control_params ),
+				$this->json['visibility'] = array(
-		);
+					'id'    => $this->visibility,
+					'value' => true,
+				);
+			} else {
+				$this->json['visibility'] = array(
+					'id'    => $this->visibility[0],
+					'value' => $this->visibility[1],
+				);
+			}
+
+		}
 	}
 
 	/**
@@ -258,60 +273,6 @@ class WP_Customize_Control {
 				</label>
 				<?php
 				break;
-			case 'upload':
-				?>
-				<label>
-					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<div>
-						<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-						<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
-						<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
-					</div>
-				</label>
-				<?php
-				break;
-			case 'image':
-				$value = $this->value();
-
-				$image = $value;
-				if ( isset( $this->control_params['get_url'] ) )
-					$image = call_user_func( $this->control_params['get_url'], $image );
-
-				?>
-				<label>
-					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-					<input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
-					<div class="customize-image-picker">
-						<div class="thumbnail">
-							<?php if ( empty( $image ) ): ?>
-								<img style="display:none;" />
-							<?php else: ?>
-								<img src="<?php echo esc_url( $image ); ?>" />
-							<?php endif; ?>
-						</div>
-						<div class="actions">
-							<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
-							<a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
-							<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
-						</div>
-						<div class="library">
-							<ul>
-								<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
-									<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-										<?php echo esc_html( $tab[1] ); ?>
-									</li>
-								<?php endforeach; ?>
-							</ul>
-							<?php foreach ( $this->control_params['tabs'] as $tab ): ?>
-								<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
-									<?php call_user_func( $tab[2] ); ?>
-								</div>
-							<?php endforeach; ?>
-						</div>
-					</div>
-				</label>
-				<?php
-				break;
 			case 'dropdown-pages':
 				$dropdown = wp_dropdown_pages(
 					array(
@@ -334,4 +295,81 @@ class WP_Customize_Control {
 				break;
 		}
 	}
+}
+
+class WP_Customize_Upload_Control extends WP_Customize_Control {
+	public $type    = 'upload';
+	public $removed = '';
+	public $context;
+
+	public function enqueue() {
+		wp_enqueue_script( 'wp-plupload' );
+	}
+
+	public function to_json() {
+		parent::to_json();
+
+		$this->json['removed'] = $this->removed;
+
+		if ( $this->context )
+			$this->json['context'] = $this->context;
+	}
+
+	public function render_content() {
+		?>
+		<label>
+			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+			<div>
+				<a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
+				<a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
+			</div>
+		</label>
+		<?php
+	}
+}
+
+class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
+	public $type = 'image';
+	public $tabs = array();
+	public $get_url;
+
+	public function render_content() {
+		$src = $this->value();
+		if ( isset( $this->get_url ) )
+			$src = call_user_func( $this->get_url, $src );
+
+		?>
+		<label>
+			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
+			<div class="customize-image-picker">
+				<div class="thumbnail">
+					<?php if ( empty( $src ) ): ?>
+						<img style="display:none;" />
+					<?php else: ?>
+						<img src="<?php echo esc_url( $src ); ?>" />
+					<?php endif; ?>
+				</div>
+				<div class="actions">
+					<a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
+					<a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
+					<a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
+				</div>
+				<div class="library">
+					<ul>
+						<?php foreach ( $this->tabs as $tab ): ?>
+							<li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+								<?php echo esc_html( $tab[1] ); ?>
+							</li>
+						<?php endforeach; ?>
+					</ul>
+					<?php foreach ( $this->tabs as $tab ): ?>
+						<div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
+							<?php call_user_func( $tab[2] ); ?>
+						</div>
+					<?php endforeach; ?>
+				</div>
+			</div>
+		</label>
+		<?php
+	}
 }

wp-includes/class-wp-customize.php

@@ -585,20 +585,17 @@ final class WP_Customize {
 			'theme_supports' => 'custom-header',
 		) );
 
-		$this->add_control( 'header_image', array(
+		$this->add_control( new WP_Customize_Image_Control( $this, 'header_image', array(
 			'label'          => 'Header Image',
 			'section'        => 'header',
-			'type'           => 'image',
+			'context'        => 'custom-header',
-			'control_params' => array(
+			'removed'        => 'remove-header',
-				'context'        => 'custom-header',
+			'get_url'        => 'get_header_image',
-				'removed'        => 'remove-header',
+			'tabs'           => array(
-				'get_url'        => 'get_header_image',
+				array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
-				'tabs'           => array(
+				array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
-					array( 'uploaded', __('Uploaded'), 'wp_customize_print_uploaded_headers' ),
-					array( 'included', __('Included'), 'wp_customize_print_included_headers' ),
-				),
 			),
-		) );
+		) ) );
 
 		/* Custom Background */
 
@@ -627,14 +624,12 @@ final class WP_Customize {
 			'theme_supports' => 'custom-background',
 		) );
 
-		$this->add_control( 'background_image', array(
+		$this->add_control( new WP_Customize_Upload_Control( $this, 'background_image', array(
 			'label'          => __( 'Background Image' ),
 			'section'        => 'background',
 			'type'           => 'upload',
-			'control_params' => array(
+			'context'        => 'custom-background',
-				'context'        => 'custom-background',
+		) ) );
-			),
-		) );
 
 		$this->add_setting( 'background_repeat', array(
 			'default'        => 'repeat',

wp-includes/customize-controls.php

@@ -107,22 +107,8 @@ do_action( 'customize_controls_print_scripts' );
 	}
 
 	foreach ( $this->controls as $id => $control ) {
-		$settings['controls'][ $id ] = $control->json();
+		$control->to_json();
-
+		$settings['controls'][ $id ] = $control->json;
-		if ( $control->visibility ) {
-			if ( is_string( $control->visibility ) ) {
-				$settings['controls'][ $id ]['visibility'] = array(
-					'id'    => $control->visibility,
-					'value' => true,
-				);
-			} else {
-				$settings['controls'][ $id ]['visibility'] = array(
-					'id'    => $control->visibility[0],
-					'value' => $control->visibility[1],
-				);
-			}
-
-		}
 	}
 
 	?>

wp-includes/js/customize-controls.dev.js

@@ -361,7 +361,7 @@
 				control;
 
 			control = api.control.add( id, new constructor( id, {
-				params: data.params,
+				params: data,
 				previewer: previewer
 			} ) );