Customizer: Introduce WP_Customize_Media_Control.

`WP_Customize_Media_Control` is a new base class for all Customizer media controls. If used directly it supports the ID of an attachment instead of an URL like `WP_Customize_Upload_Control`.

props celloexpressions.
fixes #29215.
Built from https://develop.svn.wordpress.org/trunk@31698


git-svn-id: http://core.svn.wordpress.org/trunk@31679 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -582,8 +582,9 @@ p.customize-section-description {
 	-webkit-overflow-scrolling: touch;
 }
 
-/** Header control **/
+/** Media controls **/
 
+.customize-control-media .current,
 .customize-control-upload .current,
 .customize-control-image .current,
 .customize-control-background .current,
@@ -610,6 +611,9 @@ p.customize-section-description {
 	display: block;
 }
 
+.customize-control-media .remove-button,
+.customize-control-media .default-button,
+.customize-control-media .upload-button,
 .customize-control-upload .remove-button,
 .customize-control-upload .default-button,
 .customize-control-upload .upload-button,
@@ -626,6 +630,7 @@ p.customize-section-description {
 	height: auto;
 }
 
+.customize-control-media .current .container,
 .customize-control-upload .current .container,
 .customize-control-image .current .container,
 .customize-control-background .current .container,
@@ -637,12 +642,14 @@ p.customize-section-description {
 	border-radius: 2px;
 }
 
+.customize-control-media .current .container,
 .customize-control-upload .current .container,
 .customize-control-background .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
 
+.customize-control-media .placeholder,
 .customize-control-upload .placeholder,
 .customize-control-image .placeholder,
 .customize-control-background .placeholder,
