Changeset 41648

Timestamp:

09/29/2017 08:12:19 PM (9 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.

Location:

trunk

Files:

• src/wp-admin/css/common.css (modified) (1 diff)
• src/wp-admin/css/customize-controls.css (modified) (13 diffs)
• src/wp-admin/css/install.css (modified) (1 diff)
• src/wp-admin/css/list-tables.css (modified) (1 diff)
• src/wp-admin/css/nav-menus.css (modified) (1 diff)
• src/wp-admin/css/themes.css (modified) (6 diffs)
• src/wp-admin/customize.php (modified) (1 diff)
• src/wp-admin/includes/theme.php (modified) (7 diffs)
• src/wp-admin/js/customize-controls.js (modified) (36 diffs)
• src/wp-admin/js/updates.js (modified) (5 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (10 diffs)
• src/wp-includes/css/admin-bar.css (modified) (1 diff)
• src/wp-includes/css/wp-embed-template.css (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-theme-control.php (modified) (3 diffs)
• src/wp-includes/customize/class-wp-customize-themes-panel.php (added)
• src/wp-includes/customize/class-wp-customize-themes-section.php (modified) (3 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (1 diff)

trunk/src/wp-admin/css/common.css

@@ -124 +124 @@
         border: 0;
         clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
         clip-path: inset(50%);
         height: 1px;

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

@@ -590 +590 @@
 
 #customize-theme-controls .customize-pane-child.open,
-#customize-theme-controls .customize-pane-child.current-panel,
-#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
+#customize-theme-controls .customize-pane-child.current-panel {
         -webkit-transform: none;
         transform: none;
 }
 
-#customize-theme-controls .customize-themes-panel.customize-pane-child,
 .section-open #customize-theme-controls .customize-pane-parent,
 .in-sub-panel #customize-theme-controls .customize-pane-parent,
 .section-open #customize-info,
 .in-sub-panel #customize-info,
-.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
-.in-themes-panel #customize-theme-controls .customize-pane-parent,
-.in-themes-panel #customize-info {
+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
         visibility: hidden;
         height: 0;
@@ -613 +609 @@
 .section-open #customize-theme-controls .customize-pane-parent.busy,
 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
-.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
 .section-open #customize-info.busy,
 .in-sub-panel #customize-info.busy,
-.in-themes-panel #customize-info.busy,
 .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
 #customize-theme-controls .customize-pane-child.open,
@@ -624 +618 @@
         height: auto;
         overflow: auto;
-}
-
-.in-themes-panel #customize-theme-controls .customize-pane-parent,
-.in-themes-panel #customize-info {
-        -webkit-transform: translateX(100%);
-        transform: translateX(100%);
 }
 
@@ -1573 +1561 @@
 }
 
-/* #customize-container is reused from customize-loader.js, hence the naming. */
-.wp-customizer .customize-loading #customize-container {
+.wp-customizer .customize-loading #customize-themes-loading-container {
         display: block;
-        -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
-        animation: customize-reload .75s;
-}
-
-#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
-#customize-theme-controls .control-section-themes .accordion-section-title {
+        -webkit-animation: customize-reload .5s; /* Can't use `transition` because `display` changes here. */
+        animation: customize-reload .5s;
+}
+
+.customize-loading #customize-themes-loading-container span {
+        clear: both;
+        color: #191e23;
+        font-size: 18px;
+        font-style: normal;
+        margin: 0;
+        padding: 2em 0;
+        text-align: center;
+        width: 100%;
+        display: block;
+        top: 50%;
+        position: relative;
+}
+
+.customize-loading #customize-themes-loading-container .customize-loading-text {
+        display: none;
+}
+
+#customize-theme-controls .control-panel-themes {
+        border-bottom: none;
+}
+
+#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-panel-themes > .accordion-section-title {
         cursor: default;
         background: #fff;
@@ -1588 +1597 @@
         border-bottom: 1px solid #ddd;
         border-left: none;
-        margin-top: 0;
-}
-#customize-theme-controls .control-section-themes .customize-section-back {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 80px;
-        border-left: 1px solid #ddd;
-        border-right: 4px solid #fff;
-}
-#customize-theme-controls .control-section-themes .customize-section-back:before {
-        content: "\f345";
-}
-#customize-theme-controls .control-section-themes .customize-section-back:hover,
-#customize-theme-controls .control-section-themes .customize-section-back:focus {
-        border-right-color: #0073aa;
+        border-right: none;
+        margin: 0 0 15px 0;
+        padding-right: 100px; /* Space for the button */
 }
 
@@ -1626 +1622 @@
 }
 
+.control-panel-themes .accordion-section-title span.customize-action,
+#customize-controls .customize-section-title span.customize-action,
 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
 #customize-controls .customize-section-title span.customize-action,
@@ -1634 +1632 @@
 }
 
-#customize-controls .control-section-themes .accordion-section-title .change-theme,
-#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
+#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
         position: absolute;
         right: 10px;
@@ -1643 +1640 @@
 }
 
-#customize-controls .control-section-themes .accordion-section-title:before {
+#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
         display: none;
 }
 
