Changeset 41788

Timestamp:

10/07/2017 05:59:45 AM (9 years ago)

Author:

westonruter

Message:

Customize: Fix confusion related to visibility of Themes panel with drafted/scheduled changesets.

• Prevent autoloading an existing draft/future changeset when theme not active.
• Add missing notifications container to Themes panel.
• Remove deactivation of themes panel when selected status is not publish.
• Show notification in Themes panel when themes cannot be previewed and disable preview buttons.
• Reject installTheme call when theme preview not available.
• Return promise from installTheme and eliminate use of global events in favor of promises.

Props westonruter, melchoyce, zoonini.
See #37661, #39896.
Fixes #42126.

Location:

trunk

Files:

• src/wp-admin/js/customize-controls.js (modified) (10 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-themes-panel.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (1 diff)

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

@@ -2802 +2802 @@
                  */
                 attachEvents: function() {
-                        var panel = this;
+                        var panel = this, toggleDisabledNotification;
 
                         // Attach regular panel events.
                         api.Panel.prototype.attachEvents.apply( panel );
+
+                        toggleDisabledNotification = function() {
+                                if ( 'publish' === api.state( 'selectedChangesetStatus' ).get() ) {
+                                        panel.notifications.remove( 'theme_switch_unavailable' );
+                                } else {
+                                        panel.notifications.add( new api.Notification( 'theme_switch_unavailable', {
+                                                message: api.l10n.themePreviewUnavailable,
+                                                type: 'warning'
+                                        } ) );
+                                }
+                        };
+                        toggleDisabledNotification();
+                        api.state( 'selectedChangesetStatus' ).bind( toggleDisabledNotification );
 
                         // Collapse panel to customize the current theme.
@@ -2888 +2901 @@
                  * @since 4.9.0
                  *
-                 * @returns {void}
+                 * @param {jQuery.Event} event - Event.
+                 * @returns {jQuery.promise} Promise.
                  */
                 installTheme: function( event ) {
-                        var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
-
+                        var panel = this, preview, onInstallSuccess, slug = $( event.target ).data( 'slug' ), deferred = $.Deferred(), request;
+                        preview = $( event.target ).hasClass( 'preview' );
+
+                        // 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 ) {
+                                deferred.reject({
+                                        errorCode: 'theme_switch_unavailable'
+                                });
+                                return deferred.promise();
+                        }
+
+                        // Theme is already being installed.
                         if ( _.contains( panel.installingThemes, slug ) ) {
-                                return; // Theme is already being installed.
+                                deferred.reject({
+                                        errorCode: 'theme_already_installing'
+                                });
+                                return deferred.promise();
                         }
 
                         wp.updates.maybeRequestFilesystemCredentials( event );
 
-                        $( document ).one( 'wp-theme-install-success', function( event, response ) {
+                        onInstallSuccess = function( response ) {
                                 var theme = false, themeControl;
                                 if ( preview ) {
@@ -2916 +2943 @@
                                         // Don't add the same theme more than once.
                                         if ( ! theme || api.control.has( 'installed_theme_' + theme.id ) ) {
+                                                deferred.resolve( response );
                                                 return;
                                         }
@@ -2940 +2968 @@
                                         });
                                 }
-                        } );
-
-                        panel.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
-                        wp.updates.installTheme( {
+                                deferred.resolve( response );
+                        };
+
+                        panel.installingThemes.push( slug ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
+                        request = wp.updates.installTheme( {
                                 slug: slug
                         } );
 
                         // Also preview the theme as the event is triggered on Install & Preview.
-                        if ( $( event.target ).hasClass( 'preview' ) ) {
-                                preview = true;
-
+                        if ( preview ) {
                                 api.notifications.add( new api.OverlayNotification( 'theme_installing', {
                                         message: api.l10n.themeDownloading,
@@ -2957 +2984 @@
                                 } ) );
                         }
+
+                        request.done( onInstallSuccess );
+                        request.fail( function() {
+                                api.notifications.remove( 'theme_installing' );
+                        } );
+
+                        return deferred.promise();
                 },
 
@@ -2969 +3003 @@
                 loadThemePreview: function( themeId ) {
                         var 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 ) {
+                                return deferred.reject().promise();
+                        }
 
                         urlParser = document.createElement( 'a' );
@@ -4742 +4781 @@
                  */
                 ready: function() {
-                        var control = this;
+                        var control = this, disableSwitchButtons, updateButtons;
+
+                        disableSwitchButtons = function() {
+                                return 'publish' !== api.state( 'selectedChangesetStatus' ).get() && control.params.theme.id !== api.settings.theme.stylesheet;
+                        };
+                        updateButtons = function() {
+                                control.container.find( 'button' ).toggleClass( 'disabled', disableSwitchButtons() );
+                        };
+
+                        api.state( 'selectedChangesetStatus' ).bind( updateButtons );
+                        updateButtons();
 
                         control.container.on( 'touchmove', '.theme', function() {
@@ -4750 +4799 @@
                         // Bind details view trigger.
                         control.container.on( 'click keydown touchend', '.theme', function( event ) {
+                                var section;
                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
                                         return;
@@ -4765 +4815 @@
 
                                 event.preventDefault(); // Keep this AFTER the key filter above
-                                api.section( control.section() ).showDetails( control.params.theme );
+                                section = api.section( control.section() );
+                                section.showDetails( control.params.theme, function() {
+                                        section.overlay.find( '.theme-actions button' ).toggleClass( 'disabled', disableSwitchButtons() );
+                                } );
                         });
 
@@ -7340 +7393 @@
                         };
 
-                        // Deactivate themes panel if changeset status is not auto-draft.
-                        api.panel( 'themes', function( themesPanel ) {
-                                var isPanelActive, updatePanelActive;
-
-                                isPanelActive = function() {
-                                        return 'publish' === selectedChangesetStatus.get() && ( ! changesetStatus() || 'auto-draft' === changesetStatus() );
-                                };
-                                themesPanel.active.validate = isPanelActive;
-
-                                updatePanelActive = function() {
-                                        themesPanel.active.set( isPanelActive() );
-                                };
-
-                                updatePanelActive();
-                                changesetStatus.bind( updatePanelActive );
-                                selectedChangesetStatus.bind( updatePanelActive );
-                        } );
-
                         // Show changeset UUID in URL when in branching mode and there is a saved changeset.
                         if ( api.settings.changeset.branching ) {

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

@@ -608 +608 @@
                         $changeset_uuid = null;
 
-                        if ( ! $this->branching() ) {
+                        if ( ! $this->branching() && $this->is_theme_active() ) {
                                 $unpublished_changeset_posts = $this->get_changeset_posts( array(
                                         'post_status' => array_diff( get_post_stati(), array( 'auto-draft', 'publish', 'trash', 'inherit', 'private' ) ),

trunk/src/wp-includes/customize/class-wp-customize-themes-panel.php

@@ -89 +89 @@
                                 <# } #>
                         <?php endif; ?>
+
+                        <div class="customize-control-notifications-container"></div>
                 </li>
                 <li class="customize-themes-full-container-container">

trunk/src/wp-includes/script-loader.php

@@ -581 +581 @@
                 /* translators: %s: URL to the Customizer to load the autosaved version */
                 'autosaveNotice'     => __( 'There is a more recent autosave of your changes than the one you are previewing. <a href="%s">Restore the autosave</a>' ),
-                'videoHeaderNotice'  => __( 'This theme doesn\'t support video headers on this page. Navigate to the front page or another page that supports video headers.' ),
+                'videoHeaderNotice'  => __( 'This theme doesn&#8217;t support video headers on this page. Navigate to the front page or another page that supports video headers.' ),
                 // Used for overriding the file types allowed in plupload.
                 'allowedFiles'       => __( 'Allowed Files' ),
@@ -596 +596 @@
                 ),
                 'scheduleDescription' => __( 'Schedule your customization changes to publish ("go live") at a future date.' ),
+                'themePreviewUnavailable' => __( 'Sorry, you can&#8217;t preview new themes when you have changes scheduled or saved as a draft. Please publish your changes, or wait until they publish to preview new themes.' ),
         ) );
         $scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );

trunk/tests/phpunit/tests/customize/manager.php

@@ -197 +197 @@
                 ) );
                 $this->assertNotContains( $wp_customize->changeset_uuid(), array( $uuid1, $uuid2 ) );
+                $this->assertEmpty( $wp_customize->changeset_post_id() );
+
+                // Make sure existing changeset is not autoloaded in the case of previewing a theme switch.
+                switch_theme( 'twentyseventeen' );
+                $wp_customize = new WP_Customize_Manager( array(
+                        'changeset_uuid' => false, // Cause UUID to be deferred.
+                        'branching' => false,
+                        'theme' => 'twentyfifteen',
+                ) );
                 $this->assertEmpty( $wp_customize->changeset_post_id() );
         }