WordPress.org

Make WordPress Core

Ticket #37661: 37661.8.diff

File 37661.8.diff, 90.0 KB (added by celloexpressions, 3 years ago)

Fix hiding loader when an installation fails on an install & preview.

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

     
    271271}
    272272
    273273#customize-theme-controls .customize-pane-child.open,
    274 #customize-theme-controls .customize-pane-child.current-panel,
    275 #customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
     274#customize-theme-controls .customize-pane-child.current-panel {
    276275        -webkit-transform: none;
    277276        -ms-transform: none;
    278277        transform: none;
    279278}
    280279
    281 #customize-theme-controls .customize-themes-panel.customize-pane-child,
    282280.section-open #customize-theme-controls .customize-pane-parent,
    283281.in-sub-panel #customize-theme-controls .customize-pane-parent,
    284282.section-open #customize-info,
    285283.in-sub-panel #customize-info,
    286 .in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
    287 .in-themes-panel #customize-theme-controls .customize-pane-parent,
    288 .in-themes-panel #customize-info {
     284.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
    289285        visibility: hidden;
    290286        height: 0;
    291287        overflow: hidden;
     
    296292
    297293.section-open #customize-theme-controls .customize-pane-parent.busy,
    298294.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
    299 .in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
    300295.section-open #customize-info.busy,
    301296.in-sub-panel #customize-info.busy,
    302 .in-themes-panel #customize-info.busy,
    303297.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
    304298#customize-theme-controls .customize-pane-child.open,
    305299#customize-theme-controls .customize-pane-child.current-panel,
     
    309303        overflow: auto;
    310304}
    311305
    312 .in-themes-panel #customize-theme-controls .customize-pane-parent,
    313 .in-themes-panel #customize-info {
    314         -webkit-transform: translateX(100%);
    315         -ms-transform: translateX(100%);
    316         transform: translateX(100%);
    317 }
    318 
    319306#customize-theme-controls .customize-pane-child.accordion-section-content,
    320307#customize-theme-controls .customize-pane-child.accordion-sub-container {
    321308        display: block;
     
    406393        display: block;
    407394        float: left;
    408395        width: 48px;
    409         height: 71px;
     396        height: 70px;
    410397        padding: 0 24px 0 0;
    411398        margin: 0;
    412399        background: #fff;
     
    420407}
    421408
    422409.customize-section-back {
    423         height: 74px;
     410        height: 73px;
    424411}
    425412
    426413.ios .customize-panel-back {
     
    996983        animation: customize-reload .75s;
    997984}
    998985
    999 #customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
    1000 #customize-theme-controls .control-section-themes .accordion-section-title {
     986#customize-theme-controls .control-panel-themes {
     987        border-bottom: none;
     988}
     989
     990#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
     991#customize-theme-controls .control-panel-themes > .accordion-section-title {
    1001992        cursor: default;
    1002993        background: #fff;
    1003994        color: #555;
     
    1004995        border-top: 1px solid #ddd;
    1005996        border-bottom: 1px solid #ddd;
    1006997        border-left: none;
    1007         margin-top: 0;
     998        border-right: none;
     999        margin: 0 0 15px 0;
     1000        padding-right: 100px; /* Space for the button */
    10081001}
    10091002
    10101003#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
     
    10121005        border-top: 0;
    10131006}
    10141007
    1015 #customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
    1016 #customize-theme-controls .control-section-themes > .accordion-section-title {
    1017         margin: 0 0 15px;
    1018 }
    1019 
    1020 #customize-controls .customize-themes-panel .accordion-section-title {
    1021         margin: 15px -8px;
    1022 }
    1023 
    1024 #customize-controls .control-section-themes .accordion-section-title,
    1025 #customize-controls .customize-themes-panel .accordion-section-title {
    1026         padding-right: 100px; /* Space for the button */
    1027 }
    1028 
    1029 #customize-controls .control-section-themes .accordion-section-title span.customize-action,
     1008.control-panel-themes .accordion-section-title span.customize-action,
    10301009#customize-controls .customize-section-title span.customize-action {
    10311010        font-size: 13px;
    10321011        display: block;
     
    10331012        font-weight: 400;
    10341013}
    10351014
    1036 #customize-controls .control-section-themes .accordion-section-title .change-theme,
    1037 #customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
     1015.control-panel-themes .accordion-section-title .change-theme {
    10381016        position: absolute;
    10391017        right: 10px;
    10401018        top: 50%;
     
    10421020        font-weight: 400;
    10431021}
    10441022
    1045 #customize-controls .control-section-themes .accordion-section-title:before {
     1023#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
    10461024        display: none;
    10471025}
    10481026
    1049 #customize-controls .customize-themes-panel {
    1050         padding: 0 8px;
    1051         background: #f1f1f1;
    1052         -webkit-box-sizing: border-box;
    1053         -moz-box-sizing: border-box;
    1054         box-sizing: border-box;
     1027.control-panel-themes .customize-themes-full-container {
     1028    position: fixed;
     1029    top: 0;
     1030    left: 0;
     1031    transition: .18s left ease-in-out;
     1032    margin: 0 0 0 300px;
     1033        padding:25px;
     1034    overflow-y: scroll;
     1035    width: calc(100% - 350px);
     1036    height: calc(100% - 50px);
     1037    background: #eee;
     1038        z-index: 10;
    10551039}
    10561040
    1057 #customize-controls .customize-themes-panel .accordion-section-title:first-child {
    1058         margin-top: 0;
     1041/* Animations for opening the themes panel */
     1042#customize-header-actions .save,
     1043#customize-header-actions .spinner,
     1044#customize-header-actions .customize-controls-preview-toggle {
     1045        position: relative;
     1046        top: 0;
     1047        transition: .18s top ease-in-out;
    10591048}
    10601049
    1061 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
     1050#customize-footer-actions,
     1051#customize-footer-actions .collapse-sidebar {
     1052        bottom: 0;
     1053        transition: .18s bottom ease-in-out;
     1054}
     1055
     1056.in-themes-panel:not(.animating) #customize-header-actions .save,
     1057.in-themes-panel:not(.animating) #customize-header-actions .spinner,
     1058.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
     1059.in-themes-panel:not(.animating) #customize-preview,
     1060.in-themes-panel:not(.animating) #customize-footer-actions {
     1061        visibility: hidden;
     1062}
     1063
     1064.wp-full-overlay.in-themes-panel {
     1065        background: #eee; /* Prevents a black flash when fading in the panel */
     1066}
     1067
     1068.in-themes-panel #customize-header-actions .save,
     1069.in-themes-panel #customize-header-actions .spinner,
     1070.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
     1071        top: -45px;
     1072}
     1073
     1074.in-themes-panel #customize-footer-actions,
     1075.in-themes-panel #customize-footer-actions .collapse-sidebar {
     1076        bottom: -45px;
     1077}
     1078
     1079/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
     1080.in-themes-panel.animating .control-panel-themes .filter-themes-count {
     1081        display: none;
     1082}
     1083
     1084.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
     1085        bottom: 0;
     1086}
     1087
     1088/* Adds a delay before fading in to avoid it "jumping" */
     1089@keyframes themes-fade-in {
     1090        0% {
     1091                opacity: 0;
     1092        }
     1093        50% {
     1094                opacity: 0;
     1095        }
     1096        100% {
     1097                opacity: 1;
     1098        }
     1099}
     1100
     1101.control-panel-themes .customize-themes-full-container.animate {
     1102        animation: .6s themes-fade-in 1;
     1103}
     1104
     1105.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
     1106        animation: .6s themes-fade-in 1;
     1107}
     1108
     1109.control-panel-themes .filter-themes-count {
     1110        position: fixed;
     1111        top: 0;
     1112        left: 48px;
     1113        width: 222px;
     1114        padding: 6px 15px;
     1115        margin: 0;
     1116        line-height: 32px;
     1117        text-align: right;
     1118        z-index: 10;
     1119}
     1120
     1121.control-panel-themes .filter-themes-count .themes-displayed {
     1122        font-weight: 600;
     1123        color: #555d66;
     1124}
     1125
     1126.control-panel-themes .filter-themes-count .see-themes,
     1127.control-panel-themes .filter-themes-count .filter-themes {
     1128        display: none;
     1129}
     1130
     1131
     1132/* Mobile - toggle between themes and filters */
     1133@media screen and (max-width:600px) {
     1134
     1135        /* Show a spinner in the filters view also, reusing the main customize spinner */
     1136        .in-themes-panel.loading #customize-header-actions .spinner {
     1137                position: fixed;
     1138                top: 0;
     1139                left: 48px;
     1140                visibility: visible;
     1141        }
     1142
     1143        .in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
     1144                visibility: hidden;
     1145        }
     1146
     1147        .control-panel-themes .filter-themes-count {
     1148                width: calc(100% - 93px);
     1149        }
     1150
     1151        .control-panel-themes .filter-themes-count .themes-displayed {
     1152                display: none;
     1153        }
     1154
     1155        .wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
     1156                display: block;
     1157                float: right;
     1158        }
     1159
     1160        .wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
     1161                display: block;
     1162                float: right;
     1163        }
     1164
     1165        .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
     1166                position: fixed;
     1167                top: 0;
     1168                left: 0;
     1169                z-index: 10;
     1170                height: 45px;
     1171                background: #eee;
     1172        }
     1173
     1174        .in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
     1175                line-height: 45px;
     1176        }
     1177
     1178        .control-panel-themes .customize-themes-full-container {
     1179                width: calc(100% - 50px);
     1180                margin: 0;
     1181                top: 46px;
     1182                height: calc(100% - 96px);
     1183                z-index: 1;
     1184                display: none;
     1185        }
     1186
     1187        .showing-themes .control-panel-themes .customize-themes-full-container {
     1188                display: block;
     1189        }
     1190}
     1191
     1192.control-panel-themes .customize-themes-notifications .notice {
     1193        margin: 0 0 25px 0;
     1194}
     1195
     1196.customize-themes-full-container .customize-themes-section {
     1197        display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
     1198        overflow: hidden;
     1199}
     1200
     1201.customize-themes-full-container .customize-themes-section.current-section {
     1202        display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
     1203}
     1204
     1205.theme-section .customize-themes-text-before {
     1206        padding: 0 0 8px 15px;
     1207        margin: 15px 0 0 0;
     1208        line-height: 16px;
     1209        border-bottom: 1px solid #ddd;
     1210        color: #555d66;
     1211}
     1212
     1213.control-panel-themes .customize-themes-section-title {
     1214        width: 100%;
     1215        background: #fff;
     1216        box-shadow: none;
     1217        outline: none;
     1218        border-top: none;
     1219        border-bottom: 1px solid #ddd;
     1220        border-left: 4px solid #fff;
     1221        border-right: none;
     1222        cursor: pointer;
     1223        padding: 10px 15px;
     1224        position: relative;
     1225        text-align: left;
    10621226        font-size: 14px;
    10631227        font-weight: 600;
     1228        color: #555d66;
     1229        text-shadow: none;
    10641230}
    10651231
    1066 #customize-controls .customize-themes-panel > h2 {
    1067         padding: 15px 8px 0 8px;
     1232.control-panel-themes .theme-section {
     1233        margin: 0;
     1234        position: relative;
    10681235}
    10691236
    1070 #customize-theme-controls .customize-themes-panel .accordion-section-content {
     1237.control-panel-themes .customize-themes-section-title:focus,
     1238.control-panel-themes .customize-themes-section-title:hover {
     1239        border-left-color: #0073aa;
     1240        color: #0073aa;
     1241        background: #f5f5f5;
     1242}
     1243
     1244.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
     1245        content: "\f147";
     1246        font: 16px/1 dashicons;
     1247        box-sizing: border-box;
     1248        width: 20px;
     1249        height: 20px;
     1250        padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
     1251        border-radius: 100%;
     1252        position: absolute;
     1253        top: 9px;
     1254        right: 15px;
     1255        background: #0073aa;
     1256        color: #fff;
     1257}
     1258
     1259.control-panel-themes .customize-themes-section-title.selected {
     1260        color: #0073aa;
     1261}
     1262
     1263.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
     1264        border-left: none;
     1265        padding: 5px 50px 5px 15px;
     1266        width: auto;
     1267}
     1268
     1269.control-panel-themes .customize-themes-section-title.themes-section-search_themes:after {
     1270        content: "\f179";
     1271        font: 20px/1 dashicons;
     1272        position: absolute;
     1273        right: 15px;
     1274        bottom: 10px;
     1275}
     1276
     1277.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
     1278.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
     1279        content: "\f140";
     1280        font: 20px/1 dashicons;
     1281        position: absolute;
     1282        right: 15px;
     1283        top: 8px;
     1284}
     1285
     1286.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
     1287        width: 100%;
     1288}
     1289
     1290.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
     1291.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
     1292        background: #fff;
     1293        cursor: default;
     1294}
     1295
     1296.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
     1297        margin-top: 15px;
     1298        border-top: 1px solid #ddd;
     1299}
     1300
     1301.control-panel-themes .filter-details {
     1302        background: #f5f5f5;
     1303        margin: 0;
     1304        padding: 8px 15px;
     1305        border-top: none;
     1306        border-bottom: 1px solid #ddd;
     1307        display: none;
     1308}
     1309
     1310.control-panel-themes .customize-themes-section-title.selected.details-open {
     1311        border-bottom-color: #f5f5f5;
     1312    border-left-color: #f5f5f5;
     1313        background: #f5f5f5;
     1314}
     1315
     1316.control-panel-themes .favorites-form.filter-details label {
     1317        padding-bottom: 6px;
     1318        display: inline-block;
     1319}
     1320
     1321.control-panel-themes .filter-details .filter-group {
     1322        float: none;
     1323        width: 100%;
    10711324        background: transparent;
    1072         display: block;
     1325        border: none;
     1326        padding: 0;
     1327        box-shadow: none;
    10731328}
    10741329
    1075 .customize-control.customize-control-theme {
    1076         margin-bottom: 8px;
     1330.control-panel-themes .filter-details .filter-group legend button {
     1331        padding: 18px 15px 8px 10px;
     1332        line-height: 14px;
     1333        border-bottom: 1px solid #ddd;
     1334        width: 100%;
     1335        text-align: left;
    10771336}
    10781337
     1338.control-panel-themes .filter-details .filter-group legend {
     1339        position: relative;
     1340        top: 0;
     1341        width: 100%;
     1342}
     1343
     1344.control-panel-themes .filter-details .filter-group legend button:after {
     1345        content: "\f140";
     1346        font: 20px/1 dashicons;
     1347        position: absolute;
     1348        bottom: 6px;
     1349        right: 5px;
     1350}
     1351
     1352.control-panel-themes .filter-details .filter-group legend button:hover,
     1353.control-panel-themes .filter-details .filter-group legend button:focus {
     1354        color: #0073aa;
     1355        border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
     1356        outline: none;
     1357        box-shadow: none;
     1358}
     1359
     1360.control-panel-themes .filter-details .filter-group legend button.open:after {
     1361        content: "\f142";
     1362}
     1363
     1364.control-panel-themes .filter-details .filter-group .filter-group-feature {
     1365        display: none;
     1366        margin: 0;
     1367}
     1368
     1369.control-panel-themes .filter-details .filter-group-feature label {
     1370        border: 1px solid #ddd;
     1371        border-top: 0;
     1372        background: #fff;
     1373        color: #555d66;
     1374        margin: 0;
     1375        padding: 12px 10px 12px 34px;
     1376        width: calc(100% - 46px);
     1377        line-height: 16px;
     1378        font-weight: 600;
     1379}
     1380
     1381.control-panel-themes .filter-details .filter-group-feature input {
     1382        position: absolute;
     1383        margin: 12px 10px;
     1384}
     1385
     1386.control-panel-themes .filter-details .filter-group-feature label:hover {
     1387        color: #0073aa;
     1388}
     1389
    10791390#customize-theme-controls .themes.accordion-section-content {
    10801391        position: relative;
    10811392        left: 0;
     
    10831394        width: 100%;
    10841395}
    10851396
    1086 .wp-customizer .theme-browser .themes {
    1087         padding-bottom: 8px;
     1397.loading .customize-themes-section .spinner {
     1398        display: block;
     1399        visibility: visible;
     1400        position: relative;
     1401        clear: both;
     1402        width: 20px;
     1403        height: 20px;
     1404        left: calc(50% - 10px);
     1405        float: none;
     1406        margin-top: 50px;
    10881407}
    10891408
    1090 .wp-customizer .theme-browser .theme {
     1409.customize-themes-section .filter-drawer {
     1410        border-top: none;
     1411        display: block;
     1412        background: transparent;
     1413        padding-top: 5px;
     1414}
     1415
     1416.customize-themes-section .clear-filters {
     1417        margin-left: 8px;
     1418        display: none;
     1419}
     1420
     1421.customize-themes-section .no-themes {
     1422        display: none;
     1423}
     1424
     1425.themes-section-installed_themes .theme .notice-success {
     1426        display: none; /* Hide "installed" notice on installed themes tab. */
     1427}
     1428
     1429.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
     1430        margin: 0 0 0 8px;
     1431}
     1432
     1433.customize-control-theme .theme {
     1434        width: 100%;
    10911435        margin: 0;
    1092         width: 100%;
    10931436}
    10941437
     1438.customize-control.customize-control-theme { /* override most properties on .customize-control */
     1439        box-sizing: border-box;
     1440        width: 18.4%;
     1441        margin: 0 2% 2% 0;
     1442        padding: 0;
     1443        clear: none;
     1444}
     1445
     1446/* 5 columns above 2100px */
     1447@media screen and (min-width: 2101px) {
     1448        .customize-control.customize-control-theme:nth-child(5n) {
     1449                margin-right: 0;
     1450        }
     1451}
     1452
     1453/* 4 columns up to 2100px */
     1454@media screen and (min-width: 1601px) and (max-width: 2100px) {
     1455        .customize-control.customize-control-theme {
     1456                width: 23.5%;
     1457        }
     1458
     1459        .customize-control.customize-control-theme:nth-child(4n) {
     1460                margin-right: 0;
     1461        }
     1462}
     1463
     1464/* 3 columns up to 1600px */
     1465@media screen and (min-width: 1201px) and (max-width: 1600px) {
     1466        .customize-control.customize-control-theme {
     1467                width: 32%;
     1468        }
     1469
     1470        .customize-control.customize-control-theme:nth-child(3n) {
     1471                margin-right: 0;
     1472        }
     1473}
     1474
     1475/* 2 columns up to 1200px */
     1476@media screen and (min-width: 851px) and (max-width: 1200px) {
     1477        .customize-control.customize-control-theme {
     1478                width: 49%;
     1479        }
     1480
     1481        .customize-control.customize-control-theme:nth-child(even) {
     1482                margin-right: 0;
     1483        }
     1484}
     1485
     1486/* 1 column up to 850 px */
     1487@media screen and (max-width: 850px) {
     1488        .customize-control.customize-control-theme {
     1489                width: 100%;
     1490                margin: 0 0 3% 0;
     1491        }
     1492}
     1493
     1494.wp-customizer .theme-browser .themes {
     1495        padding-bottom: 8px;
     1496}
     1497
    10951498.wp-customizer .theme-browser .theme .theme-actions {
    1096         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    10971499        opacity: 1;
    10981500}
    10991501
     
    11121514        width: 100%;
    11131515}
    11141516
    1115 .control-section-themes .accordion-section-title:after,
    1116 .customize-themes-panel .accordion-section-title:after {
    1117         display: none;
    1118 }
    1119 
    1120 .customize-themes-panel.control-panel-content {
    1121         border-top: 1px solid #ddd;
    1122 }
    1123 
    11241517/* Details View */
    11251518.wp-customizer .theme-overlay {
    11261519        display: none;
     
    11351528        z-index: 109;
    11361529}
    11371530
     1531/* Avoid a z-index war by resetting elements that should be under the overlay.
     1532   This is likely required because of the way that sections and panels are positioned. */
     1533.wp-customizer.modal-open #customize-header-actions,
     1534.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
     1535.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
     1536        z-index: -1;
     1537}
     1538
    11381539.wp-customizer .theme-overlay .theme-backdrop {
    11391540        background: rgba( 238, 238, 238, 0.75 );
    11401541        position: fixed;
     
    11411542        z-index: 110;
    11421543}
    11431544
     1545.wp-customizer .theme-overlay .star-rating {
     1546        float: left;
     1547        margin-right: 8px;
     1548}
     1549
     1550.wp-customizer .theme-rating .num-ratings {
     1551        line-height: 20px;
     1552}
     1553
    11441554.wp-customizer .theme-overlay .theme-wrap {
    11451555        left: 90px;
    11461556        right: 90px;
     
    11471557        top: 45px;
    11481558        bottom: 45px;
    11491559        z-index: 120;
    1150         max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
    11511560}
    11521561
    11531562.wp-customizer .theme-overlay .theme-actions {
    1154         text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
     1563        text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
     1564    padding: 10px 15px;
    11551565}
    11561566
    1157 .ie8 .wp-customizer .theme-overlay .theme-header,
    1158 .ie8 .wp-customizer .theme-overlay .theme-about,
    1159 .ie8 .wp-customizer .theme-overlay .theme-actions {
    1160         position: static;
     1567.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
     1568        margin-left: 8px;
    11611569}
    11621570
     1571.control-panel-themes .theme-actions .delete-theme {
     1572        left: 15px; /* these override themes.css on mobile */
     1573        right: auto;
     1574        bottom: auto;
     1575        position: absolute;
     1576}
     1577
     1578.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
     1579        overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
     1580}
     1581
     1582
    11631583/* Small Screens */
    11641584@media (max-width:850px), (max-height:472px) {
    11651585        .wp-customizer .theme-overlay .theme-wrap {
  • src/wp-admin/css/themes.css

     
    570570        float: left;
    571571        margin: 0 30px 0 0;
    572572        width: 55%;
    573         max-width: 880px;
     573        max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
    574574        text-align: center;
    575575}
    576576
  • src/wp-admin/includes/theme.php

     
    606606 * @since 4.2.0
    607607 */
    608608function customize_themes_print_templates() {
    609         $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
     609        $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
     610        $active_url  = esc_url( remove_query_arg( 'theme', $current_url ) );
     611        $preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
    610612        $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
    611613        ?>
    612614        <script type="text/html" id="tmpl-customize-themes-details-view">
     
    619621                        </div>
    620622                        <div class="theme-about wp-clearfix">
    621623                                <div class="theme-screenshots">
    622                                 <# if ( data.screenshot[0] ) { #>
     624                                <# if ( data.screenshot && data.screenshot[0] ) { #>
    623625                                        <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
    624626                                <# } else { #>
    625627                                        <div class="screenshot blank"></div>
     
    632634                                        <# } #>
    633635                                        <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
    634636                                        <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
     637
     638                                        <# if ( data.stars && 0 != data.num_ratings ) { #>
     639                                                <div class="theme-rating">
     640                                                        {{{ data.stars }}}
     641                                                        <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
     642                                                </div>
     643                                        <# } #>
     644
     645                                        <# if ( data.hasUpdate ) { #>
     646                                                <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
     647                                                        <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
     648                                                        {{{ data.update }}}
     649                                                </div>
     650                                        <# } #>
     651
    635652                                        <p class="theme-description">{{{ data.description }}}</p>
    636653
    637654                                        <# if ( data.parent ) { #>
    638655                                                <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
    639656                                        <# } #>
    640 
    641657                                        <# if ( data.tags ) { #>
    642                                                 <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
     658                                                <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
    643659                                        <# } #>
    644660                                </div>
    645661                        </div>
    646662
    647                         <# if ( ! data.active ) { #>
    648                                 <div class="theme-actions">
    649                                         <div class="inactive-theme">
    650                                                 <?php
    651                                                 /* translators: %s: Theme name */
    652                                                 $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
    653                                                 ?>
    654                                                 <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>
    655                                         </div>
    656                                 </div>
    657                         <# } #>
     663                        <div class="theme-actions">
     664                                <# if ( data.active ) { #>
     665                                        <?php
     666                                        /* translators: %s: Theme name */
     667                                        $aria_label = sprintf( __( 'Customize %s' ), '{{ data.name }}' );
     668                                        ?>
     669                                        <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Customize' ); ?></a>
     670                                <# } else if ( 'installed' === data.type ) { #>
     671                                        <?php if ( current_user_can( 'delete_themes' ) ) { ?>
     672                                                <# if ( data.actions && data.actions['delete'] ) { #>
     673                                                        <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
     674                                                <# } #>
     675                                        <?php } ?>
     676                                        <button type="button" class="button button-primary preview-theme" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></span>
     677                                <# } else { #>
     678                                        <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
     679                                        <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}" data-previewurl="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Install & Preview' ); ?></button>
     680                                <# } #>
     681                        </div>
    658682                </div>
    659683        </script>
    660684        <?php
  • src/wp-admin/js/customize-controls.js

     
    22(function( exports, $ ){
    33        var Container, focus, normalizedTransitionendEventName, api = wp.customize;
    44
     5        window.pagenow = 'customize'; // Needed for updates.js to function properly.
     6
    57        /**
    68         * A Customizer Setting.
    79         *
     
    866868        /**
    867869         * wp.customize.ThemesSection
    868870         *
    869          * Custom section for themes that functions similarly to a backwards panel,
    870          * and also handles the theme-details view rendering and navigation.
     871         * Custom section for themes that loads themes by category, and also
     872         * handles the theme-details view rendering and navigation.
    871873         *
    872874         * @constructor
    873875         * @augments wp.customize.Section
     
    879881                template: '',
    880882                screenshotQueue: null,
    881883                $window: $( window ),
     884                loaded: 0,
     885                loading: false,
     886                fullyLoaded: false,
     887                term: '',
     888                filterContainer: $(),
    882889
    883890                /**
    884                  * @since 4.2.0
     891                 * Embed the section in the DOM when the themes panel is ready.
     892                 *
     893                 * Insert the section before the themes container. Assume that a themes section is within a panel, but not necessarily the themes panel.
     894                 *
     895                 * @since 4.7.0
    885896                 */
    886                 initialize: function () {
    887                         this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
    888                         return api.Section.prototype.initialize.apply( this, arguments );
     897                embed: function () {
     898                        var inject,
     899                                section = this,
     900                                container = $( '#customize-theme-controls' );
     901
     902                        // Watch for changes to the panel state
     903                        inject = function ( panelId ) {
     904                                var parentContainer;
     905                                api.panel( panelId, function ( panel ) {
     906                                        // The panel has been registered, wait for it to become ready/initialized
     907                                        panel.deferred.embedded.done( function () {
     908                                                parentContainer = panel.contentContainer;
     909                                                if ( ! section.headContainer.parent().is( parentContainer ) ) {
     910                                                        parentContainer.find( '.customize-themes-full-container-container' ).before( section.headContainer );
     911                                                }
     912                                                if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
     913                                                        container.append( section.contentContainer );
     914                                                }
     915                                                section.deferred.embedded.resolve();
     916                                        });
     917                                } );
     918                        };
     919                        section.panel.bind( inject );
     920                        inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
    889921                },
    890922
    891923                /**
     
    918950                                }
    919951                        });
    920952
    921                         _.bindAll( this, 'renderScreenshots' );
     953                        _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked' );
    922954                },
    923955
    924956                /**
     
    925957                 * Override Section.isContextuallyActive method.
    926958                 *
    927959                 * Ignore the active states' of the contained theme controls, and just
    928                  * use the section's own active state instead. This ensures empty search
    929                  * results for themes to cause the section to become inactive.
     960                 * use the section's own active state instead. This prevents empty search
     961                 * results for theme sections from causing the section to become inactive.
    930962                 *
    931963                 * @since 4.2.0
    932964                 *
     
    942974                attachEvents: function () {
    943975                        var section = this;
    944976
    945                         // Expand/Collapse section/panel.
    946                         section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
    947                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    948                                         return;
    949                                 }
    950                                 event.preventDefault(); // Keep this AFTER the key filter above
     977                        section.filterContainer = $( '#accordion-section-' + section.id );
    951978
    952                                 if ( section.expanded() ) {
    953                                         section.collapse();
    954                                 } else {
     979                        // Expand section/panel. Only collapse when opening another section.
     980                        section.filterContainer.on( 'click', '.customize-themes-section-title', function( event ) {
     981                                // Open the section.
     982                                if ( ! section.expanded() ) {
    955983                                        section.expand();
    956984                                }
    957                         });
    958985
    959                         // Theme navigation in details view.
    960                         section.container.on( 'click keydown', '.left', function( event ) {
    961                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    962                                         return;
     986                                // Toggle filters.
     987                                if ( section.filterContainer.find( '.filter-details' ).length ) {
     988                                        section.filterContainer.find( '.customize-themes-section-title' ).toggleClass( 'details-open' )
     989                                                                                                         .attr('aria-expanded', function ( i, attr ) {
     990                                                                                                                return attr === 'true' ? 'false' : 'true';
     991                                                                                                         });
     992                                        section.filterContainer.find( '.filter-details' ).slideToggle( 180 );
    963993                                }
     994                        });
    964995
    965                                 event.preventDefault(); // Keep this AFTER the key filter above
     996                        // Preview installed themes.
     997                        section.container.on( 'click', '.theme-actions .preview-theme', function() {
     998                                var previewUrl = $( this ).data( 'previewUrl' );
    966999
     1000                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
     1001
     1002                                window.parent.location = previewUrl;
     1003                        });
     1004
     1005                        // Theme navigation in details view.
     1006                        section.container.on( 'click', '.left', function( event ) {
    9671007                                section.previousTheme();
    9681008                        });
    9691009
    970                         section.container.on( 'click keydown', '.right', function( event ) {
    971                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    972                                         return;
    973                                 }
    974 
    975                                 event.preventDefault(); // Keep this AFTER the key filter above
    976 
     1010                        section.container.on( 'click', '.right', function( event ) {
    9771011                                section.nextTheme();
    9781012                        });
    9791013
    980                         section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
    981                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    982                                         return;
    983                                 }
    984 
    985                                 event.preventDefault(); // Keep this AFTER the key filter above
    986 
     1014                        section.container.on( 'click', '.theme-backdrop, .close', function( event ) {
    9871015                                section.closeDetails();
    9881016                        });
    9891017
    9901018                        var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
    991                         section.container.on( 'input', '#themes-filter', function( event ) {
     1019
     1020                        // Only used when there is only one section - installed themes.
     1021                        $( '.control-panel-themes' ).on( 'input', '#themes-filter', function( event ) {
    9921022                                var count,
    9931023                                        term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
    9941024                                        controls = section.controls();
     
    10001030                                renderScreenshots();
    10011031
    10021032                                // Update theme count.
    1003                                 count = section.container.find( 'li.customize-control:visible' ).length;
    1004                                 section.container.find( '.theme-count' ).text( count );
     1033                                count = section.contentContainer.find( 'li.customize-control:visible' ).length;
     1034                                $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
    10051035                        });
    10061036
    1007                         // Pre-load the first 3 theme screenshots.
    1008                         api.bind( 'ready', function () {
    1009                                 _.each( section.controls().slice( 0, 3 ), function ( control ) {
    1010                                         var img, src = control.params.theme.screenshot[0];
    1011                                         if ( src ) {
    1012                                                 img = new Image();
    1013                                                 img.src = src;
     1037                        // Event listeners for queries with user-entered terms.
     1038                        if ( 'search' === section.params.action ) {
     1039                                var debounced = _.debounce( section.checkTerm, 500 ); // Wait until there is no input for 500 miliseconds to initiate a search.
     1040                                $( '.control-panel-themes' ).on( 'input', '#wp-filter-search-input', function() {
     1041                                        debounced( section );
     1042                                        if ( ! section.expanded() ) {
     1043                                                section.expand();
    10141044                                        }
    10151045                                });
     1046
     1047                                // Focus the input if the icon is clicked.
     1048                                section.filterContainer.find( '.search-form' ).on( 'click', function( e ) {
     1049                                        if ( ! $( e.currentTarget ).hasClass( 'wp-filter-search' ) ) {
     1050                                                $( e.currentTarget ).find( '.wp-filter-search' ).focus();
     1051                                        }
     1052                                });
     1053                        } else if ( 'favorites' === section.params.action ) {
     1054                                section.container.on( 'click', '.favorites-form-submit', function() {
     1055                                        section.checkTerm( section );
     1056                                });
     1057                                section.container.on( 'keydown', '#wporg-username-input', function( e ) {
     1058                                        if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
     1059                                                return;
     1060                                        }
     1061                                        section.checkTerm( section );
     1062                                });
     1063                        } else if ( 'feature_filter' === section.params.action ) {
     1064                                section.container.on( 'click', '.filter-group input', function() {
     1065                                        section.filtersChecked();
     1066                                        section.checkTerm( section );
     1067                                });
     1068
     1069                                // Toggle feature filter sections.
     1070                                section.container.on( 'click', '.filter-group legend button', function( e ) {
     1071                                        $( e.currentTarget ).toggleClass( 'open' ).attr('aria-expanded', function ( i, attr ) {
     1072                                                                return attr === 'true' ? 'false' : 'true';
     1073                                                            })
     1074                                                            .parent().next( '.filter-group-feature' ).slideToggle( 180 );
     1075                                });
     1076                        }
     1077
     1078                        // Move section controls to the themes area.
     1079                        api.bind( 'ready', function () {
     1080                                section.contentContainer = section.container.find( '.customize-themes-section' );
     1081                                section.contentContainer.appendTo( $( '.customize-themes-full-container' ) );
     1082                                section.container.add( section.filterContainer );
    10161083                        });
    10171084                },
    10181085
     
    10371104                        }
    10381105
    10391106                        // Note: there is a second argument 'args' passed
    1040                         var panel = this,
    1041                                 section = panel.contentContainer,
    1042                                 overlay = section.closest( '.wp-full-overlay' ),
    1043                                 container = section.closest( '.wp-full-overlay-sidebar-content' ),
    1044                                 customizeBtn = section.find( '.customize-theme' ),
    1045                                 changeBtn = panel.headContainer.find( '.change-theme' );
     1107                        var section = this,
     1108                                container = section.contentContainer.closest( '.customize-themes-full-container' );
    10461109
    1047                         if ( expanded && ! section.hasClass( 'current-panel' ) ) {
     1110                        if ( expanded ) {
     1111
     1112                                if ( -1 !== $.inArray( section.params.action, [ 'search', 'favorites', 'feature_filter' ] ) && '' === section.term ) {
     1113                                        section.collapse(); // Note that the current section hasn't been collapsed yet, so this is all we need to do to do nothing.
     1114                                        return; // Don't expand to an empty section that can't load any themes.
     1115                                }
     1116
     1117                                // Load controls if none are loaded yet.
     1118                                if ( 0 === section.loaded ) {
     1119                                        section.loadControls();
     1120                                }
     1121
    10481122                                // Collapse any sibling sections/panels
    10491123                                api.section.each( function ( otherSection ) {
    1050                                         if ( otherSection !== panel ) {
     1124                                        if ( otherSection !== section ) {
    10511125                                                otherSection.collapse( { duration: args.duration } );
    10521126                                        }
    10531127                                });
    1054                                 api.panel.each( function ( otherPanel ) {
    1055                                         otherPanel.collapse( { duration: 0 } );
    1056                                 });
    10571128
    1058                                 panel._animateChangeExpanded( function() {
    1059                                         changeBtn.attr( 'tabindex', '-1' );
    1060                                         customizeBtn.attr( 'tabindex', '0' );
     1129                                section.contentContainer.addClass( 'current-section' );
     1130                                container.scrollTop();
     1131                                section.filterContainer.find( '.customize-themes-section-title' ).addClass( 'selected' );
    10611132
    1062                                         customizeBtn.focus();
    1063                                         section.css( 'top', '' );
    1064                                         container.scrollTop( 0 );
     1133                                container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
     1134                                container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
    10651135
    1066                                         if ( args.completeCallback ) {
    1067                                                 args.completeCallback();
    1068                                         }
    1069                                 } );
     1136                                if ( args.completeCallback ) {
     1137                                        args.completeCallback();
     1138                                }
     1139                                section.updateCount(); // Show this section's count.
     1140                        } else {
     1141                                section.contentContainer.removeClass( 'current-section' );
    10701142
    1071                                 overlay.addClass( 'in-themes-panel' );
    1072                                 section.addClass( 'current-panel' );
     1143                                // Always hide, even if they don't exist or are already hidden.
     1144                                section.filterContainer.find( '.customize-themes-section-title' ).removeClass( 'selected details-open' ).attr( 'aria-expanded', 'false' );
     1145                                section.filterContainer.find( '.filter-details' ).slideUp( 180 );
    10731146
    1074                         } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
    1075                                 panel._animateChangeExpanded( function() {
    1076                                         changeBtn.attr( 'tabindex', '0' );
    1077                                         customizeBtn.attr( 'tabindex', '-1' );
     1147                                container.off( 'scroll' );
    10781148
    1079                                         changeBtn.focus();
    1080                                         section.css( 'top', '' );
     1149                                if ( args.completeCallback ) {
     1150                                        args.completeCallback();
     1151                                }
     1152                        }
     1153                },
    10811154
    1082                                         if ( args.completeCallback ) {
    1083                                                 args.completeCallback();
     1155                /**
     1156                 * Return the section's content element without detachng from the parent.
     1157                 *
     1158                 * @since 4.7.0
     1159                 */
     1160                getContent: function() {
     1161                        return this.container.find( '.control-section-content' );
     1162                },
     1163
     1164                /**
     1165                 * Load theme data via ajax and add themes to the section as controls.
     1166                 *
     1167                 * @since 4.7.0
     1168                 */
     1169                loadControls: function() {
     1170                        var section = this, params, page, request, search;
     1171
     1172                        if ( section.loading ) {
     1173                                return; // We're already loading a batch of themes.
     1174                        }
     1175
     1176                        // Parameters for every API query. Additional params are set in PHP.
     1177                        page = Math.ceil( section.loaded / 100 ) + 1;
     1178                        params = {
     1179                                'customize-themes-nonce': api.settings.nonce['customize-themes'],
     1180                                'wp_customize': 'on',
     1181                                'theme_action': section.params.action,
     1182                                'customized_theme': api.settings.theme.stylesheet,
     1183                                'page': page
     1184                        }
     1185
     1186                        // Add fields for special request actions.
     1187                        if ( 'search' === section.params.action ) {
     1188                                if ( '' === section.term ) {
     1189                                        return;
     1190                                } else {
     1191                                        params.search = section.term;
     1192                                }
     1193                        } else if ( 'favorites' === section.params.action ) {
     1194                                if ( '' === section.term ) {
     1195                                        return;
     1196                                } else {
     1197                                        params.user = section.term;
     1198                                }
     1199                        } else if ( 'feature_filter' === section.params.action ) {
     1200                                if ( '' === section.term ) {
     1201                                        return;
     1202                                } else {
     1203                                        params.tags = section.term;
     1204                                }
     1205                        }
     1206
     1207                        // Load themes.
     1208                        section.headContainer.closest( '.wp-full-overlay' ).addClass( 'loading' );
     1209                        section.loading = true;
     1210                        section.container.find( '.no-themes' ).hide();
     1211                        request = wp.ajax.post( 'customize-load-themes', params );
     1212                        request.done(function( data ) {
     1213                                var themes = data.themes,
     1214                                    themeControl, newThemeControls;
     1215                                if ( 0 !== themes.length ) {
     1216                                        newThemeControls = new Array();
     1217                                        // Add controls for each theme.
     1218                                        _.each( themes, function ( theme ) {
     1219                                                customizeId = section.params.action + '_theme_' + theme.id;
     1220                                                themeControl = new api.controlConstructor.theme( customizeId, {
     1221                                                        params: {
     1222                                                                type: 'theme',
     1223                                                                content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
     1224                                                                section: section.params.id,
     1225                                                                active: true,
     1226                                                                theme: theme,
     1227                                                                priority: section.loaded + 1
     1228                                                        },
     1229                                                        previewer: api.previewer
     1230                                                } );
     1231
     1232                                                api.control.add( customizeId, themeControl );
     1233                                                newThemeControls.push( themeControl );
     1234                                                section.loaded = section.loaded + 1;
     1235                                                return;
     1236                                        });
     1237
     1238                                        if ( 1 === page ) {
     1239                                                // Pre-load the first 3 theme screenshots.
     1240                                                _.each( section.controls().slice( 0, 3 ), function ( control ) {
     1241                                                        var img, src = control.params.theme.screenshot[0];
     1242                                                        if ( src ) {
     1243                                                                img = new Image();
     1244                                                                img.src = src;
     1245                                                        }
     1246                                                });
     1247                                                if ( 'search' === section.params.action ) {
     1248                                                        wp.a11y.speak( api.settings.l10n.themeSearchResults.replace( '%d', data.info.results ) );
     1249                                                }
     1250                                        } else {
     1251                                                Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
    10841252                                        }
    1085                                 } );
     1253                                        _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
    10861254
    1087                                 overlay.removeClass( 'in-themes-panel' );
    1088                                 section.removeClass( 'current-panel' );
     1255                                        if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
     1256                                                section.fullyLoaded = true;
     1257                                        }
     1258                                } else {
     1259                                        if ( 0 === section.loaded ) {
     1260                                                section.container.find( '.no-themes' ).show();
     1261                                                wp.a11y.speak( section.container.find( '.no-themes' ).text() );
     1262                                        } else {
     1263                                                section.fullyLoaded = true;
     1264                                        }
     1265                                }
     1266                                if ( 'installed' === section.params.action ) {
     1267                                        section.updateCount();
     1268                                } else {
     1269                                        section.updateCount( data.info.results );
     1270                                }
     1271                                section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
     1272
     1273                                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
     1274                                section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
     1275                                section.loading = false;
     1276                        });
     1277                        request.fail(function( data ) {
     1278                                if ( 'undefined' === typeof data ) {
     1279                                        section.container.find( '.unexpected-error' ).show();
     1280                                        wp.a11y.speak( section.container.find( '.unexpected-error' ).text() );
     1281                                } else if ( typeof console !== 'undefined' && console.error ) {
     1282                                        console.error( data );
     1283                                }
     1284
     1285                                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
     1286                                section.headContainer.closest( '.wp-full-overlay' ).removeClass( 'loading' );
     1287                                section.loading = false;
     1288                        });
     1289                },
     1290
     1291                /**
     1292                 * Determines whether more themes should be loaded, and loads them.
     1293                 *
     1294                 * @since 4.7.0
     1295                 */
     1296                loadMore: function() {
     1297                        var section = this, container, bottom, threshold, page;
     1298                        if ( ! section.fullyLoaded && ! section.loading ) {
     1299                                container = section.container.closest( '.customize-themes-full-container' );
     1300
     1301                                bottom = container.scrollTop() + container.height();
     1302                                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.
     1303
     1304                                if ( bottom > threshold ) {
     1305                                        section.loadControls();
     1306                                }
    10891307                        }
    10901308                },
    10911309
    10921310                /**
     1311                 * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
     1312                 *
     1313                 * @since 4.7.0
     1314                 *
     1315                 * @param api.ThemesSection section The current theme section, passed through the debouncer.
     1316                 */
     1317                checkTerm: function( section ) {
     1318                        var newTerm, filteringBy;
     1319
     1320                        // Find term.
     1321                        if ( 'search' === section.params.action ) {
     1322                                newTerm = $( '#wp-filter-search-input' ).val();
     1323                        } else if ( 'favorites' === section.params.action ) {
     1324                                newTerm = $( '#wporg-username-input' ).val();
     1325                        } else if ( 'feature_filter' === section.params.action ) {
     1326                                newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
     1327                                if ( '' === newTerm ) {
     1328                                        return;
     1329                                }
     1330                        } else {
     1331                                return;
     1332                        }
     1333
     1334                        if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
     1335                                return;
     1336                        }
     1337                        // Clear the controls in the section.
     1338                        _.each( section.controls(), function( control ) {
     1339                                control.container.remove();
     1340                                api.control.remove( control.id );
     1341                        });
     1342                        section.loaded = 0;
     1343                        section.fullyLoaded = false;
     1344                        section.screenshotQueue = null;
     1345
     1346                        if ( '' !== newTerm ) { // Empty term should not show any results.
     1347                                // Run a new query, with loadControls handling paging, etc.
     1348                                section.term = newTerm;
     1349                                section.loadControls();
     1350                                if ( ! section.expanded() ) {
     1351                                        section.expand(); // Expand the section if it isn't expanded.
     1352                                }
     1353                        }
     1354                },
     1355
     1356                /**
     1357                 * Check for filters checked in the feature filter list.
     1358                 *
     1359                 * @since 4.7.0
     1360                 */
     1361                filtersChecked: function() {
     1362                        var section = this,
     1363                            items = section.container.find( '.filter-group' ).find( ':checkbox' ),
     1364                            tags = [];
     1365
     1366                        if ( 'feature_filter' !== section.params.action ) {
     1367                                return false;
     1368                        }
     1369
     1370                        _.each( items.filter( ':checked' ), function( item ) {
     1371                                tags.push( $( item ).prop( 'value' ) );
     1372                        });
     1373
     1374                        // When no filters are checked, restore initial state and return
     1375                        if ( tags.length === 0 ) {
     1376                                section.term = '';
     1377                        } else {
     1378                                section.term = tags;
     1379                        }
     1380                },
     1381
     1382                /**
    10931383                 * Render control's screenshot if the control comes into view.
    10941384                 *
    10951385                 * @since 4.2.0
     
    10971387                renderScreenshots: function( ) {
    10981388                        var section = this;
    10991389
    1100                         // Fill queue initially.
    1101                         if ( section.screenshotQueue === null ) {
    1102                                 section.screenshotQueue = section.controls();
     1390                        // Fill queue initially, or check for more if empty.
     1391                        if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
     1392                                // Add controls that haven't had their screenshots rendered.
     1393                                section.screenshotQueue = _.filter( section.controls(), function( control ) {
     1394                                        return ! control.screenshotRendered;
     1395                                });
    11031396                        }
    11041397
    1105                         // Are all screenshots rendered?
     1398                        // Are all screenshots rendered (for now)?
    11061399                        if ( ! section.screenshotQueue.length ) {
    11071400                                return;
    11081401                        }
     
    11381431                },
    11391432
    11401433                /**
     1434                 * Update the number of themes in the section.
     1435                 *
     1436                 * @since 4.7.0
     1437                 */
     1438                updateCount: function ( count ) {
     1439                        if ( ! count ) {
     1440                                count = this.loaded;
     1441                        }
     1442
     1443                        var displayed = this.container.closest( '.control-panel-content' ).find( '.themes-displayed' ),
     1444                            countEl = this.container.closest( '.control-panel-content' ).find( '.theme-count' );
     1445
     1446                        if ( 0 === count ) {
     1447                                countEl.text( count );
     1448                        } else {
     1449                                // Animate the count change for emphasis.
     1450                                displayed.fadeOut( 180, function() {
     1451                                        countEl.text( count );
     1452                                        displayed.fadeIn( 180 );
     1453                                } );
     1454                        }
     1455                },
     1456
     1457                /**
    11411458                 * Advance the modal to the next theme.
    11421459                 *
    11431460                 * @since 4.2.0
     
    11571474                 * @since 4.2.0
    11581475                 */
    11591476                getNextTheme: function () {
    1160                         var control, next;
    1161                         control = api.control( 'theme_' + this.currentTheme );
     1477                        var section = this, control, next;
     1478                        control = api.control( section.params.action + '_theme_' + this.currentTheme );
    11621479                        next = control.container.next( 'li.customize-control-theme' );
    11631480                        if ( ! next.length ) {
    11641481                                return false;
    11651482                        }
    1166                         next = next[0].id.replace( 'customize-control-', '' );
     1483                        next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
    11671484                        control = api.control( next );
    11681485
    11691486                        return control.params.theme;
     
    11891506                 * @since 4.2.0
    11901507                 */
    11911508                getPreviousTheme: function () {
    1192                         var control, previous;
    1193                         control = api.control( 'theme_' + this.currentTheme );
     1509                        var section = this, control, previous;
     1510                        control = api.control( section.params.action + '_theme_' + this.currentTheme );
    11941511                        previous = control.container.prev( 'li.customize-control-theme' );
    11951512                        if ( ! previous.length ) {
    11961513                                return false;
    11971514                        }
    1198                         previous = previous[0].id.replace( 'customize-control-', '' );
     1515                        previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
    11991516                        control = api.control( previous );
    12001517
    12011518                        return control.params.theme;
     
    12431560                closeDetails: function () {
    12441561                        $( 'body' ).removeClass( 'modal-open' );
    12451562                        this.overlay.fadeOut( 'fast' );
    1246                         api.control( 'theme_' + this.currentTheme ).focus();
     1563                        api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus();
    12471564                },
    12481565
    12491566                /**
     
    13231640                        }
    13241641                        if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
    13251642                                container.append( panel.contentContainer );
    1326                                 panel.renderContent();
    13271643                        }
     1644                        panel.renderContent();
    13281645
    13291646                        panel.deferred.embedded.resolve();
    13301647                },
     
    15131830                }
    15141831        });
    15151832
     1833
    15161834        /**
     1835         * wp.customize.ThemesPanel
     1836         *
     1837         * Custom section for themes that displays without the customize preview.
     1838         *
     1839         * @constructor
     1840         * @augments wp.customize.Panel
     1841         * @augments wp.customize.Container
     1842         */
     1843        api.ThemesPanel = api.Panel.extend({
     1844                installingThemes: [],
     1845
     1846                /**
     1847                 * @since 4.7.0
     1848                 */
     1849                attachEvents: function () {
     1850                        var panel = this;
     1851
     1852                        // Attach regular panel events.
     1853                        api.Panel.prototype.attachEvents.apply( this );
     1854
     1855                        // Collapse panel to customize the current theme.
     1856                        panel.contentContainer.on( 'click', '.customize-theme', function( event ) {
     1857                                panel.collapse();
     1858                        });
     1859
     1860                        // Toggle between filtering and browsing themes on mobile.
     1861                        panel.contentContainer.on( 'click', '.see-themes, .filter-themes', function( event ) {
     1862                                $( '.wp-full-overlay' ).toggleClass( 'showing-themes' );
     1863                        });
     1864
     1865                        // Hide unsaved changes notice on save.
     1866                        api.bind( 'saved', function() {
     1867                                panel.container.find( '.customize-themes-unsaved-changes' ).hide();
     1868                        });
     1869
     1870                        // Save & publish customized settings.
     1871                        panel.contentContainer.on( 'click', '#customize-themes-save', function() {
     1872                                $( '#save' ).click(); // Trigger customizer save.
     1873                                panel.container.find( '.customize-themes-unsaved-changes' ).hide();
     1874                                api.section( 'installed_themes' ).focus();
     1875                        });
     1876
     1877                        // Install (and maybe preview) a theme.
     1878                        panel.contentContainer.on( 'click', '.theme-install', function( event ) {
     1879                                panel.installTheme( event );
     1880                        });
     1881
     1882                        // Update a theme. Theme cards have the class, the details modal has the id.
     1883                        panel.contentContainer.on( 'click', '.update-theme, #update-theme', function( event ) {
     1884                                // #update-theme is a link.
     1885                                event.preventDefault();
     1886                                event.stopPropagation();
     1887
     1888                                panel.updateTheme( event );
     1889                        });
     1890
     1891                        // Delete a theme.
     1892                        panel.contentContainer.on( 'click', '.delete-theme', function( event ) {
     1893                                panel.deleteTheme( event );
     1894                        });
     1895
     1896                        _.bindAll( this, 'installTheme', 'updateTheme' );
     1897                },
     1898
     1899                /**
     1900                 * Update UI to reflect expanded state
     1901                 *
     1902                 * @since 4.7.0
     1903                 *
     1904                 * @param {Boolean}  expanded
     1905                 * @param {Object}   args
     1906                 * @param {Boolean}  args.unchanged
     1907                 * @param {Callback} args.completeCallback
     1908                 */
     1909                onChangeExpanded: function ( expanded, args ) {
     1910
     1911                        // Expand/collapse the panel normally.
     1912                        api.Panel.prototype.onChangeExpanded.apply( this, [ expanded, args ] );
     1913
     1914                        // Immediately call the complete callback if there were no changes
     1915                        if ( args.unchanged ) {
     1916                                if ( args.completeCallback ) {
     1917                                        args.completeCallback();
     1918                                }
     1919                                return;
     1920                        }
     1921
     1922                        // Note: there is a second argument 'args' passed
     1923                        var panel = this,
     1924                                overlay = panel.headContainer.closest( '.wp-full-overlay' );
     1925
     1926                        if ( expanded ) {
     1927                                overlay.addClass( 'in-themes-panel' ).addClass( 'showing-themes' )
     1928                                       .delay( 200 ).find( '.customize-themes-full-container' ).addClass( 'animate' );
     1929
     1930                                if ( false === api.state( 'saved' ).get() ) {
     1931                                        panel.container.find( '.customize-themes-unsaved-changes' ).show();
     1932                                }
     1933
     1934                                // Automatically open the installed themes section.
     1935                                api.section( 'installed_themes' ).expand();
     1936                        } else {
     1937                                overlay.removeClass( 'in-themes-panel' )
     1938                                       .find( '.customize-themes-full-container' ).removeClass( 'animate' );
     1939                        }
     1940                },
     1941
     1942                /**
     1943                 * Install a theme via wp.updates.
     1944                 *
     1945                 * @since 4.7.0
     1946                 */
     1947                installTheme: function( event ) {
     1948                        var preview = false, previewUrl,
     1949                            slug = $( event.target ).data( 'slug' );
     1950
     1951                        if ( -1 !== $.inArray( this.installingThemes, slug ) ) {
     1952                                return; // Theme is already being installed.
     1953                        }
     1954
     1955                        wp.updates.maybeRequestFilesystemCredentials( event );
     1956
     1957                        $( document ).on( 'wp-theme-install-success', function( event, response ) {
     1958                                var theme = false, customizeId, themeControl;
     1959                                if ( preview ) {
     1960                                        window.parent.location = previewUrl;
     1961                                } else {
     1962                                        api.control.each( function( control ) {
     1963                                                if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
     1964                                                        theme = control.params.theme; // Used below to add theme control.
     1965                                                        control.rerenderAsInstalled( true );
     1966                                                }
     1967                                        });
     1968
     1969                                        // Don't add the same theme more than once.
     1970                                        if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) {
     1971                                                return;
     1972                                        }
     1973
     1974                                        // Add theme control to installed section.
     1975                                        theme.type = 'installed';
     1976                                        customizeId = 'installed_theme_' + theme.id;
     1977                                        themeControl = new api.controlConstructor.theme( customizeId, {
     1978                                                params: {
     1979                                                        type: 'theme',
     1980                                                        content: '<li id="customize-control-theme-installed_' + theme.id + '" class="customize-control customize-control-theme"></li>',
     1981                                                        section: 'installed_themes',
     1982                                                        active: true,
     1983                                                        theme: theme,
     1984                                                        priority: 0 // Add all newly-installed themes to the top.
     1985                                                },
     1986                                                previewer: api.previewer
     1987                                        } );
     1988
     1989                                        api.control.add( customizeId, themeControl );
     1990                                        api.control( customizeId ).container.trigger( 'render-screenshot' );
     1991
     1992                                        // Close the details modal if it's open to the installed theme.
     1993                                        api.section.each( function( section ) {
     1994                                                if ( 'themes' === section.params.type ) {
     1995                                                        if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
     1996                                                                section.closeDetails();
     1997                                                        }
     1998                                                }
     1999                                        });
     2000                                }
     2001                        } );
     2002
     2003                        this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
     2004                        wp.updates.installTheme( {
     2005                                slug: $( event.target ).data( 'slug' )
     2006                        } );
     2007
     2008                        // Also preview the theme as the event is triggered on Install & Preview.
     2009                        if ( $( event.target ).hasClass( 'preview' ) ) {
     2010                                preview = true;
     2011                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
     2012                                previewUrl = $( event.target ).data( 'previewurl' );
     2013                        }
     2014                },
     2015
     2016                /**
     2017                 * Update a theme via wp.updates.
     2018                 *
     2019                 * @since 4.7.0
     2020                 */
     2021                updateTheme: function( event ) {
     2022                        wp.updates.maybeRequestFilesystemCredentials( event );
     2023
     2024                        $( document ).on( 'wp-theme-update-success', function( event, response ) {
     2025                                // Rerender the control to reflect the update.
     2026                                api.control.each( function( control ) {
     2027                                        if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
     2028                                                control.params.theme.hasUpdate = false;
     2029                                                control.rerenderAsInstalled( true );
     2030                                        }
     2031                                });
     2032                        } );
     2033
     2034                        wp.updates.updateTheme( {
     2035                                slug: $( event.target ).closest( '.notice' ).data( 'slug' )
     2036                        } );
     2037                },
     2038
     2039                /**
     2040                 * Delete a theme via wp.updates.
     2041                 *
     2042                 * @since 4.7.0
     2043                 */
     2044                deleteTheme: function( event ) {
     2045                        var panel = this,
     2046                                theme = $( event.target ).data( 'slug' ),
     2047                            section = api.section( 'installed_themes' );
     2048
     2049                        event.preventDefault();
     2050
     2051                        // Confirmation dialog for deleting a theme.
     2052                        if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
     2053                                return;
     2054                        }
     2055
     2056                        wp.updates.maybeRequestFilesystemCredentials( event );
     2057
     2058                        $( document ).one( 'wp-theme-delete-success', function( event, response ) {
     2059                                var control = api.control( 'installed_theme_' + theme );
     2060
     2061                                // Remove theme control.
     2062                                control.container.remove();
     2063                                api.control.remove( control.id );
     2064
     2065                                // Update installed count.
     2066                                section.loaded = section.loaded - 1;
     2067                                section.updateCount();
     2068
     2069                                // Rerender any other theme controls as uninstalled.
     2070                                api.control.each( function( control ) {
     2071                                        if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
     2072                                                control.rerenderAsInstalled( false );
     2073                                        }
     2074                                });
     2075                        } );
     2076
     2077                        wp.updates.deleteTheme( {
     2078                                slug: theme
     2079                        } );
     2080
     2081                        // Close modal and focus the section.
     2082                        section.closeDetails();
     2083                        section.focus();
     2084                }
     2085
     2086        });
     2087
     2088
     2089        /**
    15172090         * A Customizer Control.
    15182091         *
    15192092         * A control provides a UI element that allows a user to modify a Customizer Setting.
     
    28313404        api.ThemeControl = api.Control.extend({
    28323405
    28333406                touchDrag: false,
    2834                 isRendered: false,
     3407                screenshotRendered: false,
    28353408
    28363409                /**
    2837                  * Defer rendering the theme control until the section is displayed.
    2838                  *
    28393410                 * @since 4.2.0
    28403411                 */
    2841                 renderContent: function () {
    2842                         var control = this,
    2843                                 renderContentArgs = arguments;
    2844 
    2845                         api.section( control.section(), function( section ) {
    2846                                 if ( section.expanded() ) {
    2847                                         api.Control.prototype.renderContent.apply( control, renderContentArgs );
    2848                                         control.isRendered = true;
    2849                                 } else {
    2850                                         section.expanded.bind( function( expanded ) {
    2851                                                 if ( expanded && ! control.isRendered ) {
    2852                                                         api.Control.prototype.renderContent.apply( control, renderContentArgs );
    2853                                                         control.isRendered = true;
    2854                                                 }
    2855                                         } );
    2856                                 }
    2857                         } );
    2858                 },
    2859 
    2860                 /**
    2861                  * @since 4.2.0
    2862                  */
    28633412                ready: function() {
    28643413                        var control = this;
    28653414
     
    28793428                                }
    28803429
    28813430                                // Prevent the modal from showing when the user clicks the action button.
    2882                                 if ( $( event.target ).is( '.theme-actions .button' ) ) {
     3431                                if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
    28833432                                        return;
    28843433                                }
    28853434
    2886                                 var previewUrl = $( this ).data( 'previewUrl' );
    2887 
    2888                                 $( '.wp-full-overlay' ).addClass( 'customize-loading' );
    2889 
    2890                                 window.parent.location = previewUrl;
    2891                         });
    2892 
    2893                         control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
    2894                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    2895                                         return;
    2896                                 }
    2897 
    2898                                 event.preventDefault(); // Keep this AFTER the key filter above
    2899 
    29003435                                api.section( control.section() ).showDetails( control.params.theme );
    29013436                        });
    29023437
     
    29073442                                if ( source ) {
    29083443                                        $screenshot.attr( 'src', source );
    29093444                                }
     3445                                control.screenshotRendered = true;
    29103446                        });
    29113447                },
    29123448
    29133449                /**
    2914                  * Show or hide the theme based on the presence of the term in the title, description, and author.
     3450                 * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
    29153451                 *
    29163452                 * @since 4.2.0
    29173453                 */
     
    29273463                        } else {
    29283464                                control.deactivate();
    29293465                        }
     3466                },
     3467
     3468                /**
     3469                 * Rerender the theme from its JS template with the installed type.
     3470                 *
     3471                 * @since 4.7.0
     3472                 */
     3473                rerenderAsInstalled: function( installed ) {
     3474                        var control = this, section;
     3475                        if ( installed ) {
     3476                                control.params.theme.type = 'installed';
     3477                        } else {
     3478                                section = api.section( control.params.section );
     3479                                control.params.theme.type = section.params.action;
     3480                        }
     3481                        control.renderContent(); // replaces existing content
     3482                        control.container.trigger( 'render-screenshot' );
    29303483                }
    29313484        });
    29323485
     
    34914044                background:    api.BackgroundControl,
    34924045                theme:         api.ThemeControl
    34934046        };
    3494         api.panelConstructor = {};
     4047        api.panelConstructor = {
     4048                themes: api.ThemesPanel
     4049        };
    34954050        api.sectionConstructor = {
    34964051                themes: api.ThemesSection
    34974052        };
     
    36094164
    36104165                // Sort the sections within each panel
    36114166                api.panel.each( function ( panel ) {
     4167                        if ( 'themes' === panel.id ) {
     4168                                return; // Don't reflow theme sections, as doing so moves them after the themes container.
     4169                        }
     4170                       
    36124171                        var sections = panel.sections(),
    36134172                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
    36144173                        rootNodes.push( panel );
     
    40864645                        // Collapse the most granular expanded object.
    40874646                        collapsedObject = expandedControls[0] || expandedSections[0] || expandedPanels[0];
    40884647                        if ( collapsedObject ) {
     4648                                if ( 'themes' === collapsedObject.params.type ) {
     4649                                        // Themes panel or section.
     4650                                        if ( $( 'body' ).hasClass( 'modal-open' ) ) {
     4651                                                collapsedObject.closeDetails();
     4652                                        } else {
     4653                                                // If we're collapsing a section, collapse the panel also.
     4654                                                wp.customize.panel( 'themes' ).collapse();
     4655                                        }
     4656                                        return;
     4657                                }
    40894658                                collapsedObject.collapse();
    40904659                                event.preventDefault();
    40914660                        }
  • src/wp-admin/js/updates.js

     
    179179                if ( $notice.length ) {
    180180                        $notice.replaceWith( $adminNotice );
    181181                } else {
    182                         $( '.wrap' ).find( '> h1' ).after( $adminNotice );
     182                        if ( 'customize' === pagenow ) {
     183                                $( '.customize-themes-notifications' ).append( $adminNotice );
     184                        } else {
     185                                $( '.wrap' ).find( '> h1' ).after( $adminNotice );
     186                        }
    183187                }
    184188
    185189                $document.trigger( 'wp-updates-notice-added' );
     
    907911                if ( 'themes-network' === pagenow ) {
    908912                        $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
    909913
     914                } else if ( 'customize' === pagenow ) {
     915                        // Update the theme details UI.
     916                        $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
     917
     918                        $notice.find( 'h3' ).remove();
     919
     920                        // Add the top-level UI, and update both.
     921                        $notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
     922                        $notice = $notice.addClass( 'updating-message' ).find( 'p' );
     923
    910924                } else {
    911925                        $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
    912926
     
    949963                        },
    950964                        $notice, newText;
    951965
     966                if ( 'customize' === pagenow ) {
     967                        $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
     968                }
     969
    952970                if ( 'themes-network' === pagenow ) {
    953971                        $notice = $theme.find( '.update-message' );
    954972
     
    10031021                        return;
    10041022                }
    10051023
     1024                if ( 'customize' === pagenow ) {
     1025                        $theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
     1026                }
     1027
    10061028                if ( 'themes-network' === pagenow ) {
    10071029                        $notice = $theme.find( '.update-message ' );
    10081030                } else {
     
    11391161                        return;
    11401162                }
    11411163
    1142                 if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
    1143                         $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
    1144                         $card   = $( '.install-theme-info' ).prepend( $message );
     1164                if ( 'customize' === pagenow ) {
     1165                        if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
     1166                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
     1167                                $card   = $( '.theme-overlay .theme-info' ).prepend( $message );
     1168                        } else {
     1169                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
     1170                                $card   = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
     1171                        }
     1172                        $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
    11451173                } else {
    1146                         $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
    1147                         $button = $card.find( '.theme-install' );
     1174                        if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
     1175                                $button = $( '.theme-install[data-slug="' + response.slug + '"]' );
     1176                                $card   = $( '.install-theme-info' ).prepend( $message );
     1177                        } else {
     1178                                $card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
     1179                                $button = $card.find( '.theme-install' );
     1180                        }
    11481181                }
    11491182
    11501183                $button
  • src/wp-includes/class-wp-customize-manager.php

     
    230230
    231231                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
    232232
     233                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
    233234                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
    234235                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
    235236                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
     
    289290
    290291                add_action( 'wp_ajax_customize_save',           array( $this, 'save' ) );
    291292                add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
     293                add_action( 'wp_ajax_customize-load-themes',    array( $this, 'load_themes_ajax' ) );
    292294
    293295                add_action( 'customize_register',                 array( $this, 'register_controls' ) );
    294296                add_action( 'customize_register',                 array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
     
    302304
    303305                // Export the settings to JS via the _wpCustomizeSettings variable.
    304306                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
     307
     308                // Add theme update notices.
     309                if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
     310                        require_once( ABSPATH . '/wp-admin/includes/update.php' );
     311                        add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
     312                }
    305313        }
    306314
    307315        /**
     
    16171625                foreach ( $this->controls as $control ) {
    16181626                        $control->enqueue();
    16191627                }
     1628                if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
     1629                        wp_enqueue_script( 'updates' );
     1630                }
    16201631        }
    16211632
    16221633        /**
     
    17701781                $nonces = array(
    17711782                        'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
    17721783                        'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
     1784                        'customize-themes' => wp_create_nonce( 'customize-themes' ),
    17731785                );
    17741786
    17751787                /**
     
    18501862                        'autofocus' => $this->get_autofocus(),
    18511863                        'documentTitleTmpl' => $this->get_document_title_template(),
    18521864                        'previewableDevices' => $this->get_previewable_devices(),
     1865                        'l10n' => array(
     1866                                'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
     1867                                /* translators: %d is the number of theme search results, which cannot consider singular vs. plural forms */
     1868                                'themeSearchResults' => __( '%d themes found' ),
     1869                        ),
    18531870                );
    18541871
    18551872                // Prepare Customize Section objects to pass to JavaScript.
     
    19531970
    19541971                /* Panel, Section, and Control Types */
    19551972                $this->register_panel_type( 'WP_Customize_Panel' );
     1973                $this->register_panel_type( 'WP_Customize_Themes_Panel' );
    19561974                $this->register_section_type( 'WP_Customize_Section' );
    19571975                $this->register_section_type( 'WP_Customize_Sidebar_Section' );
     1976                $this->register_section_type( 'WP_Customize_Themes_Section' );
    19581977                $this->register_control_type( 'WP_Customize_Color_Control' );
    19591978                $this->register_control_type( 'WP_Customize_Media_Control' );
    19601979                $this->register_control_type( 'WP_Customize_Upload_Control' );
     
    19641983                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    19651984                $this->register_control_type( 'WP_Customize_Theme_Control' );
    19661985
    1967                 /* Themes */
     1986                /* Themes (controls are loaded via ajax) */
    19681987
    1969                 $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
    1970                         'title'      => $this->theme()->display( 'Name' ),
    1971                         'capability' => 'switch_themes',
    1972                         'priority'   => 0,
     1988                $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
     1989                        'title'       => $this->theme()->display( 'Name' ),
     1990                        '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.' ),
     1991                        'capability'  => 'switch_themes',
     1992                        'priority'    => 0,
    19731993                ) ) );
    19741994
    1975                 // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
    1976                 $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
    1977                         'capability' => 'switch_themes',
     1995                $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
     1996                        'title'       => __( 'Installed' ),
     1997                        'text_before' => __( 'Your local site' ),
     1998                        'action'      => 'installed',
     1999                        'capability'  => 'switch_themes',
     2000                        'panel'       => 'themes',
     2001                        'priority'    => 0,
    19782002                ) ) );
    19792003
    1980                 require_once( ABSPATH . 'wp-admin/includes/theme.php' );
     2004                $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
     2005                        'title'       => __( 'Search themes&hellip;' ),
     2006                        'text_before' => __( 'Browse all WordPress.org themes' ),
     2007                        'action'      => 'search',
     2008                        'capability'  => 'install_themes',
     2009                        'panel'       => 'themes',
     2010                        'priority'    => 5,
     2011                ) ) );
    19812012
    1982                 // Theme Controls.
     2013                $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
     2014                        'title'      => __( 'Featured' ),
     2015                        'action'     => 'featured',
     2016                        'capability' => 'install_themes',
     2017                        'panel'      => 'themes',
     2018                        'priority'   => 10,
     2019                ) ) );
    19832020
    1984                 // Add a control for the active/original theme.
    1985                 if ( ! $this->is_theme_active() ) {
    1986                         $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
    1987                         $active_theme = current( $themes );
    1988                         $active_theme['isActiveTheme'] = true;
    1989                         $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
    1990                                 'theme'    => $active_theme,
    1991                                 'section'  => 'themes',
    1992                                 'settings' => 'active_theme',
    1993                         ) ) );
    1994                 }
     2021                $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
     2022                        'title'      => __( 'Popular' ),
     2023                        'action'     => 'popular',
     2024                        'capability' => 'install_themes',
     2025                        'panel'      => 'themes',
     2026                        'priority'   => 15,
     2027                ) ) );
    19952028
    1996                 $themes = wp_prepare_themes_for_js();
    1997                 foreach ( $themes as $theme ) {
    1998                         if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
    1999                                 continue;
    2000                         }
     2029                $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
     2030                        'title'      => __( 'Latest' ),
     2031                        'action'     => 'latest',
     2032                        'capability' => 'install_themes',
     2033                        'panel'      => 'themes',
     2034                        'priority'   => 20,
     2035                ) ) );
    20012036
    2002                         $theme_id = 'theme_' . $theme['id'];
    2003                         $theme['isActiveTheme'] = false;
    2004                         $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
    2005                                 'theme'    => $theme,
    2006                                 'section'  => 'themes',
    2007                                 'settings' => 'active_theme',
    2008                         ) ) );
    2009                 }
     2037                $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
     2038                        'title'      => __( 'Feature Filter' ),
     2039                        'action'     => 'feature_filter',
     2040                        'capability' => 'install_themes',
     2041                        'panel'      => 'themes',
     2042                        'priority'   => 25,
     2043                ) ) );
    20102044
     2045                $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
     2046                        'title'      => __( 'Favorites' ),
     2047                        'action'     => 'favorites',
     2048                        'capability' => 'install_themes',
     2049                        'panel'      => 'themes',
     2050                        'priority'   => 30,
     2051                ) ) );
     2052
     2053                // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
     2054                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
     2055                        'capability' => 'switch_themes',
     2056                ) ) );
     2057
     2058
    20112059                /* Site Identity */
    20122060
    20132061                $this->add_section( 'title_tagline', array(
     
    23342382        }
    23352383
    23362384        /**
     2385         * Load themes into the theme browsing/installation UI.
     2386         *
     2387         * @since 4.7.0
     2388         * @access public
     2389         */
     2390        public function load_themes_ajax() {
     2391                check_ajax_referer( 'customize-themes', 'customize-themes-nonce' );
     2392
     2393                if ( ! current_user_can( 'switch_themes' ) ) {
     2394                        wp_die( -1 );
     2395                }
     2396
     2397                if ( empty( $_POST['theme_action'] ) ) {
     2398                        wp_send_json_error( 'missing_theme_action' );
     2399                }
     2400
     2401                if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
     2402                        wp_send_json_error( 'empty_search' );
     2403                } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
     2404                        wp_send_json_error( 'empty_user' );
     2405                } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
     2406                        wp_send_json_error( 'no_features' );
     2407                }
     2408
     2409                require_once( ABSPATH . 'wp-admin/includes/theme.php' );
     2410                if ( 'installed' === $_POST['theme_action'] ) {
     2411                        $themes = array( 'themes' => wp_prepare_themes_for_js() );
     2412                        foreach ( $themes['themes'] as &$theme ) {
     2413                                $theme['type'] = 'installed';
     2414                                // Set active based on customized theme.
     2415                                if ( $_POST['customized_theme'] === $theme['id'] ) {
     2416                                        $theme['active'] = true;
     2417                                } else {
     2418                                        $theme['active'] = false;
     2419                                }
     2420                        }
     2421                } else {
     2422                        if ( ! current_user_can( 'install_themes' ) ) {
     2423                                wp_die( -1 );
     2424                        }
     2425
     2426                        // Arguments for all queries.
     2427                        $args = array(
     2428                                'per_page' => 100,
     2429                                'page' => absint( $_POST['page'] ),
     2430                                'fields' => array(
     2431                                        'slug' => true,
     2432                                        'screenshot' => true,
     2433                                        'description' => true,
     2434                                        'requires' => true,
     2435                                        'rating' => true,
     2436                                        'downloaded' => true,
     2437                                        'downloadLink' => true,
     2438                                        'last_updated' => true,
     2439                                        'homepage' => true,
     2440                                        'num_ratings' => true,
     2441                                        'tags' => true,
     2442                                )
     2443                        );
     2444
     2445                        // Specialized handling for each query.
     2446                        switch ( $_POST['theme_action'] ) {
     2447                                case 'search':
     2448                                        $args['search'] = wp_unslash( $_POST['search'] );
     2449                                        break;
     2450                                case 'favorites':
     2451                                        $args['user'] = wp_unslash(  $_POST['user'] );
     2452                                case 'featured':
     2453                                case 'popular':
     2454                                        $args['browse'] = $_POST['theme_action'];
     2455                                        break;
     2456                                case 'latest':
     2457                                        $args['browse'] = 'new';
     2458                                        break;
     2459                                case 'feature_filter':
     2460                                        $args['tag'] = wp_unslash( $_POST['tags'] );
     2461                                        break;
     2462                        }
     2463
     2464                        // Load themes from the .org API.
     2465                        $themes = themes_api( 'query_themes', $args );
     2466                        if ( is_wp_error( $themes ) ) {
     2467                                wp_send_json_error();
     2468                        }
     2469
     2470                        // Prepare a list of installed themes to check against before the loop.
     2471                        $installed_themes = array();
     2472                        $wp_themes = wp_get_themes();
     2473                        foreach ( $wp_themes as $theme ) {
     2474                                $installed_themes[] = $theme->get_stylesheet();
     2475                        }
     2476                        $update_php = network_admin_url( 'update.php?action=install-theme' );
     2477                        foreach ( $themes->themes as &$theme ) {
     2478                                $theme->install_url = add_query_arg( array(
     2479                                        'theme'    => $theme->slug,
     2480                                        '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug )
     2481                                ), $update_php );
     2482
     2483                                $theme->name        = wp_kses( $theme->name, $themes_allowedtags );
     2484                                $theme->author      = wp_kses( $theme->author, $themes_allowedtags );
     2485                                $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
     2486                                $theme->description = wp_kses( $theme->description, $themes_allowedtags );
     2487                                $theme->tags        = implode( ', ', $theme->tags );
     2488                                $theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
     2489                                $theme->num_ratings = number_format_i18n( $theme->num_ratings );
     2490                                $theme->preview_url = set_url_scheme( $theme->preview_url );
     2491
     2492                                // Handle themes that are already installed as installed themes.
     2493                                if ( in_array( $theme->slug, $installed_themes ) ) {
     2494                                        $theme->type = 'installed';
     2495                                } else {
     2496                                        $theme->type = $_POST['theme_action'];
     2497                                }
     2498
     2499                                // Set active based on customized theme.
     2500                                if ( $_POST['customized_theme'] === $theme->slug ) {
     2501                                        $theme->active = true;
     2502                                } else {
     2503                                        $theme->active = false;
     2504                                }
     2505
     2506                                // Map available theme properties to installed theme properties.
     2507                                $theme->id           = $theme->slug;
     2508                                $theme->screenshot   = array( $theme->screenshot_url );
     2509                                $theme->authorAndUri = $theme->author;
     2510                                unset( $theme->slug );
     2511                                unset( $theme->screenshot_url );
     2512                                unset( $theme->author );
     2513                        }
     2514                }
     2515                wp_send_json_success( $themes );
     2516        }
     2517
     2518
     2519        /**
    23372520         * Callback for validating the header_textcolor value.
    23382521         *
    23392522         * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash().
  • src/wp-includes/customize/class-wp-customize-theme-control.php

     
    6767                $preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
    6868                $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
    6969                ?>
    70                 <# if ( data.theme.isActiveTheme ) { #>
    71                         <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">
     70                <# if ( data.theme.active ) { #>
     71                        <div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
    7272                <# } else { #>
    73                         <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
     73                        <div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
    7474                <# } #>
    7575
    76                         <# if ( data.theme.screenshot[0] ) { #>
     76                        <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
    7777                                <div class="theme-screenshot">
    7878                                        <img data-src="{{ data.theme.screenshot[0] }}" alt="" />
    7979                                </div>
     
    8181                                <div class="theme-screenshot blank"></div>
    8282                        <# } #>
    8383
    84                         <# if ( data.theme.isActiveTheme ) { #>
    85                                 <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
    86                         <# } else { #>
    87                                 <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
     84                        <span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span>
     85
     86
     87                        <# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
     88                                <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php _e( 'New version available. <button class="button-link update-theme" type="button">Update now</button>' ); ?></p></div>
    8889                        <# } #>
    8990
    90                         <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
    91 
    92                         <# if ( data.theme.isActiveTheme ) { #>
    93                                 <h3 class="theme-name" id="{{ data.theme.id }}-name">
     91                        <# if ( data.theme.active ) { #>
     92                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
    9493                                        <?php
    9594                                        /* translators: %s: theme name */
    96                                         printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
     95                                        printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
    9796                                        ?>
    9897                                </h3>
     98                                <div class="theme-actions">
     99                                        <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></button>
     100                                </div>
     101                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
     102                        <# } else if ( 'installed' === data.theme.type ) { #>
     103                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     104                                <div class="theme-actions">
     105                                        <button type="button" class="button button-primary preview-theme" data-preview-url="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Live Preview' ); ?></span>
     106                                </div>
     107                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    99108                        <# } else { #>
    100                                 <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
     109                                <h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    101110                                <div class="theme-actions">
    102                                         <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
     111                                        <button type="button" class="button theme-install" data-slug="{{ data.theme.id }}"><?php _e( 'Install' ); ?></button>
     112                                        <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.theme.id }}" data-previewurl="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Install & Preview' ); ?></button>
    103113                                </div>
    104                         <# } #>
     114                        <# } #>                 
    105115                </div>
    106116        <?php
    107117        }
  • src/wp-includes/customize/class-wp-customize-themes-panel.php

     
     1<?php
     2/**
     3 * Customize API: WP_Customize_Themes_Panel class
     4 *
     5 * @package WordPress
     6 * @subpackage Customize
     7 * @since 4.7.0
     8 */
     9
     10/**
     11 * Customize Themes Panel Class
     12 *
     13 * @since 4.7.0
     14 *
     15 * @see WP_Customize_Panel
     16 */
     17class WP_Customize_Themes_Panel extends WP_Customize_Panel {
     18
     19        /**
     20         * Panel type.
     21         *
     22         * @since 4.7.0
     23         * @access public
     24         * @var string
     25         */
     26        public $type = 'themes';
     27
     28        /**
     29         * An Underscore (JS) template for rendering this panel's container.
     30         *
     31         * The themes panel renders a custom panel heading with the current theme and a switch themes button.
     32         *
     33         * @see WP_Customize_Panel::print_template()
     34         *
     35         * @since 4.7.0
     36         * @access protected
     37         */
     38        protected function render_template() {
     39                ?>
     40                <li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
     41                        <h3 class="accordion-section-title">
     42                                <?php
     43                                if ( $this->manager->is_theme_active() ) {
     44                                        echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
     45                                } else {
     46                                        echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
     47                                }
     48                                ?>
     49
     50                                <?php
     51                                if ( current_user_can( 'switch_themes' ) ) : ?>
     52                                        <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
     53                                <?php endif; ?>
     54                        </h3>
     55                        <ul class="accordion-sub-container control-panel-content"></ul>
     56                </li>
     57                <?php
     58        }
     59
     60        /**
     61         * An Underscore (JS) template for this panel's content (but not its container).
     62         *
     63         * Class variables for this panel class are available in the `data` JS object;
     64         * export custom variables by overriding WP_Customize_Panel::json().
     65         *
     66         * @since 4.7.0
     67         * @access protected
     68         *
     69         * @see WP_Customize_Panel::print_template()
     70         */
     71        protected function content_template() {
     72                ?>
     73                <li class="filter-themes-count">
     74                        <span class="themes-displayed"><?php
     75                                /* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or translate as "Themes: %s" */
     76                                echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
     77                        ?></span>
     78                        <button type="button" class="button button-primary see-themes"><?php
     79                                /* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or omit the count and translate as "Show themes" */
     80                                echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
     81                        ?></button>
     82                        <button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
     83                </li>
     84                <li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
     85                        <button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
     86                        <div class="accordion-section-title">
     87                                <span class="preview-notice"><?php
     88                                        /* translators: %s: themes panel title in the Customizer */
     89                                        echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
     90                                ?></span>
     91                                <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
     92                                        <# if ( data.description ) { #>
     93                                                <button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     94                                        <# } #>
     95                                <?php endif; ?>
     96                        </div>
     97                        <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
     98                                <# if ( data.description ) { #>
     99                                        <div class="description customize-panel-description">
     100                                                {{{ data.description }}}
     101                                        </div>
     102                                <# } #>
     103                        <?php endif; ?>
     104                </li>
     105                <li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
     106                <li class="customize-themes-full-container-container">
     107                        <ul class="customize-themes-full-container">
     108                                <li class="customize-themes-notifications">
     109                                        <div class="notice notice-warning customize-themes-unsaved-changes" style="display: none;"><p>
     110                                                <?php _e( 'You have unsaved changes that will be lost if you preview a new theme.' ); ?>
     111                                                <button type="button" id="customize-themes-save" class="button" ><?php _e( 'Save & Publish' ); ?></button>
     112                                        </p></div>
     113                                </li>
     114                        </ul>
     115                </li>
     116                <?php
     117        }
     118}
  • src/wp-includes/customize/class-wp-customize-themes-section.php

     
    1010/**
    1111 * Customize Themes Section class.
    1212 *
    13  * A UI container for theme controls, which behaves like a backwards Panel.
     13 * A UI container for theme controls, which are displayed in tabbed sections.
    1414 *
    1515 * @since 4.2.0
    1616 *
     
    2828        public $type = 'themes';
    2929
    3030        /**
    31          * Render the themes section, which behaves like a panel.
     31         * Theme section action.
    3232         *
    33          * @since 4.2.0
     33         * Defines the type of themes to load (installed, featured, latest, etc.).
     34         *
     35         * @since 4.7.0
     36         * @access public
     37         * @var string
     38         */
     39        public $action = '';
     40
     41        /**
     42         * Text before theme section heading.
     43         *
     44         * @since 4.7.0
     45         * @access public
     46         * @var string
     47         */
     48        public $text_before = '';
     49
     50        /**
     51         * Get section parameters for JS.
     52         *
     53         * @since 4.7.0
     54         * @access public
     55         * @return array Exported parameters.
     56         */
     57        public function json() {
     58                $exported = parent::json();
     59                $exported['action'] = $this->action;
     60                $exported['text_before'] = $this->text_before;
     61
     62                return $exported;
     63        }
     64
     65        /**
     66         * Render a themes section as a JS template.
     67         *
     68         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     69         *
     70         * @since 4.7.0
    3471         * @access protected
    3572         */
    36         protected function render() {
    37                 $classes = 'accordion-section control-section control-section-' . $this->type;
     73        protected function render_template() {
    3874                ?>
    39                 <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    40                         <h3 class="accordion-section-title">
    41                                 <?php
    42                                 if ( $this->manager->is_theme_active() ) {
    43                                         echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
     75                <li id="accordion-section-{{ data.id }}" class="theme-section">
     76                        <# if ( '' !== data.text_before ) { #>
     77                                <p class="customize-themes-text-before">{{ data.text_before }}</p>
     78                        <# } #>
     79                        <# if ( 'search' === data.action ) { #>
     80                                <div class="search-form customize-themes-section-title themes-section-search_themes">
     81                                        <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
     82                                        <input placeholder="{{ data.title }}" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
     83                                        <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     84                                </div>
     85                        <# } else { #>
     86                                <# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
     87                                        var attr = ' aria-expanded="false"';
    4488                                } else {
    45                                         echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
    46                                 }
    47                                 ?>
    48 
    49                                 <?php if ( count( $this->controls ) > 0 ) : ?>
    50                                         <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
    51                                 <?php endif; ?>
    52                         </h3>
    53                         <div class="customize-themes-panel control-panel-content themes-php">
    54                                 <h3 class="accordion-section-title customize-section-title">
    55                                         <span class="customize-action"><?php _e( 'Customizing' ); ?></span>
    56                                         <?php _e( 'Themes' ); ?>
    57                                         <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
    58                                 </h3>
    59                                 <h3 class="accordion-section-title customize-section-title">
     89                                        var attr = '';
     90                                } #>
     91                                <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
     92                        <# } #>
     93                        <?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
     94                                <# if ( 'installed' === data.action ) { #>
     95                                        <p class="themes-filter-container">
     96                                                <label for="themes-filter">
     97                                                        <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
     98                                                        <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
     99                                                </label>
     100                                        </p>
     101                                <# } #>
     102                        <?php endif; ?>
     103                        <# if ( 'favorites' === data.action ) { #>
     104                                <div class="favorites-form filter-details">
     105                                        <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
     106                                        <p>
     107                                                <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
     108                                                <input type="search" id="wporg-username-input" value="">
     109                                                <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
     110                                        </p>
     111                                </div>
     112                        <# } else if ( 'feature_filter' === data.action ) { #>
     113                                <div class="filter-drawer filter-details">
    60114                                        <?php
    61                                         if ( $this->manager->is_theme_active() ) {
    62                                                 echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
    63                                         } else {
    64                                                 echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
     115                                        $feature_list = get_theme_feature_list();
     116                                        foreach ( $feature_list as $feature_name => $features ) {
     117                                                echo '<fieldset class="filter-group">';
     118                                                $feature_name = esc_html( $feature_name );
     119                                                echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
     120                                                echo '<div class="filter-group-feature">';
     121                                                foreach ( $features as $feature => $feature_name ) {
     122                                                        $feature = esc_attr( $feature );
     123                                                        echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
     124                                                        echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
     125                                                }
     126                                                echo '</div>';
     127                                                echo '</fieldset>';
    65128                                        }
    66129                                        ?>
    67                                         <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
    68                                 </h3>
    69 
     130                                </div>
     131                        <# } #>
     132                        <div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
    70133                                <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
    71 
    72                                 <div id="customize-container"></div>
    73                                 <?php if ( count( $this->controls ) > 4 ) : ?>
    74                                         <p><label for="themes-filter">
    75                                                 <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
    76                                                 <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
    77                                         </label></p>
    78                                 <?php endif; ?>
    79134                                <div class="theme-browser rendered">
    80                                         <ul class="themes accordion-section-content">
     135                                        <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>
     136                                        <ul class="themes">
    81137                                        </ul>
     138                                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     139                                        <p class="spinner"></p>
    82140                                </div>
    83141                        </div>
    84142                </li>