-#customize-controls .customize-themes-panel {
-        padding: 0 8px;
-        background: #f1f1f1;
+.control-panel-themes .customize-themes-full-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        transition: .18s left ease-in-out;
+        margin: 46px 0 0 300px;
+        padding: 25px 0;
+        overflow-y: scroll;
+        width: calc(100% - 300px);
+        height: calc(100% - 96px);
+        background: #eee;
+        z-index: 20;
+}
+
+/* Animations for opening the themes panel */
+#customize-header-actions .save,
+#customize-header-actions .spinner,
+#customize-header-actions .customize-controls-preview-toggle {
+        position: relative;
+        top: 0;
+        transition: .18s top ease-in-out;
+}
+
+#customize-footer-actions,
+#customize-footer-actions .collapse-sidebar {
+        bottom: 0;
+        transition: .18s bottom ease-in-out;
+}
+
+.in-themes-panel:not(.animating) #customize-header-actions .save,
+.in-themes-panel:not(.animating) #customize-header-actions #publish-settings,
+.in-themes-panel:not(.animating) #customize-header-actions .spinner,
+.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
+.in-themes-panel:not(.animating) #customize-preview,
+.in-themes-panel:not(.animating) #customize-footer-actions {
+        visibility: hidden;
+}
+
+.wp-full-overlay.in-themes-panel {
+        background: #eee; /* Prevents a black flash when fading in the panel */
+}
+
+.in-themes-panel #customize-header-actions .save,
+.in-themes-panel #customize-header-actions .spinner,
+.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
+        top: -45px;
+}
+
+.in-themes-panel #customize-footer-actions,
+.in-themes-panel #customize-footer-actions .collapse-sidebar {
+        bottom: -45px;
+}
+
+/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
+.in-themes-panel.animating .control-panel-themes .filter-themes-count {
+        display: none;
+}
+
+.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
+        bottom: 0;
+}
+
+.themes-filter-bar .feature-filter-toggle {
+        float: right;
+        margin: 3px 0 3px 25px;
+}
+
+.themes-filter-bar .feature-filter-toggle:before {
+    content: "\f111";
+    margin: 0 5px 0 0;
+    font: normal 16px/1 dashicons;
+    vertical-align: text-bottom;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.themes-filter-bar .feature-filter-toggle.open {
+        background: #eee;
+        border-color: #999;
+        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+        -webkit-transform: translateY(1px);
+        transform: translateY(1px);
+}
+
+.themes-filter-bar .feature-filter-toggle .filter-count-filters {
+        display: none;
+}
+
+.themes-filter-bar .filter-drawer {
         box-sizing: border-box;
-}
-
-#customize-controls .customize-themes-panel .accordion-section-title:first-child {
-        margin-top: 0;
-}
-
-#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
+        width: 100%;
+        position: absolute;
+        top: 46px;
+        left: 0;
+        padding: 25px 0 25px 25px;
+        border-top: 0;
+        margin: 0;
+        background: #eee;
+        border-bottom: 1px solid #ddd;
+}
+
+.themes-filter-bar .filter-group {
+        margin: 0 25px 0 0;
+        width: calc( (100% - 75px) / 3);
+        min-width: 200px;
+        max-width: 320px;
+}
+
+/* Adds a delay before fading in to avoid it "jumping" */
+@-webkit-keyframes themes-fade-in {
+        0% {
+                opacity: 0;
+        }
+        50% {
+                opacity: 0;
+        }
+        100% {
+                opacity: 1;
+        }
+}
+@keyframes themes-fade-in {
+        0% {
+                opacity: 0;
+        }
+        50% {
+                opacity: 0;
+        }
+        100% {
+                opacity: 1;
+        }
+}
+
+.control-panel-themes .customize-themes-full-container.animate {
+        -webkit-animation: .6s themes-fade-in 1;
+        animation: .6s themes-fade-in 1;
+}
+
+.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
+        -webkit-animation: .6s themes-fade-in 1;
+        animation: .6s themes-fade-in 1;
+}
+
+.control-panel-themes .filter-themes-count {
+        position: relative;
+        float: right;
+        line-height: 34px;
+}
+
+.control-panel-themes .filter-themes-count .themes-displayed {
+        font-weight: 600;
+        color: #555d66;
+}
+
+.customize-themes-notifications {
+        margin: 0;
+}
+
+.control-panel-themes .customize-themes-notifications .notice {
+        margin: 0 0 25px 0;
+}
+
+.customize-themes-full-container .customize-themes-section {
+        display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
+        overflow: hidden;
+}
+
+.customize-themes-full-container .customize-themes-section.current-section {
+        display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
+}
+
+.control-section .customize-section-text-before {
+        padding: 0 0 8px 15px;
+        margin: 15px 0 0 0;
+        line-height: 16px;
+        border-bottom: 1px solid #ddd;
+        color: #555d66;
+}
+
+.control-panel-themes .customize-themes-section-title {
+        width: 100%;
+        background: #fff;
+        box-shadow: none;
+        outline: none;
+        border-top: none;
+        border-bottom: 1px solid #ddd;
+        border-left: 4px solid #fff;
+        border-right: none;
+        cursor: pointer;
+        padding: 10px 15px;
+        position: relative;
+        text-align: left;
         font-size: 14px;
         font-weight: 600;
-}
-
-#customize-controls .customize-themes-panel > h2 {
-        padding: 15px 8px 0 8px;
-}
-
-#customize-theme-controls .customize-themes-panel .accordion-section-content {
-        background: transparent;
+        color: #555d66;
+        text-shadow: none;
+}
+
+.control-panel-themes #accordion-section-installed_themes {
+        border-top: 1px solid #ddd;
+}
+
+.control-panel-themes .theme-section {
+        margin: 0;
+        position: relative;
+}
+
+.control-panel-themes .customize-themes-section-title:focus,
+.control-panel-themes .customize-themes-section-title:hover {
+        border-left-color: #0073aa;
+        color: #0073aa;
+        background: #f5f5f5;
+}
+
+.customize-themes-section-title:not(.selected):after {
+        content: "";
         display: block;
-}
-
-.customize-control.customize-control-theme {
-        margin-bottom: 8px;
+        position: absolute;
+        top: 9px;
+        right: 15px;
+        width: 18px;
+        height: 18px;
+        border-radius: 100%;
+        border: 1px solid #ccc;
+        background: #fff;
+}
+
+.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
+        content: "\f147";
+        font: 16px/1 dashicons;
+        box-sizing: border-box;
+        width: 20px;
+        height: 20px;
+        padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
+        border-radius: 100%;
+        position: absolute;
+        top: 9px;
+        right: 15px;
+        background: #0073aa;
+        color: #fff;
+}
+
+.control-panel-themes .customize-themes-section-title.selected {
+        color: #0073aa;
 }
 
@@ -1682 +1896 @@
 }
 
