Ticket #21483: 21483.6.diff

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

@@ -10 +10 @@
         font-size: 14px;
 }
 
+#customize-controls img {
+        max-width: 100%;
+}
+
 #customize-controls .submit {
         text-align: center;
 }
@@ -414 +418 @@
         margin-right: 5px;
 }
 
+.customize-control .attachment-thumb.type-icon {
+        float: left;
+        margin-right: 12px;
+}
+
+.customize-control .attachment-title {
+        font-weight: bold;
+        margin: 0 0 12px 0;
+}
+
+.customize-control .remove-button {
+        margin-left: 8px;
+        vertical-align: middle;
+}
+
+.customize-control .thumbnail-audio .attachment-title,
+.customize-control .thumbnail.thumbnail-audio,
+.customize-control .thumbnail.thumbnail-video,
+.customize-control .thumbnail.thumbnail-image {
+        margin-bottom: 8px;
+}
+
+.customize-control .placeholder-text {
+        font-size: 18px;
+        font-weight: 300;
+        text-align: center;
+        color: #aaa;
+        cursor: default;
+}
+
+.customize-control .thumbnail-image img {
+        cursor: pointer;
+}
+
 #customize-preview iframe {
         width: 100%;
         height: 100%;

src/wp-admin/js/customize-controls.js

@@ -5 +5 @@
         // @todo Move private helper functions to wp.customize.utils so they can be unit tested
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Value
          * @augments wp.customize.Class
          *
@@ -127 +127 @@
         /**
          * Base class for Panel and Section
          *
-         * @constructor
+         * @class
          * @augments wp.customize.Class
          */
         Container = api.Class.extend({
@@ -312 +312 @@
         });
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Class
          */
         api.Section = Container.extend({
@@ -467 +467 @@
         });
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Class
          */
         api.Panel = Container.extend({
@@ -636 +636 @@
         });
 
         /**
-         * @constructor
+         * A Customizer Control.
+         *
+         * A control provides a UI element that allows a user to modify a Customizer Setting.
+         *
+         * @see PHP class WP_Customize_Control.
+         *
+         * @class
          * @augments wp.customize.Class
+         *
+         * @param {string} id                            Unique identifier for the control instance.
+         * @param {object} options                       Options hash for the control instance.
+         * @param {object} options.params
+         * @param {object} options.params.type           Type of control (e.g. text, radio, dropdown-pages, etc.)
+         * @param {string} options.params.content        The HTML content for the control.
+         * @param {string} options.params.priority       Order of priority to show the control within the section.
+         * @param {string} options.params.active
+         * @param {string} options.params.section
+         * @param {string} options.params.label
+         * @param {string} options.params.description
+         * @param {string} options.params.instanceNumber Order in which this instance was created in relation to other instances.
          */
         api.Control = api.Class.extend({
                 defaultActiveArguments: { duration: 'fast' },
@@ -648 +666 @@
 
                         control.params = {};
                         $.extend( control, options || {} );
-
                         control.id = id;
                         control.selector = '#customize-control-' + id.replace( /\]/g, '' ).replace( /\[/g, '-' );
                         control.templateSelector = 'customize-control-' + control.params.type + '-content';
@@ -724 +741 @@
                 },
 
                 /**
-                 *
+                 * Embed the control into the page.
                  */
                 embed: function () {
                         var control = this,
@@ -754 +771 @@
                 },
 
                 /**
+                 * Triggered when the control's markup has been injected into the DOM.
+                 *
                  * @abstract
                  */
                 ready: function() {},
@@ -867 +886 @@
         });
 
         /**
-         * @constructor
+         * A colorpicker control.
+         *
+         * @class
          * @augments wp.customize.Control
          * @augments wp.customize.Class
          */
