Changeset 41649

Timestamp:

09/29/2017 09:51:42 PM (7 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();
                 };