+.loading .customize-themes-section .spinner {
+        display: block;
+        visibility: visible;
+        position: relative;
+        clear: both;
+        width: 20px;
+        height: 20px;
+        left: calc(50% - 10px);
+        float: none;
+        margin-top: 50px;
+}
+
+.customize-themes-section .no-themes,
+.customize-themes-section .no-themes-local {
+        display: none;
+}
+
+.themes-section-installed_themes .theme .notice-success {
+        display: none; /* Hide "installed" notice on installed themes tab. */
+}
+
+.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
+        margin: 0 0 0 8px;
+}
+
+.customize-control-theme .theme {
+        width: 100%;
+        margin: 0;
+        border: 1px solid #ddd;
+        background: #fff;
+}
+
+.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
+        background: #fff;
+        border: none;
+}
+
+.customize-control.customize-control-theme { /* override most properties on .customize-control */
+        box-sizing: border-box;
+        width: 25%;
+        max-width: 600px; /* Max. screenshot size / 2 */
+        margin: 0 25px 25px 0;
+        padding: 0;
+        clear: none;
+}
+
+/* 5 columns above 2100px */
+@media screen and (min-width: 2101px) {
+        .customize-control.customize-control-theme {
+                width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
+        }
+}
+
+/* 4 columns up to 2100px */
+@media screen and (min-width: 1601px) and (max-width: 2100px) {
+        .customize-control.customize-control-theme {
+                width: calc( ( 100% - 100px ) / 4 - 1px );
+        }
+}
+
+/* 3 columns up to 1600px */
+@media screen and (min-width: 1201px) and (max-width: 1600px) {
+        .customize-control.customize-control-theme {
+                width: calc( ( 100% - 75px ) / 3 - 1px );
+        }
+}
+
+/* 2 columns up to 1200px */
+@media screen and (min-width: 851px) and (max-width: 1200px) {
+        .customize-control.customize-control-theme {
+                width: calc( ( 100% - 50px ) / 2 - 1px );
+
+        }
+}
+
+/* 1 column up to 850 px */
+@media screen and (max-width: 850px) {
+        .customize-control.customize-control-theme {
+                width: 100%;
+        }
+}
+
 .wp-customizer .theme-browser .themes {
-        padding-bottom: 8px;
-}
-
-.wp-customizer .theme-browser .theme {
-        margin: 0;
-        width: 100%;
+        padding: 0 0 25px 25px;
+        transition: .18s margin-top linear;
 }
 
 .wp-customizer .theme-browser .theme .theme-actions {
-        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
         opacity: 1;
 }
@@ -1704 +1995 @@
 }
 
-.wp-customizer #themes-filter {
-        font-size: 16px;
-        font-weight: 300;
-        line-height: 1.5;
-        width: 100%;
-}
-
-.control-section-themes .accordion-section-title:after,
-.customize-themes-panel .accordion-section-title:after {
+.customize-preview-header.themes-filter-bar {
+        position: fixed;
+        top: 0;
+        left: 300px;
+        width: calc(100% - 300px);
+        height: 46px;
+        background: #eee;
+        z-index: 10;
+        padding: 6px 25px;
+        box-sizing: border-box;
+        border-bottom: 1px solid #ddd;
+}
+
+.themes-filter-bar .themes-filter-container {
+        margin: 0;
+        padding: 0;
+}
+
+.themes-filter-bar .wp-filter-search {
+        line-height: 25px;
+        padding: 3px 5px;
+        max-width: 100%;
+        width: 40%;
+        min-width: 300px;
+        position: absolute;
+        top: 6px;
+        left: 25px;
+}
+
+/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
+   current length of .org feature filters assuming translations do not wrap lines. */
+@media screen and (max-height:540px), screen and (max-width:1018px) {
+        .customize-preview-header.themes-filter-bar {
+                position: relative;
+                left: 0;
+                width: 100%;
+                margin: 0 0 25px 0;
+        }
+        .wp-customizer .theme-browser .themes {
+                padding: 0 0 25px 25px;
+                overflow: hidden;
+        }
+
+        .control-panel-themes .customize-themes-full-container {
+                margin-top: 0;
+                padding: 0;
+                height: 100%;
+                width: calc(100% - 300px);
+        }
+}
+
+@media screen and (max-width:1018px) {
+        .themes-filter-bar .filter-group {
+                width: calc( (100% - 50px) / 2);
+        }
+}
+
+@media screen and (max-width:900px) {
+        .customize-preview-header.themes-filter-bar {
+                height: 86px;
+                padding-top: 46px;
+        }
+
+        .themes-filter-bar .wp-filter-search {
+                width: calc(100% - 50px);
+                margin: 0;
+                min-width: 200px;
+        }
+
+        .themes-filter-bar .filter-drawer {
+                top: 86px;
+        }
+
+        .control-panel-themes .filter-themes-count {
+                float: left;
+        }
+}
+
+@media screen and (max-width:792px) {
+        .themes-filter-bar .filter-group {
+                width: calc( 100% - 25px);
+        }
+}
+
+.control-panel-themes .customize-themes-mobile-back {
         display: none;
 }
 
-.customize-themes-panel.control-panel-content {
-        border-top: 1px solid #ddd;
+/* Mobile - toggle between themes and filters */
+@media screen and (max-width:600px) {
+
+        .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
+                display: block;
+                float: right;
+        }
+
+        .control-panel-themes .customize-themes-full-container {
+                width: 100%;
+                margin: 0;
+                top: 46px;
+                height: calc(100% - 46px);
+                z-index: 1;
+                display: none;
+        }
+
+        .showing-themes .control-panel-themes .customize-themes-full-container {
+                display: block;
+        }
+
+        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
+                display: block;
+                position: fixed;
+                top: 0;
+                left: 0;
+                background: #eee;
+                color: #444;
+                border-radius: 0;
+                box-shadow: none;
+                border: none;
+                height: 46px;
+                width: 100%;
+                z-index: 10;
+                text-align: left;
+                text-shadow: none;
+                border-bottom: 1px solid #ddd;
+                border-left: 4px solid transparent;
+                margin: 0;
+                padding: 0;
+                font-size: 0;
+                overflow: hidden;
+        }
+
+        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
+                left: 0;
+                top: 0;
+                height: 42px;
+                width: 26px;
+                display: block;
+                line-height: 46px;
+                padding: 0 8px 0 8px;
+                border-right: 1px solid #ddd;
+        }
+
+        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
+        .wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
+                color: #0073aa;
+                background: #f3f3f5;
+                border-left-color: #0073aa;
+                outline: none;
+                box-shadow: none;
+        }
+
+        .showing-themes #customize-header-actions {
+                display: none;
+        }
 }
 
@@ -1734 +2166 @@
 }
 
