Changeset 42113

Timestamp:

11/03/2017 12:58:25 AM (9 years ago)

Author:

westonruter

Message:

Customize: Make sure theme switch blocking in the Customizer is consistently applied when changeset is drafted/scheduled.

• Consider both selectedChangesetStatus and changesetStatus states when deciding to disable.
• Factor out common logic into canSwitchTheme function on ThemesPanel.
• Keep Live Preview and Install buttons disabled in Themes controls and detail overlays when appropriate.

Props westonruter, dlh.
Amends [41788].
See #42126, #37661, #39896.
Fixes #42406.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (9 diffs)

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

@@ -2550 +2550 @@
                  */
                 showDetails: function ( theme, callback ) {
-                        var section = this;
+                        var section = this, panel = api.panel( 'themes' );
                         section.currentTheme = theme.id;
                         section.overlay.html( section.template( theme ) )
                                 .fadeIn( 'fast' )
                                 .focus();
+
+                        function disableSwitchButtons() {
+                                return ! panel.canSwitchTheme( theme.id );
+                        }
+
+                        // Temporary special function since supplying SFTP credentials does not work yet. See #42184.
+                        function disableInstallButtons() {
+                                return disableSwitchButtons() || true === api.settings.theme._filesystemCredentialsNeeded;
+                        }
+
+                        section.overlay.find( 'button.preview, button.preview-theme' ).toggleClass( 'disabled', disableSwitchButtons() );
+                        section.overlay.find( 'button.theme-install' ).toggleClass( 'disabled', disableInstallButtons() );
+
                         section.$body.addClass( 'modal-open' );
                         section.containFocus( section.overlay );
@@ -3032 +3045 @@
 
                 /**
+                 * 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.
                  *
@@ -3053 +3081 @@
 
                         function toggleDisabledNotifications() {
-                                if ( 'publish' === api.state( 'selectedChangesetStatus' ).get() ) {
+                                if ( panel.canSwitchTheme() ) {
                                         panel.notifications.remove( 'theme_switch_unavailable' );
                                 } else {
@@ -3064 +3092 @@
                         toggleDisabledNotifications();
                         api.state( 'selectedChangesetStatus' ).bind( toggleDisabledNotifications );
+                        api.state( 'changesetStatus' ).bind( toggleDisabledNotifications );
 
                         // Collapse panel to customize the current theme.
@@ -3174 +3203 @@
 
                         // 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'
@@ -3267 +3296 @@
                  */
                 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();
                         }
@@ -5090 +5119 @@
                  */
                 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 );
                         }
 
@@ -5100 +5129 @@
                                 return disableSwitchButtons() || true === api.settings.theme._filesystemCredentialsNeeded;
                         }
-                        function updateButtons( container ) {
-                                var _container = container || control.container;
-                                _container.find( 'button.preview, button.preview-theme' ).toggleClass( 'disabled', disableSwitchButtons() );
-                                _container.find( 'button.theme-install' ).toggleClass( 'disabled', disableInstallButtons() );
-                        }
-
-                        api.state( 'selectedChangesetStatus' ).bind( function() {
-                                updateButtons();
-                        });
+                        function updateButtons() {
+                                control.container.find( 'button.preview, button.preview-theme' ).toggleClass( 'disabled', disableSwitchButtons() );
+                                control.container.find( 'button.theme-install' ).toggleClass( 'disabled', disableInstallButtons() );
+                        }
+
+                        api.state( 'selectedChangesetStatus' ).bind( updateButtons );
+                        api.state( 'changesetStatus' ).bind( updateButtons );
                         updateButtons();
 
@@ -5135 +5162 @@
                                 section = api.section( control.section() );
                                 section.showDetails( control.params.theme, function() {
-                                        updateButtons( section.overlay.find( '.theme-actions' ) );
 
                                         // Temporary special function since supplying SFTP credentials does not work yet. See #42184.