@@ -893 +914 @@
         });
 
         /**
-         * @constructor
+         * An upload control, which utilizes the media modal.
+         *
+         * @class
          * @augments wp.customize.Control
          * @augments wp.customize.Class
          */
         api.UploadControl = api.Control.extend({
-                ready: function() {
-                        var control = this;
-
-                        this.params.removed = this.params.removed || '';
 
-                        this.success = $.proxy( this.success, this );
-
-                        this.uploader = $.extend({
-                                container: this.container,
-                                browser:   this.container.find('.upload'),
-                                dropzone:  this.container.find('.upload-dropzone'),
-                                success:   this.success,
-                                plupload:  {},
-                                params:    {}
-                        }, this.uploader || {} );
-
-                        if ( control.params.extensions ) {
-                                control.uploader.plupload.filters = [{
-                                        title:      api.l10n.allowedFiles,
-                                        extensions: control.params.extensions
-                                }];
-                        }
-
-                        if ( control.params.context )
-                                control.uploader.params['post_data[context]'] = this.params.context;
-
-                        if ( api.settings.theme.stylesheet )
-                                control.uploader.params['post_data[theme]'] = api.settings.theme.stylesheet;
-
-                        this.uploader = new wp.Uploader( this.uploader );
-
-                        this.remover = this.container.find('.remove');
-                        this.remover.on( 'click keydown', function( event ) {
-                                if ( isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
-
-                                control.setting.set( control.params.removed );
-                                event.preventDefault();
-                        });
+                /**
+                 * When the control's DOM structure is ready,
+                 * set up internal event bindings.
+                 */
+                ready: function() {
+                        var control = this;
 
-                        this.removerVisibility = $.proxy( this.removerVisibility, this );
-                        this.setting.bind( this.removerVisibility );
-                        this.removerVisibility( this.setting.get() );
-                },
-                success: function( attachment ) {
-                        this.setting.set( attachment.get('url') );
+                        control.setupEvents();
+                        control.setting.bind( function () { control.reRender(); } );
                 },
-                removerVisibility: function( to ) {
-                        this.remover.toggle( to != this.params.removed );
-                }
-        });
-
-        /**
-         * @constructor
-         * @augments wp.customize.UploadControl
-         * @augments wp.customize.Control
-         * @augments wp.customize.Class
-         */
-        api.ImageControl = api.UploadControl.extend({
-                ready: function() {
-                        var control = this,
-                                panels;
-
-                        this.uploader = {
-                                init: function() {
-                                        var fallback, button;
-
-                                        if ( this.supports.dragdrop )
-                                                return;
-
-                                        // Maintain references while wrapping the fallback button.
-                                        fallback = control.container.find( '.upload-fallback' );
-                                        button   = fallback.children().detach();
 
-                                        this.browser.detach().empty().append( button );
-                                        fallback.append( this.browser ).show();
-                                }
-                        };
+                /**
+                 * Set up event bindings.
+                 */
+                setupEvents: function() {
+                        // Cache buttons for re-use.
+                        this.$button = this.container.find( '.upload-button' );
+                        this.$img = this.container.find( '.thumbnail-image img' );
+                        this.$defaultButton = this.container.find( '.default-button' );
+                        this.$removeButton = this.container.find( '.remove-button' );
+
+                        // Shortcut so that we don't have to use _.bind every time we add a callback.
+                        _.bindAll( this, 'removeFile', 'reRender', 'openFrame', 'select' );
+
+                        this.$defaultButton.on( 'click keydown', this.restoreDefault );
+                        this.$removeButton.on( 'click keydown', this.removeFile );
+                        this.$button.on( 'click keydown', this.openFrame );
+                        this.$img.on( 'click keydown', this.openFrame );
+                },
 
-                        api.UploadControl.prototype.ready.call( this );
+                /**
+                 * Open the media modal.
+                 */
+                openFrame: function( event ) {
+                        if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
+                                return;
+                        }
 
-                        this.thumbnail    = this.container.find('.preview-thumbnail img');
-                        this.thumbnailSrc = $.proxy( this.thumbnailSrc, this );
-                        this.setting.bind( this.thumbnailSrc );
+                        event.preventDefault();
 
-                        this.library = this.container.find('.library');
+                        if ( ! this.frame ) {
+                                this.initFrame();
+                        }
 
-                        // Generate tab objects
-                        this.tabs = {};
-                        panels    = this.library.find('.library-content');
+                        this.frame.open();
+                },
 
-                        this.library.children('ul').children('li').each( function() {
-                                var link  = $(this),
-                                        id    = link.data('customizeTab'),
-                                        panel = panels.filter('[data-customize-tab="' + id + '"]');
+                /**
+                 * Create a media modal select frame, and store it so the instance can be reused when needed.
+                 */
+                initFrame: function() {
+                        this.frame = wp.media({
+                                // The title of the media modal.
+                                title: this.params.button_labels.frame_title,
 
-                                control.tabs[ id ] = {
-                                        both:  link.add( panel ),
-                                        link:  link,
-                                        panel: panel
-                                };
-                        });
+                                // Restrict the library to specified mime type.
+                                library: {
+                                        type: this.params.mime_type
+                                },
+                                button: {
+                                        // Change the submit button label.
+                                        text: this.params.button_labels.frame_button
+                                },
+                                multiple: false
+                        });
 
-                        // Bind tab switch events
-                        this.library.children('ul').on( 'click keydown', 'li', function( event ) {
-                                if ( isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
+                        // When a file is selected, run a callback.
+                        this.frame.on( 'select', this.select );
+                },
 
-                                var id  = $(this).data('customizeTab'),
-                                        tab = control.tabs[ id ];
+                /**
+                 * 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 attachment = this.frame.state().get( 'selection' ).first().toJSON();
 
-                                event.preventDefault();
+                        this.params.attachment = attachment;
 
-                                if ( tab.link.hasClass('library-selected') )
-                                        return;
+                        // Set the Customizer setting; the callback takes care of rendering.
+                        this.setting( attachment.url );
+                },
 
-                                control.selected.both.removeClass('library-selected');
-                                control.selected = tab;
-                                control.selected.both.addClass('library-selected');
-                        });
+                /**
+                 * Called on whenever a setting is changed.
+                 */
+                reRender: function() {
+                        this.container.html('');
+                        this.renderContent();
+                        this.setupEvents();
+                        // @todo: something else is needed to preview audio/video files
+                },
 
-                        // Bind events to switch image urls.
-                        this.library.on( 'click keydown', 'a', function( event ) {
-                                if ( isKeydownButNotEnterEvent( event ) ) {
-                                        return;
-                                }
+                /**
+                 * Reset the setting to the default value.
+                 *
+                 * @todo default button instead of remove that calls this.
+                 */
+                restoreDefault: function( event ) {
+                        if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
+                                return;
+                        }
 
-                                var value = $(this).data('customizeImageValue');
+                        event.preventDefault();
+                        this.setting( this.params.defaultAttachment.url );
+                        this.params.attachment = this.params.defaultAttachment;
+                },
 
-                                if ( value ) {
-                                        control.setting.set( value );
-                                        event.preventDefault();
-                                }
-                        });
+                /**
+                 * Called when the "Remove" link is clicked. Empties the setting.
+                 *
+                 * @param {object} event jQuery Event object
+                 */
+                removeFile: function( event ) {
+                        if ( event.type === 'keydown' &&  13 !== event.which ) { // enter
+                                return;
+                        }
 
-                        if ( this.tabs.uploaded ) {
-                                this.tabs.uploaded.target = this.library.find('.uploaded-target');
-                                if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
-                                        this.tabs.uploaded.both.addClass('hidden');
-                        }
+                        event.preventDefault();
+                        this.params.attachment = {};
+                        this.setting( '' );
+                },
 
-                        // Select a tab
-                        panels.each( function() {
-                                var tab = control.tabs[ $(this).data('customizeTab') ];
+                // @deprecated
+                success: function( attachment ) {},
 
-                                // Select the first visible tab.
-                                if ( ! tab.link.hasClass('hidden') ) {
-                                        control.selected = tab;
-                                        tab.both.addClass('library-selected');
-                                        return false;
-                                }
-                        });
+                // @deprecated
+                removerVisibility: function( to ) {}
+        });
 
-                        this.dropdownInit();
-                },
-                success: function( attachment ) {
-                        api.UploadControl.prototype.success.call( this, attachment );
-
-                        // Add the uploaded image to the uploaded tab.
-                        if ( this.tabs.uploaded && this.tabs.uploaded.target.length ) {
-                                this.tabs.uploaded.both.removeClass('hidden');
-
-                                // @todo: Do NOT store this on the attachment model. That is bad.
-                                attachment.element = $( '<a href="#" class="thumbnail"></a>' )
-                                        .data( 'customizeImageValue', attachment.get('url') )
-                                        .append( '<img src="' +  attachment.get('url')+ '" />' )
-                                        .appendTo( this.tabs.uploaded.target );
-                        }
-                },
-                thumbnailSrc: function( to ) {
-                        if ( /^(https?:)?\/\//.test( to ) )
-                                this.thumbnail.prop( 'src', to ).show();
-                        else
-                                this.thumbnail.hide();
-                }
+        /**
+         * A control for uploading images.
+         *
+         * @class
+         * @augments wp.customize.UploadControl
+         * @augments wp.customize.Control
+         * @augments wp.customize.Class
+         */
+        api.ImageControl = api.UploadControl.extend({
+                // @deprecated
+                thumbnailSrc: function( to ) {}
         });
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Control
          * @augments wp.customize.Class
          */
@@ -1225 +1214 @@
                         this.frame.open();
                 },
 
+                /**
+                 * After an image is selected in the media modal,
+                 * switch to the cropper state.
+                 */
                 onSelect: function() {
                         this.frame.setState('cropper');
                 },
+
+                /**
+                 * After the image has been cropped, apply the cropped image data to the setting.
+                 *
+                 * @param {object} croppedImage Cropped attachment data.
+                 */
                 onCropped: function(croppedImage) {
                         var url = croppedImage.post_content,
                                 attachmentId = croppedImage.attachment_id,
@@ -1235 +1234 @@
                                 h = croppedImage.height;
                         this.setImageFromURL(url, attachmentId, w, h);
                 },
+
+                /**
+                 * If cropping was skipped, apply the image data directly to the setting.
+                 *
+                 * @param {object} selection
+                 */
                 onSkippedCrop: function(selection) {
                         var url = selection.get('url'),
                                 w = selection.get('width'),
@@ -1301 +1306 @@
         api.panel = new api.Values({ defaultConstructor: api.Panel });
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Messenger
          * @augments wp.customize.Class
          * @mixes wp.customize.Events
@@ -1500 +1505 @@
         }());
 
         /**
-         * @constructor
+         * @class
          * @augments wp.customize.Messenger
          * @augments wp.customize.Class
          * @mixes wp.customize.Events

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

@@ -637 +637 @@
  * @since 3.4.0
  */
 class WP_Customize_Upload_Control extends WP_Customize_Control {
-        public $type    = 'upload';
-        public $removed = '';
-        public $context;
-        public $extensions = array();
+        public $type     = 'upload';
+        public $mime_type = '';
+        public $button_labels = array();
+        public $removed = ''; // unused
+        public $context; // unused
+        public $extensions = array(); // unused
+
+        /**
+         * Constructor.
+         *
+         * @since 4.1.0
+         * @uses WP_Customize_Control::__construct()
+         *
+         * @param WP_Customize_Manager $manager
+         */
+        public function __construct( $manager, $id, $args = array() ) {
+                parent::__construct( $manager, $id, $args );
+
+                $this->button_labels = array(
+                        'select'       => __( 'Select File' ),
+                        'change'       => __( 'Change File' ),
+                        'default'      => __( 'Default' ),
+                        'remove'       => __( 'Remove' ),
+                        'placeholder'  => __( 'No file selected' ),
+                        'frame_title'  => __( 'Select File' ),
+                        'frame_button' => __( 'Choose File' ),
+                );
+        }
 
         /**
          * Enqueue control related scripts/styles.
@@ -648 +672 @@
          * @since 3.4.0
          */
         public function enqueue() {
-                wp_enqueue_script( 'wp-plupload' );
+                wp_enqueue_media();
         }
 
         /**
@@ -659 +683 @@
          */
         public function to_json() {
                 parent::to_json();
+                $this->json['mime_type'] = $this->mime_type;
+                $this->json['button_labels'] = $this->button_labels;
+
+                if ( is_object( $this->setting ) ) {
+                        if ( $this->setting->default ) {
+                                // @todo: fake an attachment model - needs all fields used by template
+                                $default_attachment = array(
+                                        'id' => -1,
+                                        'url' => $this->setting->default,
+                                        'type' => ( in_array( substr( $this->setting->default, -3), array( 'jpg', 'png', 'gif', 'bmp' ) ) ) ? 'image' : 'document',
+                                        'sizes' => array(
+                                                'full' => $this->setting->default,
+                                        ),
+                                        'icon' => 'http://localhost/develop/src/wp-includes/images/media/default.png',//@todo
+                                        'title' => '', //@todo filename
 
-                $this->json['removed'] = $this->removed;
+                                );
+                                $this->json['defaultAttachment'] = $default_attachment;
+                        }
 
-                if ( $this->context )
-                        $this->json['context'] = $this->context;
+                        // Get the attachment model for the existing file, or make one.
+                        if ( $this->value() ) {
+                                $attachment_id = attachment_url_to_postid( $this->value() );
+                                if ( $attachment_id ) {
+                                        $this->json['attachment'] = wp_prepare_attachment_for_js( $attachment_id);
+                                }
+                        } elseif ( $this->setting->default ) {
 
-                if ( $this->extensions )
-                        $this->json['extensions'] = implode( ',', $this->extensions );
+                        }
+                }
         }
 
         /**
-         * Render the control's content.
+         * Don't render any content for this control from PHP.
          *
+         * @see WP_Customize_Upload_Control::content_template()
          * @since 3.4.0
          */
-        public function render_content() {
+        public function render_content() {}
+
+        /**
+         * Render a JS template for the content of the upload control.
+         *
+         * @since 4.1.0
+         */
+        public function content_template() {
                 ?>
-                <label>
-                        <?php if ( ! empty( $this->label ) ) : ?>
-                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-                        <?php endif;
-                        if ( ! empty( $this->description ) ) : ?>
-                                <span class="description customize-control-description"><?php echo $this->description; ?></span>
-                        <?php endif; ?>
-                        <div>
-                                <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
-                                <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
-                        </div>
+                <label for="{{ data.settings.default }}-button">
+                        <# if ( data.label ) { #>
+                                <span class="customize-control-title">{{ data.label }}</span>
+                        <# } #>
+                        <# if ( data.description ) { #>
+                                <span class="description customize-control-description">{{ data.description }}</span>
+                        <# } #>
                 </label>
+
+                <# if ( data.attachment && data.attachment.id ) { #>
+                        <div class="attachment-media-view {{ data.attachment.orientation }}">
+                                <div class="thumbnail thumbnail-{{ data.attachment.type }}">
+                                        <# if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.medium ) { #>
+                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.medium.url }}" draggable="false" />
+                                        <# } else if ( 'image' === data.attachment.type && data.attachment.sizes && data.attachment.sizes.full ) { #>
+                                                <img class="attachment-thumb" src="{{ data.attachment.sizes.full.url }}" draggable="false" />
+                                        <# } else if ( -1 === jQuery.inArray( data.attachment.type, [ 'audio', 'video' ] ) ) { #>
+                                                <img class="attachment-thumb type-icon" src="{{ data.attachment.icon }}" class="icon" draggable="false" />
+                                                <p class="attachment-title">{{ data.attachment.title }}</p>
+                                        <# } #>
+
+                                        <# if ( 'audio' === data.attachment.type ) { #>
+                                        <div class="wp-media-wrapper">
+                                                <p class="attachment-title">{{ data.attachment.title }}</p>
+                                                <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+                                                        <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+                                                </audio>
+                                        </div>
+                                        <# } else if ( 'video' === data.attachment.type ) {
+                                                var w_rule = h_rule = '';
+                                                if ( data.attachment.width ) {
+                                                        w_rule = 'width: ' + data.attachment.width + 'px;';
+                                                } else if ( wp.media.view.settings.contentWidth ) {
+                                                        w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
+                                                }
+                                                if ( data.attachment.height ) {
+                                                        h_rule = 'height: ' + data.attachment.height + 'px;';
+                                                }
+                                                #>
+                                                <div style="{{ w_rule }}{{ h_rule }}" class="wp-media-wrapper wp-video">
+                                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
+                                                                <# if ( data.attachment.width ) { #>width="{{ data.attachment.width }}"<# } #>
+                                                                <# if ( data.attachment.height ) { #>height="{{ data.attachment.height }}"<# } #>
+                                                                <# if ( data.attachment.image && data.attachment.image.src !== data.attachment.icon ) { #>poster="{{ data.attachment.image.src }}"<# } #>>
+                                                                <source type="{{ data.attachment.mime }}" src="{{ data.attachment.url }}"/>
+                                                        </video>
+                                                </div>
+                                        <# } #>
+                                </div>
+                        </div>
+                        <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['change']; ?></a>
+                        <# if ( data.defaultAttachmet && data.defaultAttachment.id !== data.attachment.id ) { #>
+                                <a class="default-button remove-button" href="#"><?php echo $this->button_labels['default']; ?></a>
+                                <p>{{ data.defaultAttachment.src }}</p>
+                        <# } else { #>
+                                <a class="remove-button" href="#"><?php echo $this->button_labels['remove']; ?></a>
+                        <# } #>
+                <# } else { #>
+                        <p class="placeholder-text"><?php echo $this->button_labels['placeholder']; ?></p>
+                        <a class="button upload-button" id="{{ data.settings.default }}-button" href="#"><?php echo $this->button_labels['select']; ?></a>
+                <# } #>
                 <?php
         }
 }
@@ -701 +804 @@
  */
 class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
         public $type = 'image';
-        public $get_url;
-        public $statuses;
-        public $extensions = array( 'jpg', 'jpeg', 'gif', 'png' );
-
-        protected $tabs = array();
+        public $mime_type = 'image';
 
         /**
          * Constructor.
          *
-         * @since 3.4.0
+         * @since 4.1.0
          * @uses WP_Customize_Upload_Control::__construct()
          *
          * @param WP_Customize_Manager $manager
-         * @param string $id
-         * @param array $args
          */
-        public function __construct( $manager, $id, $args ) {
-                $this->statuses = array( '' => __('No Image') );
-
+        public function __construct( $manager, $id, $args = array() ) {
                 parent::__construct( $manager, $id, $args );
 
-                $this->add_tab( 'upload-new', __('Upload New'), array( $this, 'tab_upload_new' ) );
-                $this->add_tab( 'uploaded',   __('Uploaded'),   array( $this, 'tab_uploaded' ) );
-
-                // Early priority to occur before $this->manager->prepare_controls();
-                add_action( 'customize_controls_init', array( $this, 'prepare_control' ), 5 );
+                $this->button_labels = array(
+                        'select'       => __( 'Select Image' ),
+                        'change'       => __( 'Change Image' ),
+                        'remove'       => __( 'Remove' ),
+                        'default'      => __( 'Default' ),
+                        'placeholder'  => __( 'No image selected' ),
+                        'frame_title'  => __( 'Select Image' ),
+                        'frame_button' => __( 'Choose Image' ),
+                );
         }
 
         /**
-         * Prepares the control.
-         *
-         * If no tabs exist, removes the control from the manager.
-         *
          * @since 3.4.2
+         * @deprecated 4.1.0
          */
-        public function prepare_control() {
-                if ( ! $this->tabs )
-                        $this->manager->remove_control( $this->id );
-        }
+        public function prepare_control() {}
 
         /**
-         * Refresh the parameters passed to the JavaScript via JSON.
-         *
-         * @since 3.4.0
-         * @uses WP_Customize_Upload_Control::to_json()
-         */
-        public function to_json() {
-                parent::to_json();
-                $this->json['statuses'] = $this->statuses;
-        }
-
-        /**
-         * Render the control's content.
-         *
-         * @since 3.4.0
-         */
-        public function render_content() {
-                $src = $this->value();
-                if ( isset( $this->get_url ) )
-                        $src = call_user_func( $this->get_url, $src );
-
-                ?>
-                <div class="customize-image-picker">
-                        <?php if ( ! empty( $this->label ) ) : ?>
-                                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
-                        <?php endif;
-                        if ( ! empty( $this->description ) ) : ?>
-                                <span class="description customize-control-description"><?php echo $this->description; ?></span>
-                        <?php endif; ?>
-
-                        <div class="customize-control-content">
-                                <div class="dropdown preview-thumbnail" tabindex="0">
-                                        <div class="dropdown-content">
-                                                <?php if ( empty( $src ) ): ?>
-                                                        <img style="display:none;" />
-                                                <?php else: ?>
-                                                        <img src="<?php echo esc_url( set_url_scheme( $src ) ); ?>" />
-                                                <?php endif; ?>
-                                                <div class="dropdown-status"></div>
-                                        </div>
-                                        <div class="dropdown-arrow"></div>
-                                </div>
-                        </div>
-
-                        <div class="library">
-                                <ul>
-                                        <?php foreach ( $this->tabs as $id => $tab ): ?>
-                                                <li data-customize-tab='<?php echo esc_attr( $id ); ?>' tabindex='0'>
-                                                        <?php echo esc_html( $tab['label'] ); ?>
-                                                </li>
-                                        <?php endforeach; ?>
-                                </ul>
-                                <?php foreach ( $this->tabs as $id => $tab ): ?>
-                                        <div class="library-content" data-customize-tab='<?php echo esc_attr( $id ); ?>'>
-                                                <?php call_user_func( $tab['callback'] ); ?>
-                                        </div>
-                                <?php endforeach; ?>
-                        </div>
-
-                        <div class="actions">
-                                <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
-                        </div>
-                </div>
-                <?php
-        }
-
-        /**
-         * Add a tab to the control.
-         *
          * @since 3.4.0
+         * @deprecated 4.1.0
          *
          * @param string $id
          * @param string $label
          * @param mixed $callback
          */
-        public function add_tab( $id, $label, $callback ) {
-                $this->tabs[ $id ] = array(
-                        'label'    => $label,
-                        'callback' => $callback,
-                );
-        }
+        public function add_tab( $id, $label, $callback ) {}
 
         /**
-         * Remove a tab from the control.
-         *
          * @since 3.4.0
+         * @deprecated 4.1.0
          *
          * @param string $id
          */
-        public function remove_tab( $id ) {
-                unset( $this->tabs[ $id ] );
-        }
-
-        /**
-         * @since 3.4.0
-         */
-        public function tab_upload_new() {
-                if ( ! _device_can_upload() ) {
-                        echo '<p>' . sprintf( __('The web browser on your device cannot be used to upload files. You may be able to use the <a href="%s">native app for your device</a> instead.'), 'https://apps.wordpress.org/' ) . '</p>';
-                } else {
-                        ?>
-                        <div class="upload-dropzone">
-                                <?php _e('Drop a file here or <a href="#" class="upload">select a file</a>.'); ?>
-                        </div>
-                        <div class="upload-fallback">
-                                <span class="button-secondary"><?php _e('Select File'); ?></span>
-                        </div>
-                        <?php
-                }
-        }
-
-        /**
-         * @since 3.4.0
-         */
-        public function tab_uploaded() {
-                ?>
-                <div class="uploaded-target"></div>
-                <?php
-        }
+        public function remove_tab( $id ) {}
 
         /**
          * @since 3.4.0
+         * @deprecated 4.1.0
          *
          * @param string $url
          * @param string $thumbnail_url
          */
-        public function print_tab_image( $url, $thumbnail_url = null ) {
-                $url = set_url_scheme( $url );
-                $thumbnail_url = ( $thumbnail_url ) ? set_url_scheme( $thumbnail_url ) : $url;
-                ?>
-                <a href="#" class="thumbnail" data-customize-image-value="<?php echo esc_url( $url ); ?>">
-                        <img src="<?php echo esc_url( $thumbnail_url ); ?>" />
-                </a>
-                <?php
-        }
+        public function print_tab_image( $url, $thumbnail_url = null ) {}
 }
 
 /**
@@ -899 +883 @@
                 parent::__construct( $manager, 'background_image', array(
                         'label'    => __( 'Background Image' ),
                         'section'  => 'background_image',
-                        'context'  => 'custom-background',
-                        'get_url'  => 'get_background_image',
                 ) );
-
-                if ( $this->setting->default )
-                        $this->add_tab( 'default',  __('Default'),  array( $this, 'tab_default_background' ) );
-        }
-
-        /**
-         * @since 3.4.0
-         */
-        public function tab_uploaded() {
-                $backgrounds = get_posts( array(
-                        'post_type'  => 'attachment',
-                        'meta_key'   => '_wp_attachment_is_custom_background',
-                        'meta_value' => $this->manager->get_stylesheet(),
-                        'orderby'    => 'none',
-                        'nopaging'   => true,
-                ) );
-
-                ?><div class="uploaded-target"></div><?php
-
-                if ( empty( $backgrounds ) )
-                        return;
-
-                foreach ( (array) $backgrounds as $background )
-                        $this->print_tab_image( esc_url_raw( $background->guid ) );
-        }
-
-        /**
-         * @since 3.4.0
-         * @uses WP_Customize_Image_Control::print_tab_image()
-         */
-        public function tab_default_background() {
-                $this->print_tab_image( $this->setting->default );
         }
 }
 

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

@@ -965 +965 @@
 
                 /* Control Types (custom control classes) */
                 $this->register_control_type( 'WP_Customize_Color_Control' );
+                $this->register_control_type( 'WP_Customize_Upload_Control' );
+                $this->register_control_type( 'WP_Customize_Image_Control' );
 
                 /* Site Title & Tagline */