Changeset 39140

Timestamp:

11/04/2016 03:53:01 PM (8 years ago)

Author:

helen

Message:

Customize: Revert theme install feature.

This is a great goal for core, and is close, but it is not in shape to be shipped for 4.7 and there is not enough time left in the development cycle to alter and polish sufficiently. There are bugs, but more than that, there are more fundamental questions around the use of existing UI, general UX, and how findable themes are (not) on the .org side.

see #37661.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (13 diffs)
• src/wp-admin/css/themes.css (modified) (1 diff)
• src/wp-admin/customize.php (modified) (1 diff)
• src/wp-admin/includes/theme.php (modified) (4 diffs)
• src/wp-admin/includes/update-core.php (modified) (1 diff)
• src/wp-admin/js/customize-controls.js (modified) (29 diffs)
• src/wp-admin/js/updates.js (modified) (5 diffs)
• src/wp-includes/class-wp-customize-manager.php (modified) (10 diffs)
• src/wp-includes/customize/class-wp-customize-theme-control.php (modified) (2 diffs)
• src/wp-includes/customize/class-wp-customize-themes-panel.php (deleted)
• src/wp-includes/customize/class-wp-customize-themes-section.php (modified) (2 diffs)
• tests/phpunit/tests/customize/manager.php (modified) (1 diff)

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

@@ -309 +309 @@
 
 #customize-theme-controls .customize-pane-child.open,
-#customize-theme-controls .customize-pane-child.current-panel {
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
     -webkit-transform: none;
     -ms-transform: none;
@@ -315 +316 @@
 }
 
+#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-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 {
     visibility: hidden;
     height: 0;
@@ -330 +334 @@
 .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,
@@ -339 +345 @@
     height: auto;
     overflow: auto;
+}
+
+.in-themes-panel #customize-theme-controls .customize-pane-parent,
+.in-themes-panel #customize-info {
+    -webkit-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    transform: translateX(100%);
 }
 
@@ -1151 +1164 @@
 }
 
-#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 {
+#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes .accordion-section-title {
     cursor: default;
     background: #fff;
@@ -1163 +1172 @@
     border-bottom: 1px solid #ddd;
     border-left: none;
-    border-right: none;
-    margin: 0 0 15px 0;
-    padding-right: 100px; /* Space for the button */
+    margin-top: 0;
 }
 
@@ -1173 +1180 @@
 }
 
-.control-panel-themes .accordion-section-title span.customize-action,
+#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
+#customize-theme-controls .control-section-themes > .accordion-section-title {
+    margin: 0 0 15px;
+}
+
+#customize-controls .customize-themes-panel .accordion-section-title {
+    margin: 15px -8px;
+}
+
+#customize-controls .control-section-themes .accordion-section-title,
+#customize-controls .customize-themes-panel .accordion-section-title {
+    padding-right: 100px; /* Space for the button */
+}
+
+#customize-controls .control-section-themes .accordion-section-title span.customize-action,
 #customize-controls .customize-section-title span.customize-action {
     font-size: 13px;
@@ -1180 +1201 @@
 }
 
-.control-panel-themes .accordion-section-title .change-theme {
+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
     position: absolute;
     right: 10px;
@@ -1188 +1210 @@
 }
 
-#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
+#customize-controls .control-section-themes .accordion-section-title:before {
     display: none;
 }
 
