Changeset 42113

Timestamp:

11/03/2017 12:58:25 AM (7 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.