Changeset 41935

Timestamp:

10/19/2017 03:03:19 AM (6 years ago)

Author:

westonruter

Message:

Customize: Move control's fallback selection of default content template to renderContent method to align with sections and panels.

• Only use default control content template when a more specific template doesn't exist.
• Remove extraneous whitespace from being output in WP_Customize_Control::render() method.
• Move Custom Header template printing to customize_controls_print_footer_scripts action.

See #30738.

Location:

trunk

Files:

• src/wp-admin/js/customize-controls.js (modified) (3 diffs)
• src/wp-includes/class-wp-customize-control.php (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-header-image-control.php (modified) (2 diffs)
• tests/phpunit/tests/customize/widgets.php (modified) (1 diff)

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

@@ -3363 +3363 @@
 
         initialize: function( id, options ) {
-            var control = this, deferredSettingIds = [], settings, gatherSettings, standardTypes;
+            var control = this, deferredSettingIds = [], settings, gatherSettings;
 
             control.params = _.extend( {}, control.defaults );
@@ -3401 +3401 @@
                 control.container = $( control.selector ); // Likely dead, per above. See #28709.
             }
+
+            if ( control.params.templateId ) {
+                control.templateSelector = control.params.templateId;
+            } else {
+                control.templateSelector = 'customize-control-' + control.params.type + '-content';
+            }
+
+            control.deferred = {
+                embedded: new $.Deferred()
+            };
+            control.section = new api.Value();
+            control.priority = new api.Value();
+            control.active = new api.Value();
+            control.activeArgumentsQueue = [];
+            control.notifications = new api.Notifications({
+                alt: control.altNotice
+            });
+
+            control.elements = [];
+
+            control.active.bind( function ( active ) {
+                var args = control.activeArgumentsQueue.shift();
+                args = $.extend( {}, control.defaultActiveArguments, args );
+                control.onChangeActive( active, args );
+            } );
+
+            control.section.set( control.params.section );
+            control.priority.set( isNaN( control.params.priority ) ? 10 : control.params.priority );
+            control.active.set( control.params.active );
+
+            api.utils.bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] );
+
+            control.settings = {};
+
+            settings = {};
+            if ( control.params.setting ) {
+                settings['default'] = control.params.setting;
+            }
+            _.extend( settings, control.params.settings );
+
+            // Note: Settings can be an array or an object.
+            _.each( settings, function( setting, key ) {
+                if ( _.isObject( setting ) ) { // @todo Or check if instance of api.Setting?
+                    control.settings[ key ] = setting;
+                } else {
+                    deferredSettingIds.push( setting );
+                }
+            } );
+
+            gatherSettings = function() {
+
+                // Fill-in all resolved settings.
+                _.each( settings, function ( settingId, key ) {
+                    if ( ! control.settings[ key ] && _.isString( settingId ) ) {
+                        control.settings[ key ] = api( settingId );
+                    }
+                } );
+
+                // Make sure settings passed as array gets associated with default.
+                if ( control.settings[0] && ! control.settings['default'] ) {
+                    control.settings['default'] = control.settings[0];
+                }
+
+                // Identify the main setting.
+                control.setting = control.settings['default'] || null;
+
+                control.embed();
+            };
+
+            if ( 0 === deferredSettingIds.length ) {
+                gatherSettings();
+            } else {
+                api.apply( api, deferredSettingIds.concat( gatherSettings ) );
+            }
+
+            // After the control is embedded on the page, invoke the "ready" method.
+            control.deferred.embedded.done( function () {
+                control.linkElements();
+                control.setupNotifications();
+                control.ready();
+            });
+        },
+
+        /**
+         * Link elements between settings and inputs.
+         *
+         * @since 4.7.0
+         * @access public
+         *
+         * @returns {void}
+         */
+        linkElements: function () {
+            var control = this, nodes, radios, element;
+
+            nodes = control.container.find( '[data-customize-setting-link], [data-customize-setting-key-link]' );
+            radios = {};
+
+            nodes.each( function () {
+                var node = $( this ), name, setting;
+
+                if ( node.data( 'customizeSettingLinked' ) ) {
+                    return;
+                }
+                node.data( 'customizeSettingLinked', true ); // Prevent re-linking element.
+
+                if ( node.is( ':radio' ) ) {
+                    name = node.prop( 'name' );
+                    if ( radios[name] ) {
+                        return;
+                    }
+
+                    radios[name] = true;
+                    node = nodes.filter( '[name="' + name + '"]' );
+                }
+
+                // Let link by default refer to setting ID. If it doesn't exist, fallback to looking up by setting key.
+                if ( node.data( 'customizeSettingLink' ) ) {
+                    setting = api( node.data( 'customizeSettingLink' ) );
+                } else if ( node.data( 'customizeSettingKeyLink' ) ) {
+                    setting = control.settings[ node.data( 'customizeSettingKeyLink' ) ];
+                }
+
+                if ( setting ) {
+                    element = new api.Element( node );
+                    control.elements.push( element );
+                    element.sync( setting );
+                    element.set( setting() );
+                }
+            } );
+        },
+
+        /**
+         * Embed the control into the page.
+         */
+        embed: function () {
+            var control = this,
+                inject;
+
+            // Watch for changes to the section state
+            inject = function ( sectionId ) {
+                var parentContainer;
+                if ( ! sectionId ) { // @todo allow a control to be embedded without a section, for instance a control embedded in the front end.
+                    return;
+                }
+                // Wait for the section to be registered
+                api.section( sectionId, function ( section ) {
+                    // Wait for the section to be ready/initialized
+                    section.deferred.embedded.done( function () {
+                        parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
+                        if ( ! control.container.parent().is( parentContainer ) ) {
+                            parentContainer.append( control.container );
+                            control.renderContent();
+                        }
+                        control.deferred.embedded.resolve();
+                    });
+                });
+            };
+            control.section.bind( inject );
+            inject( control.section.get() );
+        },
+
+        /**
+         * Triggered when the control's markup has been injected into the DOM.
+         *
+         * @returns {void}
+         */
+        ready: function() {
+            var control = this, newItem;
+            if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
+                newItem = control.container.find( '.new-content-item' );
+                newItem.hide(); // Hide in JS to preserve flex display when showing.
+                control.container.on( 'click', '.add-new-toggle', function( e ) {
+                    $( e.currentTarget ).slideUp( 180 );
+                    newItem.slideDown( 180 );
+                    newItem.find( '.create-item-input' ).focus();
+                });
+                control.container.on( 'click', '.add-content', function() {
+                    control.addNewPage();
+                });
+                control.container.on( 'keydown', '.create-item-input', function( e ) {
+                    if ( 13 === e.which ) { // Enter
+                        control.addNewPage();
+                    }
+                });
+            }
+        },
+
+        /**
+         * Get the element inside of a control's container that contains the validation error message.
+         *
+         * Control subclasses may override this to return the proper container to render notifications into.
+         * Injects the notification container for existing controls that lack the necessary container,
+         * including special handling for nav menu items and widgets.
+         *
+         * @since 4.6.0
+         * @returns {jQuery} Setting validation message element.
+         * @this {wp.customize.Control}
+         */
+        getNotificationsContainerElement: function() {
+            var control = this, controlTitle, notificationsContainer;
+
+            notificationsContainer = control.container.find( '.customize-control-notifications-container:first' );
+            if ( notificationsContainer.length ) {
+                return notificationsContainer;
+            }
+
+            notificationsContainer = $( '<div class="customize-control-notifications-container"></div>' );
+
+            if ( control.container.hasClass( 'customize-control-nav_menu_item' ) ) {
+                control.container.find( '.menu-item-settings:first' ).prepend( notificationsContainer );
+            } else if ( control.container.hasClass( 'customize-control-widget_form' ) ) {
+                control.container.find( '.widget-inside:first' ).prepend( notificationsContainer );
+            } else {
+                controlTitle = control.container.find( '.customize-control-title' );
+                if ( controlTitle.length ) {
+                    controlTitle.after( notificationsContainer );
+                } else {
+                    control.container.prepend( notificationsContainer );
+                }
+            }
+            return notificationsContainer;
+        },
+
+        /**
+         * Set up notifications.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        setupNotifications: function() {
+            var control = this, renderNotificationsIfVisible, onSectionAssigned;
+
+            // Add setting notifications to the control notification.
+            _.each( control.settings, function( setting ) {
+                if ( ! setting.notifications ) {
+                    return;
+                }
+                setting.notifications.bind( 'add', function( settingNotification ) {
+                    var params = _.extend(
+                        {},
+                        settingNotification,
+                        {
+                            setting: setting.id
+                        }
+                    );
+                    control.notifications.add( new api.Notification( setting.id + ':' + settingNotification.code, params ) );
+                } );
+                setting.notifications.bind( 'remove', function( settingNotification ) {
+                    control.notifications.remove( setting.id + ':' + settingNotification.code );
+                } );
+            } );
+
+            control.notifications.container = control.getNotificationsContainerElement();
+
+            renderNotificationsIfVisible = function() {
+                var sectionId = control.section();
+                if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) {
+                    control.notifications.render();
+                }
+            };
+
+            control.notifications.bind( 'rendered', function() {
+                var notifications = control.notifications.get();
+                control.container.toggleClass( 'has-notifications', 0 !== notifications.length );
+                control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length );
+            } );
+
+            onSectionAssigned = function( newSectionId, oldSectionId ) {
+                if ( oldSectionId && api.section.has( oldSectionId ) ) {
+                    api.section( oldSectionId ).expanded.unbind( renderNotificationsIfVisible );
+                }
+                if ( newSectionId ) {
+                    api.section( newSectionId, function( section ) {
+                        section.expanded.bind( renderNotificationsIfVisible );
+                        renderNotificationsIfVisible();
+                    });
+                }
+            };
+
+            control.section.bind( onSectionAssigned );
+            onSectionAssigned( control.section.get() );
+            control.notifications.bind( 'change', _.debounce( renderNotificationsIfVisible ) );
+        },
+
+        /**
+         * Render notifications.
+         *
+         * Renders the `control.notifications` into the control's container.
+         * Control subclasses may override this method to do their own handling
+         * of rendering notifications.
+         *
+         * @deprecated in favor of `control.notifications.render()`
+         * @since 4.6.0
+         * @this {wp.customize.Control}
+         */
+        renderNotifications: function() {
+            var control = this, container, notifications, hasError = false;
+
+            if ( 'undefined' !== typeof console && console.warn ) {
+                console.warn( '[DEPRECATED] wp.customize.Control.prototype.renderNotifications() is deprecated in favor of instantating a wp.customize.Notifications and calling its render() method.' );
+            }
+
+            container = control.getNotificationsContainerElement();
+            if ( ! container || ! container.length ) {
+                return;
+            }
+            notifications = [];
+            control.notifications.each( function( notification ) {
+                notifications.push( notification );
+                if ( 'error' === notification.type ) {
+                    hasError = true;
+                }
+            } );
+
+            if ( 0 === notifications.length ) {
+                container.stop().slideUp( 'fast' );
+            } else {
+                container.stop().slideDown( 'fast', null, function() {
+                    $( this ).css( 'height', 'auto' );
+                } );
+            }
+
+            if ( ! control.notificationsTemplate ) {
+                control.notificationsTemplate = wp.template( 'customize-control-notifications' );
+            }
+
+            control.container.toggleClass( 'has-notifications', 0 !== notifications.length );
+            control.container.toggleClass( 'has-error', hasError );
+            container.empty().append( $.trim(
+                control.notificationsTemplate( { notifications: notifications, altNotice: Boolean( control.altNotice ) } )
+            ) );
+        },
+
+        /**
+         * Normal controls do not expand, so just expand its parent
+         *
+         * @param {Object} [params]
+         */
+        expand: function ( params ) {
+            api.section( this.section() ).expand( params );
+        },
+
+        /**
+         * Bring the containing section and panel into view and then
+         * this control into view, focusing on the first input.
+         */
+        focus: focus,
+
+        /**
+         * Update UI in response to a change in the control's active state.
+         * This does not change the active state, it merely handles the behavior
+         * for when it does change.
+         *
+         * @since 4.1.0
+         *
+         * @param {Boolean}  active
+         * @param {Object}   args
+         * @param {Number}   args.duration
+         * @param {Function} args.completeCallback
+         */
+        onChangeActive: function ( active, args ) {
+            if ( args.unchanged ) {
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+                return;
+            }
+
+            if ( ! $.contains( document, this.container[0] ) ) {
+                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
+                this.container.toggle( active );
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+            } else if ( active ) {
+                this.container.slideDown( args.duration, args.completeCallback );
+            } else {
+                this.container.slideUp( args.duration, args.completeCallback );
+            }
+        },
+
+        /**
+         * @deprecated 4.1.0 Use this.onChangeActive() instead.
+         */
+        toggle: function ( active ) {
+            return this.onChangeActive( active, this.defaultActiveArguments );
+        },
+
+        /**
+         * Shorthand way to enable the active state.
+         *
+         * @since 4.1.0
+         *
+         * @param {Object} [params]
+         * @returns {Boolean} false if already active
+         */
+        activate: Container.prototype.activate,
+
+        /**
+         * Shorthand way to disable the active state.
+         *
+         * @since 4.1.0
+         *
+         * @param {Object} [params]
+         * @returns {Boolean} false if already inactive
+         */
+        deactivate: Container.prototype.deactivate,
+
+        /**
+         * Re-use _toggleActive from Container class.
+         *
+         * @access private
+         */
+        _toggleActive: Container.prototype._toggleActive,
+
+        // @todo This function appears to be dead code and can be removed.
+        dropdownInit: function() {
+            var control      = this,
+                statuses     = this.container.find('.dropdown-status'),
+                params       = this.params,
+                toggleFreeze = false,
+                update       = function( to ) {
+                    if ( 'string' === typeof to && params.statuses && params.statuses[ to ] ) {
+                        statuses.html( params.statuses[ to ] ).show();
+                    } else {
+                        statuses.hide();
+                    }
+                };
+
+            // Support the .dropdown class to open/close complex elements
+            this.container.on( 'click keydown', '.dropdown', function( event ) {
+                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                    return;
+                }
+
+                event.preventDefault();
+
+                if ( ! toggleFreeze ) {
+                    control.container.toggleClass( 'open' );
+                }
+
+                if ( control.container.hasClass( 'open' ) ) {
+                    control.container.parent().parent().find( 'li.library-selected' ).focus();
+                }
+
+                // Don't want to fire focus and click at same time
+                toggleFreeze = true;
+                setTimeout(function () {
+                    toggleFreeze = false;
+                }, 400);
+            });
+
+            this.setting.bind( update );
+            update( this.setting() );
+        },
+
+        /**
+         * Render the control from its JS template, if it exists.
+         *
+         * The control's container must already exist in the DOM.
+         *
+         * @since 4.1.0
+         */
+        renderContent: function () {
+            var control = this, template, standardTypes, templateId;
 
             standardTypes = [
@@ -3422 +3887 @@
                 'url'
             ];
-            if ( control.params.templateId ) {
-                control.templateSelector = control.params.templateId;
-            } else if ( _.contains( standardTypes, control.params.type ) && control.container.is( ':empty' ) ) {
-                control.templateSelector = 'customize-control-default-content';
-            } else {
-                control.templateSelector = 'customize-control-' + control.params.type + '-content';
-            }
-
-            control.deferred = {
-                embedded: new $.Deferred()
-            };
-            control.section = new api.Value();
-            control.priority = new api.Value();
-            control.active = new api.Value();
-            control.activeArgumentsQueue = [];
-            control.notifications = new api.Notifications({
-                alt: control.altNotice
-            });
-
-            control.elements = [];
-
-            control.active.bind( function ( active ) {
-                var args = control.activeArgumentsQueue.shift();
-                args = $.extend( {}, control.defaultActiveArguments, args );
-                control.onChangeActive( active, args );
-            } );
-
-            control.section.set( control.params.section );
-            control.priority.set( isNaN( control.params.priority ) ? 10 : control.params.priority );
-            control.active.set( control.params.active );
-
-            api.utils.bubbleChildValueChanges( control, [ 'section', 'priority', 'active' ] );
-
-            control.settings = {};
-
-            settings = {};
-            if ( control.params.setting ) {
-                settings['default'] = control.params.setting;
-            }
-            _.extend( settings, control.params.settings );
-
-            // Note: Settings can be an array or an object.
-            _.each( settings, function( setting, key ) {
-                if ( _.isObject( setting ) ) { // @todo Or check if instance of api.Setting?
-                    control.settings[ key ] = setting;
-                } else {
-                    deferredSettingIds.push( setting );
-                }
-            } );
-
-            gatherSettings = function() {
-
-                // Fill-in all resolved settings.
-                _.each( settings, function ( settingId, key ) {
-                    if ( ! control.settings[ key ] && _.isString( settingId ) ) {
-                        control.settings[ key ] = api( settingId );
-                    }
-                } );
-
-                // Make sure settings passed as array gets associated with default.
-                if ( control.settings[0] && ! control.settings['default'] ) {
-                    control.settings['default'] = control.settings[0];
-                }
-
-                // Identify the main setting.
-                control.setting = control.settings['default'] || null;
-
-                control.embed();
-            };
-
-            if ( 0 === deferredSettingIds.length ) {
-                gatherSettings();
-            } else {
-                api.apply( api, deferredSettingIds.concat( gatherSettings ) );
-            }
-
-            // After the control is embedded on the page, invoke the "ready" method.
-            control.deferred.embedded.done( function () {
-                control.linkElements();
-                control.setupNotifications();
-                control.ready();
-            });
-        },
-
-        /**
-         * Link elements between settings and inputs.
-         *
-         * @since 4.7.0
-         * @access public
-         *
-         * @returns {void}
-         */
-        linkElements: function () {
-            var control = this, nodes, radios, element;
-
-            nodes = control.container.find( '[data-customize-setting-link], [data-customize-setting-key-link]' );
-            radios = {};
-
-            nodes.each( function () {
-                var node = $( this ), name, setting;
-
-                if ( node.data( 'customizeSettingLinked' ) ) {
-                    return;
-                }
-                node.data( 'customizeSettingLinked', true ); // Prevent re-linking element.
-
-                if ( node.is( ':radio' ) ) {
-                    name = node.prop( 'name' );
-                    if ( radios[name] ) {
-                        return;
-                    }
-
-                    radios[name] = true;
-                    node = nodes.filter( '[name="' + name + '"]' );
-                }
-
-                // Let link by default refer to setting ID. If it doesn't exist, fallback to looking up by setting key.
-                if ( node.data( 'customizeSettingLink' ) ) {
-                    setting = api( node.data( 'customizeSettingLink' ) );
-                } else if ( node.data( 'customizeSettingKeyLink' ) ) {
-                    setting = control.settings[ node.data( 'customizeSettingKeyLink' ) ];
-                }
-
-                if ( setting ) {
-                    element = new api.Element( node );
-                    control.elements.push( element );
-                    element.sync( setting );
-                    element.set( setting() );
-                }
-            } );
-        },
-
-        /**
-         * Embed the control into the page.
-         */
-        embed: function () {
-            var control = this,
-                inject;
-
-            // Watch for changes to the section state
-            inject = function ( sectionId ) {
-                var parentContainer;
-                if ( ! sectionId ) { // @todo allow a control to be embedded without a section, for instance a control embedded in the front end.
-                    return;
-                }
-                // Wait for the section to be registered
-                api.section( sectionId, function ( section ) {
-                    // Wait for the section to be ready/initialized
-                    section.deferred.embedded.done( function () {
-                        parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
-                        if ( ! control.container.parent().is( parentContainer ) ) {
-                            parentContainer.append( control.container );
-                            control.renderContent();
-                        }
-                        control.deferred.embedded.resolve();
-                    });
-                });
-            };
-            control.section.bind( inject );
-            inject( control.section.get() );
-        },
-
-        /**
-         * Triggered when the control's markup has been injected into the DOM.
-         *
-         * @returns {void}
-         */
-        ready: function() {
-            var control = this, newItem;
-            if ( 'dropdown-pages' === control.params.type && control.params.allow_addition ) {
-                newItem = control.container.find( '.new-content-item' );
-                newItem.hide(); // Hide in JS to preserve flex display when showing.
-                control.container.on( 'click', '.add-new-toggle', function( e ) {
-                    $( e.currentTarget ).slideUp( 180 );
-                    newItem.slideDown( 180 );
-                    newItem.find( '.create-item-input' ).focus();
-                });
-                control.container.on( 'click', '.add-content', function() {
-                    control.addNewPage();
-                });
-                control.container.on( 'keydown', '.create-item-input', function( e ) {
-                    if ( 13 === e.which ) { // Enter
-                        control.addNewPage();
-                    }
-                });
-            }
-        },
-
-        /**
-         * Get the element inside of a control's container that contains the validation error message.
-         *
-         * Control subclasses may override this to return the proper container to render notifications into.
-         * Injects the notification container for existing controls that lack the necessary container,
-         * including special handling for nav menu items and widgets.
-         *
-         * @since 4.6.0
-         * @returns {jQuery} Setting validation message element.
-         * @this {wp.customize.Control}
-         */
-        getNotificationsContainerElement: function() {
-            var control = this, controlTitle, notificationsContainer;
-
-            notificationsContainer = control.container.find( '.customize-control-notifications-container:first' );
-            if ( notificationsContainer.length ) {
-                return notificationsContainer;
-            }
-
-            notificationsContainer = $( '<div class="customize-control-notifications-container"></div>' );
-
-            if ( control.container.hasClass( 'customize-control-nav_menu_item' ) ) {
-                control.container.find( '.menu-item-settings:first' ).prepend( notificationsContainer );
-            } else if ( control.container.hasClass( 'customize-control-widget_form' ) ) {
-                control.container.find( '.widget-inside:first' ).prepend( notificationsContainer );
-            } else {
-                controlTitle = control.container.find( '.customize-control-title' );
-                if ( controlTitle.length ) {
-                    controlTitle.after( notificationsContainer );
-                } else {
-                    control.container.prepend( notificationsContainer );
-                }
-            }
-            return notificationsContainer;
-        },
-
-        /**
-         * Set up notifications.
-         *
-         * @since 4.9.0
-         * @returns {void}
-         */
-        setupNotifications: function() {
-            var control = this, renderNotificationsIfVisible, onSectionAssigned;
-
-            // Add setting notifications to the control notification.
-            _.each( control.settings, function( setting ) {
-                if ( ! setting.notifications ) {
-                    return;
-                }
-                setting.notifications.bind( 'add', function( settingNotification ) {
-                    var params = _.extend(
-                        {},
-                        settingNotification,
-                        {
-                            setting: setting.id
-                        }
-                    );
-                    control.notifications.add( new api.Notification( setting.id + ':' + settingNotification.code, params ) );
-                } );
-                setting.notifications.bind( 'remove', function( settingNotification ) {
-                    control.notifications.remove( setting.id + ':' + settingNotification.code );
-                } );
-            } );
-
-            control.notifications.container = control.getNotificationsContainerElement();
-
-            renderNotificationsIfVisible = function() {
-                var sectionId = control.section();
-                if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) {
-                    control.notifications.render();
-                }
-            };
-
-            control.notifications.bind( 'rendered', function() {
-                var notifications = control.notifications.get();
-                control.container.toggleClass( 'has-notifications', 0 !== notifications.length );
-                control.container.toggleClass( 'has-error', 0 !== _.where( notifications, { type: 'error' } ).length );
-            } );
-
-            onSectionAssigned = function( newSectionId, oldSectionId ) {
-                if ( oldSectionId && api.section.has( oldSectionId ) ) {
-                    api.section( oldSectionId ).expanded.unbind( renderNotificationsIfVisible );
-                }
-                if ( newSectionId ) {
-                    api.section( newSectionId, function( section ) {
-                        section.expanded.bind( renderNotificationsIfVisible );
-                        renderNotificationsIfVisible();
-                    });
-                }
-            };
-
-            control.section.bind( onSectionAssigned );
-            onSectionAssigned( control.section.get() );
-            control.notifications.bind( 'change', _.debounce( renderNotificationsIfVisible ) );
-        },
-
-        /**
-         * Render notifications.
-         *
-         * Renders the `control.notifications` into the control's container.
-         * Control subclasses may override this method to do their own handling
-         * of rendering notifications.
-         *
-         * @deprecated in favor of `control.notifications.render()`
-         * @since 4.6.0
-         * @this {wp.customize.Control}
-         */
-        renderNotifications: function() {
-            var control = this, container, notifications, hasError = false;
-
-            if ( 'undefined' !== typeof console && console.warn ) {
-                console.warn( '[DEPRECATED] wp.customize.Control.prototype.renderNotifications() is deprecated in favor of instantating a wp.customize.Notifications and calling its render() method.' );
-            }
-
-            container = control.getNotificationsContainerElement();
-            if ( ! container || ! container.length ) {
-                return;
-            }
-            notifications = [];
-            control.notifications.each( function( notification ) {
-                notifications.push( notification );
-                if ( 'error' === notification.type ) {
-                    hasError = true;
-                }
-            } );
-
-            if ( 0 === notifications.length ) {
-                container.stop().slideUp( 'fast' );
-            } else {
-                container.stop().slideDown( 'fast', null, function() {
-                    $( this ).css( 'height', 'auto' );
-                } );
-            }
-
-            if ( ! control.notificationsTemplate ) {
-                control.notificationsTemplate = wp.template( 'customize-control-notifications' );
-            }
-
-            control.container.toggleClass( 'has-notifications', 0 !== notifications.length );
-            control.container.toggleClass( 'has-error', hasError );
-            container.empty().append( $.trim(
-                control.notificationsTemplate( { notifications: notifications, altNotice: Boolean( control.altNotice ) } )
-            ) );
-        },
-
-        /**
-         * Normal controls do not expand, so just expand its parent
-         *
-         * @param {Object} [params]
-         */
-        expand: function ( params ) {
-            api.section( this.section() ).expand( params );
-        },
-
-        /**
-         * Bring the containing section and panel into view and then
-         * this control into view, focusing on the first input.
-         */
-        focus: focus,
-
-        /**
-         * Update UI in response to a change in the control's active state.
-         * This does not change the active state, it merely handles the behavior
-         * for when it does change.
-         *
-         * @since 4.1.0
-         *
-         * @param {Boolean}  active
-         * @param {Object}   args
-         * @param {Number}   args.duration
-         * @param {Function} args.completeCallback
-         */
-        onChangeActive: function ( active, args ) {
-            if ( args.unchanged ) {
-                if ( args.completeCallback ) {
-                    args.completeCallback();
-                }
-                return;
-            }
-
-            if ( ! $.contains( document, this.container[0] ) ) {
-                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
-                this.container.toggle( active );
-                if ( args.completeCallback ) {
-                    args.completeCallback();
-                }
-            } else if ( active ) {
-                this.container.slideDown( args.duration, args.completeCallback );
-            } else {
-                this.container.slideUp( args.duration, args.completeCallback );
-            }
-        },
-
-        /**
-         * @deprecated 4.1.0 Use this.onChangeActive() instead.
-         */
-        toggle: function ( active ) {
-            return this.onChangeActive( active, this.defaultActiveArguments );
-        },
-
-        /**
-         * Shorthand way to enable the active state.
-         *
-         * @since 4.1.0
-         *
-         * @param {Object} [params]
-         * @returns {Boolean} false if already active
-         */
-        activate: Container.prototype.activate,
-
-        /**
-         * Shorthand way to disable the active state.
-         *
-         * @since 4.1.0
-         *
-         * @param {Object} [params]
-         * @returns {Boolean} false if already inactive
-         */
-        deactivate: Container.prototype.deactivate,
-
-        /**
-         * Re-use _toggleActive from Container class.
-         *
-         * @access private
-         */
-        _toggleActive: Container.prototype._toggleActive,
-
-        // @todo This function appears to be dead code and can be removed.
-        dropdownInit: function() {
-            var control      = this,
-                statuses     = this.container.find('.dropdown-status'),
-                params       = this.params,
-                toggleFreeze = false,
-                update       = function( to ) {
-                    if ( 'string' === typeof to && params.statuses && params.statuses[ to ] ) {
-                        statuses.html( params.statuses[ to ] ).show();
-                    } else {
-                        statuses.hide();
-                    }
-                };
-
-            // Support the .dropdown class to open/close complex elements
-            this.container.on( 'click keydown', '.dropdown', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
-                event.preventDefault();
-
-                if ( ! toggleFreeze ) {
-                    control.container.toggleClass( 'open' );
-                }
-
-                if ( control.container.hasClass( 'open' ) ) {
-                    control.container.parent().parent().find( 'li.library-selected' ).focus();
-                }
-
-                // Don't want to fire focus and click at same time
-                toggleFreeze = true;
-                setTimeout(function () {
-                    toggleFreeze = false;
-                }, 400);
-            });
-
-            this.setting.bind( update );
-            update( this.setting() );
-        },
-
-        /**
-         * Render the control from its JS template, if it exists.
-         *
-         * The control's container must already exist in the DOM.
-         *
-         * @since 4.1.0
-         */
-        renderContent: function () {
-            var template,
-                control = this;
+
+            templateId = control.templateSelector;
+
+            // Use default content template when a standard HTML type is used and there isn't a more specific template existing.
+            if ( templateId === 'customize-control-' + control.params.type + '-content' && _.contains( standardTypes, control.params.type ) && ! document.getElementById( 'tmpl-' + templateId ) ) {
+                templateId = 'customize-control-default-content';
+            }
 
             // Replace the container element's content with the control.
-            if ( 0 !== $( '#tmpl-' + control.templateSelector ).length ) {
-                template = wp.template( control.templateSelector );
+            if ( document.getElementById( 'tmpl-' + templateId ) ) {
+                template = wp.template( templateId );
                 if ( template && control.container ) {
                     control.container.html( template( control.params ) );

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

@@ -422 +422 @@
         $class = 'customize-control customize-control-' . $this->type;
 
-        ?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
-            <?php $this->render_content(); ?>
-        </li><?php
+        printf( '<li id="%s" class="%s">', esc_attr( $id ), esc_attr( $class ) );
+        $this->render_content();
+        echo '</li>';
     }
 

trunk/src/wp-includes/customize/class-wp-customize-header-image-control.php

@@ -78 +78 @@
         }
 
+        add_action( 'customize_controls_print_footer_scripts', array( $this, 'print_header_image_template' ) );
+
         // Process default headers and uploaded headers.
         $custom_image_header->process_default_headers();
@@ -158 +160 @@
      */
     public function render_content() {
-        $this->print_header_image_template();
         $visibility = $this->get_current_image_src() ? '' : ' style="display:none" ';
         $width = absint( get_theme_support( 'custom-header', 'width' ) );

trunk/tests/phpunit/tests/customize/widgets.php

@@ -422 +422 @@
 
         $this->assertEquals( 'widget_form', $params['type'] );
-        $this->assertRegExp( '#^<li[^>]+>\s+</li>$#', $params['content'] );
+        $this->assertRegExp( '#^<li[^>]+>\s*</li>$#', $params['content'] );
         $this->assertRegExp( '#^<div[^>]*class=\'widget\'[^>]*#s', $params['widget_control'] );
         $this->assertContains( '<div class="widget-content"></div>', $params['widget_control'] );