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.

Built from https://develop.svn.wordpress.org/trunk@41649


git-svn-id: http://core.svn.wordpress.org/trunk@41483 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -1659,6 +1659,7 @@ p.customize-section-description {
 
 /* 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 {
 	position: relative;
@@ -1686,6 +1687,7 @@ p.customize-section-description {
 }
 
 .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 {
 	top: -45px;

wp-admin/css/customize-controls.css

@@ -1659,6 +1659,7 @@ p.customize-section-description {
 
 /* 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 {
 	position: relative;
@@ -1686,6 +1687,7 @@ p.customize-section-description {
 }
 
 .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 {
 	top: -45px;

wp-admin/js/customize-controls.js

@@ -1510,7 +1510,9 @@
 				}
 			});
 
-			_.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
+			section.renderScreenshots = _.throttle( section.renderScreenshots, 100 );
+
+			_.bindAll( section, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
 		},
 
 		/**
@@ -1929,9 +1931,7 @@
 				section.container.find( noFilter ).hide();
 			}
 
-			renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
-
-			renderScreenshots();
+			section.renderScreenshots();
 
 			// Update theme count.
 			section.updateCount( count );
@@ -6283,7 +6283,7 @@
 		saveBtn.show();
 
 		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, {
 				params: {
@@ -6296,11 +6296,30 @@
 
 			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.
 			updateButtonsState = function() {
@@ -6323,12 +6342,6 @@
 				publishSettingsBtn.attr( 'aria-expanded', String( isExpanded ) );
 				publishSettingsBtn.toggleClass( 'active', isExpanded );
 			} );
-
-			api.state( 'changesetStatus' ).bind( function( status ) {
-			    if ( 'publish' === status ) {
-					section.collapse();
-			    }
-			} );
 		} );
 
 		// Prevent the form from saving when enter is pressed on an input or select element.
@@ -6996,18 +7009,21 @@
 			};
 
 			// Deactivate themes panel if changeset status is not auto-draft.
-			api.panel( 'themes', function( panel ) {
-				var canActivate;
+			api.panel( 'themes', function( themesPanel ) {
+				var isPanelActive, updatePanelActive;
 
-				canActivate = function() {
-					return ! changesetStatus() || 'auto-draft' === changesetStatus();
+				isPanelActive = function() {
+					return 'publish' === selectedChangesetStatus.get() && ( ! changesetStatus() || 'auto-draft' === changesetStatus() );
+				};
+				themesPanel.active.validate = isPanelActive;
+
+				updatePanelActive = function() {
+					themesPanel.active.set( isPanelActive() );
 				};
 
-				panel.active.validate = canActivate;
-				panel.active.set( canActivate() );
-				changesetStatus.bind( function() {
-					panel.active.set( canActivate() );
-				} );
+				updatePanelActive();
+				changesetStatus.bind( updatePanelActive );
+				selectedChangesetStatus.bind( updatePanelActive );
 			} );
 
 			// Show changeset UUID in URL when in branching mode and there is a saved changeset.
@@ -7215,10 +7231,10 @@
 					// Themes panel or section.
 					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;
 				}
@@ -7842,10 +7858,6 @@
 					var publishSettingsSection;
 
 					api.state( 'selectedChangesetStatus' ).set( 'publish' );
-					publishSettingsSection = api.section( 'publish_settings' );
-					if ( publishSettingsSection ) {
-						publishSettingsSection.collapse();
-					}
 					api.previewer.save();
 				};
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41648';
+$wp_version = '4.9-alpha-41649';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.