Changeset 41649

Timestamp:

09/29/2017 09:51:42 PM (9 years ago)

Author:

westonruter

Message:

Customize: Improve interactions between the Themes panel and Publish Settings section.

• Deactivate the Themes panel immediately after changing selected status to non-publish.
• Animate publish settings button into view with publish button when collapsing Themes panel.
• Deactivate publish settings section and hide publish settings button entirely when customizer state is clean.
• Harden access of Themes panel in case it was removed by plugin.
• Fix throttling of renderScreenshots calls in ThemesSection.

Amends [41648], [41626].
See #37661, #39896, #34843.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (2 diffs)
• js/customize-controls.js (modified) (8 diffs)

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

@@ -1660 +1660 @@
 /* Animations for opening the themes panel */
 #customize-header-actions .save,
+#customize-header-actions #publish-settings,
 #customize-header-actions .spinner,
 #customize-header-actions .customize-controls-preview-toggle {
@@ -1687 +1688 @@
 
 .in-themes-panel #customize-header-actions .save,
+.in-themes-panel #customize-header-actions #publish-settings,
 .in-themes-panel #customize-header-actions .spinner,
 .in-themes-panel #customize-header-actions .customize-controls-preview-toggle {

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

@@ -1511 +1511 @@
                         });
 
-                        _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
+                        section.renderScreenshots = _.throttle( section.renderScreenshots, 100 );
+
+                        _.bindAll( section, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
                 },
 
@@ -1930 +1932 @@
                         }
 
-                        renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
-
-                        renderScreenshots();
+                        section.renderScreenshots();
 
                         // Update theme count.
@@ -6284 +6284 @@
 
                 api.section( 'publish_settings', function( section ) {
-                        var updateButtonsState, previewLinkControl, previewLinkControlId = 'changeset_preview_link';
+                        var updateButtonsState, previewLinkControl, previewLinkControlId = 'changeset_preview_link', updateSectionActive, isSectionActive;
 
                         previewLinkControl = new api.PreviewLinkControl( previewLinkControlId, {
@@ -6297 +6297 @@
                         api.control.add( previewLinkControlId, previewLinkControl );
 
-                        // Make sure publish settings are not available until the theme has been activated.
-                        if ( ! api.settings.theme.active ) {
-                                section.active.set( false );
-                                section.active.link( api.state( 'activated' ) );
-                        }
+                        /**
+                         * Return whether the pubish settings section should be active.
+                         *
+                         * @return {boolean} Is section active.
+                         */
+                        isSectionActive = function() {
+                                if ( ! api.state( 'activated' ) ) {
+                                        return false;
+                                }
+                                if ( '' === api.state( 'changesetStatus' ).get() && api.state( 'saved' ).get() ) {
+                                        return false;
+                                }
+                                return true;
+                        };
+
+                        // Make sure publish settings are not available while the theme is not active and the customizer is in a published state.
+                        section.active.validate = isSectionActive;
+                        updateSectionActive = function() {
+                                section.active.set( isSectionActive() );
+                        };
+                        api.state( 'activated' ).bind( updateSectionActive );
+                        api.state( 'saved' ).bind( updateSectionActive );
+                        api.state( 'changesetStatus' ).bind( updateSectionActive );
+                        updateSectionActive();
 
                         // Bind visibility of the publish settings button to whether the section is active.
@@ -6323 +6342 @@
                                 publishSettingsBtn.attr( 'aria-expanded', String( isExpanded ) );
                                 publishSettingsBtn.toggleClass( 'active', isExpanded );
-                        } );
-
-                        api.state( 'changesetStatus' ).bind( function( status ) {
-                            if ( 'publish' === status ) {
-                                        section.collapse();
-                            }
                         } );
                 } );
@@ -6997 +7010 @@
 
                         // Deactivate themes panel if changeset status is not auto-draft.
-                        api.panel( 'themes', function( panel ) {
-                                var canActivate;
-
-                                canActivate = function() {
-                                        return ! changesetStatus() || 'auto-draft' === changesetStatus();
+                        api.panel( 'themes', function( themesPanel ) {
+                                var isPanelActive, updatePanelActive;
+
+                                isPanelActive = function() {
+                                        return 'publish' === selectedChangesetStatus.get() && ( ! changesetStatus() || 'auto-draft' === changesetStatus() );
                                 };
-
-                                panel.active.validate = canActivate;
-                                panel.active.set( canActivate() );
-                                changesetStatus.bind( function() {
-                                        panel.active.set( canActivate() );
-                                } );
+                                themesPanel.active.validate = isPanelActive;
+
+                                updatePanelActive = function() {
+                                        themesPanel.active.set( isPanelActive() );
+                                };
+
+                                updatePanelActive();
+                                changesetStatus.bind( updatePanelActive );
+                                selectedChangesetStatus.bind( updatePanelActive );
                         } );
 
@@ -7216 +7232 @@
                                         if ( body.hasClass( 'modal-open' ) ) {
                                                 collapsedObject.closeDetails();
-                                        } else {
+                                        } else if ( api.panel.has( 'themes' ) ) {
 
                                                 // If we're collapsing a section, collapse the panel also.
-                                                wp.customize.panel( 'themes' ).collapse();
+                                                api.panel( 'themes' ).collapse();
                                         }
                                         return;
@@ -7843 +7859 @@
 
                                         api.state( 'selectedChangesetStatus' ).set( 'publish' );
-                                        publishSettingsSection = api.section( 'publish_settings' );
-                                        if ( publishSettingsSection ) {
-                                                publishSettingsSection.collapse();
-                                        }
                                         api.previewer.save();
                                 };