+/* Avoid a z-index war by resetting elements that should be under the overlay.
+   This is likely required because of the way that sections and panels are positioned. */
+.wp-customizer.modal-open #customize-header-actions,
+.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
+.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
+        z-index: -1;
+}
+
 .wp-customizer .theme-overlay .theme-backdrop {
         background: rgba( 238, 238, 238, 0.75 );
         position: fixed;
         z-index: 110;
+}
+
+.wp-customizer .theme-overlay .star-rating {
+        float: left;
+        margin-right: 8px;
+}
+
+.wp-customizer .theme-rating .num-ratings {
+        line-height: 20px;
 }
 
@@ -1746 +2195 @@
         bottom: 45px;
         z-index: 120;
-        max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
 }
 
 .wp-customizer .theme-overlay .theme-actions {
-        text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
-}
-
-.ie8 .wp-customizer .theme-overlay .theme-header,
-.ie8 .wp-customizer .theme-overlay .theme-about,
-.ie8 .wp-customizer .theme-overlay .theme-actions {
-        position: static;
+        text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
+        padding: 10px 25px;
+        background: #eee;
+        border-top: 1px solid #ddd;
+}
+
+.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
+        margin-left: 8px;
+}
+
+.control-panel-themes .theme-actions .delete-theme {
+        left: 15px; /* these override themes.css on mobile */
+        right: auto;
+        bottom: auto;
+        position: absolute;
+}
+
+.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
+        overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
+}
+
+.wp-customizer .theme-header {
+        background: #eee;
+}
+
+.wp-customizer .theme-overlay .theme-header button,
+.wp-customizer .theme-overlay .theme-header .close:before {
+        color: #444;
+}
+
+.wp-customizer .theme-overlay .theme-header .close:focus,
+.wp-customizer .theme-overlay .theme-header .close:hover,
+.wp-customizer .theme-overlay .theme-header .right:focus,
+.wp-customizer .theme-overlay .theme-header .right:hover,
+.wp-customizer .theme-overlay .theme-header .left:focus,
+.wp-customizer .theme-overlay .theme-header .left:hover {
+        background: #fff;
+        border-bottom: 4px solid #0073aa;
+        color: #0073aa;
+}
+
+.wp-customizer .theme-overlay .theme-header .close:focus:before,
+.wp-customizer .theme-overlay .theme-header .close:hover:before {
+        color: #0073aa;
+}
+
+.wp-customizer .theme-overlay .theme-header button.disabled,
+.wp-customizer .theme-overlay .theme-header button.disabled:hover,
+.wp-customizer .theme-overlay .theme-header button.disabled:focus {
+        border-bottom: none;
+        background: transparent;
+        color: #ccc;
 }
 
@@ -1784 +2277 @@
         border-bottom: 1px solid #ddd;
         clear: both;
-        color: #666;
+        color: #555d66;
         font-size: 24px;
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

trunk/src/wp-admin/css/install.css

@@ -405 +405 @@
         border: 0;
         clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
         clip-path: inset(50%);
         height: 1px;

trunk/src/wp-admin/css/list-tables.css

@@ -1822 +1822 @@
         .post-com-count .screen-reader-text {
                 position: static;
+                -webkit-clip-path: none;
                 clip-path: none;
                 width: auto;

trunk/src/wp-admin/css/nav-menus.css

@@ -600 +600 @@
 .no-js.nav-menus-php .item-edit .screen-reader-text {
         position: static;
+        -webkit-clip-path: none;
         clip-path: none;
         width: auto;

trunk/src/wp-admin/css/themes.css

@@ -550 +550 @@
         margin: 0 30px 0 0;
         width: 55%;
-        max-width: 880px;
+        max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
         text-align: center;
 }
@@ -1050 +1050 @@
 }
 
