WordPress.org

Make WordPress Core

Changeset 41649


Ignore:
Timestamp:
09/29/2017 09:51:42 PM (23 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r41648 r41649  
    16601660/* Animations for opening the themes panel */
    16611661#customize-header-actions .save,
     1662#customize-header-actions #publish-settings,
    16621663#customize-header-actions .spinner,
    16631664#customize-header-actions .customize-controls-preview-toggle {
     
    16871688
    16881689.in-themes-panel #customize-header-actions .save,
     1690.in-themes-panel #customize-header-actions #publish-settings,
    16891691.in-themes-panel #customize-header-actions .spinner,
    16901692.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
  • trunk/src/wp-admin/js/customize-controls.js

    r41648 r41649  
    15111511            });
    15121512
    1513             _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
     1513            section.renderScreenshots = _.throttle( section.renderScreenshots, 100 );
     1514
     1515            _.bindAll( section, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
    15141516        },
    15151517
     
    19301932            }
    19311933
    1932             renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
    1933 
    1934             renderScreenshots();
     1934            section.renderScreenshots();
    19351935
    19361936            // Update theme count.
     
    62846284
    62856285        api.section( 'publish_settings', function( section ) {
    6286             var updateButtonsState, previewLinkControl, previewLinkControlId = 'changeset_preview_link';
     6286            var updateButtonsState, previewLinkControl, previewLinkControlId = 'changeset_preview_link', updateSectionActive, isSectionActive;
    62876287
    62886288            previewLinkControl = new api.PreviewLinkControl( previewLinkControlId, {
     
    62976297            api.control.add( previewLinkControlId, previewLinkControl );
    62986298
    6299             // Make sure publish settings are not available until the theme has been activated.
    6300             if ( ! api.settings.theme.active ) {
    6301                 section.active.set( false );
    6302                 section.active.link( api.state( 'activated' ) );
    6303             }
     6299            /**
     6300             * Return whether the pubish settings section should be active.
     6301             *
     6302             * @return {boolean} Is section active.
     6303             */
     6304            isSectionActive = function() {
     6305                if ( ! api.state( 'activated' ) ) {
     6306                    return false;
     6307                }
     6308                if ( '' === api.state( 'changesetStatus' ).get() && api.state( 'saved' ).get() ) {
     6309                    return false;
     6310                }
     6311                return true;
     6312            };
     6313
     6314            // Make sure publish settings are not available while the theme is not active and the customizer is in a published state.
     6315            section.active.validate = isSectionActive;
     6316            updateSectionActive = function() {
     6317                section.active.set( isSectionActive() );
     6318            };
     6319            api.state( 'activated' ).bind( updateSectionActive );
     6320            api.state( 'saved' ).bind( updateSectionActive );
     6321            api.state( 'changesetStatus' ).bind( updateSectionActive );
     6322            updateSectionActive();
    63046323
    63056324            // Bind visibility of the publish settings button to whether the section is active.
     
    63236342                publishSettingsBtn.attr( 'aria-expanded', String( isExpanded ) );
    63246343                publishSettingsBtn.toggleClass( 'active', isExpanded );
    6325             } );
    6326 
    6327             api.state( 'changesetStatus' ).bind( function( status ) {
    6328                 if ( 'publish' === status ) {
    6329                     section.collapse();
    6330                 }
    63316344            } );
    63326345        } );
     
    69977010
    69987011            // Deactivate themes panel if changeset status is not auto-draft.
    6999             api.panel( 'themes', function( panel ) {
    7000                 var canActivate;
    7001 
    7002                 canActivate = function() {
    7003                     return ! changesetStatus() || 'auto-draft' === changesetStatus();
     7012            api.panel( 'themes', function( themesPanel ) {
     7013                var isPanelActive, updatePanelActive;
     7014
     7015                isPanelActive = function() {
     7016                    return 'publish' === selectedChangesetStatus.get() && ( ! changesetStatus() || 'auto-draft' === changesetStatus() );
    70047017                };
    7005 
    7006                 panel.active.validate = canActivate;
    7007                 panel.active.set( canActivate() );
    7008                 changesetStatus.bind( function() {
    7009                     panel.active.set( canActivate() );
    7010                 } );
     7018                themesPanel.active.validate = isPanelActive;
     7019
     7020                updatePanelActive = function() {
     7021                    themesPanel.active.set( isPanelActive() );
     7022                };
     7023
     7024                updatePanelActive();
     7025                changesetStatus.bind( updatePanelActive );
     7026                selectedChangesetStatus.bind( updatePanelActive );
    70117027            } );
    70127028
     
    72167232                    if ( body.hasClass( 'modal-open' ) ) {
    72177233                        collapsedObject.closeDetails();
    7218                     } else {
     7234                    } else if ( api.panel.has( 'themes' ) ) {
    72197235
    72207236                        // If we're collapsing a section, collapse the panel also.
    7221                         wp.customize.panel( 'themes' ).collapse();
     7237                        api.panel( 'themes' ).collapse();
    72227238                    }
    72237239                    return;
     
    78437859
    78447860                    api.state( 'selectedChangesetStatus' ).set( 'publish' );
    7845                     publishSettingsSection = api.section( 'publish_settings' );
    7846                     if ( publishSettingsSection ) {
    7847                         publishSettingsSection.collapse();
    7848                     }
    78497861                    api.previewer.save();
    78507862                };
Note: See TracChangeset for help on using the changeset viewer.