-.control-panel-themes .customize-themes-full-container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    -webkit-transition: .18s left ease-in-out;
-    transition: .18s left ease-in-out;
-    margin: 0 0 0 300px;
-    padding:25px;
-    overflow-y: scroll;
-    width: -webkit-calc(100% - 350px);
-    width: calc(100% - 350px);
-    height: -webkit-calc(100% - 50px);
-    height: calc(100% - 50px);
-    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;
-    -webkit-transition: .18s top ease-in-out;
-    transition: .18s top ease-in-out;
-}
-
-#customize-footer-actions,
-#customize-footer-actions .collapse-sidebar {
-    bottom: 0;
-    -webkit-transition: .18s bottom ease-in-out;
-    transition: .18s bottom ease-in-out;
-}
-
-.in-themes-panel:not(.animating) #customize-header-actions .save,
-.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;
-}
-
-/* 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: fixed;
-    top: 0;
-    left: 48px;
-    width: 222px;
-    padding: 6px 15px;
-    margin: 0;
-    line-height: 32px;
-    text-align: right;
-    z-index: 10;
-}
-
-.control-panel-themes .filter-themes-count .themes-displayed {
-    font-weight: 600;
-    color: #555d66;
-}
-
-.control-panel-themes .filter-themes-count .see-themes,
-.control-panel-themes .filter-themes-count .filter-themes {
-    display: none;
-}
-
-
-/* Mobile - toggle between themes and filters */
-@media screen and (max-width:600px) {
-
-    /* Show a spinner in the filters view also, reusing the main customize spinner */
-    .in-themes-panel.loading #customize-header-actions .spinner {
-        position: fixed;
-        top: 0;
-        left: 48px;
-        visibility: visible;
-    }
-
-    .in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
-        visibility: hidden;
-    }
-
-    .control-panel-themes .filter-themes-count {
-        width: -webkit-calc(100% - 93px);
-        width: calc(100% - 93px);
-    }
-
-    .control-panel-themes .filter-themes-count .themes-displayed {
-        display: none;
-    }
-
-    .wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
-        display: block;
-        float: right;
-    }
-
-    .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
-        display: block;
-        float: right;
-    }
-
-    .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10;
-        height: 45px;
-        background: #eee;
-    }
-
-    .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
-        line-height: 45px;
-    }
-
-    .control-panel-themes .customize-themes-full-container {
-        width: -webkit-calc(100% - 50px);
-        width: calc(100% - 50px);
-        margin: 0;
-        top: 46px;
-        height: -webkit-calc(100% - 96px);
-        height: calc(100% - 96px);
-        z-index: 1;
-        display: none;
-    }
-
-    .showing-themes .control-panel-themes .customize-themes-full-container {
-        display: block;
-    }
-}
-
-.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. */
-}
-
-.theme-section .customize-themes-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;
-    -webkit-box-shadow: none;
-    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;
-    color: #555d66;
-    text-shadow: none;
-}
-
-.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;
-}
-
-.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
-    content: "\f147";
-    font: 16px/1 dashicons;
+#customize-controls .customize-themes-panel {
+    padding: 0 8px;
+    background: #f1f1f1;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-    position: absolute;
-    top: 9px;
-    right: 15px;
-    background: #0073aa;
-    color: #fff;
-}
-
-.control-panel-themes .customize-themes-section-title.selected {
-    color: #0073aa;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
-    border-left: none;
-    padding: 5px 10px 5px 15px;
-    width: auto;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
-.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
-    content: "\f140";
-    font: 20px/1 dashicons;
-    position: absolute;
-    right: 15px;
-    top: 8px;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
-    width: 100%;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
-    background: #fff;
-    cursor: default;
-}
-
-.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
-    margin-top: 15px;
-    border-top: 1px solid #ddd;
-}
-
-.control-panel-themes .filter-details {
-    background: #f5f5f5;
-    margin: 0;
-    padding: 8px 15px;
-    border-top: none;
-    border-bottom: 1px solid #ddd;
-    display: none;
-}
-
-.control-panel-themes .customize-themes-section-title.selected.details-open {
-    border-bottom-color: #f5f5f5;
-    border-left-color: #f5f5f5;
-    background: #f5f5f5;
-}
-
-.control-panel-themes .favorites-form.filter-details label {
-    padding-bottom: 6px;
-    display: inline-block;
-}
-
-.control-panel-themes .filter-details .filter-group {
-    float: none;
-    width: 100%;
+}
+
+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
+    margin-top: 0;
+}
+
+#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
+    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;
-    border: none;
-    padding: 0;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.control-panel-themes .filter-details .filter-group legend button {
-    padding: 18px 15px 8px 10px;
-    line-height: 14px;
-    border-bottom: 1px solid #ddd;
-    width: 100%;
-    text-align: left;
-}
-
-.control-panel-themes .filter-details .filter-group legend {
-    position: relative;
-    top: 0;
-    width: 100%;
-}
-
-.control-panel-themes .filter-details .filter-group legend button:after {
-    content: "\f140";
-    font: 20px/1 dashicons;
-    position: absolute;
-    bottom: 6px;
-    right: 5px;
-}
-
-.control-panel-themes .filter-details .filter-group legend button:hover,
-.control-panel-themes .filter-details .filter-group legend button:focus {
-    color: #0073aa;
-    border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
-    outline: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.control-panel-themes .filter-details .filter-group legend button.open:after {
-    content: "\f142";
-}
-
-.control-panel-themes .filter-details .filter-group .filter-group-feature {
-    display: none;
-    margin: 0;
-}
-
-.control-panel-themes .filter-details .filter-group-feature label {
-    border: 1px solid #ddd;
-    border-top: 0;
-    background: #fff;
-    color: #555d66;
-    margin: 0;
-    padding: 12px 10px 12px 34px;
-    width: -webkit-calc(100% - 46px);
-    width: calc(100% - 46px);
-    line-height: 16px;
-    font-weight: 600;
-}
-
-.control-panel-themes .filter-details .filter-group-feature input {
-    position: absolute;
-    margin: 12px 10px;
-}
-
-.control-panel-themes .filter-details .filter-group-feature label:hover {
-    color: #0073aa;
+    display: block;
+}
+
+.customize-control.customize-control-theme {
+    margin-bottom: 8px;
 }
 
@@ -1582 +1251 @@
 }
 