-p.no-themes {
+p.no-themes,
+p.no-themes-local {
         clear: both;
         color: #666;
@@ -1706 +1707 @@
 }
 
-#customize-container {
+#customize-container,
+#customize-themes-loading-container {
         display: none;
-        background: #fff;
+        background: #eee;
         z-index: 500000;
         position: fixed;
@@ -1721 +1723 @@
 /* Make the Customizer and Theme installer overlays the only available content. */
 #customize-container,
+#customize-themes-loading-container,
 .theme-install-overlay {
         visibility: visible;
@@ -1825 +1828 @@
 #customize-preview.wp-full-overlay-main:before,
 .customize-loading #customize-container:before,
+.customize-loading #customize-themes-loading-container:before,
 .theme-install-overlay .wp-full-overlay-main:before {
         content: "";
@@ -1862 +1866 @@
         #customize-preview.wp-full-overlay-main:before,
         .customize-loading #customize-container:before,
+        .customize-loading #customize-themes-loading-container:before,
         .theme-install-overlay .wp-full-overlay-main:before {
                 background-image: url(../images/spinner-2x.gif);

trunk/src/wp-admin/customize.php

@@ -126 +126 @@
 
 <script type="text/javascript">
-var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
+var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
+        pagenow = 'customize';
 </script>
 

trunk/src/wp-admin/includes/theme.php

@@ -235 +235 @@
         $features = array(
 
-                __( 'Layout' ) => array(
-                        'grid-layout'   => __( 'Grid Layout' ),
-                        'one-column'    => __( 'One Column' ),
-                        'two-columns'   => __( 'Two Columns' ),
-                        'three-columns' => __( 'Three Columns' ),
-                        'four-columns'  => __( 'Four Columns' ),
-                        'left-sidebar'  => __( 'Left Sidebar' ),
-                        'right-sidebar' => __( 'Right Sidebar' ),
-                ),
-
-                __( 'Features' ) => array(
-                        'accessibility-ready'   => __( 'Accessibility Ready' ),
-                        'buddypress'            => __( 'BuddyPress' ),
-                        'custom-background'     => __( 'Custom Background' ),
-                        'custom-colors'         => __( 'Custom Colors' ),
-                        'custom-header'         => __( 'Custom Header' ),
-                        'custom-logo'           => __( 'Custom Logo' ),
-                        'custom-menu'           => __( 'Custom Menu' ),
-                        'editor-style'          => __( 'Editor Style' ),
-                        'featured-image-header' => __( 'Featured Image Header' ),
-                        'featured-images'       => __( 'Featured Images' ),
-                        'flexible-header'       => __( 'Flexible Header' ),
-                        'footer-widgets'        => __( 'Footer Widgets' ),
-                        'front-page-post-form'  => __( 'Front Page Posting' ),
-                        'full-width-template'   => __( 'Full Width Template' ),
-                        'microformats'          => __( 'Microformats' ),
-                        'post-formats'          => __( 'Post Formats' ),
-                        'rtl-language-support'  => __( 'RTL Language Support' ),
-                        'sticky-post'           => __( 'Sticky Post' ),
-                        'theme-options'         => __( 'Theme Options' ),
-                        'threaded-comments'     => __( 'Threaded Comments' ),
-                        'translation-ready'     => __( 'Translation Ready' ),
-                ),
-
                 __( 'Subject' )  => array(
                         'blog'           => __( 'Blog' ),
@@ -279 +245 @@
                         'photography'    => __( 'Photography' ),
                         'portfolio'      => __( 'Portfolio' ),
+                ),
+
+                __( 'Features' ) => array(
+                        'accessibility-ready'   => __( 'Accessibility Ready' ),
+                        'custom-background'     => __( 'Custom Background' ),
+                        'custom-colors'         => __( 'Custom Colors' ),
+                        'custom-header'         => __( 'Custom Header' ),
+                        'custom-logo'           => __( 'Custom Logo' ),
+                        'editor-style'          => __( 'Editor Style' ),
+                        'featured-image-header' => __( 'Featured Image Header' ),
+                        'featured-images'       => __( 'Featured Images' ),
+                        'footer-widgets'        => __( 'Footer Widgets' ),
+                        'full-width-template'   => __( 'Full Width Template' ),
+                        'post-formats'          => __( 'Post Formats' ),
+                        'sticky-post'           => __( 'Sticky Post' ),
+                        'theme-options'         => __( 'Theme Options' ),
+                ),
+
+                __( 'Layout' ) => array(
+                        'grid-layout'   => __( 'Grid Layout' ),
+                        'one-column'    => __( 'One Column' ),
+                        'two-columns'   => __( 'Two Columns' ),
+                        'three-columns' => __( 'Three Columns' ),
+                        'four-columns'  => __( 'Four Columns' ),
+                        'left-sidebar'  => __( 'Left Sidebar' ),
+                        'right-sidebar' => __( 'Right Sidebar' ),
                 )
+
         );
 
@@ -575 +568 @@
                 $parent = false;
                 if ( $theme->parent() ) {
-                        $parent = $theme->parent()->display( 'Name' );
-                        $parents[ $slug ] = $theme->parent()->get_stylesheet();
+                        $parent = $theme->parent();
+                        $parents[ $slug ] = $parent->get_stylesheet();
+                        $parent = $parent->display( 'Name' );
                 }
 
@@ -636 +630 @@
  */
 function customize_themes_print_templates() {
-        $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
-        $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
         ?>
         <script type="text/html" id="tmpl-customize-themes-details-view">
@@ -649 +641 @@
                         <div class="theme-about wp-clearfix">
                                 <div class="theme-screenshots">
-                                <# if ( data.screenshot[0] ) { #>
+                                <# if ( data.screenshot && data.screenshot[0] ) { #>
                                         <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
                                 <# } else { #>
@@ -662 +654 @@
                                         <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
                                         <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
-                                        <p class="theme-description">{{{ data.description }}}</p>
+
+                                        <# if ( data.stars && 0 != data.num_ratings ) { #>
+                                                <div class="theme-rating">
+                                                        {{{ data.stars }}}
+                                                        <span class="num-ratings">
+                                                                <?php
+                                                                /* translators: %s is the number of ratings */
+                                                                echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' );
+                                                                ?>
+                                                        </span>
+                                                </div>
+                                        <# } #>
+
+                                        <# if ( data.hasUpdate ) { #>
+                                                <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
+                                                        <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
+                                                        {{{ data.update }}}
+                                                </div>
+                                        <# } #>
 
                                         <# if ( data.parent ) { #>
@@ -668 +678 @@
                                         <# } #>
 
+                                        <p class="theme-description">{{{ data.description }}}</p>
+
                                         <# if ( data.tags ) { #>
-                                                <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
+                                                <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
                                         <# } #>
                                 </div>
                         </div>
 
-                        <# if ( ! data.active ) { #>
-                                <div class="theme-actions">
-                                        <div class="inactive-theme">
-                                                <?php
-                                                /* translators: %s: Theme name */
-                                                $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
-                                                ?>
-                                                <a href="<?php echo $preview_url; ?>" target="_top" class="button button-primary" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></a>
-                                        </div>
-                                </div>
-                        <# } #>
+                        <div class="theme-actions">
+                                <# if ( data.active ) { #>
+                                        <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
+                                <# } else if ( 'installed' === data.type ) { #>
+                                        <?php if ( current_user_can( 'delete_themes' ) ) { ?>
+                                                <# if ( data.actions && data.actions['delete'] ) { #>
+                                                        <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+                                                <# } #>
+                                        <?php } ?>
+                                        <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
+                                <# } else { #>
+                                        <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
+                                        <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install &amp; Preview' ); ?></button>
+                                <# } #>
+                        </div>
                 </div>
         </script>

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();

trunk/src/wp-admin/js/updates.js

@@ -184 +184 @@
                         $notice.replaceWith( $adminNotice );
                 } else {
-                        $( '.wrap' ).find( '> h1' ).after( $adminNotice );
+                        if ( 'customize' === pagenow ) {
+                                $( '.customize-themes-notifications' ).append( $adminNotice );
+                        } else {
+                                $( '.wrap' ).find( '> h1' ).after( $adminNotice );
+                        }
                 }
 
@@ -931 +935 @@
                         $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
 
+                } else if ( 'customize' === pagenow ) {
+
+                        // Update the theme details UI.
+                        $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
+
+                        $notice.find( 'h3' ).remove();
+
+                        // Add the top-level UI, and update both.
+                        $notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
+                        $notice = $notice.addClass( 'updating-message' ).find( 'p' );
+
                 } else {
                         $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
@@ -973 +988 @@
                         $notice, newText;
 
+                if ( 'customize' === pagenow ) {
+                        $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
+                }
+
                 if ( 'themes-network' === pagenow ) {
                         $notice = $theme.find( '.update-message' );
@@ -1025 +1044 @@
                 if ( wp.updates.maybeHandleCredentialError( response, 'update-theme' ) ) {
                         return;
+                }
+
+                if ( 'customize' === pagenow ) {
+                        $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
                 }
 
@@ -1163 +1186 @@
                 }
 
-                if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
-                        $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
-                        $card   = $( '.install-theme-info' ).prepend( $message );
+                if ( 'customize' === pagenow ) {
+                        if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
+                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+                                $card   = $( '.theme-overlay .theme-info' ).prepend( $message );
+                        } else {
+                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+                                $card   = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
+                        }
+                        $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
                 } else {
-                        $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
-                        $button = $card.find( '.theme-install' );
+                        if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
+                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+                                $card   = $( '.install-theme-info' ).prepend( $message );
+                        } else {
+                                $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
+                                $button = $card.find( '.theme-install' );
+                        }
                 }
 

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -321 +321 @@
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
 
+                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
                 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
@@ -376 +377 @@
                 add_action( 'wp_ajax_customize_save',           array( $this, 'save' ) );
                 add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
+                add_action( 'wp_ajax_customize-load-themes',    array( $this, 'load_themes_ajax' ) );
                 add_action( 'wp_ajax_dismiss_customize_changeset_autosave', array( $this, 'handle_dismiss_changeset_autosave_request' ) );
 
@@ -393 +395 @@
                 // Export the settings to JS via the _wpCustomizeSettings variable.
                 add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
+
+                // Add theme update notices.
+                if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
+                        require_once ABSPATH . '/wp-admin/includes/update.php';
+                        add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
+                }
         }
 
