WordPress.org
Get WordPress

Make WordPress Core

Ticket #37661: 37661.10.diff

File 37661.10.diff, 101.1 KB (added by celloexpressions, 9 years ago)

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

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