-.loading .customize-themes-section .spinner {
-    display: block;
-    visibility: visible;
-    position: relative;
-    clear: both;
-    width: 20px;
-    height: 20px;
-    left: -webkit-calc(50% - 10px);
-    left: calc(50% - 10px);
-    float: none;
-    margin-top: 50px;
-}
-
-.customize-themes-section .filter-drawer {
-    border-top: none;
-    display: block;
-    background: transparent;
-    padding-top: 5px;
-}
-
-.customize-themes-section .clear-filters {
-    margin-left: 8px;
-    display: none;
-}
-
-.customize-themes-section .no-themes {
-    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;
-}
-
-.customize-control.customize-control-theme { /* override most properties on .customize-control */
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 18.4%;
-    margin: 0 2% 2% 0;
-    padding: 0;
-    clear: none;
-}
-
-/* 5 columns above 2100px */
-@media screen and (min-width: 2101px) {
-    .customize-control.customize-control-theme:nth-child(5n) {
-        margin-right: 0;
-    }
-}
-
-/* 4 columns up to 2100px */
-@media screen and (min-width: 1601px) and (max-width: 2100px) {
-    .customize-control.customize-control-theme {
-        width: 23.5%;
-    }
-
-    .customize-control.customize-control-theme:nth-child(4n) {
-        margin-right: 0;
-    }
-}
-
-/* 3 columns up to 1600px */
-@media screen and (min-width: 1201px) and (max-width: 1600px) {
-    .customize-control.customize-control-theme {
-        width: 32%;
-    }
-
-    .customize-control.customize-control-theme:nth-child(3n) {
-        margin-right: 0;
-    }
-}
-
-/* 2 columns up to 1200px */
-@media screen and (min-width: 851px) and (max-width: 1200px) {
-    .customize-control.customize-control-theme {
-        width: 49%;
-    }
-
-    .customize-control.customize-control-theme:nth-child(even) {
-        margin-right: 0;
-    }
-}
-
-/* 1 column up to 850 px */
-@media screen and (max-width: 850px) {
-    .customize-control.customize-control-theme {
-        width: 100%;
-        margin: 0 0 3% 0;
-    }
-}
-
 .wp-customizer .theme-browser .themes {
     padding-bottom: 8px;
 }
 
+.wp-customizer .theme-browser .theme {
+    margin: 0;
+    width: 100%;
+}
+
 .wp-customizer .theme-browser .theme .theme-actions {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
     opacity: 1;
 }
@@ -1703 +1278 @@
     line-height: 1.5;
     width: 100%;
+}
+
+.control-section-themes .accordion-section-title:after,
+.customize-themes-panel .accordion-section-title:after {
+    display: none;
+}
+
+.customize-themes-panel.control-panel-content {
+    border-top: 1px solid #ddd;
 }
 
@@ -1719 +1303 @@
 }
 
-/* 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;
 }
 
@@ -1748 +1315 @@
     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're only one or two actions, match the UI pattern of media modals and right-align the action. */
-    padding: 10px 15px;
-}
-
-.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. */
-}
-
+    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;
+}
 
 /* Small Screens */

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

@@ -571 +571 @@
     margin: 0 30px 0 0;
     width: 55%;
-    max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
+    max-width: 880px;
     text-align: center;
 }

trunk/src/wp-admin/customize.php

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

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

@@ -610 +610 @@
  */
 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">
@@ -621 +623 @@
             <div class="theme-about wp-clearfix">
                 <div class="theme-screenshots">
-                <# if ( data.screenshot && data.screenshot[0] ) { #>
+                <# if ( data.screenshot[0] ) { #>
                     <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
                 <# } else { #>
@@ -634 +636 @@
                     <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>
-
-                    <# if ( data.stars && 0 != data.num_ratings ) { #>
-                        <div class="theme-rating">
-                            {{{ data.stars }}}
-                            <span class="num-ratings"><?php 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>
-                    <# } #>
-
                     <p class="theme-description">{{{ data.description }}}</p>
 
@@ -654 +641 @@
                         <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></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>
 
-            <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 & Preview' ); ?></button>
-                <# } #>
-            </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>
     </script>

trunk/src/wp-admin/includes/update-core.php

@@ -711 +711 @@
 'wp-includes/locale.php',
 'wp-includes/session.php',
+'wp-includes/customize/class-wp-customize-themes-panel.php', // Removed in beta; when the feature comes back remember to remove it from this array. See #37661.
 );
 

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

@@ -1 @@
-/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer, console */
+/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
 (function( exports, $ ){
     var Container, focus, normalizedTransitionendEventName, api = wp.customize;
@@ -865 +865 @@
                 container = $( '#customize-theme-controls' );
 
-            // 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;
@@ -896 +896 @@
             };
             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
         },
 
@@ -1063 +1063 @@
      * wp.customize.ThemesSection
      *
-     * Custom section for themes that loads themes by category, and also
-     * handles the theme-details view rendering and navigation.
+     * Custom section for themes that functions similarly to a backwards panel,
+     * and also handles the theme-details view rendering and navigation.
      *
      * @constructor
@@ -1076 +1076 @@
         screenshotQueue: null,
         $window: $( window ),
-        loaded: 0,
-        loading: false,
-        fullyLoaded: false,
-        term: '',
-        filterContainer: $(),
-
-        /**
-         * 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.7.0
-         */
-        embed: function () {
-            var inject,
-                section = this,
-                container = $( '#customize-theme-controls' );
-
-            // 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 ) ) {
-                            container.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
+
+        /**
+         * @since 4.2.0
+         */
+        initialize: function () {
+            this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
+            return api.Section.prototype.initialize.apply( this, arguments );
         },
 
@@ -1146 +1116 @@
             });
 
-            _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
+            _.bindAll( this, 'renderScreenshots' );
         },
 
@@ -1153 +1123 @@
          *
          * Ignore the active states' of the contained theme controls, and just
-         * use the section's own active state instead. This prevents empty search
-         * results for theme sections from causing the section to become inactive.
+         * use the section's own active state instead. This ensures empty search
+         * results for themes to cause the section to become inactive.
          *
          * @since 4.2.0
@@ -1170 +1140 @@
             var section = this;
 
-            section.filterContainer = $( '#accordion-section-' + section.id );
-
-            // Expand section/panel. Only collapse when opening another section.
-            section.filterContainer.on( 'click', '.customize-themes-section-title', function() {
-                // Open the section.
-                if ( ! section.expanded() ) {
+            // 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.expand();
                 }
-
-                // Toggle filters.
-                if ( section.filterContainer.find( '.filter-details' ).length ) {
-                    section.filterContainer.find( '.customize-themes-section-title' )
-                        .toggleClass( 'details-open' )
-                        .attr('aria-expanded', function ( i, attr ) {
-                            return attr === 'true' ? 'false' : 'true';
-                        });
-                    section.filterContainer.find( '.filter-details' ).slideToggle( 180 );
-                }
-            });
-
-            // 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', '.left', function() {
+            section.container.on( 'click keydown', '.left', function( event ) {
+                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                    return;
+                }
+
+                event.preventDefault(); // Keep this AFTER the key filter above
+
                 section.previousTheme();
             });
 
-            section.container.on( 'click', '.right', function() {
+            section.container.on( 'click keydown', '.right', function( event ) {
+                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+                    return;
+                }
+
+                event.preventDefault(); // Keep this AFTER the key filter above
+
                 section.nextTheme();
             });
 
-            section.container.on( 'click', '.theme-backdrop, .close', function() {
+            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.closeDetails();
             });
 
             var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
-
-            // Only used when there is only one section - installed themes.
-            $( '.control-panel-themes' ).on( 'input', '#themes-filter', function( event ) {
+            section.container.on( 'input', '#themes-filter', function( event ) {
                 var count,
                     term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
@@ -1228 +1198 @@
 
                 // Update theme count.
-                count = section.contentContainer.find( 'li.customize-control:visible' ).length;
-                $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
-            });
-
-            // Event listeners for queries with user-entered terms.
-            if ( 'search' === section.params.action ) {
-                var debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
-                $( '.control-panel-themes' ).on( 'input', '#wp-filter-search-input', function() {
-                    debounced( section );
-                    if ( ! section.expanded() ) {
-                        section.expand();
+                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;
                     }
                 });
-
-                // Focus the input if the icon is clicked.
-                section.filterContainer.find( '.search-form' ).on( 'click', function( e ) {
-                    if ( ! $( e.currentTarget ).hasClass( 'wp-filter-search' ) ) {
-                        $( e.currentTarget ).find( '.wp-filter-search' ).focus();
-                    }
-                });
-            } else if ( 'favorites' === section.params.action ) {
-                section.container.on( 'click', '.favorites-form-submit', function() {
-                    section.checkTerm( section );
-                });
-                section.container.on( 'keydown', '#wporg-username-input', function( e ) {
-                    if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
-                        return;
-                    }
-                    section.checkTerm( section );
-                });
-            } else if ( 'feature_filter' === section.params.action ) {
-                section.container.on( 'click', '.filter-group input', function() {
-                    section.filtersChecked();
-                    section.checkTerm( section );
-                });
-
-                // Toggle feature filter sections.
-                section.container.on( 'click', '.filter-group legend button', function( e ) {
-                    $( e.currentTarget )
-                        .toggleClass( 'open' )
-                        .attr('aria-expanded', function ( i, attr ) {
-                            return attr === 'true' ? 'false' : 'true';
-                        })
-                        .parent().next( '.filter-group-feature' ).slideToggle( 180 );
-                });
-            }
-
-            // 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.filterContainer );
             });
         },
@@ -1291 +1222 @@
          * @param {Object}   args
          * @param {Boolean}  args.unchanged
-         * @param {Function} args.completeCallback
+         * @param {Callback} args.completeCallback
          */
         onChangeExpanded: function ( expanded, args ) {
@@ -1304 +1235 @@
 
             // Note: there is a second argument 'args' passed
-            var section = this,
-                container = section.contentContainer.closest( '.customize-themes-full-container' );
-
-            if ( expanded ) {
-
-                if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
-                    section.collapse(); // Note that the current section hasn't been collapsed yet, so this is all we need to do to do nothing.
-                    return; // Don't expand to an empty section that can't load any themes.
-                }
-
-                // Load controls if none are loaded yet.
-                if ( 0 === section.loaded ) {
-                    section.loadControls();
-                }
-
+            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' ) ) {
                 // Collapse any sibling sections/panels
                 api.section.each( function ( otherSection ) {
-                    if ( otherSection !== section ) {
+                    if ( otherSection !== panel ) {
                         otherSection.collapse( { duration: args.duration } );
                     }
                 });
-
-                section.contentContainer.addClass( 'current-section' );
-                container.scrollTop();
-                section.filterContainer.find( '.customize-themes-section-title' ).addClass( 'selected' );
-
-                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.filterContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
-                section.filterContainer.find( '.filter-details' ).slideUp( 180 );
-
-                container.off( 'scroll' );
-
-                if ( args.completeCallback ) {
-                    args.completeCallback();
-                }
-            }
-        },
-
-        /**
-         * Return the section's content element without detachng from the parent.
-         *
-         * @since 4.7.0
-         */
-        getContent: function() {
-            return this.container.find( '.control-section-content' );
-        },
-
-        /**
-         * Load theme data via ajax and add themes to the section as controls.
-         *
-         * @since 4.7.0
-         */
-        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 special request actions.
-            if ( 'search' === section.params.action ) {
-                if ( '' === section.term ) {
-                    return;
-                } else {
-                    params.search = section.term;
-                }
-            } else if ( 'favorites' === section.params.action ) {
-                if ( '' === section.term ) {
-                    return;
-                } else {
-                    params.user = section.term;
-                }
-            } else if ( 'feature_filter' === section.params.action ) {
-                if ( '' === section.term ) {
-                    return;
-                } else {
-                    params.tags = section.term;
-                }
-            }
-
-            // 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;
-                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 ( 'search' === 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.
+                api.panel.each( function ( otherPanel ) {
+                    otherPanel.collapse( { duration: 0 } );
+                });
+
+                panel._animateChangeExpanded( function() {
+                    changeBtn.attr( 'tabindex', '-1' );
+                    customizeBtn.attr( 'tabindex', '0' );
+
+                    customizeBtn.focus();
+                    section.css( 'top', '' );
+                    container.scrollTop( 0 );
+
+                    if ( args.completeCallback ) {
+                        args.completeCallback();
                     }
-                    _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
-
-                    if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
-                        section.fullyLoaded = true;
+                } );
+
+                overlay.addClass( 'in-themes-panel' );
+                section.addClass( 'current-panel' );
+
+            } 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();
                     }
