Ticket #42406: 42406.4.diff

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

@@ -3030 +3030 @@
                         api.Panel.prototype.initialize.call( panel, id, options );
                 },
 
+                /**
+                 * Determine whether a given theme can be switched to, or in general.
+                 *
+                 * @since 4.9.0
+                 *
+                 * @param {string} [slug] - Theme slug.
+                 * @returns {boolean} Whether the theme can be switched to.
+                 */
+                canSwitchTheme: function canSwitchTheme( slug ) {
+                        if ( slug && slug === api.settings.theme.stylesheet ) {
+                                return true;
+                        }
+                        return 'publish' === api.state( 'selectedChangesetStatus' ).get() && ( '' === api.state( 'changesetStatus' ).get() || 'auto-draft' === api.state( 'changesetStatus' ).get() );
+                },
+
                 /**
                  * Attach events.
                  *
@@ -3052 +3067 @@
                         }
 
                         function toggleDisabledNotifications() {
-                                if ( 'publish' === api.state( 'selectedChangesetStatus' ).get() ) {
+                                if ( panel.canSwitchTheme() ) {
                                         panel.notifications.remove( 'theme_switch_unavailable' );
                                 } else {
                                         panel.notifications.add( new api.Notification( 'theme_switch_unavailable', {
@@ -3063 +3078 @@
                         }
                         toggleDisabledNotifications();
                         api.state( 'selectedChangesetStatus' ).bind( toggleDisabledNotifications );
+                        api.state( 'changesetStatus' ).bind( toggleDisabledNotifications );
 
                         // Collapse panel to customize the current theme.
                         panel.contentContainer.on( 'click', '.customize-theme', function() {
@@ -3173 +3189 @@
                         }
 
                         // Prevent loading a non-active theme preview when there is a drafted/scheduled changeset.
-                        if ( 'publish' !== api.state( 'selectedChangesetStatus' ).get() && slug !== api.settings.theme.stylesheet ) {
+                        if ( panel.canSwitchTheme( slug ) ) {
                                 deferred.reject({
                                         errorCode: 'theme_switch_unavailable'
                                 });
@@ -3266 +3282 @@
                  * @returns {jQuery.promise} Promise.
                  */
                 loadThemePreview: function( themeId ) {
-                        var deferred = $.Deferred(), onceProcessingComplete, urlParser, queryParams;
+                        var panel = this, deferred = $.Deferred(), onceProcessingComplete, urlParser, queryParams;
 
                         // Prevent loading a non-active theme preview when there is a drafted/scheduled changeset.
-                        if ( 'publish' !== api.state( 'selectedChangesetStatus' ).get() && themeId !== api.settings.theme.stylesheet ) {
+                        if ( ! panel.canSwitchTheme( themeId ) ) {
                                 return deferred.reject().promise();
                         }
 
@@ -5089 +5105 @@
                  * @since 4.2.0
                  */
                 ready: function() {
-                        var control = this;
+                        var control = this, panel = api.panel( 'themes' );
 
                         function disableSwitchButtons() {
-                                return 'publish' !== api.state( 'selectedChangesetStatus' ).get() && control.params.theme.id !== api.settings.theme.stylesheet;
+                                return ! panel.canSwitchTheme( control.params.theme.id );
                         }
 
                         // Temporary special function since supplying SFTP credentials does not work yet. See #42184.
@@ -5107 +5123 @@
 
                         api.state( 'selectedChangesetStatus' ).bind( function() {
                                 updateButtons();
-                        });
+                        } );
+                        api.state( 'changesetStatus' ).bind( function() {
+                                updateButtons();
+                        } );
                         updateButtons();
 
                         control.container.on( 'touchmove', '.theme', function() {