Changeset 41648 for trunk/src/wp-admin/js/customize-controls.js

Timestamp:

09/29/2017 08:12:19 PM (7 years ago)

Author:

westonruter

Message:

Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.

Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context. Also includes an extensible framework for browsing and installing themes from other sources.

Also includes CSS auto-prefixing added via grunt precommit:css.

For details, see: ​https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/

Previously [38813] but reverted in [39140].
Fixes #37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (36 diffs)

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

@@ -1188 +1188 @@
             section.containerParent = api.ensure( section.containerParent );
 
-            // Watch for changes to the panel state
+            // Watch for changes to the panel state.
             inject = function ( panelId ) {
                 var parentContainer;
                 if ( panelId ) {
-                    // The panel has been supplied, so wait until the panel object is registered
+                    // The panel has been supplied, so wait until the panel object is registered.
                     api.panel( panelId, function ( panel ) {
-                        // The panel has been registered, wait for it to become ready/initialized
+                        // The panel has been registered, wait for it to become ready/initialized.
                         panel.deferred.embedded.done( function () {
                             parentContainer = panel.contentContainer;
@@ -1219 +1219 @@
             };
             section.panel.bind( inject );
-            inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
+            inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one.
         },
 
@@ -1394 +1394 @@
      * wp.customize.ThemesSection
      *
-     * Custom section for themes that functions similarly to a backwards panel,
-     * and also handles the theme-details view rendering and navigation.
+     * Custom section for themes that loads themes by category, and also
+     * handles the theme-details view rendering and navigation.
      *
      * @constructor
@@ -1406 +1406 @@
         template: '',
         screenshotQueue: null,
-        $window: $( window ),
-
-        /**
+        $window: null,
+        $body: null,
+        loaded: 0,
+        loading: false,
+        fullyLoaded: false,
+        term: '',
+        tags: '',
+        nextTerm: '',
+        nextTags: '',
+        filtersHeight: 0,
+        headerContainer: null,
+
+        /**
+         * Initialize.
+         *
+         * @since 4.9.0
+         *
+         * @param {string} id - ID.
+         * @param {object} options - Options.
+         * @returns {void}
+         */
+        initialize: function( id, options ) {
+            var section = this;
+            section.headerContainer = $();
+            section.$window = $( window );
+            section.$body = $( document.body );
+            api.Section.prototype.initialize.call( section, id, options );
+        },
+
+        /**
+         * Embed the section in the DOM when the themes panel is ready.
+         *
+         * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel.
+         *
+         * @since 4.9.0
+         */
+        embed: function() {
+            var inject,
+                section = this;
+
+            // Watch for changes to the panel state
+            inject = function( panelId ) {
+                var parentContainer;
+                api.panel( panelId, function( panel ) {
+
+                    // The panel has been registered, wait for it to become ready/initialized
+                    panel.deferred.embedded.done( function() {
+                        parentContainer = panel.contentContainer;
+                        if ( ! section.headContainer.parent().is( parentContainer ) ) {
+                            parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer );
+                        }
+                        if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
+                            section.containerParent.append( section.contentContainer );
+                        }
+                        section.deferred.embedded.resolve();
+                    });
+                } );
+            };
+            section.panel.bind( inject );
+            inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
+        },
+
+        /**
+         * Set up.
+         *
          * @since 4.2.0
-         */
-        initialize: function () {
-            this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
-            return api.Section.prototype.initialize.apply( this, arguments );
-        },
-
-        /**
-         * @since 4.2.0
-         */
-        ready: function () {
+         *
+         * @returns {void}
+         */
+        ready: function() {
             var section = this;
             section.overlay = section.container.find( '.theme-overlay' );
@@ -1442 +1498 @@
                 // Pressing the escape key fires a theme:collapse event
                 if ( 27 === event.keyCode ) {
-                    section.closeDetails();
+                    if ( section.$body.hasClass( 'modal-open' ) ) {
+
+                        // Escape from the details modal.
+                        section.closeDetails();
+                    } else {
+
+                        // Escape from the inifinite scroll list.
+                        section.headerContainer.find( '.customize-themes-section-title' ).focus();
+                    }
                     event.stopPropagation(); // Prevent section from being collapsed.
                 }
             });
 
-            _.bindAll( this, 'renderScreenshots' );
+            _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
         },
 
@@ -1454 +1518 @@
          *
          * Ignore the active states' of the contained theme controls, and just
-         * use the section's own active state instead. This ensures empty search
-         * results for themes to cause the section to become inactive.
+         * use the section's own active state instead. This prevents empty search
+         * results for theme sections from causing the section to become inactive.
          *
          * @since 4.2.0
@@ -1466 +1530 @@
 
         /**
+         * Attach events.
+         *
          * @since 4.2.0
+         *
+         * @returns {void}
          */
         attachEvents: function () {
-            var section = this;
+            var section = this, debounced;
 
             // Expand/Collapse accordion sections on click.
@@ -1480 +1548 @@
             });
 