-                } 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();
-                } else {
-                    section.updateCount( data.info.results );
-                }
-                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 ( typeof console !== 'undefined' && 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.7.0
-         */
-        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, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
-         *
-         * @since 4.7.0
-         *
-         * @param {wp.customize.ThemesSection} section The current theme section, passed through the debouncer.
-         */
-        checkTerm: function( section ) {
-            var newTerm;
-
-            // Find term.
-            if ( 'search' === section.params.action ) {
-                newTerm = $( '#wp-filter-search-input' ).val();
-            } else if ( 'favorites' === section.params.action ) {
-                newTerm = $( '#wporg-username-input' ).val();
-            } else if ( 'feature_filter' === section.params.action ) {
-                newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
-                if ( '' === newTerm ) {
-                    return;
-                }
-            } else {
-                return;
-            }
-
-            if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
-                return;
-            }
-
-            // 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;
-
-            if ( '' !== newTerm ) { // Empty term should not show any results.
-                // Run a new query, with loadControls handling paging, etc.
-                section.term = newTerm;
-                section.loadControls();
-                if ( ! section.expanded() ) {
-                    section.expand(); // Expand the section if it isn't expanded.
-                }
-            }
-        },
-
-        /**
-         * Check for filters checked in the feature filter list.
-         *
-         * @since 4.7.0
-         */
-        filtersChecked: function() {
-            var section = this,
-                items = section.container.find( '.filter-group' ).find( ':checkbox' ),
-                tags = [];
-
-            if ( 'feature_filter' !== section.params.action ) {
-                return false;
-            }
-
-            _.each( items.filter( ':checked' ), function( item ) {
-                tags.push( $( item ).prop( 'value' ) );
-            });
-
-            // When no filters are checked, restore initial state and return
-            if ( tags.length === 0 ) {
-                section.term = '';
-            } else {
-                section.term = tags;
+                } );
+
+                overlay.removeClass( 'in-themes-panel' );
+                section.removeClass( 'current-panel' );
             }
         },
@@ -1587 +1295 @@
             var section = this;
 
-            // Fill queue initially, or check for more if empty.
-            if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
-                // Add controls that haven't had their screenshots rendered.
-                section.screenshotQueue = _.filter( section.controls(), function( control ) {
-                    return ! control.screenshotRendered;
-                });
-            }
-
-            // Are all screenshots rendered (for now)?
+            // Fill queue initially.
+            if ( section.screenshotQueue === null ) {
+                section.screenshotQueue = section.controls();
+            }
+
+            // Are all screenshots rendered?
             if ( ! section.screenshotQueue.length ) {
                 return;
@@ -1631 +1336 @@
 
         /**
-         * Update the number of themes in the section.
-         *
-         * @since 4.7.0
-         */
-        updateCount: function ( count ) {
-            if ( ! count ) {
-                count = this.loaded;
-            }
-
-            var displayed = this.container.closest( '.control-panel-content' ).find( '.themes-displayed' ),
-                countEl = this.container.closest( '.control-panel-content' ).find( '.theme-count' );
-
-            if ( 0 === count ) {
-                countEl.text( count );
-            } 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.
          *
@@ -1675 +1355 @@
          */
         getNextTheme: function () {
-            var section = this, control, next;
-            control = api.control( section.params.action + '_theme_' + this.currentTheme );
+            var control, next;
+            control = api.control( 'theme_' + this.currentTheme );
             next = control.container.next( 'li.customize-control-theme' );
             if ( ! next.length ) {
                 return false;
             }
-            next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
+            next = next[0].id.replace( 'customize-control-', '' );
             control = api.control( next );
 
@@ -1707 +1387 @@
          */
         getPreviousTheme: function () {
-            var section = this, control, previous;
-            control = api.control( section.params.action + '_theme_' + this.currentTheme );
+            var control, previous;
+            control = api.control( 'theme_' + this.currentTheme );
             previous = control.container.prev( 'li.customize-control-theme' );
             if ( ! previous.length ) {
                 return false;
             }
-            previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
+            previous = previous[0].id.replace( 'customize-control-', '' );
             control = api.control( previous );
 
@@ -1734 +1414 @@
 
         /**
+         * Load theme preview.
+         *
+         * @since 4.7.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
+                }
+            ) );
+
+            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() {
+                    $( window ).off( 'beforeunload.customize-confirm' );
+                    window.location.href = urlParser.href;
+                } );
+                request.fail( function() {
+                    overlay.removeClass( 'customize-loading' );
+                } );
+            };
+
+            if ( 0 === api.state( 'processing' ).get() ) {
+                onceProcessingComplete();
+            } else {
+                api.state( 'processing' ).bind( onceProcessingComplete );
+            }
+
+            return deferred.promise();
+        },
+
+        /**
          * Render & show the theme details for a given theme model.
          *
@@ -1741 +1472 @@
          */
         showDetails: function ( theme, callback ) {
-            var section = this;
+            var section = this, link;
             callback = callback || function(){};
             section.currentTheme = theme.id;
@@ -1750 +1481 @@
             section.containFocus( section.overlay );
             section.updateLimits();
-            wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) );
+
+            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();
         },
@@ -1762 +1508 @@
             $( 'body' ).removeClass( 'modal-open' );
             this.overlay.fadeOut( 'fast' );
-            api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus();
+            api.control( 'theme_' + this.currentTheme ).focus();
         },
 
@@ -1842 +1588 @@
             if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
                 container.append( panel.contentContainer );
-            }
-            panel.renderContent();
+                panel.renderContent();
+            }
 
             panel.deferred.embedded.resolve();
