Context Navigation

Back to Ticket #37661

Ticket #37661: 37661.10.diff

File 37661.10.diff, 101.1 KB (added by celloexpressions, 8 years ago)
Refresh for core changes, minor adjustments (see comment).

Line
1	Index: 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;
781	Index: 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	}
828	Index: 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
842	Index: 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
938	Index: 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	}
2145	Index: 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
2231	Index: 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…' ),
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().
2574	Index: 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>
2659	Index: 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…' ); ?></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	+}
2777	Index: 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…' ); ?></span>
2894	+ <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
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…' ); ?></span>
2942	- <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
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’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>
2956	Index: 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'] );

Trac UI Preferences

Download in other formats:

Original Format

Make WordPress Core

Context Navigation

Ticket #37661: 37661.10.diff

Download in other formats: