Changeset 41935

Timestamp:

10/19/2017 03:03:19 AM (9 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'] );