@@ -2035 +1781 @@
         }
     });
-
-
-    /**
-     * 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({
-        installingThemes: [],
-
-        /**
-         * @since 4.7.0
-         */
-        attachEvents: function () {
-            var panel = this;
-
-            // Attach regular panel events.
-            api.Panel.prototype.attachEvents.apply( this );
-
-            // 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', '.see-themes, .filter-themes', 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( this, 'installTheme', 'updateTheme' );
-        },
-
-        /**
-         * Update UI to reflect expanded state
-         *
-         * @since 4.7.0
-         *
-         * @param {Boolean}  expanded
-         * @param {Object}   args
-         * @param {Boolean}  args.unchanged
-         * @param {Function} args.completeCallback
-         */
-        onChangeExpanded: function ( expanded, args ) {
-
-            // 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;
-            }
-
-            // Note: there is a second argument 'args' passed
-            var panel = this,
-                overlay = panel.headContainer.closest( '.wp-full-overlay' );
-
-            if ( expanded ) {
-                overlay
-                    .addClass( 'in-themes-panel' ).addClass( 'showing-themes' )
-                    .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
-
-                // Automatically open the installed themes section.
-                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.7.0
-         */
-        installTheme: function( event ) {
-            var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
-
-            if ( -1 !== $.inArray( this.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 || 'undefined' !== typeof api.control( '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();
-                            }
-                        }
-                    });
-                }
-            } );
-
-            this.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' );
-            }
-        },
-
-        /**
-         * Load theme preview.
-         *
-         * @since 4.7.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
-                }
-            ) );
-
-            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() {
-                    $( window ).off( 'beforeunload.customize-confirm' );
-                    window.location.href = urlParser.href;
-                } );
-                request.fail( function() {
-                    overlay.removeClass( 'customize-loading' );
-                } );
-            };
-
-            if ( 0 === api.state( 'processing' ).get() ) {
-                onceProcessingComplete();
-            } else {
-                api.state( 'processing' ).bind( onceProcessingComplete );
-            }
-
-            return deferred.promise();
-        },
-
-        /**
-         * Update a theme via wp.updates.
-         *
-         * @since 4.7.0
-         */
-        updateTheme: function( event ) {
-            wp.updates.maybeRequestFilesystemCredentials( event );
-
-            $( document ).one( 'wp-theme-update-success', function( event, 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.7.0
-         */
-        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();
-        }
-
-    });
-
 
     /**
@@ -2645 +2096 @@
          * @param {Object}   args
          * @param {Number}   args.duration
-         * @param {Function} args.completeCallback
+         * @param {Callback} args.completeCallback
          */
         onChangeActive: function ( active, args ) {
@@ -3816 +3267 @@
 
         touchDrag: false,
-        screenshotRendered: 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;
+                        }
+                    } );
+                }
+            } );
+        },
 
         /**
@@ -3840 +3315 @@
 
                 // Prevent the modal from showing when the user clicks the action button.
-                if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
+                if ( $( event.target ).is( '.theme-actions .button' ) ) {
                     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 );
             });
@@ -3855 +3339 @@
                     $screenshot.attr( 'src', source );
                 }
-                control.screenshotRendered = true;
-            });
-        },
-
-        /**
-         * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
+            });
+        },
+
+        /**
+         * Show or hide the theme based on the presence of the term in the title, description, and author.
          *
          * @since 4.2.0
@@ -3876 +3359 @@
                 control.deactivate();
             }
-        },
-
-        /**
-         * Rerender the theme from its JS template with the installed type.
-         *
-         * @since 4.7.0
-         */
-        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' );
         }
     });
@@ -4585 +4051 @@
         theme:               api.ThemeControl
     };
-    api.panelConstructor = {
-        themes: api.ThemesPanel
-    };
+    api.panelConstructor = {};
     api.sectionConstructor = {
         themes: api.ThemesSection
@@ -4705 +4169 @@
         // 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' );
@@ -5350 +4810 @@
             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

@@ -182 +182 @@
             $notice.replaceWith( $adminNotice );
         } else {
-            if ( 'customize' === pagenow ) {
-                $( '.customize-themes-notifications' ).append( $adminNotice );
-            } else {
-                $( '.wrap' ).find( '> h1' ).after( $adminNotice );
-            }
+            $( '.wrap' ).find( '> h1' ).after( $adminNotice );
         }
 