-            // Expand/Collapse section/panel.
-            section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-                event.preventDefault(); // Keep this AFTER the key filter above
-
-                if ( section.expanded() ) {
-                    section.collapse();
-                } else {
+            section.headerContainer = $( '#accordion-section-' + section.id );
+
+            // Expand section/panel. Only collapse when opening another section.
+            section.headerContainer.on( 'click', '.customize-themes-section-title', function() {
+
+                // Toggle accordion filters under section headers.
+                if ( section.headerContainer.find( '.filter-details' ).length ) {
+                    section.headerContainer.find( '.customize-themes-section-title' )
+                        .toggleClass( 'details-open' )
+                        .attr( 'aria-expanded', function( i, attr ) {
+                            return 'true' === attr ? 'false' : 'true';
+                        });
+                    section.headerContainer.find( '.filter-details' ).slideToggle( 180 );
+                }
+
+                // Open the section.
+                if ( ! section.expanded() ) {
                     section.expand();
                 }
             });
 
+            // Preview installed themes.
+            section.container.on( 'click', '.theme-actions .preview-theme', function() {
+                var themeId = $( this ).data( 'slug' );
+
+                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+                api.panel( 'themes' ).loadThemePreview( themeId ).fail( function() {
+                    $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
+                } );
+            });
+
             // Theme navigation in details view.
-            section.container.on( 'click keydown', '.left', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
-                event.preventDefault(); // Keep this AFTER the key filter above
-
+            section.container.on( 'click', '.left', function() {
                 section.previousTheme();
             });
 
-            section.container.on( 'click keydown', '.right', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
-                event.preventDefault(); // Keep this AFTER the key filter above
-
+            section.container.on( 'click', '.right', function() {
                 section.nextTheme();
             });
 
-            section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
-                event.preventDefault(); // Keep this AFTER the key filter above
-
+            section.container.on( 'click', '.theme-backdrop, .close', function() {
                 section.closeDetails();
             });
 
-            var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
-            section.container.on( 'input', '#themes-filter', function( event ) {
-                var count,
-                    term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
-                    controls = section.controls();
-
-                _.each( controls, function( control ) {
-                    control.filter( term );
+            // Filter-search all theme objects loaded in the section.
+            section.container.on( 'input', '.wp-filter-search-themes', function( event ) {
+                    section.filterSearch( event.currentTarget );
+            });
+
+            // Event listeners for remote wporg queries with user-entered terms.
+            if ( 'wporg' === section.params.action ) {
+
+                // Search terms.
+                debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
+                section.contentContainer.on( 'input', '#wp-filter-search-input', function() {
+                    debounced( section );
+                    if ( ! section.expanded() ) {
+                        section.expand();
+                    }
+                    section.checkTerm( section );
                 });
 
-                renderScreenshots();
-
-                // Update theme count.
-                count = section.container.find( 'li.customize-control:visible' ).length;
-                section.container.find( '.theme-count' ).text( count );
-            });
-
-            // Pre-load the first 3 theme screenshots.
-            api.bind( 'ready', function () {
-                _.each( section.controls().slice( 0, 3 ), function ( control ) {
-                    var img, src = control.params.theme.screenshot[0];
-                    if ( src ) {
-                        img = new Image();
-                        img.src = src;
+                // Feature filters.
+                section.contentContainer.on( 'click', '.filter-group input', function() {
+                    section.filtersChecked();
+                    section.checkTerm( section );
+                });
+
+                // Toggle feature filter sections.
+                section.contentContainer.on( 'click', '.feature-filter-toggle', function( e ) {
+                    $( e.currentTarget )
+                        .toggleClass( 'open' )
+                        .attr( 'aria-expanded', function( i, attr ) {
+                            return 'true' === attr ? 'false' : 'true';
+                        })
+                        .next( '.filter-drawer' ).slideToggle( 180, 'linear', function() {
+                            if ( 0 === section.filtersHeight ) {
+                                section.filtersHeight = $( this ).height();
+
+                                // First time, so it's opened.
+                                section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                            }
+                        });
+                    if ( $( e.currentTarget ).hasClass( 'open' ) ) {
+                        section.contentContainer.find( '.themes' ).css( 'margin-top', section.filtersHeight + 76 );
+                    } else {
+                        section.contentContainer.find( '.themes' ).css( 'margin-top', 0 );
                     }
                 });
+            }
+
+            // Setup section cross-linking.
+            section.contentContainer.on( 'click', '.no-themes-local .search-dotorg-themes', function() {
+                api.section( 'wporg_themes' ).focus();
+            });
+
+            // Move section controls to the themes area.
+            api.bind( 'ready', function () {
+                section.contentContainer = section.container.find( '.customize-themes-section' );
+                section.contentContainer.appendTo( $( '.customize-themes-full-container' ) );
+                section.container.add( section.headerContainer );
             });
         },
@@ -1562 +1660 @@
          * @param {Object}   args
          * @param {Boolean}  args.unchanged
-         * @param {Callback} args.completeCallback
+         * @param {Function} args.completeCallback
+         * @returns {void}
          */
         onChangeExpanded: function ( expanded, args ) {
+
+            // Note: there is a second argument 'args' passed
+            var section = this,
+                container = section.contentContainer.closest( '.customize-themes-full-container' );
 
             // Immediately call the complete callback if there were no changes
@@ -1574 +1677 @@
             }
 
-            // Note: there is a second argument 'args' passed
-            var panel = this,
-                section = panel.contentContainer,
-                overlay = section.closest( '.wp-full-overlay' ),
-                container = section.closest( '.wp-full-overlay-sidebar-content' ),
-                customizeBtn = section.find( '.customize-theme' ),
-                changeBtn = panel.headContainer.find( '.change-theme' );
-
-            if ( expanded && ! section.hasClass( 'current-panel' ) ) {
+            if ( expanded ) {
+
+                // Try to load controls if none are loaded yet.
+                if ( 0 === section.loaded ) {
+                    section.loadControls();
+                }
+
                 // Collapse any sibling sections/panels
                 api.section.each( function ( otherSection ) {
-                    if ( otherSection !== panel ) {
+                    var searchTerm;
+
+                    if ( otherSection !== section ) {
+
+                        // Try to sync the current search term to the new section.
+                        if ( 'themes' === otherSection.params.type ) {
+                            searchTerm = otherSection.contentContainer.find( '.wp-filter-search' ).val();
+                            section.contentContainer.find( '.wp-filter-search' ).val( searchTerm );
+
+                            // Directly initialize an empty remote search to avoid a race condition.
+                            if ( '' === searchTerm && '' !== section.term && 'installed' !== section.params.action ) {
+                                section.term = '';
+                                section.initializeNewQuery( section.term, section.tags );
+                            } else {
+                                section.checkTerm( section );
+                            }
+                            section.filterSearch( section.contentContainer.find( '.wp-filter-search' ).get( 0 ) );
+                        }
                         otherSection.collapse( { duration: args.duration } );
                     }
                 });
-                api.panel.each( function ( otherPanel ) {
-                    otherPanel.collapse( { duration: 0 } );
+
+                section.contentContainer.addClass( 'current-section' );
+                container.scrollTop();
+                section.headerContainer.find( '.customize-themes-section-title' ).addClass( 'selected' ).attr( 'aria-expanded', 'true' );
+
+                container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
+                container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
+
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+                section.updateCount(); // Show this section's count.
+            } else {
+                section.contentContainer.removeClass( 'current-section' );
+
+                // Always hide, even if they don't exist or are already hidden.
+                section.headerContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
+                section.headerContainer.find( '.filter-details' ).slideUp( 180 );
+
+                container.off( 'scroll' );
+
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+            }
+        },
+
+        /**
+         * Return the section's content element without detaching from the parent.
+         *
+         * @since 4.9.0
+         *
+         * @returns {jQuery}
+         */
+        getContent: function() {
+            return this.container.find( '.control-section-content' );
+        },
+
+        /**
+         * Load theme data via Ajax and add themes to the section as controls.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        loadControls: function() {
+            var section = this, params, page, request;
+
+            if ( section.loading ) {
+                return; // We're already loading a batch of themes.
+            }
+
+            // Parameters for every API query. Additional params are set in PHP.
+            page = Math.ceil( section.loaded / 100 ) + 1;
+            params = {
+                'switch-themes-nonce': api.settings.nonce['switch-themes'],
+                'wp_customize': 'on',
+                'theme_action': section.params.action,
+                'customized_theme': api.settings.theme.stylesheet,
+                'page': page
+            };
+
+            // Add fields for wporg actions.
+            if ( 'wporg' === section.params.action ) {
+                params.search = section.term;
+                params.tags = section.tags;
+            }
+
+            // Load themes.
+            section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' );
+            section.loading = true;
+            section.container.find( '.no-themes' ).hide();
+            request = wp.ajax.post( 'customize-load-themes', params );
+            request.done(function( data ) {
+                var themes = data.themes, themeControl, newThemeControls;
+
+                // Stop and try again if the term changed while loading.
+                if ( '' !== section.nextTerm || '' !== section.nextTags ) {
+                    if ( section.nextTerm ) {
+                        section.term = section.nextTerm;
+                    }
+                    if ( section.nextTags ) {
+                        section.tags = section.nextTags;
+                    }
+                    section.nextTerm = '';
+                    section.nextTags = '';
+                    section.loading = false;
+                    section.loadControls();
+                    return;
+                }
+
+                if ( 0 !== themes.length ) {
+                    newThemeControls = [];
+
+                    // Add controls for each theme.
+                    _.each( themes, function( theme ) {
+                        var customizeId = section.params.action + '_theme_' + theme.id;
+                        themeControl = new api.controlConstructor.theme( customizeId, {
+                            params: {
+                                type: 'theme',
+                                content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
+                                section: section.params.id,
+                                active: true,
+                                theme: theme,
+                                priority: section.loaded + 1
+                            },
+                            previewer: api.previewer
+                        } );
+
+                        api.control.add( customizeId, themeControl );
+                        newThemeControls.push( themeControl );
+                        section.loaded = section.loaded + 1;
+                    });
+
+                    if ( 1 === page ) {
+
+                        // Pre-load the first 3 theme screenshots.
+                        _.each( section.controls().slice( 0, 3 ), function( control ) {
+                            var img, src = control.params.theme.screenshot[0];
+                            if ( src ) {
+                                img = new Image();
+                                img.src = src;
+                            }
+                        });
+                        if ( 'installed' !== section.params.action ) {
+                            wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
+                        }
+                    } else {
+                        Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
+                    }
+                    _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
+
+                    if ( 'installed' === section.params.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
+                        section.fullyLoaded = true;
+                    }
+                } else {
+                    if ( 0 === section.loaded ) {
+                        section.container.find( '.no-themes' ).show();
+                        wp.a11y.speak( section.container.find( '.no-themes' ).text() );
+                    } else {
+                        section.fullyLoaded = true;
+                    }
+                }
+                if ( 'installed' === section.params.action ) {
+                    section.updateCount(); // Count of visible theme controls.
+                } else {
+                    section.updateCount( data.info.results ); // Total number of results including pages not yet loaded.
+                }
+                section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
+
+                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
+                section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
+                section.loading = false;
+            });
+            request.fail(function( data ) {
+                if ( 'undefined' === typeof data ) {
+                    section.container.find( '.unexpected-error' ).show();
+                    wp.a11y.speak( section.container.find( '.unexpected-error' ).text() );
+                } else if ( 'undefined' !== typeof console && console.error ) {
+                    console.error( data );
+                }
+
+                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
+                section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
+                section.loading = false;
+            });
+        },
+
+        /**
+         * Determines whether more themes should be loaded, and loads them.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        loadMore: function() {
+            var section = this, container, bottom, threshold;
+            if ( ! section.fullyLoaded && ! section.loading ) {
+                container = section.container.closest( '.customize-themes-full-container' );
+
+                bottom = container.scrollTop() + container.height();
+                threshold = container.prop( 'scrollHeight' ) - 3000; // Use a fixed distance to the bottom of loaded results to avoid unnecessarily loading results sooner when using a percentage of scroll distance.
+
+                if ( bottom > threshold ) {
+                    section.loadControls();
+                }
+            }
+        },
+
+        /**
+         * Event handler for search input that filters visible controls.
+         *
+         * @since 4.9.0
+         *
+         * @param {Element} el - The search input element as a raw JS object.
+         * @returns {void}
+         */
+        filterSearch: function( el ) {
+            var count = 0,
+                visible = false,
+                section = this,
+                noFilter = ( undefined !== api.section( 'wporg_themes' ) && 'wporg' !== section.params.action ) ? '.no-themes-local' : '.no-themes',
+                term = el.value.toLowerCase().trim().replace( '-', ' ' ),
+                controls = section.controls(),
+                renderScreenshots;
+
+            if ( section.loading ) {
+                return;
+            }
+
+            _.each( controls, function( control ) {
+                visible = control.filter( term );
+                if ( visible ) {
+                    count = count + 1;
+                }
+            });
+
+            if ( 0 === count ) {
+                section.container.find( noFilter ).show();
+                wp.a11y.speak( section.container.find( noFilter ).text() );
+            } else {
+                section.container.find( noFilter ).hide();
+            }
+
+            renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
+
+            renderScreenshots();
+
+            // Update theme count.
+            section.updateCount( count );
+        },
+
+        /**
+         * Event handler for search input that determines if the terms have changed and loads new controls as needed.
+         *
+         * @since 4.9.0
+         *
+         * @param {wp.customize.ThemesSection} section - The current theme section, passed through the debouncer.
+         * @returns {void}
+         */
+        checkTerm: function( section ) {
+            var newTerm;
+            if ( 'wporg' === section.params.action ) {
+                newTerm = $( '#wp-filter-search-input' ).val();
+                if ( section.term !== newTerm ) {
+                    section.initializeNewQuery( newTerm, section.tags );
+                }
+            }
+        },
+
+        /**
+         * Check for filters checked in the feature filter list and initialize a new query.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        filtersChecked: function() {
+            var section = this,
+                items = section.container.find( '.filter-group' ).find( ':checkbox' ),
+                tags = [];
+
+            _.each( items.filter( ':checked' ), function( item ) {
+                tags.push( $( item ).prop( 'value' ) );
+            });
+
+            // When no filters are checked, restore initial state. Update filter count.
+            if ( 0 === tags.length ) {
+                tags = '';
+                section.contentContainer.find( '.feature-filter-toggle .filter-count-0' ).show();
+                section.contentContainer.find( '.feature-filter-toggle .filter-count-filters' ).hide();
+            } else {
+                section.contentContainer.find( '.feature-filter-toggle .theme-filter-count' ).text( tags.length );
+                section.contentContainer.find( '.feature-filter-toggle .filter-count-0' ).hide();
+                section.contentContainer.find( '.feature-filter-toggle .filter-count-filters' ).show();
+            }
+
+            // Check whether tags have changed, and either load or queue them.
+            if ( ! _.isEqual( section.tags, tags ) ) {
+                if ( section.loading ) {
+                    section.nextTags = tags;
+                } else {
+                    section.initializeNewQuery( section.term, tags );
+                }
+            }
+        },
+
+        /**
+         * Reset the current query and load new results.
+         *
+         * @since 4.9.0
+         *
+         * @param {string} newTerm - New term.
+         * @param {Array} newTags - New tags.
+         * @returns {void}
+         */
+        initializeNewQuery: function( newTerm, newTags ) {
+            var section = this;
+
+            // Clear the controls in the section.
+            _.each( section.controls(), function( control ) {
+                control.container.remove();
+                api.control.remove( control.id );
+            });
+            section.loaded = 0;
+            section.fullyLoaded = false;
+            section.screenshotQueue = null;
+
+            // Run a new query, with loadControls handling paging, etc.
+            if ( ! section.loading ) {
+                section.term = newTerm;
+                section.tags = newTags;
+                section.loadControls();
+            } else {
+                section.nextTerm = newTerm; // This will reload from loadControls() with the newest term once the current batch is loaded.
+                section.nextTags = newTags; // This will reload from loadControls() with the newest tags once the current batch is loaded.
+            }
+            if ( ! section.expanded() ) {
+                section.expand(); // Expand the section if it isn't expanded.
+            }
+        },
+
+        /**
+         * Render control's screenshot if the control comes into view.
+         *
+         * @since 4.2.0
+         *
+         * @returns {void}
+         */
+        renderScreenshots: function() {
+            var section = this;
+
+            // Fill queue initially, or check for more if empty.
+            if ( null === section.screenshotQueue || 0 === section.screenshotQueue.length ) {
+
+                // Add controls that haven't had their screenshots rendered.
+                section.screenshotQueue = _.filter( section.controls(), function( control ) {
+                    return ! control.screenshotRendered;
                 });
-
-                panel._animateChangeExpanded( function() {
-                    changeBtn.attr( 'tabindex', '-1' );
-                    customizeBtn.attr( 'tabindex', '0' );
-
-                    customizeBtn.focus();
-                    section.css( 'top', '' );
-                    container.scrollTop( 0 );
-
-                    if ( args.completeCallback ) {
-                        args.completeCallback();
-                    }
-                } );
-
-                overlay.addClass( 'in-themes-panel' );
-                section.addClass( 'current-panel' );
-                _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
-                panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
-
-            } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
-                panel._animateChangeExpanded( function() {
-                    changeBtn.attr( 'tabindex', '0' );
-                    customizeBtn.attr( 'tabindex', '-1' );
-
-                    changeBtn.focus();
-                    section.css( 'top', '' );
-
-                    if ( args.completeCallback ) {
-                        args.completeCallback();
-                    }
-                } );
-
-                overlay.removeClass( 'in-themes-panel' );
-                section.removeClass( 'current-panel' );
-                panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
-            }
-        },
-
-        /**
-         * Render control's screenshot if the control comes into view.
-         *
-         * @since 4.2.0
-         */
-        renderScreenshots: function( ) {
-            var section = this;
-
-            // Fill queue initially.
-            if ( section.screenshotQueue === null ) {
-                section.screenshotQueue = section.controls();
-            }
-
-            // Are all screenshots rendered?
+            }
+
+            // Are all screenshots rendered (for now)?
             if ( ! section.screenshotQueue.length ) {
                 return;
@@ -1679 +2083 @@
 
         /**
+         * Get visible count.
+         *
+         * @since 4.9.0
+         *
+         * @returns {int} Visible count.
+         */
+        getVisibleCount: function() {
+            return this.contentContainer.find( 'li.customize-control:visible' ).length;
+        },
+
+        /**
+         * Update the number of themes in the section.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        updateCount: function( count ) {
+            var section = this, countEl, displayed;
+
+            if ( ! count && 0 !== count ) {
+                count = section.getVisibleCount();
+            }
+
+            displayed = section.contentContainer.find( '.themes-displayed' );
+            countEl = section.contentContainer.find( '.theme-count' );
+
+            if ( 0 === count ) {
+                countEl.text( '0' );
+            } else {
+
+                // Animate the count change for emphasis.
+                displayed.fadeOut( 180, function() {
+                    countEl.text( count );
+                    displayed.fadeIn( 180 );
+                } );
+                wp.a11y.speak( api.settings.l10n.announceThemeCount.replace( '%d', count ) );
+            }
+        },
+
+        /**
          * Advance the modal to the next theme.
          *
          * @since 4.2.0
+         *
+         * @returns {void}
          */
         nextTheme: function () {
@@ -1696 +2143 @@
          *
          * @since 4.2.0
+         *
+         * @returns {object|boolean} Next theme.
          */
         getNextTheme: function () {
-            var control, next;
-            control = api.control( 'theme_' + this.currentTheme );
+            var section = this, control, next;
+            control = api.control( section.params.action + '_theme_' + this.currentTheme );
             next = control.container.next( 'li.customize-control-theme' );
             if ( ! next.length ) {
                 return false;
             }
-            next = next[0].id.replace( 'customize-control-', '' );
+            next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
             control = api.control( next );
 
@@ -1714 +2163 @@
          *
          * @since 4.2.0
+         * @returns {void}
          */
         previousTheme: function () {
@@ -1728 +2178 @@
          *
          * @since 4.2.0
+         * @returns {object|boolean} Previous theme.
          */
         getPreviousTheme: function () {
-            var control, previous;
-            control = api.control( 'theme_' + this.currentTheme );
+            var section = this, control, previous;
+            control = api.control( section.params.action + '_theme_' + this.currentTheme );
             previous = control.container.prev( 'li.customize-control-theme' );
             if ( ! previous.length ) {
                 return false;
             }
-            previous = previous[0].id.replace( 'customize-control-', '' );
+            previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
             control = api.control( previous );
 
@@ -1746 +2197 @@
          *
          * @since 4.2.0
+         *
+         * @returns {void}
          */
         updateLimits: function () {
@@ -1821 +2274 @@
          * @since 4.2.0
          *
-         * @param {Object}   theme
+         * @param {object} theme - Theme.
+         * @param {Function} [callback] - Callback once the details have been shown.
+         * @returns {void}
          */
         showDetails: function ( theme, callback ) {
-            var section = this, link;
-            callback = callback || function(){};
+            var section = this;
             section.currentTheme = theme.id;
             section.overlay.html( section.template( theme ) )
                 .fadeIn( 'fast' )
                 .focus();
-            $( 'body' ).addClass( 'modal-open' );
+            section.$body.addClass( 'modal-open' );
             section.containFocus( section.overlay );
             section.updateLimits();
-
-            link = section.overlay.find( '.inactive-theme > a' );
-
-            link.on( 'click', function( event ) {
-                event.preventDefault();
-
-                // Short-circuit if request is currently being made.
-                if ( link.hasClass( 'disabled' ) ) {
-                    return;
-                }
-                link.addClass( 'disabled' );
-
-                section.loadThemePreview( theme.id ).fail( function() {
-                    link.removeClass( 'disabled' );
-                } );
-            } );
-            callback();
+            wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) );
+            if ( callback ) {
+                callback();
+            }
         },
 
@@ -1856 +2297 @@
          *
          * @since 4.2.0
+         *
+         * @returns {void}
          */
         closeDetails: function () {
-            $( 'body' ).removeClass( 'modal-open' );
-            this.overlay.fadeOut( 'fast' );
-            api.control( 'theme_' + this.currentTheme ).focus();
+            var section = this;
+            section.$body.removeClass( 'modal-open' );
+            section.overlay.fadeOut( 'fast' );
+            api.control( section.params.action + '_theme_' + section.currentTheme ).container.find( '.theme' ).focus();
         },
 
@@ -1867 +2311 @@
          *
          * @since 4.2.0
+         *
+         * @param {jQuery} el - Element to contain focus.
+         * @returns {void}
          */
         containFocus: function( el ) {
@@ -1919 +2366 @@
             section.containerParent = '#customize-outer-theme-controls';
             section.containerPaneParent = '.customize-outer-pane-parent';
-            return api.Section.prototype.initialize.apply( section, arguments );
+            api.Section.prototype.initialize.apply( section, arguments );
         },
 
@@ -1940 +2387 @@
                 backBtn = content.find( '.customize-section-back' ),
                 sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
-                body = $( 'body' ),
+                body = $( document.body ),
                 expand, panel;
 
@@ -2059 +2506 @@
             if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
                 container.append( panel.contentContainer );
-                panel.renderContent();
-            }
+            }
+            panel.renderContent();
 
             panel.deferred.embedded.resolve();
@@ -2132 +2579 @@
          * @since 4.1.0
          *
-         * @returns {boolean}
+         * @returns {boolean} Whether contextually active.
          */
         isContextuallyActive: function () {
@@ -2147 +2594 @@
 
         /**
-         * Update UI to reflect expanded state
+         * Update UI to reflect expanded state.
          *
          * @since 4.1.0
@@ -2155 +2602 @@
          * @param {Boolean}  args.unchanged
          * @param {Function} args.completeCallback
+         * @returns {void}
          */
         onChangeExpanded: function ( expanded, args ) {
@@ -2262 +2710 @@
                 panel.contentContainer.html( template( panel.params ) );
             }
+        }
+    });
+
+    /**
+     * Class wp.customize.ThemesPanel.
+     *
+     * Custom section for themes that displays without the customize preview.
+     *
+     * @constructor
+     * @augments wp.customize.Panel
+     * @augments wp.customize.Container
+     */
+    api.ThemesPanel = api.Panel.extend({
+
+        /**
+         * Initialize.
+         *
+         * @since 4.9.0
+         *
+         * @param {string} id - The ID for the panel.
+         * @param {object} options - Options.
+         * @returns {void}
+         */
+        initialize: function( id, options ) {
+            var panel = this;
+            panel.installingThemes = [];
+            api.Panel.prototype.initialize.call( panel, id, options );
+        },
+
+        /**
+         * Attach events.
+         *
+         * @since 4.9.0
+         * @returns {void}
+         */
+        attachEvents: function() {
+            var panel = this;
+
+            // Attach regular panel events.
+            api.Panel.prototype.attachEvents.apply( panel );
+
+            // Collapse panel to customize the current theme.
+            panel.contentContainer.on( 'click', '.customize-theme', function() {
+                panel.collapse();
+            });
+
+            // Toggle between filtering and browsing themes on mobile.
+            panel.contentContainer.on( 'click', '.customize-themes-section-title, .customize-themes-mobile-back', function() {
+                $( '.wp-full-overlay' ).toggleClass( 'showing-themes' );
+            });
+
+            // Install (and maybe preview) a theme.
+            panel.contentContainer.on( 'click', '.theme-install', function( event ) {
+                panel.installTheme( event );
+            });
+
+            // Update a theme. Theme cards have the class, the details modal has the id.
+            panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) {
+
+                // #update-theme is a link.
+                event.preventDefault();
+                event.stopPropagation();
+
+                panel.updateTheme( event );
+            });
+
+            // Delete a theme.
+            panel.contentContainer.on( 'click', '.delete-theme', function( event ) {
+                panel.deleteTheme( event );
+            });
+
+            _.bindAll( panel, 'installTheme', 'updateTheme' );
+        },
+
+        /**
+         * Update UI to reflect expanded state
+         *
+         * @since 4.9.0
+         *
+         * @param {Boolean}  expanded - Expanded state.
+         * @param {Object}   args - Args.
+         * @param {Boolean}  args.unchanged - Whether or not the state changed.
+         * @param {Function} args.completeCallback - Callback to execute when the animation completes.
+         * @returns {void}
+         */
+        onChangeExpanded: function( expanded, args ) {
+            var panel = this, overlay;
+
+            // Expand/collapse the panel normally.
+            api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] );
+
+            // Immediately call the complete callback if there were no changes
+            if ( args.unchanged ) {
+                if ( args.completeCallback ) {
+                    args.completeCallback();
+                }
+                return;
+            }
+
+            overlay = panel.headContainer.closest( '.wp-full-overlay' );
+
+            if ( expanded ) {
+                overlay
+                    .addClass( 'in-themes-panel' )
+                    .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
+
+                // Automatically open the installed themes section (except on small screens).
+                if ( 600 < window.innerWidth ) {
+                    api.section( 'installed_themes' ).expand();
+                }
+            } else {
+                overlay
+                    .removeClass( 'in-themes-panel' )
+                    .find( '.customize-themes-full-container' ).removeClass( 'animate' );
+            }
+        },
+
+        /**
+         * Install a theme via wp.updates.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        installTheme: function( event ) {
+            var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
+
+            if ( _.contains( panel.installingThemes, slug ) ) {
+                return; // Theme is already being installed.
+            }
+
+            wp.updates.maybeRequestFilesystemCredentials( event );
+
+            $( document ).one( 'wp-theme-install-success', function( event, response ) {
+                var theme = false, customizeId, themeControl;
+                if ( preview ) {
+
+                    panel.loadThemePreview( slug ).fail( function() {
+                        $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
+                    } );
+
+                } else {
+                    api.control.each( function( control ) {
+                        if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
+                            theme = control.params.theme; // Used below to add theme control.
+                            control.rerenderAsInstalled( true );
+                        }
+                    });
+
+                    // Don't add the same theme more than once.
+                    if ( ! theme || api.control.has( 'installed_theme_' + theme.id ) ) {
+                        return;
+                    }
+
+                    // Add theme control to installed section.
+                    theme.type = 'installed';
+                    customizeId = 'installed_theme_' + theme.id;
+                    themeControl = new api.controlConstructor.theme( customizeId, {
+                        params: {
+                            type: 'theme',
+                            content: $( '<li class="customize-control customize-control-theme"></li>' ).attr( 'id', 'customize-control-theme-installed_' + theme.id ).prop( 'outerHTML' ),
+                            section: 'installed_themes',
+                            active: true,
+                            theme: theme,
+                            priority: 0 // Add all newly-installed themes to the top.
+                        },
+                        previewer: api.previewer
+                    } );
+
+                    api.control.add( customizeId, themeControl );
+                    api.control( customizeId ).container.trigger( 'render-screenshot' );
+
+                    // Close the details modal if it's open to the installed theme.
+                    api.section.each( function( section ) {
+                        if ( 'themes' === section.params.type ) {
+                            if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
+                                section.closeDetails();
+                            }
+                        }
+                    });
+                }
+            } );
+
+            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( {
+                slug: slug
+            } );
+
+            // Also preview the theme as the event is triggered on Install & Preview.
+            if ( $( event.target ).hasClass( 'preview' ) ) {
+                preview = true;
+                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
+                wp.a11y.speak( $( '#customize-themes-loading-container .customize-loading-text-installing-theme' ).text() );
+            }
+        },
+
+        /**
+         * Load theme preview.
+         *
+         * @since 4.9.0
+         *
+         * @param {string} themeId Theme ID.
+         * @returns {jQuery.promise} Promise.
+         */
+        loadThemePreview: function( themeId ) {
+            var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
+
+            urlParser = document.createElement( 'a' );
+            urlParser.href = location.href;
+            urlParser.search = $.param( _.extend(
+                api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
+                {
+                    theme: themeId,
+                    changeset_uuid: api.settings.changeset.uuid
+                }
+            ) );
+
+            // Update loading message. Everything else is handled by reloading the page.
+            $( '#customize-themes-loading-container span' ).hide();
+            $( '#customize-themes-loading-container .customize-loading-text' ).css( 'display', 'block' );
+            wp.a11y.speak( $( '#customize-themes-loading-container .customize-loading-text' ).text() );
+            overlay = $( '.wp-full-overlay' );
+            overlay.addClass( 'customize-loading' );
+
+            onceProcessingComplete = function() {
+                var request;
+                if ( api.state( 'processing' ).get() > 0 ) {
+                    return;
+                }
+
+                api.state( 'processing' ).unbind( onceProcessingComplete );
+
+                request = api.requestChangesetUpdate();
+                request.done( function() {
+                    deferred.resolve();
+                    $( window ).off( 'beforeunload.customize-confirm' );
+                    window.location.href = urlParser.href;
+                } );
+                request.fail( function() {
+                    overlay.removeClass( 'customize-loading' );
+                    deferred.reject();
+                } );
+            };
+
+            if ( 0 === api.state( 'processing' ).get() ) {
+                onceProcessingComplete();
+            } else {
+                api.state( 'processing' ).bind( onceProcessingComplete );
+            }
+
+            return deferred.promise();
+        },
+
+        /**
+         * Update a theme via wp.updates.
+         *
+         * @since 4.9.0
+         *
+         * @param {jQuery.Event} event - Event.
+         * @returns {void}
+         */
+        updateTheme: function( event ) {
+            wp.updates.maybeRequestFilesystemCredentials( event );
+
+            $( document ).one( 'wp-theme-update-success', function( e, response ) {
+
+                // Rerender the control to reflect the update.
+                api.control.each( function( control ) {
+                    if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
+                        control.params.theme.hasUpdate = false;
+                        control.rerenderAsInstalled( true );
+                    }
+                });
+            } );
+
+            wp.updates.updateTheme( {
+                slug: $( event.target ).closest( '.notice' ).data( 'slug' )
+            } );
+        },
+
+        /**
+         * Delete a theme via wp.updates.
+         *
+         * @since 4.9.0
+         *
+         * @param {jQuery.Event} event - Event.
+         * @returns {void}
+         */
+        deleteTheme: function( event ) {
+            var theme, section;
+            theme = $( event.target ).data( 'slug' );
+            section = api.section( 'installed_themes' );
+
+            event.preventDefault();
+
+            // Confirmation dialog for deleting a theme.
+            if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
+                return;
+            }
+
+            wp.updates.maybeRequestFilesystemCredentials( event );
+
+            $( document ).one( 'wp-theme-delete-success', function() {
+                var control = api.control( 'installed_theme_' + theme );
+
+                // Remove theme control.
+                control.container.remove();
+                api.control.remove( control.id );
+
+                // Update installed count.
+                section.loaded = section.loaded - 1;
+                section.updateCount();
+
+                // Rerender any other theme controls as uninstalled.
+                api.control.each( function( control ) {
+                    if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
+                        control.rerenderAsInstalled( false );
+                    }
+                });
+            } );
+
+            wp.updates.deleteTheme( {
+                slug: theme
+            } );
+
+            // Close modal and focus the section.
+            section.closeDetails();
+            section.focus();
         }
     });
@@ -2614 +3390 @@
          * @param {Object}   args
          * @param {Number}   args.duration
-         * @param {Callback} args.completeCallback
+         * @param {Function} args.completeCallback
          */
         onChangeActive: function ( active, args ) {
@@ -3786 +4562 @@
 
         touchDrag: false,
-        isRendered: false,
-
-        /**
-         * Defer rendering the theme control until the section is displayed.
-         *
-         * @since 4.2.0
-         */
-        renderContent: function () {
-            var control = this,
-                renderContentArgs = arguments;
-
-            api.section( control.section(), function( section ) {
-                if ( section.expanded() ) {
-                    api.Control.prototype.renderContent.apply( control, renderContentArgs );
-                    control.isRendered = true;
-                } else {
-                    section.expanded.bind( function( expanded ) {
-                        if ( expanded && ! control.isRendered ) {
-                            api.Control.prototype.renderContent.apply( control, renderContentArgs );
-                            control.isRendered = true;
-                        }
-                    } );
-                }
-            } );
-        },
+        screenshotRendered: false,
 
         /**
@@ -3834 +4586 @@
 
                 // Prevent the modal from showing when the user clicks the action button.
-                if ( $( event.target ).is( '.theme-actions .button' ) ) {
+                if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
                     return;
                 }
 
-                api.section( control.section() ).loadThemePreview( control.params.theme.id );
-            });
-
-            control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
-                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                    return;
-                }
-
                 event.preventDefault(); // Keep this AFTER the key filter above
-
                 api.section( control.section() ).showDetails( control.params.theme );
             });
@@ -3858 +4601 @@
                     $screenshot.attr( 'src', source );
                 }
-            });
-        },
-
-        /**
-         * Show or hide the theme based on the presence of the term in the title, description, and author.
+                control.screenshotRendered = true;
+            });
+        },
+
+        /**
+         * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
          *
          * @since 4.2.0
+         * @returns {boolean} Whether a theme control was activated or not.
          */
         filter: function( term ) {
@@ -3875 +4620 @@
             if ( -1 !== haystack.search( term ) ) {
                 control.activate();
+                return true;
             } else {
                 control.deactivate();
-            }
+                return false;
+            }
+        },
+
+        /**
+         * Rerender the theme from its JS template with the installed type.
+         *
+         * @since 4.9.0
+         *
+         * @returns {void}
+         */
+        rerenderAsInstalled: function( installed ) {
+            var control = this, section;
+            if ( installed ) {
+                control.params.theme.type = 'installed';
+            } else {
+                section = api.section( control.params.section );
+                control.params.theme.type = section.params.action;
+            }
+            control.renderContent(); // Replaces existing content.
+            control.container.trigger( 'render-screenshot' );
         }
     });
@@ -5281 +6047 @@
         code_editor:         api.CodeEditorControl
     };
-    api.panelConstructor = {};
+    api.panelConstructor = {
+        themes: api.ThemesPanel
+    };
     api.sectionConstructor = {
         themes: api.ThemesSection,
@@ -5400 +6168 @@
         // Sort the sections within each panel
         api.panel.each( function ( panel ) {
+            if ( 'themes' === panel.id ) {
+                return; // Don't reflow theme sections, as doing so moves them after the themes container.
+            }
+
             var sections = panel.sections(),
                 sectionHeadContainers = _.pluck( sections, 'headContainer' );
@@ -6224 +6996 @@
             };
 
-            /**
-             * Deactivate themes section if changeset status is not auto-draft
-             */
-            api.section( 'themes', function( section ) {
+            // Deactivate themes panel if changeset status is not auto-draft.
+            api.panel( 'themes', function( panel ) {
                 var canActivate;
 
@@ -6234 +7004 @@
                 };
 
-                section.active.validate = canActivate;
-                section.active.set( canActivate() );
+                panel.active.validate = canActivate;
+                panel.active.set( canActivate() );
                 changesetStatus.bind( function() {
-                    section.active.set( canActivate() );
+                    panel.active.set( canActivate() );
                 } );
             } );
@@ -6401 +7171 @@
 
         // Keyboard shortcuts - esc to exit section/panel.
-        $( 'body' ).on( 'keydown', function( event ) {
+        body.on( 'keydown', function( event ) {
             var collapsedObject, expandedControls = [], expandedSections = [], expandedPanels = [];
 
@@ -6441 +7211 @@
             collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
             if ( collapsedObject ) {
+                if ( 'themes' === collapsedObject.params.type ) {
+
+                    // Themes panel or section.
+                    if ( body.hasClass( 'modal-open' ) ) {
+                        collapsedObject.closeDetails();
+                    } else {
+
+                        // If we're collapsing a section, collapse the panel also.
+                        wp.customize.panel( 'themes' ).collapse();
+                    }
+                    return;
+                }
                 collapsedObject.collapse();
                 event.preventDefault();