@@ -3686 +3694 @@
                         $control->enqueue();
                 }
+
+                if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
+                        wp_enqueue_script( 'updates' );
+                }
         }
 
@@ -3890 +3902 @@
                         'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
                         'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
+                        'switch-themes' => wp_create_nonce( 'switch-themes' ),
                         'dismiss_autosave' => wp_create_nonce( 'dismiss_customize_changeset_autosave' ),
                 );
@@ -3996 +4009 @@
                         'documentTitleTmpl' => $this->get_document_title_template(),
                         'previewableDevices' => $this->get_previewable_devices(),
+                        'l10n' => array(
+                                'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
+                                /* translators: %d is the number of theme search results, which cannot currently consider singular vs. plural forms */
+                                'themeSearchResults' => __( '%d themes found' ),
+                                /* translators: %d is the number of themes being displayed, which cannot currently consider singular vs. plural forms */
+                                'announceThemeCount' => __( 'Displaying %d themes' ),
+                                /* translators: %s is the theme name */
+                                'announceThemeDetails' => __( 'Showing details for theme: %s' ),
+                        ),
                 );
 
@@ -4099 +4121 @@
                 /* Panel, Section, and Control Types */
                 $this->register_panel_type( 'WP_Customize_Panel' );
+                $this->register_panel_type( 'WP_Customize_Themes_Panel' );
                 $this->register_section_type( 'WP_Customize_Section' );
                 $this->register_section_type( 'WP_Customize_Sidebar_Section' );
+                $this->register_section_type( 'WP_Customize_Themes_Section' );
                 $this->register_control_type( 'WP_Customize_Color_Control' );
                 $this->register_control_type( 'WP_Customize_Media_Control' );
@@ -4160 +4184 @@
                 ) ) );
 
-                /* Themes */
-
-                $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
-                        'title'      => $this->theme()->display( 'Name' ),
-                        'capability' => 'switch_themes',
-                        'priority'   => 0,
+                /* Themes (controls are loaded via ajax) */
+
+                $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
+                        'title'       => $this->theme()->display( 'Name' ),
+                        'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish your new design. Browse available themes via the filters in this menu.' ),
+                        'capability'  => 'switch_themes',
+                        'priority'    => 0,
                 ) ) );
+
+                $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
+                        'title'       => __( 'Installed themes' ),
+                        'action'      => 'installed',
+                        'capability'  => 'switch_themes',
+                        'panel'       => 'themes',
+                        'priority'    => 0,
+                ) ) );
+
+                if ( ! is_multisite() ) {
+                        $this->add_section( new WP_Customize_Themes_Section( $this, 'wporg_themes', array(
+                                'title'       => __( 'WordPress.org themes' ),
+                                'action'      => 'wporg',
+                                'capability'  => 'install_themes',
+                                'panel'       => 'themes',
+                                'priority'    => 5,
+                        ) ) );
+                }
 
                 // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
@@ -4172 +4215 @@
                         'capability' => 'switch_themes',
                 ) ) );
-
-                require_once( ABSPATH . 'wp-admin/includes/theme.php' );
-
-                // Theme Controls.
-
-                // Add a control for the active/original theme.
-                if ( ! $this->is_theme_active() ) {
-                        $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
-                        $active_theme = current( $themes );
-                        $active_theme['isActiveTheme'] = true;
-                        $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
-                                'theme'    => $active_theme,
-                                'section'  => 'themes',
-                                'settings' => 'active_theme',
-                        ) ) );
-                }
-
-                $themes = wp_prepare_themes_for_js();
-                foreach ( $themes as $theme ) {
-                        if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
-                                continue;
-                        }
-
-                        $theme_id = 'theme_' . $theme['id'];
-                        $theme['isActiveTheme'] = false;
-                        $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
-                                'theme'    => $theme,
-                                'section'  => 'themes',
-                                'settings' => 'active_theme',
-                        ) ) );
-                }
 
                 /* Site Identity */