@@ -931 +927 @@
             $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' );
@@ -984 +969 @@
             $notice, newText;
 
-        if ( 'customize' === pagenow ) {
-            $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
-        }
-
         if ( 'themes-network' === pagenow ) {
             $notice = $theme.find( '.update-message' );
@@ -1040 +1021 @@
         if ( wp.updates.maybeHandleCredentialError( response, 'update-theme' ) ) {
             return;
-        }
-
-        if ( 'customize' === pagenow ) {
-            $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
         }
 
@@ -1182 +1159 @@
         }
 
-        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' );
+        if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
+            $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
+            $card   = $( '.install-theme-info' ).prepend( $message );
         } else {
-            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' );
-            }
+            $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

@@ -296 +296 @@
         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' );
@@ -352 +351 @@
         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( 'customize_register',                 array( $this, 'register_controls' ) );
@@ -369 +367 @@
         // 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' );
-        }
     }
 
@@ -2759 +2751 @@
             $control->enqueue();
         }
-        if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
-            wp_enqueue_script( 'updates' );
-        }
     }
 
@@ -2976 +2965 @@
             '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' ),
         );
 
@@ -3050 +3038 @@
             '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 consider singular vs. plural forms */
-                'themeSearchResults' => __( '%d themes found' ),
-                /* translators: %d is the number of themes being displayed, which cannot consider singular vs. plural forms */
-                'announceThemeCount' => __( 'Displaying %d themes' ),
-                'announceThemeDetails' => __( 'Showing details for theme: %s' ),
-            ),
         );
 
@@ -3161 +3141 @@
         /* 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' );
@@ -3175 +3153 @@
         $this->register_control_type( 'WP_Customize_Theme_Control' );
 
-        /* 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,
+        /* Themes */
+
+        $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
+            'title'      => $this->theme()->display( 'Name' ),
+            'capability' => 'switch_themes',
+            'priority'   => 0,
         ) ) );
-
-        $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
-            'title'       => __( 'Installed' ),
-            'text_before' => __( 'Your local site' ),
-            'action'      => 'installed',
-            'capability'  => 'switch_themes',
-            'panel'       => 'themes',
-            'priority'    => 0,
-        ) ) );
-
-        if ( ! is_multisite() ) {
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
-                'title'       => __( 'Search themes…' ),
-                'text_before' => __( 'Browse all WordPress.org themes' ),
-                'action'      => 'search',
-                'capability'  => 'install_themes',
-                'panel'       => 'themes',
-                'priority'    => 5,
-            ) ) );
-
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
-                'title'      => __( 'Featured' ),
-                'action'     => 'featured',
-                'capability' => 'install_themes',
-                'panel'      => 'themes',
-                'priority'   => 10,
-            ) ) );
-
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
-                'title'      => __( 'Popular' ),
-                'action'     => 'popular',
-                'capability' => 'install_themes',
-                'panel'      => 'themes',
-                'priority'   => 15,
-            ) ) );
-
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
-                'title'      => __( 'Latest' ),
-                'action'     => 'latest',
-                'capability' => 'install_themes',
-                'panel'      => 'themes',
-                'priority'   => 20,
-            ) ) );
-
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
-                'title'      => __( 'Feature Filter' ),
-                'action'     => 'feature_filter',
-                'capability' => 'install_themes',
-                'panel'      => 'themes',
-                'priority'   => 25,
-            ) ) );
-
-            $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
-                'title'      => __( 'Favorites' ),
-                'action'     => 'favorites',
-                'capability' => 'install_themes',
-                'panel'      => 'themes',
-                'priority'   => 30,
-            ) ) );
-        }
 
         // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
@@ -3248 +3165 @@
             '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 */
@@ -3702 +3650 @@
 
     /**
-     * Load themes into the theme browsing/installation UI.
-     *
-     * @since 4.7.0
-     * @access public
-     */
-    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' );
-        }
-
-        if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
-            wp_send_json_error( 'empty_search' );
-        } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
-            wp_send_json_error( 'empty_user' );
-        } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
-            wp_send_json_error( 'no_features' );
-        }
-
-        require_once( ABSPATH . 'wp-admin/includes/theme.php' );
-        if ( 'installed' === $_POST['theme_action'] ) {
-            $themes = array( 'themes' => wp_prepare_themes_for_js() );
-            foreach ( $themes['themes'] as &$theme ) {
-                $theme['type'] = 'installed';
-                // Set active based on customized theme.
-                if ( $_POST['customized_theme'] === $theme['id'] ) {
-                    $theme['active'] = true;
-                } else {
-                    $theme['active'] = false;
-                }
-            }
-        } else {
-            if ( ! current_user_can( 'install_themes' ) ) {
-                wp_die( -1 );
-            }
-
-            // Arguments for all queries.
-            $args = array(
-                'per_page' => 100,
-                'page' => absint( $_POST['page'] ),
-                'fields' => array(
-                    'slug' => true,
-                    'screenshot' => true,
-                    'description' => true,
-                    'requires' => true,
-                    'rating' => true,
-                    'downloaded' => true,
-                    'downloadLink' => true,
-                    'last_updated' => true,
-                    'homepage' => true,
-                    'num_ratings' => true,
-                    'tags' => true,
-                ),
-            );
-
-            // Specialized handling for each query.
-            switch ( $_POST['theme_action'] ) {
-                case 'search':
-                    $args['search'] = wp_unslash( $_POST['search'] );
-                    break;
-                case 'favorites':
-                    $args['user'] = wp_unslash( $_POST['user'] );
-                case 'featured':
-                case 'popular':
-                    $args['browse'] = wp_unslash( $_POST['theme_action'] );
-                    break;
-                case 'latest':
-                    $args['browse'] = 'new';
-                    break;
-                case 'feature_filter':
-                    $args['tag'] = wp_unslash( $_POST['tags'] );
-                    break;
-            }
-
-            // 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('a' => array('href' => array(), 'title' => array(), 'target' => array()),
-                'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
-                'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
-                'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
-                'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
-                'img' => array('src' => array(), 'class' => array(), 'alt' => array())
-            );
-
-            // 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' );
-            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 = $_POST['theme_action'];
-                }
-
-                // Set active based on customized theme.
-                if ( $_POST['customized_theme'] === $theme->slug ) {
-                    $theme->active = true;
-                } else {
-                    $theme->active = false;
-                }
-
-                // Map available theme properties to installed theme properties.
-                $theme->id           = $theme->slug;
-                $theme->screenshot   = array( $theme->screenshot_url );
-                $theme->authorAndUri = $theme->author;
-                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/customize/class-wp-customize-theme-control.php