@@ -653,6 +660,7 @@ p.customize-section-description {
 	cursor: default;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-image .inner,
 .customize-control-background .inner,
@@ -666,6 +674,7 @@ p.customize-section-description {
 	overflow: hidden;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-background .inner,
 .customize-control-image .inner {
@@ -673,6 +682,7 @@ p.customize-section-description {
 	min-height: 40px;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-image .inner,
 .customize-control-background .inner,
@@ -782,6 +792,7 @@ p.customize-section-description {
 	100% { color: #d4b146; }
 }
 
+.customize-control-media .actions,
 .customize-control-upload .actions,
 .customize-control-image .actions,
 .customize-control-background .actions,
@@ -799,6 +810,7 @@ p.customize-section-description {
 	margin-bottom: 0;
 }
 
+.customize-control-media img,
 .customize-control-upload img,
 .customize-control-image img,
 .customize-control-background img,
@@ -808,6 +820,8 @@ p.customize-section-description {
 	border-radius: 2px;
 }
 
+.customize-control-media .remove-button,
+.customize-control-media .default-button,
 .customize-control-upload .remove-button,
 .customize-control-upload .default-button,
 .customize-control-image .remove-button,
@@ -819,6 +833,7 @@ p.customize-section-description {
 	margin-left: 3px;
 }
 
+.customize-control-media .upload-button,
 .customize-control-upload .upload-button,
 .customize-control-image .upload-button,
 .customize-control-background .upload-button,

wp-admin/css/customize-controls.css

@@ -582,8 +582,9 @@ p.customize-section-description {
 	-webkit-overflow-scrolling: touch;
 }
 
-/** Header control **/
+/** Media controls **/
 
+.customize-control-media .current,
 .customize-control-upload .current,
 .customize-control-image .current,
 .customize-control-background .current,
@@ -610,6 +611,9 @@ p.customize-section-description {
 	display: block;
 }
 
+.customize-control-media .remove-button,
+.customize-control-media .default-button,
+.customize-control-media .upload-button,
 .customize-control-upload .remove-button,
 .customize-control-upload .default-button,
 .customize-control-upload .upload-button,
@@ -626,6 +630,7 @@ p.customize-section-description {
 	height: auto;
 }
 
+.customize-control-media .current .container,
 .customize-control-upload .current .container,
 .customize-control-image .current .container,
 .customize-control-background .current .container,
@@ -637,12 +642,14 @@ p.customize-section-description {
 	border-radius: 2px;
 }
 
+.customize-control-media .current .container,
 .customize-control-upload .current .container,
 .customize-control-background .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
 
+.customize-control-media .placeholder,
 .customize-control-upload .placeholder,
 .customize-control-image .placeholder,
 .customize-control-background .placeholder,
@@ -653,6 +660,7 @@ p.customize-section-description {
 	cursor: default;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-image .inner,
 .customize-control-background .inner,
@@ -666,6 +674,7 @@ p.customize-section-description {
 	overflow: hidden;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-background .inner,
 .customize-control-image .inner {
@@ -673,6 +682,7 @@ p.customize-section-description {
 	min-height: 40px;
 }
 
+.customize-control-media .inner,
 .customize-control-upload .inner,
 .customize-control-image .inner,
 .customize-control-background .inner,
@@ -782,6 +792,7 @@ p.customize-section-description {
 	100% { color: #d4b146; }
 }
 
+.customize-control-media .actions,
 .customize-control-upload .actions,
 .customize-control-image .actions,
 .customize-control-background .actions,
@@ -799,6 +810,7 @@ p.customize-section-description {
 	margin-bottom: 0;
 }
 
+.customize-control-media img,
 .customize-control-upload img,
 .customize-control-image img,
 .customize-control-background img,
@@ -808,6 +820,8 @@ p.customize-section-description {
 	border-radius: 2px;
 }
 
+.customize-control-media .remove-button,
+.customize-control-media .default-button,
 .customize-control-upload .remove-button,
 .customize-control-upload .default-button,
 .customize-control-image .remove-button,
@@ -819,6 +833,7 @@ p.customize-section-description {
 	margin-right: 3px;
 }
 
+.customize-control-media .upload-button,
 .customize-control-upload .upload-button,
 .customize-control-image .upload-button,
 .customize-control-background .upload-button,

wp-admin/js/customize-controls.js

@@ -1370,13 +1370,13 @@
 	});
 
 	/**
-	 * An upload control, which utilizes the media modal.
+	 * A control that implements the media modal.
 	 *
 	 * @class
 	 * @augments wp.customize.Control
 	 * @augments wp.customize.Class
 	 */
-	api.UploadControl = api.Control.extend({
+	api.MediaControl = api.Control.extend({
 
 		/**
 		 * When the control's DOM structure is ready,
@@ -1471,7 +1471,7 @@
 			this.params.attachment = attachment;
 
 			// Set the Customizer setting; the callback takes care of rendering.
-			this.setting( attachment.url );
+			this.setting( attachment.id );
 			node = this.container.find( 'audio, video' ).get(0);
 
 			// Initialize audio/video previews.
@@ -1509,6 +1509,41 @@
 			this.params.attachment = {};
 			this.setting( '' );
 			this.renderContent(); // Not bound to setting change when emptying.
+		}
+	});
+
+	/**
+	 * An upload control, which utilizes the media modal.
+	 *
+	 * @class
+	 * @augments wp.customize.MediaControl
+	 * @augments wp.customize.Control
+	 * @augments wp.customize.Class
+	 */
+	api.UploadControl = api.MediaControl.extend({
+
+		/**
+		 * Callback handler for when an attachment is selected in the media modal.
+		 * Gets the selected image information, and sets it within the control.
+		 */
+		select: function() {
+			// Get the attachment from the modal frame.
+			var node,
+				attachment = this.frame.state().get( 'selection' ).first().toJSON(),
+				mejsSettings = window._wpmejsSettings || {};
+
+			this.params.attachment = attachment;
+
+			// Set the Customizer setting; the callback takes care of rendering.
+			this.setting( attachment.url );
+			node = this.container.find( 'audio, video' ).get(0);
+
+			// Initialize audio/video previews.
+			if ( node ) {
+				this.player = new MediaElementPlayer( node, mejsSettings );
+			} else {
+				this.cleanupPlayer();
+			}
 		},
 
 		// @deprecated
@@ -1526,6 +1561,7 @@
 	 *
 	 * @class
 	 * @augments wp.customize.UploadControl
+	 * @augments wp.customize.MediaControl
 	 * @augments wp.customize.Control
 	 * @augments wp.customize.Class
 	 */
@@ -1539,6 +1575,7 @@
 	 *
 	 * @class
 	 * @augments wp.customize.UploadControl
+	 * @augments wp.customize.MediaControl
 	 * @augments wp.customize.Control
 	 * @augments wp.customize.Class
 	 */
@@ -1575,8 +1612,8 @@
 	 */
 	api.HeaderControl = api.Control.extend({
 		ready: function() {
-			this.btnRemove        = $('#customize-control-header_image .actions .remove');
+			this.btnRemove = $('#customize-control-header_image .actions .remove');
-			this.btnNew           = $('#customize-control-header_image .actions .new');
+			this.btnNew    = $('#customize-control-header_image .actions .new');
 
 			_.bindAll(this, 'openMedia', 'removeImage');
 
@@ -2311,6 +2348,7 @@
 
 	api.controlConstructor = {
 		color:      api.ColorControl,
+		media:      api.MediaControl,
 		upload:     api.UploadControl,
 		image:      api.ImageControl,
 		header:     api.HeaderControl,

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

@@ -521,11 +521,11 @@ class WP_Customize_Control {
 	 * @since 4.1.0
 	 */
 	final public function print_template() {
-	        ?>
+		?>
-	        <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
+		<script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
-	                <?php $this->content_template(); ?>
+			<?php $this->content_template(); ?>
-	        </script>
+		</script>
-	        <?php
+		<?php
 	}
 
 	/**
@@ -638,24 +638,22 @@ class WP_Customize_Color_Control extends WP_Customize_Control {
 }
 
 /**
- * Customize Upload Control class.
+ * Customize Media Control class.
  *
- * @since 3.4.0
+ * @since 4.2.0
  *
  * @see WP_Customize_Control
  */
-class WP_Customize_Upload_Control extends WP_Customize_Control {
+class WP_Customize_Media_Control extends WP_Customize_Control {
-	public $type          = 'upload';
+	public $type          = 'media';
 	public $mime_type     = '';
 	public $button_labels = array();
-	public $removed = ''; // unused
-	public $context; // unused
-	public $extensions = array(); // unused
 
 	/**
 	 * Constructor.
 	 *
 	 * @since 4.1.0
+	 * @since 4.2.0 Moved from WP_Customize_Upload_Control.
 	 *
 	 * @param WP_Customize_Manager $manager {@see WP_Customize_Manager} instance.
 	 */
@@ -677,6 +675,7 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 	 * Enqueue control related scripts/styles.
 	 *
 	 * @since 3.4.0
+	 * @since 4.2.0 Moved from WP_Customize_Upload_Control.
 	 */
 	public function enqueue() {
 		wp_enqueue_media();
@@ -686,6 +685,8 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 	 * Refresh the parameters passed to the JavaScript via JSON.
 	 *
 	 * @since 3.4.0
+	 * @since 4.2.0 Moved from WP_Customize_Upload_Control.
+	 *
 	 * @uses WP_Customize_Control::to_json()
 	 */
 	public function to_json() {
@@ -698,6 +699,7 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 		if ( is_object( $this->setting ) ) {
 			if ( $this->setting->default ) {
 				// Fake an attachment model - needs all fields used by template.
+				// Note that the default value must be a URL, NOT an attachment ID.
 				$type = in_array( substr( $this->setting->default, -3 ), array( 'jpg', 'png', 'gif', 'bmp' ) ) ? 'image' : 'document';
 				$default_attachment = array(
 					'id' => 1,
@@ -720,11 +722,7 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 				// Set the default as the attachment.
 				$this->json['attachment'] = $this->json['defaultAttachment'];
 			} elseif ( $value ) {
-				// Get the attachment model for the existing file.
+				$this->json['attachment'] = wp_prepare_attachment_for_js( $value );
-				$attachment_id = attachment_url_to_postid( $value );
-				if ( $attachment_id ) {
-					$this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id );
-				}
 			}
 		}
 	}
@@ -732,15 +730,18 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 	/**
 	 * Don't render any content for this control from PHP.
 	 *
-	 * @see WP_Customize_Upload_Control::content_template()
 	 * @since 3.4.0
+	 * @since 4.2.0 Moved from WP_Customize_Upload_Control.
+	 *
+	 * @see WP_Customize_Media_Control::content_template()
 	 */
 	public function render_content() {}
 
 	/**
-	 * Render a JS template for the content of the upload control.
+	 * Render a JS template for the content of the media control.
 	 *
 	 * @since 4.1.0
+	 * @since 4.2.0 Moved from WP_Customize_Upload_Control.
 	 */
 	public function content_template() {
 		?>
@@ -822,6 +823,42 @@ class WP_Customize_Upload_Control extends WP_Customize_Control {
 	}
 }
 
+/**
+ * Customize Upload Control Class.
+ *
+ * @since 3.4.0
+ *
+ * @see WP_Customize_Media_Control
+ */
+class WP_Customize_Upload_Control extends WP_Customize_Media_Control {
+	public $type          = 'upload';
+	public $mime_type     = '';
+	public $button_labels = array();
+	public $removed = ''; // unused
+	public $context; // unused
+	public $extensions = array(); // unused
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 3.4.0
+	 *
+	 * @uses WP_Customize_Media_Control::to_json()
+	 */
+	public function to_json() {
+		parent::to_json();
+
+		$value = $this->value();
+		if ( $value ) {
+			// Get the attachment model for the existing file.
+			$attachment_id = attachment_url_to_postid( $value );
+			if ( $attachment_id ) {
+				$this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id );
+			}
+		}
+	}
+}
+
 /**
  * Customize Image Control class.
  *

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

@@ -1139,6 +1139,7 @@ final class WP_Customize_Manager {
 
 		/* Control Types (custom control classes) */
 		$this->register_control_type( 'WP_Customize_Color_Control' );
+		$this->register_control_type( 'WP_Customize_Media_Control' );
 		$this->register_control_type( 'WP_Customize_Upload_Control' );
 		$this->register_control_type( 'WP_Customize_Image_Control' );
 		$this->register_control_type( 'WP_Customize_Background_Image_Control' );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-alpha-31697';
+$wp_version = '4.2-alpha-31698';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.