WordPress.org

Make WordPress Core

Ticket #37661: 37661.10.diff

File 37661.10.diff, 101.1 KB (added by celloexpressions, 21 months ago)

Refresh for core changes, minor adjustments (see comment).

Line 
1Index: src/wp-admin/css/customize-controls.css
2===================================================================
3--- src/wp-admin/css/customize-controls.css     (revision 41546)
4+++ src/wp-admin/css/customize-controls.css     (working copy)
5@@ -203,12 +203,6 @@
6                    .15s border-color ease-in-out;
7 }
8 
9-#customize-controls #customize-theme-controls .customize-themes-panel .accordion-section-title {
10-       color: #555;
11-       background-color: #fff;
12-       border-left: 4px solid #fff;
13-}
14-
15 #customize-theme-controls .accordion-section-title:after {
16        content: "\f345";
17        color: #a0a5aa;
18@@ -319,20 +313,16 @@
19 }
20 
21 #customize-theme-controls .customize-pane-child.open,
22-#customize-theme-controls .customize-pane-child.current-panel,
23-#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
24+#customize-theme-controls .customize-pane-child.current-panel {
25        -webkit-transform: none;
26        transform: none;
27 }
28 
29-#customize-theme-controls .customize-themes-panel.customize-pane-child,
30 .section-open #customize-theme-controls .customize-pane-parent,
31 .in-sub-panel #customize-theme-controls .customize-pane-parent,
32 .section-open #customize-info,
33 .in-sub-panel #customize-info,
34-.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
35-.in-themes-panel #customize-theme-controls .customize-pane-parent,
36-.in-themes-panel #customize-info {
37+.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
38        visibility: hidden;
39        height: 0;
40        overflow: hidden;
41@@ -342,10 +332,8 @@
42 
43 .section-open #customize-theme-controls .customize-pane-parent.busy,
44 .in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
45-.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
46 .section-open #customize-info.busy,
47 .in-sub-panel #customize-info.busy,
48-.in-themes-panel #customize-info.busy,
49 .busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
50 #customize-theme-controls .customize-pane-child.open,
51 #customize-theme-controls .customize-pane-child.current-panel,
52@@ -355,12 +343,6 @@
53        overflow: auto;
54 }
55 
56-.in-themes-panel #customize-theme-controls .customize-pane-parent,
57-.in-themes-panel #customize-info {
58-       -webkit-transform: translateX(100%);
59-       transform: translateX(100%);
60-}
61-
62 #customize-theme-controls .customize-pane-child.accordion-section-content,
63 #customize-theme-controls .customize-pane-child.accordion-sub-container {
64        display: block;
65@@ -1238,15 +1220,34 @@
66        100% { opacity: 1; }
67 }
68 
69-/* #customize-container is reused from customize-loader.js, hence the naming. */
70-.wp-customizer .customize-loading #customize-container {
71+.wp-customizer .customize-loading #customize-themes-loading-container {
72        display: block;
73        -webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
74        animation: customize-reload .75s;
75 }
76 
77-#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
78-#customize-theme-controls .control-section-themes .accordion-section-title {
79+.customize-loading #customize-themes-loading-container span {
80+    clear: both;
81+    color: #555d66;
82+    font-size: 18px;
83+    font-style: normal;
84+    margin: 0;
85+    padding: 100px 0;
86+    text-align: center;
87+       width: 100%;
88+       display: block;
89+}
90+
91+.customize-loading #customize-themes-loading-container .customize-loading-text {
92+       display: none;
93+}
94+
95+#customize-theme-controls .control-panel-themes {
96+       border-bottom: none;
97+}
98+
99+#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
100+#customize-theme-controls .control-panel-themes > .accordion-section-title {
101        cursor: default;
102        background: #fff;
103        color: #555d66;
104@@ -1253,23 +1254,10 @@
105        border-top: 1px solid #ddd;
106        border-bottom: 1px solid #ddd;
107        border-left: none;
108-       margin-top: 0;
109+       border-right: none;
110+       margin: 0 0 15px 0;
111+       padding-right: 100px; /* Space for the button */
112 }
113-#customize-theme-controls .control-section-themes .customize-section-back {
114-       position: absolute;
115-       right: 0;
116-       top: 0;
117-       height: 80px;
118-       border-left: 1px solid #ddd;
119-       border-right: 4px solid #fff;
120-}
121-#customize-theme-controls .control-section-themes .customize-section-back:before {
122-       content: "\f345";
123-}
124-#customize-theme-controls .control-section-themes .customize-section-back:hover,
125-#customize-theme-controls .control-section-themes .customize-section-back:focus {
126-       border-right-color: #0073aa;
127-}
128 
129 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
130 #customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child {
131@@ -1276,22 +1264,7 @@
132        border-top: 0;
133 }
134 
135-#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
136-#customize-theme-controls .control-section-themes > .accordion-section-title {
137-       margin: 0 0 15px;
138-}
139-
140-#customize-controls .customize-themes-panel .accordion-section-title:hover,
141-#customize-controls .customize-themes-panel .accordion-section-title {
142-       margin: 15px -8px;
143-}
144-
145-#customize-controls .control-section-themes .accordion-section-title,
146-#customize-controls .customize-themes-panel .accordion-section-title {
147-       padding-right: 100px; /* Space for the button */
148-}
149-
150-#customize-controls .control-section-themes .accordion-section-title span.customize-action,
151+.control-panel-themes .accordion-section-title span.customize-action,
152 #customize-controls .customize-section-title span.customize-action {
153        font-size: 13px;
154        display: block;
155@@ -1298,8 +1271,7 @@
156        font-weight: 400;
157 }
158 
159-#customize-controls .control-section-themes .accordion-section-title .change-theme,
160-#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
161+.control-panel-themes .accordion-section-title .change-theme {
162        position: absolute;
163        right: 10px;
164        top: 50%;
165@@ -1307,38 +1279,392 @@
166        font-weight: 400;
167 }
168 
169-#customize-controls .control-section-themes .accordion-section-title:before {
170+#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
171        display: none;
172 }
173 
174-#customize-controls .customize-themes-panel {
175-       padding: 0 8px;
176-       background: #f1f1f1;
177-       box-sizing: border-box;
178+.control-panel-themes .customize-themes-full-container {
179+       position: fixed;
180+       top: 0;
181+       left: 0;
182+       -webkit-transition: .18s left ease-in-out;
183+       transition: .18s left ease-in-out;
184+       margin: 0 0 0 300px;
185+       padding:25px;
186+       overflow-y: scroll;
187+       width: -webkit-calc(100% - 350px);
188+       width: calc(100% - 350px);
189+       height: -webkit-calc(100% - 50px);
190+       height: calc(100% - 50px);
191+       background: #eee;
192+       z-index: 20;
193 }
194 
195-#customize-controls .customize-themes-panel .accordion-section-title:first-child {
196-       margin-top: 0;
197+/* Animations for opening the themes panel */
198+#customize-header-actions .save,
199+#customize-header-actions .spinner,
200+#customize-header-actions .customize-controls-preview-toggle {
201+       position: relative;
202+       top: 0;
203+       -webkit-transition: .18s top ease-in-out;
204+       transition: .18s top ease-in-out;
205 }
206 
207-#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
208+#customize-footer-actions,
209+#customize-footer-actions .collapse-sidebar {
210+       bottom: 0;
211+       -webkit-transition: .18s bottom ease-in-out;
212+       transition: .18s bottom ease-in-out;
213+}
214+
215+.in-themes-panel:not(.animating) #customize-header-actions .save,
216+.in-themes-panel:not(.animating) #customize-header-actions .spinner,
217+.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
218+.in-themes-panel:not(.animating) #customize-preview,
219+.in-themes-panel:not(.animating) #customize-footer-actions {
220+       visibility: hidden;
221+}
222+
223+.wp-full-overlay.in-themes-panel {
224+       background: #eee; /* Prevents a black flash when fading in the panel */
225+}
226+
227+.in-themes-panel #customize-header-actions .save,
228+.in-themes-panel #customize-header-actions .spinner,
229+.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
230+       top: -45px;
231+}
232+
233+.in-themes-panel #customize-footer-actions,
234+.in-themes-panel #customize-footer-actions .collapse-sidebar {
235+       bottom: -45px;
236+}
237+
238+/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
239+.in-themes-panel.animating .control-panel-themes .filter-themes-count {
240+       display: none;
241+}
242+
243+.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
244+       bottom: 0;
245+}
246+
247+/* Adds a delay before fading in to avoid it "jumping" */
248+@-webkit-keyframes themes-fade-in {
249+       0% {
250+               opacity: 0;
251+       }
252+       50% {
253+               opacity: 0;
254+       }
255+       100% {
256+               opacity: 1;
257+       }
258+}
259+@keyframes themes-fade-in {
260+       0% {
261+               opacity: 0;
262+       }
263+       50% {
264+               opacity: 0;
265+       }
266+       100% {
267+               opacity: 1;
268+       }
269+}
270+
271+.control-panel-themes .customize-themes-full-container.animate {
272+       -webkit-animation: .6s themes-fade-in 1;
273+       animation: .6s themes-fade-in 1;
274+}
275+
276+.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
277+       -webkit-animation: .6s themes-fade-in 1;
278+       animation: .6s themes-fade-in 1;
279+}
280+
281+.control-panel-themes .filter-themes-count {
282+       position: fixed;
283+       top: 0;
284+       left: 48px;
285+       width: 222px;
286+       padding: 6px 15px;
287+       margin: 0;
288+       line-height: 32px;
289+       text-align: right;
290+       z-index: 10;
291+}
292+
293+.control-panel-themes .filter-themes-count .themes-displayed {
294+       font-weight: 600;
295+       color: #555d66;
296+}
297+
298+.control-panel-themes .filter-themes-count .see-themes,
299+.control-panel-themes .filter-themes-count .filter-themes {
300+       display: none;
301+}
302+
303+
304+/* Mobile - toggle between themes and filters */
305+@media screen and (max-width:600px) {
306+
307+       /* Show a spinner in the filters view also, reusing the main customize spinner */
308+       .in-themes-panel.loading #customize-header-actions .spinner {
309+               position: fixed;
310+               top: 0;
311+               left: 48px;
312+               visibility: visible;
313+       }
314+
315+       .in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
316+               visibility: hidden;
317+       }
318+
319+       .control-panel-themes .filter-themes-count {
320+               width: -webkit-calc(100% - 93px);
321+               width: calc(100% - 93px);
322+       }
323+
324+       .control-panel-themes .filter-themes-count .themes-displayed {
325+               display: none;
326+       }
327+
328+       .wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
329+               display: block;
330+               float: right;
331+       }
332+
333+       .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
334+               display: block;
335+               float: right;
336+       }
337+
338+       .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
339+               position: fixed;
340+               top: 0;
341+               left: 0;
342+               z-index: 10;
343+               height: 45px;
344+               background: #eee;
345+       }
346+
347+       .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
348+               line-height: 45px;
349+       }
350+
351+       .control-panel-themes .customize-themes-full-container {
352+               width: -webkit-calc(100% - 50px);
353+               width: calc(100% - 50px);
354+               margin: 0;
355+               top: 46px;
356+               height: -webkit-calc(100% - 96px);
357+               height: calc(100% - 96px);
358+               z-index: 1;
359+               display: none;
360+       }
361+
362+       .showing-themes .control-panel-themes .customize-themes-full-container {
363+               display: block;
364+       }
365+}
366+
367+.control-panel-themes .customize-themes-notifications .notice {
368+       margin: 0 0 25px 0;
369+}
370+
371+.customize-themes-full-container .customize-themes-section {
372+       display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
373+       overflow: hidden;
374+}
375+
376+.customize-themes-full-container .customize-themes-section.current-section {
377+       display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
378+}
379+
380+.theme-section .customize-themes-text-before {
381+       padding: 0 0 8px 15px;
382+       margin: 15px 0 0 0;
383+       line-height: 16px;
384+       border-bottom: 1px solid #ddd;
385+       color: #555d66;
386+}
387+
388+.control-panel-themes .customize-themes-section-title {
389+       width: 100%;
390+       background: #fff;
391+       -webkit-box-shadow: none;
392+       box-shadow: none;
393+       outline: none;
394+       border-top: none;
395+       border-bottom: 1px solid #ddd;
396+       border-left: 4px solid #fff;
397+       border-right: none;
398+       cursor: pointer;
399+       padding: 10px 15px;
400+       position: relative;
401+       text-align: left;
402        font-size: 14px;
403        font-weight: 600;
404+       color: #555d66;
405+       text-shadow: none;
406 }
407 
408-#customize-controls .customize-themes-panel > h2 {
409-       padding: 15px 8px 0 8px;
410+.control-panel-themes .theme-section {
411+       margin: 0;
412+       position: relative;
413 }
414 
415-#customize-theme-controls .customize-themes-panel .accordion-section-content {
416+.control-panel-themes .customize-themes-section-title:focus,
417+.control-panel-themes .customize-themes-section-title:hover {
418+       border-left-color: #0073aa;
419+       color: #0073aa;
420+       background: #f5f5f5;
421+}
422+
423+.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
424+       content: "\f147";
425+       font: 16px/1 dashicons;
426+       box-sizing: border-box;
427+       width: 20px;
428+       height: 20px;
429+       padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
430+       -webkit-border-radius: 100%;
431+       border-radius: 100%;
432+       position: absolute;
433+       top: 9px;
434+       right: 15px;
435+       background: #0073aa;
436+       color: #fff;
437+}
438+
439+.control-panel-themes .customize-themes-section-title.selected {
440+       color: #0073aa;
441+}
442+
443+.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
444+       border-left: none;
445+       padding: 5px 10px 5px 15px;
446+       width: auto;
447+}
448+
449+.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
450+.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
451+       content: "\f140";
452+       font: 20px/1 dashicons;
453+       position: absolute;
454+       right: 15px;
455+       top: 8px;
456+}
457+
458+.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
459+       width: 100%;
460+}
461+
462+.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
463+.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
464+       background: #fff;
465+       cursor: default;
466+}
467+
468+.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
469+       margin-top: 15px;
470+       border-top: 1px solid #ddd;
471+}
472+
473+.control-panel-themes .filter-details {
474+       background: #f5f5f5;
475+       margin: 0;
476+       padding: 8px 15px;
477+       border-top: none;
478+       border-bottom: 1px solid #ddd;
479+       display: none;
480+}
481+
482+.control-panel-themes .customize-themes-section-title.selected.details-open {
483+       border-bottom-color: #f5f5f5;
484+    border-left-color: #f5f5f5;
485+       background: #f5f5f5;
486+}
487+
488+.control-panel-themes .favorites-form.filter-details label {
489+       padding-bottom: 6px;
490+       display: inline-block;
491+}
492+
493+.control-panel-themes .filter-details .filter-group {
494+       float: none;
495+       width: 100%;
496        background: transparent;
497-       display: block;
498+       border: none;
499+       padding: 0;
500+       -webkit-box-shadow: none;
501+       box-shadow: none;
502 }
503 
504-.customize-control.customize-control-theme {
505-       margin-bottom: 8px;
506+.control-panel-themes .filter-details .filter-group legend button {
507+       padding: 18px 15px 8px 10px;
508+       line-height: 14px;
509+       border-bottom: 1px solid #ddd;
510+       width: 100%;
511+       text-align: left;
512+       text-decoration: none;
513 }
514 
515+.control-panel-themes .filter-details .filter-group legend {
516+       position: relative;
517+       top: 0;
518+       width: 100%;
519+}
520+
521+.control-panel-themes .filter-details .filter-group legend button:after {
522+       content: "\f140";
523+       font: 20px/1 dashicons;
524+       position: absolute;
525+       bottom: 6px;
526+       right: 5px;
527+}
528+
529+.control-panel-themes .filter-details .filter-group legend button:hover,
530+.control-panel-themes .filter-details .filter-group legend button:focus {
531+       color: #0073aa;
532+       border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
533+       outline: none;
534+       -webkit-box-shadow: none;
535+       box-shadow: none;
536+}
537+
538+.control-panel-themes .filter-details .filter-group legend button.open:after {
539+       content: "\f142";
540+}
541+
542+.control-panel-themes .filter-details .filter-group .filter-group-feature {
543+       display: none;
544+       margin: 0;
545+}
546+
547+.control-panel-themes .filter-details .filter-group-feature label {
548+       border: 1px solid #ddd;
549+       border-top: 0;
550+       background: #fff;
551+       color: #555d66;
552+       margin: 0;
553+       padding: 12px 10px 12px 34px;
554+       width: -webkit-calc(100% - 46px);
555+       width: calc(100% - 46px);
556+       line-height: 16px;
557+       font-weight: 600;
558+}
559+
560+.control-panel-themes .filter-details .filter-group-feature input {
561+       position: absolute;
562+       margin: 12px 10px;
563+}
564+
565+.control-panel-themes .filter-details .filter-group-feature label:hover {
566+       color: #0073aa;
567+}
568+
569 #customize-theme-controls .themes.accordion-section-content {
570        position: relative;
571        left: 0;
572@@ -1346,17 +1672,111 @@
573        width: 100%;
574 }
575 
576-.wp-customizer .theme-browser .themes {
577-       padding-bottom: 8px;
578+.loading .customize-themes-section .spinner {
579+       display: block;
580+       visibility: visible;
581+       position: relative;
582+       clear: both;
583+       width: 20px;
584+       height: 20px;
585+       left: -webkit-calc(50% - 10px);
586+       left: calc(50% - 10px);
587+       float: none;
588+       margin-top: 50px;
589 }
590 
591-.wp-customizer .theme-browser .theme {
592+.customize-themes-section .filter-drawer {
593+       border-top: none;
594+       display: block;
595+       background: transparent;
596+       padding-top: 5px;
597+}
598+
599+.customize-themes-section .clear-filters {
600+       margin-left: 8px;
601+       display: none;
602+}
603+
604+.customize-themes-section .no-themes {
605+       display: none;
606+}
607+
608+.themes-section-installed_themes .theme .notice-success {
609+       display: none; /* Hide "installed" notice on installed themes tab. */
610+}
611+
612+.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
613+       margin: 0 0 0 8px;
614+}
615+
616+.customize-control-theme .theme {
617+       width: 100%;
618        margin: 0;
619-       width: 100%;
620 }
621 
622+.customize-control.customize-control-theme { /* override most properties on .customize-control */
623+       -webkit-box-sizing: border-box;
624+       -moz-box-sizing: border-box;
625+       box-sizing: border-box;
626+       width: 18.4%;
627+       margin: 0 2% 2% 0;
628+       padding: 0;
629+       clear: none;
630+}
631+
632+/* 5 columns above 2100px */
633+@media screen and (min-width: 2101px) {
634+       .customize-control.customize-control-theme:nth-child(5n) {
635+               margin-right: 0;
636+       }
637+}
638+
639+/* 4 columns up to 2100px */
640+@media screen and (min-width: 1601px) and (max-width: 2100px) {
641+       .customize-control.customize-control-theme {
642+               width: 23.5%;
643+       }
644+
645+       .customize-control.customize-control-theme:nth-child(4n) {
646+               margin-right: 0;
647+       }
648+}
649+
650+/* 3 columns up to 1600px */
651+@media screen and (min-width: 1201px) and (max-width: 1600px) {
652+       .customize-control.customize-control-theme {
653+               width: 32%;
654+       }
655+
656+       .customize-control.customize-control-theme:nth-child(3n) {
657+               margin-right: 0;
658+       }
659+}
660+
661+/* 2 columns up to 1200px */
662+@media screen and (min-width: 851px) and (max-width: 1200px) {
663+       .customize-control.customize-control-theme {
664+               width: 49%;
665+       }
666+
667+       .customize-control.customize-control-theme:nth-child(even) {
668+               margin-right: 0;
669+       }
670+}
671+
672+/* 1 column up to 850 px */
673+@media screen and (max-width: 850px) {
674+       .customize-control.customize-control-theme {
675+               width: 100%;
676+               margin: 0 0 3% 0;
677+       }
678+}
679+
680+.wp-customizer .theme-browser .themes {
681+       padding-bottom: 8px;
682+}
683+
684 .wp-customizer .theme-browser .theme .theme-actions {
685-       -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
686        opacity: 1;
687 }
688 
689@@ -1375,15 +1795,6 @@
690        width: 100%;
691 }
692 
693-.control-section-themes .accordion-section-title:after,
694-.customize-themes-panel .accordion-section-title:after {
695-       display: none;
696-}
697-
698-.customize-themes-panel.control-panel-content {
699-       border-top: 1px solid #ddd;
700-}
701-
702 /* Details View */
703 .wp-customizer .theme-overlay {
704        display: none;
705@@ -1398,6 +1809,14 @@
706        z-index: 109;
707 }
708 
709+/* Avoid a z-index war by resetting elements that should be under the overlay.
710+   This is likely required because of the way that sections and panels are positioned. */
711+.wp-customizer.modal-open #customize-header-actions,
712+.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
713+.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
714+       z-index: -1;
715+}
716+
717 .wp-customizer .theme-overlay .theme-backdrop {
718        background: rgba( 238, 238, 238, 0.75 );
719        position: fixed;
720@@ -1404,6 +1823,15 @@
721        z-index: 110;
722 }
723 
724+.wp-customizer .theme-overlay .star-rating {
725+       float: left;
726+       margin-right: 8px;
727+}
728+
729+.wp-customizer .theme-rating .num-ratings {
730+       line-height: 20px;
731+}
732+
733 .wp-customizer .theme-overlay .theme-wrap {
734        left: 90px;
735        right: 90px;
736@@ -1410,19 +1838,29 @@
737        top: 45px;
738        bottom: 45px;
739        z-index: 120;
740-       max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
741 }
742 
743 .wp-customizer .theme-overlay .theme-actions {
744-       text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
745+       text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
746+       padding: 10px 15px;
747 }
748 
749-.ie8 .wp-customizer .theme-overlay .theme-header,
750-.ie8 .wp-customizer .theme-overlay .theme-about,
751-.ie8 .wp-customizer .theme-overlay .theme-actions {
752-       position: static;
753+.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
754+       margin-left: 8px;
755 }
756 
757+.control-panel-themes .theme-actions .delete-theme {
758+       left: 15px; /* these override themes.css on mobile */
759+       right: auto;
760+       bottom: auto;
761+       position: absolute;
762+}
763+
764+.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
765+       overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
766+}
767+
768+
769 /* Small Screens */
770 @media (max-width:850px), (max-height:472px) {
771        .wp-customizer .theme-overlay .theme-wrap {
772@@ -1448,7 +1886,7 @@
773 body.cheatin h1 {
774        border-bottom: 1px solid #ddd;
775        clear: both;
776-       color: #666;
777+       color: #555d66;
778        font-size: 24px;
779        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
780        margin: 30px 0 0 0;
781Index: src/wp-admin/css/themes.css
782===================================================================
783--- src/wp-admin/css/themes.css (revision 41546)
784+++ src/wp-admin/css/themes.css (working copy)
785@@ -549,7 +549,7 @@
786        float: left;
787        margin: 0 30px 0 0;
788        width: 55%;
789-       max-width: 880px;
790+       max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
791        text-align: center;
792 }
793 
794@@ -1705,7 +1705,8 @@
795        display: none;
796 }
797 
798-#customize-container {
799+#customize-container,
800+#customize-themes-loading-container {
801        display: none;
802        background: #fff;
803        z-index: 500000;
804@@ -1720,6 +1721,7 @@
805 
806 /* Make the Customizer and Theme installer overlays the only available content. */
807 #customize-container,
808+#customize-themes-loading-container,
809 .theme-install-overlay {
810        visibility: visible;
811 }
812@@ -1824,6 +1826,7 @@
813 
814 #customize-preview.wp-full-overlay-main:before,
815 .customize-loading #customize-container:before,
816+.customize-loading #customize-themes-loading-container:before,
817 .theme-install-overlay .wp-full-overlay-main:before {
818        content: "";
819        display: block;
820@@ -1861,6 +1864,7 @@
821 
822        #customize-preview.wp-full-overlay-main:before,
823        .customize-loading #customize-container:before,
824+       .customize-loading #customize-themes-loading-container:before,
825        .theme-install-overlay .wp-full-overlay-main:before {
826                background-image: url(../images/spinner-2x.gif);
827        }
828Index: src/wp-admin/customize.php
829===================================================================
830--- src/wp-admin/customize.php  (revision 41546)
831+++ src/wp-admin/customize.php  (working copy)
832@@ -109,7 +109,8 @@
833 ?><title><?php echo $admin_title; ?></title>
834 
835 <script type="text/javascript">
836-var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
837+var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
838+    pagenow = 'customize';
839 </script>
840 
841 <?php
842Index: src/wp-admin/includes/theme.php
843===================================================================
844--- src/wp-admin/includes/theme.php     (revision 41546)
845+++ src/wp-admin/includes/theme.php     (working copy)
846@@ -570,8 +570,9 @@
847 
848                $parent = false;
849                if ( $theme->parent() ) {
850-                       $parent = $theme->parent()->display( 'Name' );
851-                       $parents[ $slug ] = $theme->parent()->get_stylesheet();
852+                       $parent = $theme->parent();
853+                       $parents[ $slug ] = $parent->get_stylesheet();
854+                       $parent = $parent->display( 'Name' );
855                }
856 
857                $customize_action = null;
858@@ -631,8 +632,6 @@
859  * @since 4.2.0
860  */
861 function customize_themes_print_templates() {
862-       $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
863-       $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
864        ?>
865        <script type="text/html" id="tmpl-customize-themes-details-view">
866                <div class="theme-backdrop"></div>
867@@ -644,7 +643,7 @@
868                        </div>
869                        <div class="theme-about wp-clearfix">
870                                <div class="theme-screenshots">
871-                               <# if ( data.screenshot[0] ) { #>
872+                               <# if ( data.screenshot && data.screenshot[0] ) { #>
873                                        <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
874                                <# } else { #>
875                                        <div class="screenshot blank"></div>
876@@ -657,29 +656,48 @@
877                                        <# } #>
878                                        <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
879                                        <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
880-                                       <p class="theme-description">{{{ data.description }}}</p>
881 
882+                                       <# if ( data.stars && 0 != data.num_ratings ) { #>
883+                                               <div class="theme-rating">
884+                                                       {{{ data.stars }}}
885+                                                       <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
886+                                               </div>
887+                                       <# } #>
888+
889+                                       <# if ( data.hasUpdate ) { #>
890+                                               <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
891+                                                       <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
892+                                                       {{{ data.update }}}
893+                                               </div>
894+                                       <# } #>
895+
896                                        <# if ( data.parent ) { #>
897                                                <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
898                                        <# } #>
899 
900+                                       <p class="theme-description">{{{ data.description }}}</p>
901+
902                                        <# if ( data.tags ) { #>
903-                                               <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
904+                                               <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
905                                        <# } #>
906                                </div>
907                        </div>
908 
909-                       <# if ( ! data.active ) { #>
910-                               <div class="theme-actions">
911-                                       <div class="inactive-theme">
912-                                               <?php
913-                                               /* translators: %s: Theme name */
914-                                               $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
915-                                               ?>
916-                                               <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>
917-                                       </div>
918-                               </div>
919-                       <# } #>
920+                       <div class="theme-actions">
921+                               <# if ( data.active ) { #>
922+                                       <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
923+                               <# } else if ( 'installed' === data.type ) { #>
924+                                       <?php if ( current_user_can( 'delete_themes' ) ) { ?>
925+                                               <# if ( data.actions && data.actions['delete'] ) { #>
926+                                                       <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
927+                                               <# } #>
928+                                       <?php } ?>
929+                                       <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
930+                               <# } else { #>
931+                                       <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
932+                                       <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install & Preview' ); ?></button>
933+                               <# } #>
934+                       </div>
935                </div>
936        </script>
937        <?php
938Index: src/wp-admin/js/customize-controls.js
939===================================================================
940--- src/wp-admin/js/customize-controls.js       (revision 41546)
941+++ src/wp-admin/js/customize-controls.js       (working copy)
942@@ -1106,13 +1106,13 @@
943                                section = this,
944                                container = $( '#customize-theme-controls' );
945 
946-                       // Watch for changes to the panel state
947+                       // Watch for changes to the panel state.
948                        inject = function ( panelId ) {
949                                var parentContainer;
950                                if ( panelId ) {
951-                                       // The panel has been supplied, so wait until the panel object is registered
952+                                       // The panel has been supplied, so wait until the panel object is registered.
953                                        api.panel( panelId, function ( panel ) {
954-                                               // The panel has been registered, wait for it to become ready/initialized
955+                                               // The panel has been registered, wait for it to become ready/initialized.
956                                                panel.deferred.embedded.done( function () {
957                                                        parentContainer = panel.contentContainer;
958                                                        if ( ! section.headContainer.parent().is( parentContainer ) ) {
959@@ -1137,7 +1137,7 @@
960                                }
961                        };
962                        section.panel.bind( inject );
963-                       inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
964+                       inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one.
965                },
966 
967                /**
968@@ -1310,8 +1310,8 @@
969        /**
970         * wp.customize.ThemesSection
971         *
972-        * Custom section for themes that functions similarly to a backwards panel,
973-        * and also handles the theme-details view rendering and navigation.
974+        * Custom section for themes that loads themes by category, and also
975+        * handles the theme-details view rendering and navigation.
976         *
977         * @constructor
978         * @augments wp.customize.Section
979@@ -1323,13 +1323,44 @@
980                template: '',
981                screenshotQueue: null,
982                $window: $( window ),
983+               loaded: 0,
984+               loading: false,
985+               fullyLoaded: false,
986+               term: '',
987+               nextTerm: '',
988+               filterContainer: $(),
989 
990                /**
991-                * @since 4.2.0
992+                * Embed the section in the DOM when the themes panel is ready.
993+                *
994+                * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel.
995+                *
996+                * @since 4.9.0
997                 */
998-               initialize: function () {
999-                       this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
1000-                       return api.Section.prototype.initialize.apply( this, arguments );
1001+               embed: function () {
1002+                       var inject,
1003+                               section = this,
1004+                               container = $( '#customize-theme-controls' );
1005+
1006+                       // Watch for changes to the panel state
1007+                       inject = function ( panelId ) {
1008+                               var parentContainer;
1009+                               api.panel( panelId, function ( panel ) {
1010+                                       // The panel has been registered, wait for it to become ready/initialized
1011+                                       panel.deferred.embedded.done( function () {
1012+                                               parentContainer = panel.contentContainer;
1013+                                               if ( ! section.headContainer.parent().is( parentContainer ) ) {
1014+                                                       parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer );
1015+                                               }
1016+                                               if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
1017+                                                       container.append( section.contentContainer );
1018+                                               }
1019+                                               section.deferred.embedded.resolve();
1020+                                       });
1021+                               } );
1022+                       };
1023+                       section.panel.bind( inject );
1024+                       inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
1025                },
1026 
1027                /**
1028@@ -1363,7 +1394,7 @@
1029                                }
1030                        });
1031 
1032-                       _.bindAll( this, 'renderScreenshots' );
1033+                       _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
1034                },
1035 
1036                /**
1037@@ -1370,8 +1401,8 @@
1038                 * Override Section.isContextuallyActive method.
1039                 *
1040                 * Ignore the active states' of the contained theme controls, and just
1041-                * use the section's own active state instead. This ensures empty search
1042-                * results for themes to cause the section to become inactive.
1043+                * use the section's own active state instead. This prevents empty search
1044+                * results for theme sections from causing the section to become inactive.
1045                 *
1046                 * @since 4.2.0
1047                 *
1048@@ -1396,53 +1427,60 @@
1049                                section.collapse();
1050                        });
1051 
1052-                       // Expand/Collapse section/panel.
1053-                       section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
1054-                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
1055-                                       return;
1056+                       section.filterContainer = $( '#accordion-section-' + section.id );
1057+
1058+                       // Expand section/panel. Only collapse when opening another section.
1059+                       section.filterContainer.on( 'click', '.customize-themes-section-title', function() {
1060+
1061+                               // Toggle filters.
1062+                               if ( section.filterContainer.find( '.filter-details' ).length ) {
1063+                                       section.filterContainer.find( '.customize-themes-section-title' )
1064+                                               .toggleClass( 'details-open' )
1065+                                               .attr('aria-expanded', function ( i, attr ) {
1066+                                                       return attr === 'true' ? 'false' : 'true';
1067+                                               });
1068+                                       section.filterContainer.find( '.filter-details' ).slideToggle( 180 );
1069                                }
1070-                               event.preventDefault(); // Keep this AFTER the key filter above
1071 
1072-                               if ( section.expanded() ) {
1073-                                       section.collapse();
1074-                               } else {
1075-                                       section.expand();
1076+                               // Open the section.
1077+                               if ( ! section.expanded() ) {
1078+
1079+                                       // Don't expand if there's nothing to show.
1080+                                       if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
1081+                                               return;
1082+                                       } else {
1083+                                               section.expand();
1084+                                       }
1085                                }
1086                        });
1087 
1088-                       // Theme navigation in details view.
1089-                       section.container.on( 'click keydown', '.left', function( event ) {
1090-                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
1091-                                       return;
1092-                               }
1093+                       // Preview installed themes.
1094+                       section.container.on( 'click', '.theme-actions .preview-theme', function() {
1095+                               var themeId = $( this ).data( 'slug' );
1096 
1097-                               event.preventDefault(); // Keep this AFTER the key filter above
1098+                               $( '.wp-full-overlay' ).addClass( 'customize-loading' );
1099+                               api.panel( 'themes' ).loadThemePreview( themeId ).fail( function() {
1100+                                       $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
1101+                               } );
1102+                       });
1103 
1104+                       // Theme navigation in details view.
1105+                       section.container.on( 'click', '.left', function() {
1106                                section.previousTheme();
1107                        });
1108 
1109-                       section.container.on( 'click keydown', '.right', function( event ) {
1110-                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
1111-                                       return;
1112-                               }
1113-
1114-                               event.preventDefault(); // Keep this AFTER the key filter above
1115-
1116+                       section.container.on( 'click', '.right', function() {
1117                                section.nextTheme();
1118                        });
1119 
1120-                       section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
1121-                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
1122-                                       return;
1123-                               }
1124-
1125-                               event.preventDefault(); // Keep this AFTER the key filter above
1126-
1127+                       section.container.on( 'click', '.theme-backdrop, .close', function() {
1128                                section.closeDetails();
1129                        });
1130 
1131                        var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
1132-                       section.container.on( 'input', '#themes-filter', function( event ) {
1133+
1134+                       // Only used when there is only one section - installed themes.
1135+                       $( '.control-panel-themes' ).on( 'input', '#themes-filter', function( event ) {
1136                                var count,
1137                                        term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
1138                                        controls = section.controls();
1139@@ -1454,19 +1492,60 @@
1140                                renderScreenshots();
1141 
1142                                // Update theme count.
1143-                               count = section.container.find( 'li.customize-control:visible' ).length;
1144-                               section.container.find( '.theme-count' ).text( count );
1145+                               count = section.contentContainer.find( 'li.customize-control:visible' ).length;
1146+                               $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
1147                        });
1148 
1149-                       // Pre-load the first 3 theme screenshots.
1150-                       api.bind( 'ready', function () {
1151-                               _.each( section.controls().slice( 0, 3 ), function ( control ) {
1152-                                       var img, src = control.params.theme.screenshot[0];
1153-                                       if ( src ) {
1154-                                               img = new Image();
1155-                                               img.src = src;
1156+                       // Event listeners for queries with user-entered terms.
1157+                       if ( 'search' === section.params.action ) {
1158+                               var debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 milliseconds to initiate a search.
1159+                               $( '.control-panel-themes' ).on( 'input', '#wp-filter-search-input', function() {
1160+                                       debounced( section );
1161+                                       if ( ! section.expanded() ) {
1162+                                               section.expand();
1163                                        }
1164                                });
1165+
1166+                               // Focus the input if the icon is clicked.
1167+                               section.filterContainer.find( '.search-form' ).on( 'click', function( e ) {
1168+                                       if ( ! $( e.currentTarget ).hasClass( 'wp-filter-search' ) ) {
1169+                                               $( e.currentTarget ).find( '.wp-filter-search' ).focus();
1170+                                       }
1171+                               });
1172+                       } else if ( 'favorites' === section.params.action ) {
1173+                               section.checkTerm( section ); // Expand the section if there's already a term.
1174+                               section.container.on( 'click', '.favorites-form-submit', function() {
1175+                                       section.checkTerm( section );
1176+                               });
1177+                               section.container.on( 'keydown', '#wporg-username-input', function( e ) {
1178+                                       if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
1179+                                               return;
1180+                                       }
1181+                                       section.checkTerm( section );
1182+                               });
1183+                       } else if ( 'feature_filter' === section.params.action ) {
1184+                               section.checkTerm( section ); // Expand the section if there's already a term.
1185+                               section.container.on( 'click', '.filter-group input', function() {
1186+                                       section.filtersChecked();
1187+                                       section.checkTerm( section );
1188+                               });
1189+
1190+                               // Toggle feature filter sections.
1191+                               section.container.on( 'click', '.filter-group legend button', function( e ) {
1192+                                       $( e.currentTarget )
1193+                                               .toggleClass( 'open' )
1194+                                               .attr('aria-expanded', function ( i, attr ) {
1195+                                                       return attr === 'true' ? 'false' : 'true';
1196+                                               })
1197+                                               .parent().next( '.filter-group-feature' ).slideToggle( 180 );
1198+                               });
1199+                       }
1200+
1201+                       // Move section controls to the themes area.
1202+                       api.bind( 'ready', function () {
1203+                               section.contentContainer = section.container.find( '.customize-themes-section' );
1204+                               section.contentContainer.appendTo( $( '.customize-themes-full-container' ) );
1205+                               section.container.add( section.filterContainer );
1206                        });
1207                },
1208 
1209@@ -1478,7 +1557,7 @@
1210                 * @param {Boolean}  expanded
1211                 * @param {Object}   args
1212                 * @param {Boolean}  args.unchanged
1213-                * @param {Callback} args.completeCallback
1214+                * @param {Function} args.completeCallback
1215                 */
1216                onChangeExpanded: function ( expanded, args ) {
1217 
1218@@ -1491,62 +1570,296 @@
1219                        }
1220 
1221                        // Note: there is a second argument 'args' passed
1222-                       var panel = this,
1223-                               section = panel.contentContainer,
1224-                               overlay = section.closest( '.wp-full-overlay' ),
1225-                               container = section.closest( '.wp-full-overlay-sidebar-content' ),
1226-                               customizeBtn = section.find( '.customize-theme' ),
1227-                               changeBtn = panel.headContainer.find( '.change-theme' );
1228+                       var section = this,
1229+                               container = section.contentContainer.closest( '.customize-themes-full-container' );
1230 
1231-                       if ( expanded && ! section.hasClass( 'current-panel' ) ) {
1232+                       if ( expanded ) {
1233+
1234+                               if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
1235+                                       section.collapse(); // Note that the current section hasn't been collapsed yet, so this is all we need to do to do nothing.
1236+                                       return; // Don't expand to an empty section that can't load any themes.
1237+                               }
1238+
1239+                               // Load controls if none are loaded yet.
1240+                               if ( 0 === section.loaded ) {
1241+                                       section.loadControls();
1242+                               }
1243+
1244                                // Collapse any sibling sections/panels
1245                                api.section.each( function ( otherSection ) {
1246-                                       if ( otherSection !== panel ) {
1247+                                       if ( otherSection !== section ) {
1248                                                otherSection.collapse( { duration: args.duration } );
1249                                        }
1250                                });
1251-                               api.panel.each( function ( otherPanel ) {
1252-                                       otherPanel.collapse( { duration: 0 } );
1253-                               });
1254 
1255-                               panel._animateChangeExpanded( function() {
1256-                                       changeBtn.attr( 'tabindex', '-1' );
1257-                                       customizeBtn.attr( 'tabindex', '0' );
1258+                               section.contentContainer.addClass( 'current-section' );
1259+                               container.scrollTop();
1260+                               section.filterContainer.find( '.customize-themes-section-title' ).addClass( 'selected' );
1261 
1262-                                       customizeBtn.focus();
1263-                                       section.css( 'top', '' );
1264-                                       container.scrollTop( 0 );
1265+                               container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
1266+                               container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
1267 
1268-                                       if ( args.completeCallback ) {
1269-                                               args.completeCallback();
1270-                                       }
1271-                               } );
1272+                               if ( args.completeCallback ) {
1273+                                       args.completeCallback();
1274+                               }
1275+                               section.updateCount(); // Show this section's count.
1276+                       } else {
1277+                               section.contentContainer.removeClass( 'current-section' );
1278 
1279-                               overlay.addClass( 'in-themes-panel' );
1280-                               section.addClass( 'current-panel' );
1281-                               _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
1282-                               panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
1283+                               // Always hide, even if they don't exist or are already hidden.
1284+                               section.filterContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
1285+                               section.filterContainer.find( '.filter-details' ).slideUp( 180 );
1286 
1287-                       } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
1288-                               panel._animateChangeExpanded( function() {
1289-                                       changeBtn.attr( 'tabindex', '0' );
1290-                                       customizeBtn.attr( 'tabindex', '-1' );
1291+                               container.off( 'scroll' );
1292 
1293-                                       changeBtn.focus();
1294-                                       section.css( 'top', '' );
1295+                               if ( args.completeCallback ) {
1296+                                       args.completeCallback();
1297+                               }
1298+                       }
1299+               },
1300 
1301-                                       if ( args.completeCallback ) {
1302-                                               args.completeCallback();
1303+               /**
1304+                * Return the section's content element without detachng from the parent.
1305+                *
1306+                * @since 4.9.0
1307+                */
1308+               getContent: function() {
1309+                       return this.container.find( '.control-section-content' );
1310+               },
1311+
1312+               /**
1313+                * Load theme data via ajax and add themes to the section as controls.
1314+                *
1315+                * @since 4.9.0
1316+                */
1317+               loadControls: function() {
1318+                       var section = this, params, page, request;
1319+
1320+                       if ( section.loading ) {
1321+                               return; // We're already loading a batch of themes.
1322+                       }
1323+
1324+                       // Parameters for every API query. Additional params are set in PHP.
1325+                       page = Math.ceil( section.loaded / 100 ) + 1;
1326+                       params = {
1327+                               'switch-themes-nonce': api.settings.nonce['switch-themes'],
1328+                               'wp_customize': 'on',
1329+                               'theme_action': section.params.action,
1330+                               'customized_theme': api.settings.theme.stylesheet,
1331+                               'page': page
1332+                       };
1333+
1334+                       // Add fields for special request actions.
1335+                       if ( 'search' === section.params.action ) {
1336+                               if ( '' === section.term ) {
1337+                                       return;
1338+                               } else {
1339+                                       params.search = section.term;
1340+                               }
1341+                       } else if ( 'favorites' === section.params.action ) {
1342+                               if ( '' === section.term ) {
1343+                                       return;
1344+                               } else {
1345+                                       params.user = section.term;
1346+                               }
1347+                       } else if ( 'feature_filter' === section.params.action ) {
1348+                               if ( '' === section.term ) {
1349+                                       return;
1350+                               } else {
1351+                                       params.tags = section.term;
1352+                               }
1353+                       }
1354+
1355+                       // Load themes.
1356+                       section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' );
1357+                       section.loading = true;
1358+                       section.container.find( '.no-themes' ).hide();
1359+                       request = wp.ajax.post( 'customize-load-themes', params );
1360+                       request.done(function( data ) {
1361+                               var themes = data.themes,
1362+                                   themeControl, newThemeControls;
1363+
1364+                               // Stop and try again if the term changed.
1365+                               if ( section.nextTerm ) {
1366+                                       section.term = section.nextTerm;
1367+                                       section.nextTerm = '';
1368+                                       section.loading = false;
1369+                                       section.loadControls();
1370+                                       return;
1371+                               }
1372+
1373+                               if ( 0 !== themes.length ) {
1374+                                       newThemeControls = [];
1375+                                       // Add controls for each theme.
1376+                                       _.each( themes, function ( theme ) {
1377+                                               var customizeId = section.params.action + '_theme_' + theme.id;
1378+                                               themeControl = new api.controlConstructor.theme( customizeId, {
1379+                                                       params: {
1380+                                                               type: 'theme',
1381+                                                               content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
1382+                                                               section: section.params.id,
1383+                                                               active: true,
1384+                                                               theme: theme,
1385+                                                               priority: section.loaded + 1
1386+                                                       },
1387+                                                       previewer: api.previewer
1388+                                               } );
1389+
1390+                                               api.control.add( customizeId, themeControl );
1391+                                               newThemeControls.push( themeControl );
1392+                                               section.loaded = section.loaded + 1;
1393+                                       });
1394+
1395+                                       if ( 1 === page ) {
1396+                                               // Pre-load the first 3 theme screenshots.
1397+                                               _.each( section.controls().slice( 0, 3 ), function ( control ) {
1398+                                                       var img, src = control.params.theme.screenshot[0];
1399+                                                       if ( src ) {
1400+                                                               img = new Image();
1401+                                                               img.src = src;
1402+                                                       }
1403+                                               });
1404+                                               if ( 'search' === section.params.action ) {
1405+                                                       wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
1406+                                               }
1407+                                       } else {
1408+                                               Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
1409                                        }
1410-                               } );
1411+                                       _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
1412 
1413-                               overlay.removeClass( 'in-themes-panel' );
1414-                               section.removeClass( 'current-panel' );
1415-                               panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
1416+                                       if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
1417+                                               section.fullyLoaded = true;
1418+                                       }
1419+                               } else {
1420+                                       if ( 0 === section.loaded ) {
1421+                                               section.container.find( '.no-themes' ).show();
1422+                                               wp.a11y.speak( section.container.find( '.no-themes' ).text() );
1423+                                       } else {
1424+                                               section.fullyLoaded = true;
1425+                                       }
1426+                               }
1427+                               if ( 'installed' === section.params.action ) {
1428+                                       section.updateCount();
1429+                               } else {
1430+                                       section.updateCount( data.info.results );
1431+                               }
1432+                               section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
1433+
1434+                               // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
1435+                               section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
1436+                               section.loading = false;
1437+                       });
1438+                       request.fail(function( data ) {
1439+                               if ( 'undefined' === typeof data ) {
1440+                                       section.container.find( '.unexpected-error' ).show();
1441+                                       wp.a11y.speak( section.container.find( '.unexpected-error' ).text() );
1442+                               } else if ( typeof console !== 'undefined' && console.error ) {
1443+                                       console.error( data );
1444+                               }
1445+
1446+                               // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
1447+                               section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
1448+                               section.loading = false;
1449+                       });
1450+               },
1451+
1452+               /**
1453+                * Determines whether more themes should be loaded, and loads them.
1454+                *
1455+                * @since 4.9.0
1456+                */
1457+               loadMore: function() {
1458+                       var section = this, container, bottom, threshold;
1459+                       if ( ! section.fullyLoaded && ! section.loading ) {
1460+                               container = section.container.closest( '.customize-themes-full-container' );
1461+
1462+                               bottom = container.scrollTop() + container.height();
1463+                               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.
1464+
1465+                               if ( bottom > threshold ) {
1466+                                       section.loadControls();
1467+                               }
1468                        }
1469                },
1470 
1471                /**
1472+                * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
1473+                *
1474+                * @since 4.9.0
1475+                *
1476+                * @param {wp.customize.ThemesSection} section The current theme section, passed through the debouncer.
1477+                */
1478+               checkTerm: function( section ) {
1479+                       var newTerm;
1480+
1481+                       // Find term.
1482+                       if ( 'search' === section.params.action ) {
1483+                               newTerm = $( '#wp-filter-search-input' ).val();
1484+                       } else if ( 'favorites' === section.params.action ) {
1485+                               newTerm = $( '#wporg-username-input' ).val();
1486+                       } else if ( 'feature_filter' === section.params.action ) {
1487+                               newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
1488+                               if ( '' === newTerm ) {
1489+                                       return;
1490+                               }
1491+                       } else {
1492+                               return;
1493+                       }
1494+
1495+                       if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
1496+                               return;
1497+                       }
1498+
1499+                       // Clear the controls in the section.
1500+                       _.each( section.controls(), function( control ) {
1501+                               control.container.remove();
1502+                               api.control.remove( control.id );
1503+                       });
1504+                       section.loaded = 0;
1505+                       section.fullyLoaded = false;
1506+                       section.screenshotQueue = null;
1507+
1508+                       if ( '' !== newTerm ) { // Empty term should not show any results.
1509+                               // Run a new query, with loadControls handling paging, etc.
1510+                               section.term = newTerm;
1511+                               if ( ! section.loading ) {
1512+                                       section.loadControls();
1513+                               } else {
1514+                                       section.nextTerm = newTerm; // This will reload with the newest term once the current batch is loaded.
1515+                               }
1516+                               if ( ! section.expanded() ) {
1517+                                       section.expand(); // Expand the section if it isn't expanded.
1518+                               }
1519+                       }
1520+               },
1521+
1522+               /**
1523+                * Check for filters checked in the feature filter list.
1524+                *
1525+                * @since 4.9.0
1526+                */
1527+               filtersChecked: function() {
1528+                       var section = this,
1529+                           items = section.container.find( '.filter-group' ).find( ':checkbox' ),
1530+                           tags = [];
1531+
1532+                       if ( 'feature_filter' !== section.params.action ) {
1533+                               return false;
1534+                       }
1535+
1536+                       _.each( items.filter( ':checked' ), function( item ) {
1537+                               tags.push( $( item ).prop( 'value' ) );
1538+                       });
1539+
1540+                       // When no filters are checked, restore initial state and return
1541+                       if ( tags.length === 0 ) {
1542+                               section.term = '';
1543+                       } else {
1544+                               section.term = tags;
1545+                       }
1546+               },
1547+
1548+               /**
1549                 * Render control's screenshot if the control comes into view.
1550                 *
1551                 * @since 4.2.0
1552@@ -1554,12 +1867,15 @@
1553                renderScreenshots: function( ) {
1554                        var section = this;
1555 
1556-                       // Fill queue initially.
1557-                       if ( section.screenshotQueue === null ) {
1558-                               section.screenshotQueue = section.controls();
1559+                       // Fill queue initially, or check for more if empty.
1560+                       if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
1561+                               // Add controls that haven't had their screenshots rendered.
1562+                               section.screenshotQueue = _.filter( section.controls(), function( control ) {
1563+                                       return ! control.screenshotRendered;
1564+                               });
1565                        }
1566 
1567-                       // Are all screenshots rendered?
1568+                       // Are all screenshots rendered (for now)?
1569                        if ( ! section.screenshotQueue.length ) {
1570                                return;
1571                        }
1572@@ -1595,6 +1911,31 @@
1573                },
1574 
1575                /**
1576+                * Update the number of themes in the section.
1577+                *
1578+                * @since 4.9.0
1579+                */
1580+               updateCount: function ( count ) {
1581+                       if ( ! count ) {
1582+                               count = this.loaded;
1583+                       }
1584+
1585+                       var displayed = this.container.closest( '.control-panel-content' ).find( '.themes-displayed' ),
1586+                           countEl = this.container.closest( '.control-panel-content' ).find( '.theme-count' );
1587+
1588+                       if ( 0 === count ) {
1589+                               countEl.text( count );
1590+                       } else {
1591+                               // Animate the count change for emphasis.
1592+                               displayed.fadeOut( 180, function() {
1593+                                       countEl.text( count );
1594+                                       displayed.fadeIn( 180 );
1595+                               } );
1596+                               wp.a11y.speak( api.settings.l10n.announceThemeCount.replace( '%d', count ) );
1597+                       }
1598+               },
1599+
1600+               /**
1601                 * Advance the modal to the next theme.
1602                 *
1603                 * @since 4.2.0
1604@@ -1614,13 +1955,13 @@
1605                 * @since 4.2.0
1606                 */
1607                getNextTheme: function () {
1608-                       var control, next;
1609-                       control = api.control( 'theme_' + this.currentTheme );
1610+                       var section = this, control, next;
1611+                       control = api.control( section.params.action + '_theme_' + this.currentTheme );
1612                        next = control.container.next( 'li.customize-control-theme' );
1613                        if ( ! next.length ) {
1614                                return false;
1615                        }
1616-                       next = next[0].id.replace( 'customize-control-', '' );
1617+                       next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
1618                        control = api.control( next );
1619 
1620                        return control.params.theme;
1621@@ -1646,13 +1987,13 @@
1622                 * @since 4.2.0
1623                 */
1624                getPreviousTheme: function () {
1625-                       var control, previous;
1626-                       control = api.control( 'theme_' + this.currentTheme );
1627+                       var section = this, control, previous;
1628+                       control = api.control( section.params.action + '_theme_' + this.currentTheme );
1629                        previous = control.container.prev( 'li.customize-control-theme' );
1630                        if ( ! previous.length ) {
1631                                return false;
1632                        }
1633-                       previous = previous[0].id.replace( 'customize-control-', '' );
1634+                       previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
1635                        control = api.control( previous );
1636 
1637                        return control.params.theme;
1638@@ -1734,7 +2075,7 @@
1639                 * @param {Object}   theme
1640                 */
1641                showDetails: function ( theme, callback ) {
1642-                       var section = this, link;
1643+                       var section = this;
1644                        callback = callback || function(){};
1645                        section.currentTheme = theme.id;
1646                        section.overlay.html( section.template( theme ) )
1647@@ -1743,22 +2084,7 @@
1648                        $( 'body' ).addClass( 'modal-open' );
1649                        section.containFocus( section.overlay );
1650                        section.updateLimits();
1651-
1652-                       link = section.overlay.find( '.inactive-theme > a' );
1653-
1654-                       link.on( 'click', function( event ) {
1655-                               event.preventDefault();
1656-
1657-                               // Short-circuit if request is currently being made.
1658-                               if ( link.hasClass( 'disabled' ) ) {
1659-                                       return;
1660-                               }
1661-                               link.addClass( 'disabled' );
1662-
1663-                               section.loadThemePreview( theme.id ).fail( function() {
1664-                                       link.removeClass( 'disabled' );
1665-                               } );
1666-                       } );
1667+                       wp.a11y.speak( api.settings.l10n.announceThemeDetails.replace( '%s', theme.name ) );
1668                        callback();
1669                },
1670 
1671@@ -1770,7 +2096,7 @@
1672                closeDetails: function () {
1673                        $( 'body' ).removeClass( 'modal-open' );
1674                        this.overlay.fadeOut( 'fast' );
1675-                       api.control( 'theme_' + this.currentTheme ).focus();
1676+                       api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus();
1677                },
1678 
1679                /**
1680@@ -1850,8 +2176,8 @@
1681                        }
1682                        if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
1683                                container.append( panel.contentContainer );
1684-                               panel.renderContent();
1685                        }
1686+                       panel.renderContent();
1687 
1688                        panel.deferred.embedded.resolve();
1689                },
1690@@ -2061,7 +2387,309 @@
1691                }
1692        });
1693 
1694+
1695        /**
1696+        * wp.customize.ThemesPanel
1697+        *
1698+        * Custom section for themes that displays without the customize preview.
1699+        *
1700+        * @constructor
1701+        * @augments wp.customize.Panel
1702+        * @augments wp.customize.Container
1703+        */
1704+       api.ThemesPanel = api.Panel.extend({
1705+               installingThemes: [],
1706+
1707+               /**
1708+                * @since 4.9.0
1709+                */
1710+               attachEvents: function () {
1711+                       var panel = this;
1712+
1713+                       // Attach regular panel events.
1714+                       api.Panel.prototype.attachEvents.apply( this );
1715+
1716+                       // Collapse panel to customize the current theme.
1717+                       panel.contentContainer.on( 'click', '.customize-theme', function() {
1718+                               panel.collapse();
1719+                       });
1720+
1721+                       // Toggle between filtering and browsing themes on mobile.
1722+                       panel.contentContainer.on( 'click', '.see-themes, .filter-themes', function() {
1723+                               $( '.wp-full-overlay' ).toggleClass( 'showing-themes' );
1724+                       });
1725+
1726+                       // Install (and maybe preview) a theme.
1727+                       panel.contentContainer.on( 'click', '.theme-install', function( event ) {
1728+                               panel.installTheme( event );
1729+                       });
1730+
1731+                       // Update a theme. Theme cards have the class, the details modal has the id.
1732+                       panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) {
1733+                               // #update-theme is a link.
1734+                               event.preventDefault();
1735+                               event.stopPropagation();
1736+
1737+                               panel.updateTheme( event );
1738+                       });
1739+
1740+                       // Delete a theme.
1741+                       panel.contentContainer.on( 'click', '.delete-theme', function( event ) {
1742+                               panel.deleteTheme( event );
1743+                       });
1744+
1745+                       _.bindAll( this, 'installTheme', 'updateTheme' );
1746+               },
1747+
1748+               /**
1749+                * Update UI to reflect expanded state
1750+                *
1751+                * @since 4.9.0
1752+                *
1753+                * @param {Boolean}  expanded
1754+                * @param {Object}   args
1755+                * @param {Boolean}  args.unchanged
1756+                * @param {Function} args.completeCallback
1757+                */
1758+               onChangeExpanded: function ( expanded, args ) {
1759+
1760+                       // Expand/collapse the panel normally.
1761+                       api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] );
1762+
1763+                       // Immediately call the complete callback if there were no changes
1764+                       if ( args.unchanged ) {
1765+                               if ( args.completeCallback ) {
1766+                                       args.completeCallback();
1767+                               }
1768+                               return;
1769+                       }
1770+
1771+                       // Note: there is a second argument 'args' passed
1772+                       var panel = this,
1773+                               overlay = panel.headContainer.closest( '.wp-full-overlay' );
1774+
1775+                       if ( expanded ) {
1776+                               overlay
1777+                                       .addClass( 'in-themes-panel' ).addClass( 'showing-themes' )
1778+                                       .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
1779+
1780+                               // Automatically open the installed themes section.
1781+                               api.section( 'installed_themes' ).expand();
1782+                       } else {
1783+                               overlay
1784+                                       .removeClass( 'in-themes-panel' )
1785+                                       .find( '.customize-themes-full-container' ).removeClass( 'animate' );
1786+                       }
1787+               },
1788+
1789+               /**
1790+                * Install a theme via wp.updates.
1791+                *
1792+                * @since 4.9.0
1793+                */
1794+               installTheme: function( event ) {
1795+                       var panel = this, preview = false, slug = $( event.target ).data( 'slug' );
1796+
1797+                       if ( -1 !== $.inArray( this.installingThemes, slug ) ) {
1798+                               return; // Theme is already being installed.
1799+                       }
1800+
1801+                       wp.updates.maybeRequestFilesystemCredentials( event );
1802+
1803+                       $( document ).one( 'wp-theme-install-success', function( event, response ) {
1804+                               var theme = false, customizeId, themeControl;
1805+                               if ( preview ) {
1806+
1807+                                       // Update loading message. Everything else is handled by reloading the page.
1808+                               //      $( '#customize-themes-loading-container span' ).hide();
1809+                               //      $( '#customize-themes-loading-container .customize-loading-text' ).css( 'display', 'block' );
1810+
1811+                                       panel.loadThemePreview( slug ).fail( function() {
1812+                                               $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
1813+                                       } );
1814+
1815+                               } else {
1816+                                       api.control.each( function( control ) {
1817+                                               if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
1818+                                                       theme = control.params.theme; // Used below to add theme control.
1819+                                                       control.rerenderAsInstalled( true );
1820+                                               }
1821+                                       });
1822+
1823+                                       // Don't add the same theme more than once.
1824+                                       if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) {
1825+                                               return;
1826+                                       }
1827+
1828+                                       // Add theme control to installed section.
1829+                                       theme.type = 'installed';
1830+                                       customizeId = 'installed_theme_' + theme.id;
1831+                                       themeControl = new api.controlConstructor.theme( customizeId, {
1832+                                               params: {
1833+                                                       type: 'theme',
1834+                                                       content: $( '<li class="customize-control customize-control-theme"></li>' ).attr( 'id', 'customize-control-theme-installed_' + theme.id ).prop( 'outerHTML' ),
1835+                                                       section: 'installed_themes',
1836+                                                       active: true,
1837+                                                       theme: theme,
1838+                                                       priority: 0 // Add all newly-installed themes to the top.
1839+                                               },
1840+                                               previewer: api.previewer
1841+                                       } );
1842+
1843+                                       api.control.add( customizeId, themeControl );
1844+                                       api.control( customizeId ).container.trigger( 'render-screenshot' );
1845+
1846+                                       // Close the details modal if it's open to the installed theme.
1847+                                       api.section.each( function( section ) {
1848+                                               if ( 'themes' === section.params.type ) {
1849+                                                       if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
1850+                                                               section.closeDetails();
1851+                                                       }
1852+                                               }
1853+                                       });
1854+                               }
1855+                       } );
1856+
1857+                       this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
1858+                       wp.updates.installTheme( {
1859+                               slug: slug
1860+                       } );
1861+
1862+                       // Also preview the theme as the event is triggered on Install & Preview.
1863+                       if ( $( event.target ).hasClass( 'preview' ) ) {
1864+                               preview = true;
1865+                               $( '.wp-full-overlay' ).addClass( 'customize-loading' );
1866+                       }
1867+               },
1868+
1869+               /**
1870+                * Load theme preview.
1871+                *
1872+                * @since 4.9.0
1873+                *
1874+                * @param {string} themeId Theme ID.
1875+                * @returns {jQuery.promise} Promise.
1876+                */
1877+               loadThemePreview: function( themeId ) {
1878+                       var deferred = $.Deferred(), onceProcessingComplete, overlay, urlParser;
1879+
1880+                       urlParser = document.createElement( 'a' );
1881+                       urlParser.href = location.href;
1882+                       urlParser.search = $.param( _.extend(
1883+                               api.utils.parseQueryString( urlParser.search.substr( 1 ) ),
1884+                               {
1885+                                       theme: themeId,
1886+                                       changeset_uuid: api.settings.changeset.uuid
1887+                               }
1888+                       ) );
1889+
1890+                       // Update loading message. Everything else is handled by reloading the page.
1891+                       $( '#customize-themes-loading-container span' ).hide();
1892+                       $( '#customize-themes-loading-container .customize-loading-text' ).css( 'display', 'block' );
1893+                       overlay = $( '.wp-full-overlay' );
1894+                       overlay.addClass( 'customize-loading' );
1895+
1896+                       onceProcessingComplete = function() {
1897+                               var request;
1898+                               if ( api.state( 'processing' ).get() > 0 ) {
1899+                                       return;
1900+                               }
1901+
1902+                               api.state( 'processing' ).unbind( onceProcessingComplete );
1903+
1904+                               request = api.requestChangesetUpdate();
1905+                               request.done( function() {
1906+                                       $( window ).off( 'beforeunload.customize-confirm' );
1907+                                       window.location.href = urlParser.href;
1908+                               } );
1909+                               request.fail( function() {
1910+                                       overlay.removeClass( 'customize-loading' );
1911+                               } );
1912+                       };
1913+
1914+                       if ( 0 === api.state( 'processing' ).get() ) {
1915+                               onceProcessingComplete();
1916+                       } else {
1917+                               api.state( 'processing' ).bind( onceProcessingComplete );
1918+                       }
1919+
1920+                       return deferred.promise();
1921+               },
1922+
1923+               /**
1924+                * Update a theme via wp.updates.
1925+                *
1926+                * @since 4.9.0
1927+                */
1928+               updateTheme: function( event ) {
1929+                       wp.updates.maybeRequestFilesystemCredentials( event );
1930+
1931+                       $( document ).one( 'wp-theme-update-success', function( event, response ) {
1932+                               // Rerender the control to reflect the update.
1933+                               api.control.each( function( control ) {
1934+                                       if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
1935+                                               control.params.theme.hasUpdate = false;
1936+                                               control.rerenderAsInstalled( true );
1937+                                       }
1938+                               });
1939+                       } );
1940+
1941+                       wp.updates.updateTheme( {
1942+                               slug: $( event.target ).closest( '.notice' ).data( 'slug' )
1943+                       } );
1944+               },
1945+
1946+               /**
1947+                * Delete a theme via wp.updates.
1948+                *
1949+                * @since 4.9.0
1950+                */
1951+               deleteTheme: function( event ) {
1952+                       var theme, section;
1953+                       theme = $( event.target ).data( 'slug' );
1954+                       section = api.section( 'installed_themes' );
1955+
1956+                       event.preventDefault();
1957+
1958+                       // Confirmation dialog for deleting a theme.
1959+                       if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
1960+                               return;
1961+                       }
1962+
1963+                       wp.updates.maybeRequestFilesystemCredentials( event );
1964+
1965+                       $( document ).one( 'wp-theme-delete-success', function() {
1966+                               var control = api.control( 'installed_theme_' + theme );
1967+
1968+                               // Remove theme control.
1969+                               control.container.remove();
1970+                               api.control.remove( control.id );
1971+
1972+                               // Update installed count.
1973+                               section.loaded = section.loaded - 1;
1974+                               section.updateCount();
1975+
1976+                               // Rerender any other theme controls as uninstalled.
1977+                               api.control.each( function( control ) {
1978+                                       if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
1979+                                               control.rerenderAsInstalled( false );
1980+                                       }
1981+                               });
1982+                       } );
1983+
1984+                       wp.updates.deleteTheme( {
1985+                               slug: theme
1986+                       } );
1987+
1988+                       // Close modal and focus the section.
1989+                       section.closeDetails();
1990+                       section.focus();
1991+               }
1992+
1993+       });
1994+
1995+
1996+       /**
1997         * A Customizer Control.
1998         *
1999         * A control provides a UI element that allows a user to modify a Customizer Setting.
2000@@ -2410,7 +3038,7 @@
2001                 * @param {Boolean}  active
2002                 * @param {Object}   args
2003                 * @param {Number}   args.duration
2004-                * @param {Callback} args.completeCallback
2005+                * @param {Function} args.completeCallback
2006                 */
2007                onChangeActive: function ( active, args ) {
2008                        if ( args.unchanged ) {
2009@@ -3582,35 +4210,11 @@
2010        api.ThemeControl = api.Control.extend({
2011 
2012                touchDrag: false,
2013-               isRendered: false,
2014+               screenshotRendered: false,
2015 
2016                /**
2017-                * Defer rendering the theme control until the section is displayed.
2018-                *
2019                 * @since 4.2.0
2020                 */
2021-               renderContent: function () {
2022-                       var control = this,
2023-                               renderContentArgs = arguments;
2024-
2025-                       api.section( control.section(), function( section ) {
2026-                               if ( section.expanded() ) {
2027-                                       api.Control.prototype.renderContent.apply( control, renderContentArgs );
2028-                                       control.isRendered = true;
2029-                               } else {
2030-                                       section.expanded.bind( function( expanded ) {
2031-                                               if ( expanded && ! control.isRendered ) {
2032-                                                       api.Control.prototype.renderContent.apply( control, renderContentArgs );
2033-                                                       control.isRendered = true;
2034-                                               }
2035-                                       } );
2036-                               }
2037-                       } );
2038-               },
2039-
2040-               /**
2041-                * @since 4.2.0
2042-                */
2043                ready: function() {
2044                        var control = this;
2045 
2046@@ -3630,20 +4234,11 @@
2047                                }
2048 
2049                                // Prevent the modal from showing when the user clicks the action button.
2050-                               if ( $( event.target ).is( '.theme-actions .button' ) ) {
2051+                               if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
2052                                        return;
2053                                }
2054 
2055-                               api.section( control.section() ).loadThemePreview( control.params.theme.id );
2056-                       });
2057-
2058-                       control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
2059-                               if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
2060-                                       return;
2061-                               }
2062-
2063                                event.preventDefault(); // Keep this AFTER the key filter above
2064-
2065                                api.section( control.section() ).showDetails( control.params.theme );
2066                        });
2067 
2068@@ -3654,11 +4249,12 @@
2069                                if ( source ) {
2070                                        $screenshot.attr( 'src', source );
2071                                }
2072+                               control.screenshotRendered = true;
2073                        });
2074                },
2075 
2076                /**
2077-                * Show or hide the theme based on the presence of the term in the title, description, and author.
2078+                * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
2079                 *
2080                 * @since 4.2.0
2081                 */
2082@@ -3674,6 +4270,23 @@
2083                        } else {
2084                                control.deactivate();
2085                        }
2086+               },
2087+
2088+               /**
2089+                * Rerender the theme from its JS template with the installed type.
2090+                *
2091+                * @since 4.9.0
2092+                */
2093+               rerenderAsInstalled: function( installed ) {
2094+                       var control = this, section;
2095+                       if ( installed ) {
2096+                               control.params.theme.type = 'installed';
2097+                       } else {
2098+                               section = api.section( control.params.section );
2099+                               control.params.theme.type = section.params.action;
2100+                       }
2101+                       control.renderContent(); // replaces existing content
2102+                       control.container.trigger( 'render-screenshot' );
2103                }
2104        });
2105 
2106@@ -4374,7 +4987,9 @@
2107                background_position: api.BackgroundPositionControl,
2108                theme:               api.ThemeControl
2109        };
2110-       api.panelConstructor = {};
2111+       api.panelConstructor = {
2112+               themes: api.ThemesPanel
2113+       };
2114        api.sectionConstructor = {
2115                themes: api.ThemesSection
2116        };
2117@@ -4492,6 +5107,10 @@
2118 
2119                // Sort the sections within each panel
2120                api.panel.each( function ( panel ) {
2121+                       if ( 'themes' === panel.id ) {
2122+                               return; // Don't reflow theme sections, as doing so moves them after the themes container.
2123+                       }
2124+
2125                        var sections = panel.sections(),
2126                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
2127                        rootNodes.push( panel );
2128@@ -5214,6 +5833,16 @@
2129                        // Collapse the most granular expanded object.
2130                        collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
2131                        if ( collapsedObject ) {
2132+                               if ( 'themes' === collapsedObject.params.type ) {
2133+                                       // Themes panel or section.
2134+                                       if ( $( 'body' ).hasClass( 'modal-open' ) ) {
2135+                                               collapsedObject.closeDetails();
2136+                                       } else {
2137+                                               // If we're collapsing a section, collapse the panel also.
2138+                                               wp.customize.panel( 'themes' ).collapse();
2139+                                       }
2140+                                       return;
2141+                               }
2142                                collapsedObject.collapse();
2143                                event.preventDefault();
2144                        }
2145Index: src/wp-admin/js/updates.js
2146===================================================================
2147--- src/wp-admin/js/updates.js  (revision 41546)
2148+++ src/wp-admin/js/updates.js  (working copy)
2149@@ -183,7 +183,11 @@
2150                if ( $notice.length ) {
2151                        $notice.replaceWith( $adminNotice );
2152                } else {
2153-                       $( '.wrap' ).find( '> h1' ).after( $adminNotice );
2154+                       if ( 'customize' === pagenow ) {
2155+                               $( '.customize-themes-notifications' ).append( $adminNotice );
2156+                       } else {
2157+                               $( '.wrap' ).find( '> h1' ).after( $adminNotice );
2158+                       }
2159                }
2160 
2161                $document.trigger( 'wp-updates-notice-added' );
2162@@ -930,6 +934,17 @@
2163                if ( 'themes-network' === pagenow ) {
2164                        $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
2165 
2166+               } else if ( 'customize' === pagenow ) {
2167+
2168+                       // Update the theme details UI.
2169+                       $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
2170+
2171+                       $notice.find( 'h3' ).remove();
2172+
2173+                       // Add the top-level UI, and update both.
2174+                       $notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
2175+                       $notice = $notice.addClass( 'updating-message' ).find( 'p' );
2176+
2177                } else {
2178                        $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
2179 
2180@@ -972,6 +987,10 @@
2181                        },
2182                        $notice, newText;
2183 
2184+               if ( 'customize' === pagenow ) {
2185+                       $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
2186+               }
2187+
2188                if ( 'themes-network' === pagenow ) {
2189                        $notice = $theme.find( '.update-message' );
2190 
2191@@ -1026,6 +1045,10 @@
2192                        return;
2193                }
2194 
2195+               if ( 'customize' === pagenow ) {
2196+                       $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
2197+               }
2198+
2199                if ( 'themes-network' === pagenow ) {
2200                        $notice = $theme.find( '.update-message ' );
2201                } else {
2202@@ -1162,12 +1185,23 @@
2203                        return;
2204                }
2205 
2206-               if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
2207-                       $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
2208-                       $card   = $( '.install-theme-info' ).prepend( $message );
2209+               if ( 'customize' === pagenow ) {
2210+                       if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
2211+                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
2212+                               $card   = $( '.theme-overlay .theme-info' ).prepend( $message );
2213+                       } else {
2214+                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
2215+                               $card   = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
2216+                       }
2217+                       $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
2218                } else {
2219-                       $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
2220-                       $button = $card.find( '.theme-install' );
2221+                       if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
2222+                               $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
2223+                               $card   = $( '.install-theme-info' ).prepend( $message );
2224+                       } else {
2225+                               $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
2226+                               $button = $card.find( '.theme-install' );
2227+                       }
2228                }
2229 
2230                $button
2231Index: src/wp-includes/class-wp-customize-manager.php
2232===================================================================
2233--- src/wp-includes/class-wp-customize-manager.php      (revision 41546)
2234+++ src/wp-includes/class-wp-customize-manager.php      (working copy)
2235@@ -302,6 +302,7 @@
2236 
2237                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
2238 
2239+               require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
2240                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
2241                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
2242                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
2243@@ -357,6 +358,7 @@
2244 
2245                add_action( 'wp_ajax_customize_save',           array( $this, 'save' ) );
2246                add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
2247+               add_action( 'wp_ajax_customize-load-themes',    array( $this, 'load_themes_ajax' ) );
2248 
2249                add_action( 'customize_register',                 array( $this, 'register_controls' ) );
2250                add_action( 'customize_register',                 array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
2251@@ -373,6 +375,12 @@
2252 
2253                // Export the settings to JS via the _wpCustomizeSettings variable.
2254                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
2255+
2256+               // Add theme update notices.
2257+               if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
2258+                       require_once( ABSPATH . '/wp-admin/includes/update.php' );
2259+                       add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
2260+               }
2261        }
2262 
2263        /**
2264@@ -3343,6 +3351,10 @@
2265                                'type' => 'text/css',
2266                        ) );
2267                }
2268+
2269+               if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
2270+                       wp_enqueue_script( 'updates' );
2271+               }
2272        }
2273 
2274        /**
2275@@ -3547,6 +3559,7 @@
2276                $nonces = array(
2277                        'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
2278                        'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
2279+                       'switch-themes' => wp_create_nonce( 'switch-themes' ),
2280                );
2281 
2282                /**
2283@@ -3623,6 +3636,14 @@
2284                        'autofocus' => $this->get_autofocus(),
2285                        'documentTitleTmpl' => $this->get_document_title_template(),
2286                        'previewableDevices' => $this->get_previewable_devices(),
2287+                       'l10n' => array(
2288+                               'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
2289+                               /* translators: %d is the number of theme search results, which cannot currently consider singular vs. plural forms */
2290+                               'themeSearchResults' => __( '%d themes found' ),
2291+                               /* translators: %d is the number of themes being displayed, which cannot currently consider singular vs. plural forms */
2292+                               'announceThemeCount' => __( 'Displaying %d themes' ),
2293+                               'announceThemeDetails' => __( 'Showing details for theme: %s' ),
2294+                       ),
2295                );
2296 
2297                // Prepare Customize Section objects to pass to JavaScript.
2298@@ -3725,8 +3746,10 @@
2299 
2300                /* Panel, Section, and Control Types */
2301                $this->register_panel_type( 'WP_Customize_Panel' );
2302+               $this->register_panel_type( 'WP_Customize_Themes_Panel' );
2303                $this->register_section_type( 'WP_Customize_Section' );
2304                $this->register_section_type( 'WP_Customize_Sidebar_Section' );
2305+               $this->register_section_type( 'WP_Customize_Themes_Section' );
2306                $this->register_control_type( 'WP_Customize_Color_Control' );
2307                $this->register_control_type( 'WP_Customize_Media_Control' );
2308                $this->register_control_type( 'WP_Customize_Upload_Control' );
2309@@ -3737,50 +3760,80 @@
2310                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
2311                $this->register_control_type( 'WP_Customize_Theme_Control' );
2312 
2313-               /* Themes */
2314+               /* Themes (controls are loaded via ajax) */
2315 
2316-               $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
2317-                       'title'      => $this->theme()->display( 'Name' ),
2318-                       'capability' => 'switch_themes',
2319-                       'priority'   => 0,
2320+               $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
2321+                       'title'       => $this->theme()->display( 'Name' ),
2322+                       '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.' ),
2323+                       'capability'  => 'switch_themes',
2324+                       'priority'    => 0,
2325                ) ) );
2326 
2327-               // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
2328-               $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
2329-                       'capability' => 'switch_themes',
2330+               $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
2331+                       'title'       => __( 'Installed' ),
2332+                       'text_before' => __( 'Your local site' ),
2333+                       'action'      => 'installed',
2334+                       'capability'  => 'switch_themes',
2335+                       'panel'       => 'themes',
2336+                       'priority'    => 0,
2337                ) ) );
2338 
2339-               require_once( ABSPATH . 'wp-admin/includes/theme.php' );
2340+               if ( ! is_multisite() ) {
2341+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
2342+                               'title'       => __( 'Search themes&hellip;' ),
2343+                               'text_before' => __( 'Browse all WordPress.org themes' ),
2344+                               'action'      => 'search',
2345+                               'capability'  => 'install_themes',
2346+                               'panel'       => 'themes',
2347+                               'priority'    => 5,
2348+                       ) ) );
2349 
2350-               // Theme Controls.
2351+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
2352+                               'title'      => __( 'Featured' ),
2353+                               'action'     => 'featured',
2354+                               'capability' => 'install_themes',
2355+                               'panel'      => 'themes',
2356+                               'priority'   => 10,
2357+                       ) ) );
2358 
2359-               // Add a control for the active/original theme.
2360-               if ( ! $this->is_theme_active() ) {
2361-                       $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
2362-                       $active_theme = current( $themes );
2363-                       $active_theme['isActiveTheme'] = true;
2364-                       $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
2365-                               'theme'    => $active_theme,
2366-                               'section'  => 'themes',
2367-                               'settings' => 'active_theme',
2368+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
2369+                               'title'      => __( 'Popular' ),
2370+                               'action'     => 'popular',
2371+                               'capability' => 'install_themes',
2372+                               'panel'      => 'themes',
2373+                               'priority'   => 15,
2374                        ) ) );
2375-               }
2376 
2377-               $themes = wp_prepare_themes_for_js();
2378-               foreach ( $themes as $theme ) {
2379-                       if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
2380-                               continue;
2381-                       }
2382+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
2383+                               'title'      => __( 'Latest' ),
2384+                               'action'     => 'latest',
2385+                               'capability' => 'install_themes',
2386+                               'panel'      => 'themes',
2387+                               'priority'   => 20,
2388+                       ) ) );
2389 
2390-                       $theme_id = 'theme_' . $theme['id'];
2391-                       $theme['isActiveTheme'] = false;
2392-                       $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
2393-                               'theme'    => $theme,
2394-                               'section'  => 'themes',
2395-                               'settings' => 'active_theme',
2396+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
2397+                               'title'      => __( 'Feature Filter' ),
2398+                               'action'     => 'feature_filter',
2399+                               'capability' => 'install_themes',
2400+                               'panel'      => 'themes',
2401+                               'priority'   => 25,
2402                        ) ) );
2403+
2404+                       $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
2405+                               'title'      => __( 'Favorites' ),
2406+                               'action'     => 'favorites',
2407+                               'capability' => 'install_themes',
2408+                               'panel'      => 'themes',
2409+                               'priority'   => 30,
2410+                       ) ) );
2411                }
2412 
2413+               // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
2414+               $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
2415+                       'capability' => 'switch_themes',
2416+               ) ) );
2417+
2418                /* Site Identity */
2419 
2420                $this->add_section( 'title_tagline', array(
2421@@ -4292,6 +4345,153 @@
2422        }
2423 
2424        /**
2425+        * Load themes into the theme browsing/installation UI.
2426+        *
2427+        * @since 4.9.0
2428+        */
2429+       public function load_themes_ajax() {
2430+               check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
2431+
2432+               if ( ! current_user_can( 'switch_themes' ) ) {
2433+                       wp_die( -1 );
2434+               }
2435+
2436+               if ( empty( $_POST['theme_action'] ) ) {
2437+                       wp_send_json_error( 'missing_theme_action' );
2438+               }
2439+
2440+               if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
2441+                       wp_send_json_error( 'empty_search' );
2442+               } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
2443+                       wp_send_json_error( 'empty_user' );
2444+               } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
2445+                       wp_send_json_error( 'no_features' );
2446+               }
2447+
2448+               require_once( ABSPATH . 'wp-admin/includes/theme.php' );
2449+               if ( 'installed' === $_POST['theme_action'] ) {
2450+                       $themes = array( 'themes' => wp_prepare_themes_for_js() );
2451+                       foreach ( $themes['themes'] as &$theme ) {
2452+                               $theme['type'] = 'installed';
2453+                               // Set active based on customized theme.
2454+                               if ( $_POST['customized_theme'] === $theme['id'] ) {
2455+                                       $theme['active'] = true;
2456+                               } else {
2457+                                       $theme['active'] = false;
2458+                               }
2459+                       }
2460+               } else {
2461+                       if ( ! current_user_can( 'install_themes' ) ) {
2462+                               wp_die( -1 );
2463+                       }
2464+
2465+                       // Arguments for all queries.
2466+                       $args = array(
2467+                               'per_page' => 100,
2468+                               'page' => absint( $_POST['page'] ),
2469+                               'fields' => array(
2470+                                       'screenshot_url' => true,
2471+                                       'description' => true,
2472+                                       'rating' => true,
2473+                                       'downloaded' => true,
2474+                                       'downloadlink' => true,
2475+                                       'last_updated' => true,
2476+                                       'homepage' => true,
2477+                                       'num_ratings' => true,
2478+                                       'tags' => true,
2479+                                       'parent' => true,
2480+                                       //'extended_author' => true, @todo: WordPress.org throws a 500 server error when this is here.
2481+                               ),
2482+                       );
2483+
2484+                       // Specialized handling for each query.
2485+                       switch ( $_POST['theme_action'] ) {
2486+                               case 'search':
2487+                                       $args['search'] = wp_unslash( $_POST['search'] );
2488+                                       break;
2489+                               case 'favorites':
2490+                                       $args['user'] = wp_unslash( $_POST['user'] );
2491+                               case 'featured':
2492+                               case 'popular':
2493+                                       $args['browse'] = wp_unslash( $_POST['theme_action'] );
2494+                                       break;
2495+                               case 'latest':
2496+                                       $args['browse'] = 'new';
2497+                                       break;
2498+                               case 'feature_filter':
2499+                                       $args['tag'] = wp_unslash( $_POST['tags'] );
2500+                                       break;
2501+                       }
2502+
2503+                       // Load themes from the .org API.
2504+                       $themes = themes_api( 'query_themes', $args );
2505+                       if ( is_wp_error( $themes ) ) {
2506+                               wp_send_json_error();
2507+                       }
2508+
2509+                       // This list matches the allowed tags in wp-admin/includes/theme-install.php.
2510+                       $themes_allowedtags = array('a' => array('href' => array(), 'title' => array(), 'target' => array()),
2511+                               'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
2512+                               'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
2513+                               'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
2514+                               'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
2515+                               'img' => array('src' => array(), 'class' => array(), 'alt' => array())
2516+                       );
2517+
2518+                       // Prepare a list of installed themes to check against before the loop.
2519+                       $installed_themes = array();
2520+                       $wp_themes = wp_get_themes();
2521+                       foreach ( $wp_themes as $theme ) {
2522+                               $installed_themes[] = $theme->get_stylesheet();
2523+                       }
2524+                       $update_php = network_admin_url( 'update.php?action=install-theme' );
2525+
2526+                       // Set up properties for themes available on WordPress.org.
2527+                       foreach ( $themes->themes as &$theme ) {
2528+                               $theme->install_url = add_query_arg( array(
2529+                                       'theme'    => $theme->slug,
2530+                                       '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
2531+                               ), $update_php );
2532+
2533+                               $theme->name        = wp_kses( $theme->name, $themes_allowedtags );
2534+                               $theme->author      = wp_kses( $theme->author, $themes_allowedtags );
2535+                               $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
2536+                               $theme->description = wp_kses( $theme->description, $themes_allowedtags );
2537+                               $theme->tags        = implode( ', ', $theme->tags );
2538+                               $theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
2539+                               $theme->num_ratings = number_format_i18n( $theme->num_ratings );
2540+                               $theme->preview_url = set_url_scheme( $theme->preview_url );
2541+
2542+                               // Handle themes that are already installed as installed themes.
2543+                               if ( in_array( $theme->slug, $installed_themes, true ) ) {
2544+                                       $theme->type = 'installed';
2545+                               } else {
2546+                                       $theme->type = $_POST['theme_action'];
2547+                               }
2548+
2549+                               // Set active based on customized theme.
2550+                               if ( $_POST['customized_theme'] === $theme->slug ) {
2551+                                       $theme->active = true;
2552+                               } else {
2553+                                       $theme->active = false;
2554+                               }
2555+
2556+                               // Map available theme properties to installed theme properties.
2557+                               $theme->id           = $theme->slug;
2558+                               $theme->screenshot   = array( $theme->screenshot_url );
2559+                               $theme->authorAndUri = $theme->author;
2560+                               $theme->parent       = ( $theme->slug === $theme->template ) ? false: $theme->template; // The .org API does not seem to return the parent in a documneted way; however, this check should yield a similar result in most cases.
2561+                               unset( $theme->slug );
2562+                               unset( $theme->screenshot_url );
2563+                               unset( $theme->author );
2564+                       } // End foreach().
2565+               } // End if().
2566+               wp_send_json_success( $themes );
2567+       }
2568+
2569+
2570+       /**
2571         * Callback for validating the header_textcolor value.
2572         *
2573         * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash().
2574Index: src/wp-includes/customize/class-wp-customize-theme-control.php
2575===================================================================
2576--- src/wp-includes/customize/class-wp-customize-theme-control.php      (revision 41546)
2577+++ src/wp-includes/customize/class-wp-customize-theme-control.php      (working copy)
2578@@ -57,18 +57,22 @@
2579         * @since 4.2.0
2580         */
2581        public function content_template() {
2582-               $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
2583-               $active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
2584-               $preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
2585-               $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
2586+               /* translators: %s: theme name */
2587+               $details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
2588+               /* translators: %s: theme name */
2589+               $customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
2590+               /* translators: %s: theme name */
2591+               $preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
2592+               /* translators: %s: theme name */
2593+               $install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
2594                ?>
2595-               <# if ( data.theme.isActiveTheme ) { #>
2596-                       <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">
2597+               <# if ( data.theme.active ) { #>
2598+                       <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
2599                <# } else { #>
2600-                       <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
2601+                       <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
2602                <# } #>
2603 
2604-                       <# if ( data.theme.screenshot[0] ) { #>
2605+                       <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
2606                                <div class="theme-screenshot">
2607                                        <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
2608                                </div>
2609@@ -76,11 +80,7 @@
2610                                <div class="theme-screenshot blank"></div>
2611                        <# } #>
2612 
2613-                       <# if ( data.theme.isActiveTheme ) { #>
2614-                               <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
2615-                       <# } else { #>
2616-                               <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
2617-                       <# } #>
2618+                       <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>
2619 
2620                        <div class="theme-author"><?php
2621                                /* translators: Theme author name */
2622@@ -87,17 +87,31 @@
2623                                printf( _x( 'By %s', 'theme author' ), '{{ data.theme.author }}' );
2624                        ?></div>
2625 
2626-                       <# if ( data.theme.isActiveTheme ) { #>
2627-                               <h3 class="theme-name" id="{{ data.theme.id }}-name">
2628+                       <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
2629+                               <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>
2630+                       <# } #>
2631+
2632+                       <# if ( data.theme.active ) { #>
2633+                               <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
2634                                        <?php
2635                                        /* translators: %s: theme name */
2636-                                       printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
2637+                                       printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
2638                                        ?>
2639                                </h3>
2640+                               <div class="theme-actions">
2641+                                       <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
2642+                               </div>
2643+                               <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
2644+                       <# } else if ( 'installed' === data.theme.type ) { #>
2645+                               <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
2646+                               <div class="theme-actions">
2647+                                       <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>
2648+                               </div>
2649+                               <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
2650                        <# } else { #>
2651-                               <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
2652+                               <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
2653                                <div class="theme-actions">
2654-                                       <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
2655+                                       <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>
2656                                </div>
2657                        <# } #>
2658                </div>
2659Index: src/wp-includes/customize/class-wp-customize-themes-panel.php
2660===================================================================
2661--- src/wp-includes/customize/class-wp-customize-themes-panel.php       (revision 0)
2662+++ src/wp-includes/customize/class-wp-customize-themes-panel.php       (working copy)
2663@@ -0,0 +1,114 @@
2664+<?php
2665+/**
2666+ * Customize API: WP_Customize_Themes_Panel class
2667+ *
2668+ * @package WordPress
2669+ * @subpackage Customize
2670+ * @since 4.9.0
2671+ */
2672+
2673+/**
2674+ * Customize Themes Panel Class
2675+ *
2676+ * @since 4.9.0
2677+ *
2678+ * @see WP_Customize_Panel
2679+ */
2680+class WP_Customize_Themes_Panel extends WP_Customize_Panel {
2681+
2682+       /**
2683+        * Panel type.
2684+        *
2685+        * @since 4.9.0
2686+        * @var string
2687+        */
2688+       public $type = 'themes';
2689+
2690+       /**
2691+        * An Underscore (JS) template for rendering this panel's container.
2692+        *
2693+        * The themes panel renders a custom panel heading with the current theme and a switch themes button.
2694+        *
2695+        * @see WP_Customize_Panel::print_template()
2696+        *
2697+        * @since 4.9.0
2698+        */
2699+       protected function render_template() {
2700+               ?>
2701+               <li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
2702+                       <h3 class="accordion-section-title">
2703+                               <?php
2704+                               if ( $this->manager->is_theme_active() ) {
2705+                                       echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
2706+                               } else {
2707+                                       echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
2708+                               }
2709+                               ?>
2710+
2711+                               <?php
2712+                               if ( current_user_can( 'switch_themes' ) ) : ?>
2713+                                       <button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
2714+                               <?php endif; ?>
2715+                       </h3>
2716+                       <ul class="accordion-sub-container control-panel-content"></ul>
2717+               </li>
2718+               <?php
2719+       }
2720+
2721+       /**
2722+        * An Underscore (JS) template for this panel's content (but not its container).
2723+        *
2724+        * Class variables for this panel class are available in the `data` JS object;
2725+        * export custom variables by overriding WP_Customize_Panel::json().
2726+        *
2727+        * @since 4.9.0
2728+        *
2729+        * @see WP_Customize_Panel::print_template()
2730+        */
2731+       protected function content_template() {
2732+               ?>
2733+               <li class="filter-themes-count">
2734+                       <span class="themes-displayed"><?php
2735+                               /* translators: %s: number of themes displayed; plural forms cannot be accommodated here so assume plurality or translate as "Themes: %s" */
2736+                               echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
2737+                       ?></span>
2738+                       <button type="button" class="button button-primary see-themes"><?php
2739+                               /* translators: %s: number of themes displayed; plural forms cannot be accommodated here so assume plurality or omit the count and translate as "Show themes" */
2740+                               echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
2741+                       ?></button>
2742+                       <button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
2743+               </li>
2744+               <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
2745+                       <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
2746+                       <div class="accordion-section-title">
2747+                               <span class="preview-notice"><?php
2748+                                       /* translators: %s: themes panel title in the Customizer */
2749+                                       echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
2750+                               ?></span>
2751+                               <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
2752+                                       <# if ( data.description ) { #>
2753+                                               <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
2754+                                       <# } #>
2755+                               <?php endif; ?>
2756+                       </div>
2757+                       <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
2758+                               <# if ( data.description ) { #>
2759+                                       <div class="description customize-panel-description">
2760+                                               {{{ data.description }}}
2761+                                       </div>
2762+                               <# } #>
2763+                       <?php endif; ?>
2764+               </li>
2765+               <li id="customize-themes-loading-container">
2766+                       <span class="customize-loading-text-installing-theme"><?php _e( 'Downloading your new theme&hellip;' ); ?></span>
2767+                       <span class="customize-loading-text"><?php _e( 'Setting up your live preview. This may take a bit.' ); ?></span>
2768+               </li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
2769+               <li class="customize-themes-full-container-container">
2770+                       <ul class="customize-themes-full-container">
2771+                               <li class="customize-themes-notifications"></li>
2772+                       </ul>
2773+               </li>
2774+               <?php
2775+       }
2776+}
2777Index: src/wp-includes/customize/class-wp-customize-themes-section.php
2778===================================================================
2779--- src/wp-includes/customize/class-wp-customize-themes-section.php     (revision 41546)
2780+++ src/wp-includes/customize/class-wp-customize-themes-section.php     (working copy)
2781@@ -10,7 +10,7 @@
2782 /**
2783  * Customize Themes Section class.
2784  *
2785- * A UI container for theme controls, which behaves like a backwards Panel.
2786+ * A UI container for theme controls, which are displayed within sections.
2787  *
2788  * @since 4.2.0
2789  *
2790@@ -17,67 +17,120 @@
2791  * @see WP_Customize_Section
2792  */
2793 class WP_Customize_Themes_Section extends WP_Customize_Section {
2794-
2795        /**
2796-        * Customize section type.
2797+        * Section type.
2798         *
2799-        * @since 4.2.0
2800+        * @since 4.9.0
2801         * @var string
2802         */
2803        public $type = 'themes';
2804 
2805        /**
2806-        * Render the themes section, which behaves like a panel.
2807+        * Theme section action.
2808         *
2809-        * @since 4.2.0
2810+        * Defines the type of themes to load (installed, latest, search, etc.).
2811+        *
2812+        * @since 4.9.0
2813+        * @var string
2814         */
2815-       protected function render() {
2816-               $classes = 'accordion-section control-section control-section-' . $this->type;
2817+       public $action = '';
2818+
2819+       /**
2820+        * Optional text to display before the theme section heading.
2821+        *
2822+        * @since 4.9.0
2823+        * @var string
2824+        */
2825+       public $text_before = '';
2826+
2827+       /**
2828+        * Get section parameters for JS.
2829+        *
2830+        * @since 4.9.0
2831+        * @return array Exported parameters.
2832+        */
2833+       public function json() {
2834+               $exported = parent::json();
2835+               $exported['action'] = $this->action;
2836+               $exported['text_before'] = $this->text_before;
2837+
2838+               return $exported;
2839+       }
2840+
2841+       /**
2842+        * Render a themes section as a JS template.
2843+        *
2844+        * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
2845+        *
2846+        * @since 4.9.0
2847+        */
2848+       protected function render_template() {
2849                ?>
2850-               <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
2851-                       <h3 class="accordion-section-title">
2852-                               <?php
2853-                               if ( $this->manager->is_theme_active() ) {
2854-                                       echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
2855+               <li id="accordion-section-{{ data.id }}" class="theme-section">
2856+                       <# if ( '' !== data.text_before ) { #>
2857+                               <p class="customize-themes-text-before">{{ data.text_before }}</p>
2858+                       <# } #>
2859+                       <# if ( 'search' === data.action ) { #>
2860+                               <div class="search-form customize-themes-section-title themes-section-search_themes">
2861+                                       <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
2862+                                       <input placeholder="{{ data.title }}" type="text" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
2863+                                       <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
2864+                               </div>
2865+                       <# } else { #>
2866+                               <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
2867+                                       var attr = ' aria-expanded="false"';
2868                                } else {
2869-                                       echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
2870-                               }
2871-                               ?>
2872-
2873-                               <?php if ( count( $this->controls ) > 0 ) : ?>
2874-                                       <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
2875-                               <?php endif; ?>
2876-                       </h3>
2877-                       <div class="customize-themes-panel control-panel-content themes-php">
2878-                               <h3 class="accordion-section-title customize-section-title">
2879-                                       <button class="customize-section-back" tabindex="0" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
2880-                                       <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
2881-                                       <?php _e( 'Themes' ); ?>
2882-                                       <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
2883-                               </h3>
2884-                               <h3 class="accordion-section-title customize-section-title">
2885+                                       var attr = '';
2886+                               } #>
2887+                               <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
2888+                       <# } #>
2889+                       <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
2890+                               <# if ( 'installed' === data.action ) { #>
2891+                                       <p class="themes-filter-container">
2892+                                               <label for="themes-filter">
2893+                                                       <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
2894+                                                       <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
2895+                                               </label>
2896+                                       </p>
2897+                               <# } #>
2898+                       <?php endif; ?>
2899+                       <# if ( 'favorites' === data.action ) { #>
2900+                               <div class="favorites-form filter-details">
2901+                                       <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
2902+                                       <p>
2903+                                               <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
2904+                                               <input type="search" id="wporg-username-input" value="">
2905+                                               <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
2906+                                       </p>
2907+                               </div>
2908+                       <# } else if ( 'feature_filter' === data.action ) { #>
2909+                               <div class="filter-drawer filter-details">
2910                                        <?php
2911-                                       if ( $this->manager->is_theme_active() ) {
2912-                                               echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
2913-                                       } else {
2914-                                               echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
2915+                                       $feature_list = get_theme_feature_list();
2916+                                       foreach ( $feature_list as $feature_name => $features ) {
2917+                                               echo '<fieldset class="filter-group">';
2918+                                               $feature_name = esc_html( $feature_name );
2919+                                               echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
2920+                                               echo '<div class="filter-group-feature">';
2921+                                               foreach ( $features as $feature => $feature_name ) {
2922+                                                       $feature = esc_attr( $feature );
2923+                                                       echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
2924+                                                       echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
2925+                                               }
2926+                                               echo '</div>';
2927+                                               echo '</fieldset>';
2928                                        }
2929                                        ?>
2930-                                       <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
2931-                               </h3>
2932-
2933+                               </div>
2934+                       <# } #>
2935+                       <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
2936                                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
2937-
2938-                               <div id="customize-container"></div>
2939-                               <?php if ( count( $this->controls ) > 4 ) : ?>
2940-                                       <p><label for="themes-filter">
2941-                                               <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
2942-                                               <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
2943-                                       </label></p>
2944-                               <?php endif; ?>
2945                                <div class="theme-browser rendered">
2946-                                       <ul class="themes accordion-section-content">
2947-                                       </ul>
2948+                                       <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>
2949+                                       <ul class="themes">
2950+                                       </ul>
2951+                                       <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
2952+                                       <p class="spinner"></p>
2953                                </div>
2954                        </div>
2955                </li>
2956Index: tests/phpunit/tests/customize/manager.php
2957===================================================================
2958--- tests/phpunit/tests/customize/manager.php   (revision 41546)
2959+++ tests/phpunit/tests/customize/manager.php   (working copy)
2960@@ -2351,7 +2351,7 @@
2961                $data = json_decode( $json, true );
2962                $this->assertNotEmpty( $data );
2963 
2964-               $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts' ), array_keys( $data ) );
2965+               $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts', 'l10n' ), array_keys( $data ) );
2966                $this->assertEquals( $autofocus, $data['autofocus'] );
2967                $this->assertArrayHasKey( 'save', $data['nonce'] );
2968                $this->assertArrayHasKey( 'preview', $data['nonce'] );