diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 6fb7a5bf27..f194547021 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/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,
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 00c894edf7..951fb4cfd0 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/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.btnNew = $('#customize-control-header_image .actions .new');
+ this.btnRemove = $('#customize-control-header_image .actions .remove');
+ 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,
diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php
index 182f842aa8..bd964c2d6f 100644
--- a/src/wp-includes/class-wp-customize-control.php
+++ b/src/wp-includes/class-wp-customize-control.php
@@ -521,11 +521,11 @@ class WP_Customize_Control {
* @since 4.1.0
*/
final public function print_template() {
- ?>
-
-
+
+ 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.
- $attachment_id = attachment_url_to_postid( $value );
- if ( $attachment_id ) {
- $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id );
- }
+ $this->json['attachment'] = wp_prepare_attachment_for_js( $value );
}
}
}
@@ -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.
*
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index de723c2401..3c9a92b8b8 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/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' );