@@ -63 +63 @@
      */
     public function content_template() {
-        /* 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 }}' );
+        $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 );
         ?>
-        <# if ( data.theme.active ) { #>
-            <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-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">
         <# } else { #>
-            <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
+            <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
         <# } #>
 
-            <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
+            <# if ( data.theme.screenshot[0] ) { #>
                 <div class="theme-screenshot">
                     <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
@@ -86 +82 @@
             <# } #>
 
-            <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>
-
-
-            <# 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 printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
+            <# 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>
             <# } #>
 
-            <# if ( data.theme.active ) { #>
-                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
+            <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
+
+            <# if ( data.theme.isActiveTheme ) { #>
+                <h3 class="theme-name" id="{{ data.theme.id }}-name">
                     <?php
                     /* translators: %s: theme name */
-                    printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
+                    printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
                     ?>
                 </h3>
+            <# } else { #>
+                <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ 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.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
-                <div class="theme-actions">
-                    <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 & Preview' ); ?></button>
+                    <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></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 are displayed in tabbed sections.
+ * A UI container for theme controls, which behaves like a backwards Panel.
  *
  * @since 4.2.0
@@ -29 +29 @@
 
     /**
-     * Theme section action.
+     * Render the themes section, which behaves like a panel.
      *
-     * Defines the type of themes to load (installed, featured, latest, etc.).
-     *
-     * @since 4.7.0
-     * @access public
-     * @var string
-     */
-    public $action = '';
-
-    /**
-     * Text before theme section heading.
-     *
-     * @since 4.7.0
-     * @access public
-     * @var string
-     */
-    public $text_before = '';
-
-    /**
-     * Get section parameters for JS.
-     *
-     * @since 4.7.0
-     * @access public
-     * @return array Exported parameters.
-     */
-    public function json() {
-        $exported = parent::json();
-        $exported['action'] = $this->action;
-        $exported['text_before'] = $this->text_before;
-
-        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.7.0
+     * @since 4.2.0
      * @access protected
      */
-    protected function render_template() {
+    protected function render() {
+        $classes = 'accordion-section control-section control-section-' . $this->type;
         ?>
-        <li id="accordion-section-{{ data.id }}" class="theme-section">
-            <# if ( '' !== data.text_before ) { #>
-                <p class="customize-themes-text-before">{{ data.text_before }}</p>
-            <# } #>
-            <# if ( 'search' === data.action ) { #>
-                <div class="search-form customize-themes-section-title themes-section-search_themes">
-                    <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
-                    <input placeholder="{{ data.title }}" type="text" 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>
-            <# } else { #>
-                <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
-                    var attr = ' aria-expanded="false"';
+        <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 {
-                    var attr = '';
-                } #>
-                <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
-            <# } #>
-            <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
-                <# if ( 'installed' === data.action ) { #>
-                    <p class="themes-filter-container">
-                        <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; ?>
-            <# if ( 'favorites' === data.action ) { #>
-                <div class="favorites-form filter-details">
-                    <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
-                    <p>
-                        <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
-                        <input type="search" id="wporg-username-input" value="">
-                        <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
-                    </p>
-                </div>
-            <# } else if ( 'feature_filter' === data.action ) { #>
-                <div class="filter-drawer filter-details">
+                    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">
+                    <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
-                    $feature_list = get_theme_feature_list();
-                    foreach ( $feature_list as $feature_name => $features ) {
-                        echo '<fieldset class="filter-group">';
-                        $feature_name = esc_html( $feature_name );
-                        echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
-                        echo '<div class="filter-group-feature">';
-                        foreach ( $features as $feature => $feature_name ) {
-                            $feature = esc_attr( $feature );
-                            echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
-                            echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
-                        }
-                        echo '</div>';
-                        echo '</fieldset>';
+                    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;
                     }
                     ?>
-                </div>
-            <# } #>
-            <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
+                    <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
+                </h3>
+
                 <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">
-                    <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 class="themes accordion-section-content">
                     </ul>
-                    <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
-                    <p class="spinner"></p>
                 </div>
             </div>

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

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