@@ -4708 +4720 @@
 
         /**
+         * Load themes into the theme browsing/installation UI.
+         *
+         * @since 4.9.0
+         */
+        public function load_themes_ajax() {
+                check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
+
+                if ( ! current_user_can( 'switch_themes' ) ) {
+                        wp_die( -1 );
+                }
+
+                if ( empty( $_POST['theme_action'] ) ) {
+                        wp_send_json_error( 'missing_theme_action' );
+                }
+                $theme_action = sanitize_key( $_POST['theme_action'] );
+                $themes = array();
+
+                require_once ABSPATH . 'wp-admin/includes/theme.php';
+                if ( 'installed' === $theme_action ) {
+                        $themes = array( 'themes' => wp_prepare_themes_for_js() );
+                        foreach ( $themes['themes'] as &$theme ) {
+                                $theme['type'] = 'installed';
+                                $theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
+                        }
+                } elseif ( 'wporg' === $theme_action ) {
+                        if ( ! current_user_can( 'install_themes' ) ) {
+                                wp_die( -1 );
+                        }
+
+                        // Arguments for all queries.
+                        $args = array(
+                                'per_page' => 100,
+                                'page' => isset( $_POST['page'] ) ? absint( $_POST['page'] ) : 1,
+                                'fields' => array(
+                                        'screenshot_url' => true,
+                                        'description' => true,
+                                        'rating' => true,
+                                        'downloaded' => true,
+                                        'downloadlink' => true,
+                                        'last_updated' => true,
+                                        'homepage' => true,
+                                        'num_ratings' => true,
+                                        'tags' => true,
+                                        'parent' => true,
+                                        // 'extended_author' => true, @todo: WordPress.org throws a 500 server error when this is here.
+                                ),
+                        );
+
+                        // Define query filters based on user input.
+                        if ( ! array_key_exists( 'search', $_POST ) ) {
+                                $args['search'] = '';
+                        } else {
+                                $args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
+                        }
+
+                        if ( ! array_key_exists( 'tags', $_POST ) ) {
+                                $args['tag'] = '';
+                        } else {
+                                $args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
+                        }
+
+                        if ( '' === $args['search'] && '' === $args['tag'] ) {
+                                $args['browse'] = 'new'; // Sort by latest themes by default.
+                        }
+
+                        // Load themes from the .org API.
+                        $themes = themes_api( 'query_themes', $args );
+                        if ( is_wp_error( $themes ) ) {
+                                wp_send_json_error();
+                        }
+
+                        // This list matches the allowed tags in wp-admin/includes/theme-install.php.
+                        $themes_allowedtags = array_fill_keys(
+                                array( 'a', 'abbr', 'acronym', 'code', 'pre', 'em', 'strong', 'div', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img' ),
+                                array()
+                        );
+                        $themes_allowedtags['a'] = array_fill_keys( array( 'href', 'title', 'target' ), true );
+                        $themes_allowedtags['acronym']['title'] = true;
+                        $themes_allowedtags['abbr']['title'] = true;
+                        $themes_allowedtags['img'] = array_fill_keys( array( 'src', 'class', 'alt' ), true );
+
+                        // Prepare a list of installed themes to check against before the loop.
+                        $installed_themes = array();
+                        $wp_themes = wp_get_themes();
+                        foreach ( $wp_themes as $theme ) {
+                                $installed_themes[] = $theme->get_stylesheet();
+                        }
+                        $update_php = network_admin_url( 'update.php?action=install-theme' );
+
+                        // Set up properties for themes available on WordPress.org.
+                        foreach ( $themes->themes as &$theme ) {
+                                $theme->install_url = add_query_arg( array(
+                                        'theme'    => $theme->slug,
+                                        '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
+                                ), $update_php );
+
+                                $theme->name        = wp_kses( $theme->name, $themes_allowedtags );
+                                $theme->author      = wp_kses( $theme->author, $themes_allowedtags );
+                                $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
+                                $theme->description = wp_kses( $theme->description, $themes_allowedtags );
+                                $theme->tags        = implode( ', ', $theme->tags );
+                                $theme->stars       = wp_star_rating( array(
+                                        'rating' => $theme->rating,
+                                        'type' => 'percent',
+                                        'number' => $theme->num_ratings,
+                                        'echo' => false,
+                                ) );
+                                $theme->num_ratings = number_format_i18n( $theme->num_ratings );
+                                $theme->preview_url = set_url_scheme( $theme->preview_url );
+
+                                // Handle themes that are already installed as installed themes.
+                                if ( in_array( $theme->slug, $installed_themes, true ) ) {
+                                        $theme->type = 'installed';
+                                } else {
+                                        $theme->type = $theme_action;
+                                }
+
+                                // Set active based on customized theme.
+                                $theme->active = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme->slug );
+
+                                // Map available theme properties to installed theme properties.
+                                $theme->id           = $theme->slug;
+                                $theme->screenshot   = array( $theme->screenshot_url );
+                                $theme->authorAndUri = $theme->author;
+                                $theme->parent       = ( $theme->slug === $theme->template ) ? false : $theme->template; // The .org API does not seem to return the parent in a documented way; however, this check should yield a similar result in most cases.
+                                unset( $theme->slug );
+                                unset( $theme->screenshot_url );
+                                unset( $theme->author );
+                        } // End foreach().
+                } // End if().
+                wp_send_json_success( $themes );
+        }
+
+
+        /**
          * Callback for validating the header_textcolor value.
          *

trunk/src/wp-includes/css/admin-bar.css

@@ -694 +694 @@
         border: 0;
         clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
         clip-path: inset(50%);
         height: 1px;

trunk/src/wp-includes/css/wp-embed-template.css

@@ -12 +12 @@
         border: 0;
         clip: rect(1px, 1px, 1px, 1px);
+        -webkit-clip-path: inset(50%);
         clip-path: inset(50%);
         height: 1px;

trunk/src/wp-includes/customize/class-wp-customize-theme-control.php

@@ -58 +58 @@
          */
         public function content_template() {
-                $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
-                $active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
-                $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
-                $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
+                /* translators: %s: theme name */
+                $details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
+                /* translators: %s: theme name */
+                $customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
+                /* translators: %s: theme name */
+                $preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
+                /* translators: %s: theme name */
+                $install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
                 ?>
-                <# if ( data.theme.isActiveTheme ) { #>
-                        <div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+                <# if ( data.theme.active ) { #>
+                        <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
                 <# } else { #>
-                        <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
+                        <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
                 <# } #>
 
-                        <# if ( data.theme.screenshot[0] ) { #>
+                        <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
                                 <div class="theme-screenshot">
                                         <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
@@ -77 +81 @@
                         <# } #>
 
-                        <# if ( data.theme.isActiveTheme ) { #>
-                                <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
-                        <# } else { #>
-                                <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
-                        <# } #>
+                        <span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
 
                         <div class="theme-author"><?php
@@ -88 +88 @@
                         ?></div>
 
-                        <# if ( data.theme.isActiveTheme ) { #>
-                                <h3 class="theme-name" id="{{ data.theme.id }}-name">
+                        <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
+                                <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}">
+                                        <p>
+                                                <?php
+                                                /* translators: %s is the linked update now button */
+                                                printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' );
+                                                ?>
+                                        </p>
+                                </div>
+                        <# } #>
+
+                        <# if ( data.theme.active ) { #>
+                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
                                         <?php
                                         /* translators: %s: theme name */
-                                        printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
+                                        printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
                                         ?>
                                 </h3>
+                                <div class="theme-actions">
+                                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
+                                </div>
+                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
+                        <# } else if ( 'installed' === data.theme.type ) { #>
+                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
+                                <div class="theme-actions">
+                                        <button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
+                                </div>
+                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
                         <# } else { #>
-                                <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
+                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
                                 <div class="theme-actions">
-                                        <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
+                                        <button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
                                 </div>
                         <# } #>

trunk/src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -11 +11 @@
  * Customize Themes Section class.
  *
- * A UI container for theme controls, which behaves like a backwards Panel.
+ * A UI container for theme controls, which are displayed within sections.
  *
  * @since 4.2.0
@@ -20 +20 @@
 
         /**
-         * Customize section type.
+         * Section type.
          *
          * @since 4.2.0
@@ -28 +28 @@
 
         /**
-         * Render the themes section, which behaves like a panel.
+         * Theme section action.
          *
-         * @since 4.2.0
+         * Defines the type of themes to load (installed, wporg, etc.).
+         *
+         * @since 4.9.0
+         * @var string
          */
-        protected function render() {
-                $classes = 'accordion-section control-section control-section-' . $this->type;
+        public $action = '';
+
+        /**
+         * Get section parameters for JS.
+         *
+         * @since 4.9.0
+         * @return array Exported parameters.
+         */
+        public function json() {
+                $exported = parent::json();
+                $exported['action'] = $this->action;
+
+                return $exported;
+        }
+
+        /**
+         * Render a themes section as a JS template.
+         *
+         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+         *
+         * @since 4.9.0
+         */
+        protected function render_template() {
                 ?>
-                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
-                        <h3 class="accordion-section-title">
-                                <?php
-                                if ( $this->manager->is_theme_active() ) {
-                                        echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
-                                } else {
-                                        echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
-                                }
-                                ?>
-
-                                <?php if ( count( $this->controls ) > 0 ) : ?>
-                                        <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
-                                <?php endif; ?>
-                        </h3>
-                        <div class="customize-themes-panel control-panel-content themes-php">
-                                <h3 class="accordion-section-title customize-section-title">
-                                        <button class="customize-section-back" tabindex="0" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
-                                        <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
-                                        <?php _e( 'Themes' ); ?>
-                                        <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
-                                </h3>
-                                <h3 class="accordion-section-title customize-section-title">
-                                        <?php
-                                        if ( $this->manager->is_theme_active() ) {
-                                                echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
-                                        } else {
-                                                echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
-                                        }
-                                        ?>
-                                        <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
-                                </h3>
-
+                <li id="accordion-section-{{ data.id }}" class="theme-section">
+                        <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button>
+                        <?php if ( current_user_can( 'install_themes' ) || is_multisite() ) : // @todo: upload support ?>
+                        <?php endif; ?>
+                        <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
                                 <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
-
-                                <div id="customize-container"></div>
-                                <?php if ( count( $this->controls ) > 4 ) : ?>
-                                        <p><label for="themes-filter">
-                                                <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
-                                                <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
-                                        </label></p>
-                                <?php endif; ?>
                                 <div class="theme-browser rendered">
-                                        <ul class="themes accordion-section-content">
+                                        <div class="customize-preview-header themes-filter-bar">
+                                                <?php $this->filter_bar_content_template(); ?>
+                                        </div>
+                                        <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
+                                        <ul class="themes">
                                         </ul>
+                                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
+                                        <p class="no-themes-local">
+                                                <?php
+                                                /* translators: %s is the string, "search WordPress.org themes" */
+                                                printf( __( 'No themes found. Try a different search, or %s.' ),
+                                                        sprintf( '<button type="button" class="button-link search-dotorg-themes">%s</button>', __( 'Search WordPress.org themes' ) )
+                                                );
+                                                ?>
+                                        </p>
+                                        <p class="spinner"></p>
                                 </div>
                         </div>
                 </li>
-<?php }
+                <?php
+        }
+
+        /**
+         * Render the filter bar portion of a themes section as a JS template.
+         *
+         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
+         * The filter bar container is rendered by @see `render_template()`.
+         *
+         * @since 4.9.0
+         */
+        protected function filter_bar_content_template() {
+                ?>
+                <button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Back to theme sources' ); ?></button>
+                <# if ( 'wporg' === data.action ) { #>
+                        <div class="search-form">
+                                <label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
+                                <input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
+                                <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                        </div>
+                        <button type="button" class="button feature-filter-toggle">
+                                <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
+                                <?php
+                                /* translators: %s: number of filters selected. */
+                                printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' );
+                                ?>
+                                </span>
+                        </button>
+                        <div class="filter-drawer filter-details">
+                                <?php
+                                $feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
+                                foreach ( $feature_list as $feature_name => $features ) {
+                                        echo '<fieldset class="filter-group">';
+                                        echo '<legend>' . esc_html( $feature_name ) . '</legend>';
+                                        echo '<div class="filter-group-feature">';
+                                        foreach ( $features as $feature => $feature_name ) {
+                                                echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
+                                                echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
+                                        }
+                                        echo '</div>';
+                                        echo '</fieldset>';
+                                }
+                                ?>
+                        </div>
+                <# } else { #>
+                        <p class="themes-filter-container">
+                                <label for="themes-filter">
+                                        <span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
+                                        <input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
+                                        <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                                </label>
+                        </p>
+                <# } #>
+                <div class="filter-themes-count">
+                        <span class="themes-displayed">
+                                <?php
+                                /* translators: %s: number of themes displayed. */
+                                echo sprintf( __( '%s themes' ), '<span class="theme-count">0</span>' );
+                                ?>
+                        </span>
+                </div>
+                <?php
+        }
 }

trunk/tests/phpunit/tests/customize/manager.php

@@ -2554 +2554 @@
                 $this->assertNotEmpty( $data );
 
-                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts', 'initialClientTimestamp', 'initialServerDate', 'initialServerTimestamp' ), array_keys( $data ) );
+                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts', 'initialClientTimestamp', 'initialServerDate', 'initialServerTimestamp', 'l10n' ), array_keys( $data ) );
                 $this->assertEquals( $autofocus, $data['autofocus'] );
                 $this->assertArrayHasKey( 'save', $data['nonce'] );