WordPress.org

Make WordPress Core

Ticket #37661: 37661.1.diff

File 37661.1.diff, 76.9 KB (added by celloexpressions, 3 years ago)

Add theme updating and deletion, improve view when users can't install themes, clean up theme details events.

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

     
    976976        animation: customize-reload .75s;
    977977}
    978978
    979 .control-section-themes .accordion-section-title {
     979.control-panel-themes .accordion-section-title {
    980980        cursor: default;
    981981}
    982982
    983 #customize-theme-controls .control-section-themes .accordion-section-title:hover,
    984 #customize-theme-controls .control-section-themes .accordion-section-title:focus {
     983#customize-theme-controls .control-panel-themes > .accordion-section-title:hover,
     984#customize-theme-controls .control-panel-themes > .accordion-section-title:focus {
    985985        color: #555;
    986986        background-color: #fff;
    987987}
    988988
    989 .control-section-themes .accordion-section-title {
     989#customize-theme-controls .control-panel-themes > .accordion-section-title {
    990990        margin: 15px 0;
    991 }
    992 
    993 .customize-themes-panel .accordion-section-title {
    994         margin: 15px -8px;
    995 }
    996 
    997 .control-section-themes .accordion-section-title {
    998991        padding-right: 100px; /* Space for the button */
     992        border-top: 1px solid #ddd;
     993        border-bottom: 1px solid #ddd;
     994        border-right: 0;
    999995}
    1000996
    1001 .control-section-themes .accordion-section-title span.customize-action,
     997.control-panel-themes .accordion-section-title span.customize-action,
    1002998#customize-controls .customize-section-title span.customize-action {
    1003999        font-size: 13px;
    10041000        display: block;
     
    10051001        font-weight: 400;
    10061002}
    10071003
    1008 .control-section-themes .accordion-section-title .change-theme,
    1009 .control-section-themes .accordion-section-title .customize-theme {
     1004.control-panel-themes .accordion-section-title .change-theme {
    10101005        position: absolute;
    10111006        right: 10px;
    10121007        top: 50%;
     
    10141009        font-weight: 400;
    10151010}
    10161011
    1017 .control-section-themes .accordion-section-title:before {
     1012#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
    10181013        display: none;
    10191014}
    10201015
    1021 .customize-themes-panel {
     1016.control-panel-themes .control-panel-content {
    10221017        display: none;
    1023         padding: 0 8px;
    1024         background: #f1f1f1;
    1025         -webkit-box-sizing: border-box;
    1026         -moz-box-sizing: border-box;
    1027         box-sizing: border-box;
     1018        position: fixed;
     1019        width: 100%;
     1020        height: 100%;
     1021        top: 0;
     1022        left: -100%;
     1023        background: #eee;
     1024        z-index: 10;
     1025        transition: .2s left ease-in-out;
     1026        margin: 0;
     1027        padding: 0;
     1028        overflow-y: auto;
    10281029}
    10291030
    1030 .customize-themes-panel .accordion-section-title:first-child {
    1031         margin-top: 0;
     1031.in-themes-panel .control-panel-themes .control-panel-content {
     1032        left: 0;
    10321033}
    10331034
    1034 #customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
    1035         font-size: 14px;
    1036         font-weight: 600;
     1035#customize-controls,
     1036#customize-footer-actions,
     1037#customize-footer-actions .collapse-sidebar {
     1038        left: 0;
     1039        transition: .2s left ease-in-out;
    10371040}
    10381041
     1042.in-themes-panel #customize-controls,
     1043.in-themes-panel #customize-preview,
     1044.in-themes-panel #customize-footer-actions,
     1045.in-themes-panel #customize-footer-actions .collapse-sidebar {
     1046        left: 100%;
     1047}
     1048
    10391049.customize-themes-panel > h2 {
    10401050        padding: 15px 8px 0 8px;
    10411051}
    10421052
    1043 .control-section.open .customize-themes-panel {
    1044         display: block;
     1053.control-panel-themes .panel-meta .current-theme {
     1054        position: absolute;
     1055        right: 0;
     1056        top: 0;
     1057        background: #fff;
     1058        border-left: 1px solid #ddd;
     1059        padding: 15px 125px 15px 25px;
    10451060}
    10461061
    1047 #customize-theme-controls .customize-themes-panel .accordion-section-content {
     1062.control-panel-themes .panel-meta .customize-theme {
     1063        position: absolute;
     1064        bottom: 15px;
     1065        right: 25px;
     1066}
     1067
     1068.control-panel-themes .panel-meta h2 {
     1069        font-size: 32px;
     1070        font-weight: 200;
     1071        margin: 0 25px;
     1072        padding: 15px 0;
     1073        line-height: 50px;
     1074        float: left;
     1075}
     1076
     1077.control-panel-themes .panel-meta {
     1078        min-height: 80px;
     1079        overflow: hidden;
     1080}
     1081
     1082.control-panel-themes .panel-meta .page-title-action {
     1083        margin-top: 28px;
     1084}
     1085
     1086/* Mobile header */
     1087@media screen and (max-width:700px) {
     1088        .control-panel-themes .panel-meta .current-theme {
     1089                width: calc(100% - 150px);
     1090                position: relative;
     1091                border-bottom: 1px solid #ddd;
     1092        }
     1093}
     1094
     1095.control-panel-themes .customize-themes-notifications .notice {
     1096        margin: 0 25px 15px 25px;
     1097}
     1098
     1099#customize-theme-section-navigation {
     1100        margin: 0 25px 15px 25px;
     1101        width: calc(100% - 50px);
     1102}
     1103
     1104#customize-theme-section-navigation .filter-links .customize-themes-section-title:only-child {
     1105        display: none; /* Don't show the installed heading for users that can't install themes. */
     1106}
     1107
     1108#customize-theme-section-navigation .themes-filter-container {
     1109        display: inline-block;
     1110}
     1111
     1112.control-panel-themes .wp-filter .customize-help-toggle {
     1113        float: right;
     1114        padding: 10px;
     1115        height: 40px;
     1116        width: 40px;
     1117        margin: 5px;
    10481118        background: transparent;
    1049         display: block;
     1119        border: none;
     1120        box-shadow: none;
     1121        cursor: pointer;
     1122        color: #555;
    10501123}
    10511124
    1052 .customize-control.customize-control-theme {
    1053         margin-bottom: 8px;
     1125.control-panel-themes .wp-filter .customize-help-toggle:hover {
     1126        color: #0073aa;
    10541127}
    10551128
     1129.control-panel-themes .wp-filter .customize-help-toggle:focus,
     1130.control-panel-themes .wp-filter .customize-help-toggle.toggled {
     1131        color: #0073aa;
     1132        border-radius: 100%;
     1133        box-shadow: 0 0 0 1px #5b9dd9,
     1134                    0 0 2px 1px rgba(30, 140, 190, .8);
     1135        outline: 0;
     1136}
     1137
     1138.control-panel-themes .customize-panel-description {
     1139        position: absolute;
     1140        right: -1px;
     1141        z-index: 5;
     1142        background: #fff;
     1143        font-size: 14px;
     1144        width: 300px;
     1145        border: 1px solid #ddd;
     1146        border-top: none;
     1147        padding: 5px 25px 15px 10px;
     1148        text-align: right;
     1149        display: none;
     1150}
     1151
     1152.control-panel-themes .theme-section {
     1153        width: calc(100% - 50px);
     1154        padding: 0 25px 25px 25px;
     1155        margin: 0;
     1156        display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
     1157        overflow: hidden;
     1158}
     1159
     1160.control-panel-themes .theme-section.current-section {
     1161        display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
     1162}
     1163
     1164#customize-theme-section-navigation .customize-themes-section-title {
     1165        display: inline-block;
     1166        margin: 0 10px;
     1167        padding: 15px 0;
     1168        background: #fff;
     1169        border: 0;
     1170        border-bottom: 4px solid #fff;
     1171        color: #555;
     1172        cursor: pointer;
     1173}
     1174
     1175.filter-links .themes-section-feature_filter_themes:before {
     1176        content: "\f111";
     1177        font: 16px/1 dashicons;
     1178        position: relative;
     1179        top: 2px;
     1180        margin-right: 4px;
     1181}
     1182
     1183#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes {
     1184        border-bottom: none;
     1185        padding: 10px 0;
     1186}
     1187
     1188#customize-theme-section-navigation .customize-themes-section-title.selected {
     1189        border-bottom: 4px solid #555;
     1190}
     1191
     1192#customize-theme-section-navigation .customize-themes-section-title:hover,
     1193#customize-theme-section-navigation .customize-themes-section-title:focus {
     1194        color: #0073aa;
     1195        border-bottom: 4px solid #0073aa;
     1196        box-shadow: none;
     1197        outline: none;
     1198}
     1199
     1200#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes.selected,
     1201#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes:hover {
     1202        border-bottom: none;
     1203}
     1204
    10561205#customize-theme-controls .themes.accordion-section-content {
    10571206        position: relative;
    10581207        left: 0;
     
    10601209        width: 100%;
    10611210}
    10621211
    1063 .wp-customizer .theme-browser .themes {
    1064         padding-bottom: 8px;
     1212.theme-section.loading .spinner {
     1213        display: block;
     1214        visibility: visible;
     1215        position: relative;
     1216        clear: both;
     1217        width: 20px;
     1218        height: 20px;
     1219        left: calc(50% - 10px);
     1220        float: none;
     1221        margin-top: 50px;
    10651222}
    10661223
    1067 .wp-customizer .theme-browser .theme {
     1224.customize-themes-section .filter-drawer {
     1225        border-top: none;
     1226        display: block;
     1227        background: transparent;
     1228        padding-top: 5px;
     1229}
     1230
     1231.customize-themes-section .clear-filters {
     1232        margin-left: 8px;
     1233        display: none;
     1234}
     1235
     1236#accordion-section-feature_filter_themes .theme-browser {
     1237        display: none; /* Shown with JS once filters are applied */
     1238}
     1239
     1240.customize-themes-section .no-themes {
     1241        display: none;
     1242}
     1243
     1244#accordion-section-installed_themes .theme .notice-success {
     1245        display: none;
     1246}
     1247
     1248.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
     1249        margin: 0 0 0 8px;
     1250}
     1251
     1252.customize-control-theme .theme {
     1253        width: 100%;
    10681254        margin: 0;
    1069         width: 100%;
    10701255}
    10711256
     1257.customize-control.customize-control-theme { /* override most properties on .customize-control */
     1258        box-sizing: border-box;
     1259        width: 18.4%;
     1260        margin: 0 2% 2% 0;
     1261        padding: 0;
     1262        clear: none;
     1263}
     1264
     1265/* 5 columns above 2100px */
     1266@media screen and (min-width: 2101px) {
     1267        .customize-control.customize-control-theme:nth-child(5n) {
     1268                margin-right: 0;
     1269        }
     1270}
     1271
     1272/* 4 columns up to 2100px */
     1273@media screen and (min-width: 1601px) and (max-width: 2100px) {
     1274        .customize-control.customize-control-theme {
     1275                width: 23.5%;
     1276        }
     1277
     1278        .customize-control.customize-control-theme:nth-child(4n) {
     1279                margin-right: 0;
     1280        }
     1281}
     1282
     1283/* 3 columns up to 1600px */
     1284@media screen and (min-width: 1101px) and (max-width: 1600px) {
     1285        .customize-control.customize-control-theme {
     1286                width: 32%;
     1287        }
     1288
     1289        .customize-control.customize-control-theme:nth-child(3n) {
     1290                margin-right: 0;
     1291        }
     1292}
     1293
     1294/* 2 columns up to 1100px */
     1295@media screen and (min-width: 501px) and (max-width: 1100px) {
     1296        .customize-control.customize-control-theme {
     1297                width: 49%;
     1298        }
     1299
     1300        .customize-control.customize-control-theme:nth-child(even) {
     1301                margin-right: 0;
     1302        }
     1303}
     1304
     1305/* 1 column up to 500 px */
     1306@media screen and (max-width: 500px) {
     1307        .customize-control.customize-control-theme {
     1308                width: 100%;
     1309                margin: 0 0 3% 0;
     1310        }
     1311}
     1312
     1313
     1314.wp-customizer .theme-browser .themes {
     1315        padding-bottom: 8px;
     1316}
     1317
    10721318.wp-customizer .theme-browser .theme .theme-actions {
    10731319        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    10741320        opacity: 1;
     
    10891335        width: 100%;
    10901336}
    10911337
    1092 #accordion-section-themes .accordion-section-title:after {
     1338#accordion-panel-themes .accordion-section-title:after {
    10931339        display: none;
    10941340}
    10951341
    1096 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
     1342#customize-theme-controls .control-panel-themes.current-panel > h3.accordion-section-title {
    10971343        left: 0;
    10981344}
    10991345
    1100 .customize-themes-panel.control-panel-content {
    1101         position: absolute;
    1102         left: -100%;
    1103         top: 0;
    1104         width: 100%;
    1105         border-top: 1px solid #ddd;
    1106 }
    11071346
    1108 .in-themes-panel #customize-info,
    1109 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
    1110         left: 100%;
    1111 }
    1112 
    11131347/* Details View */
    11141348.wp-customizer .theme-overlay {
    11151349        display: none;
     
    11301364        z-index: 110;
    11311365}
    11321366
     1367.wp-customizer .theme-overlay .star-rating {
     1368        float: left;
     1369        margin-right: 8px;
     1370}
     1371
     1372.wp-customizer .theme-rating .num-ratings {
     1373        line-height: 20px;
     1374}
     1375
    11331376.wp-customizer .theme-overlay .theme-wrap {
    11341377        left: 90px;
    11351378        right: 90px;
     
    11401383}
    11411384
    11421385.wp-customizer .theme-overlay .theme-actions {
    1143         text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
     1386        text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
     1387    padding: 10px 15px;
    11441388}
    11451389
     1390.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
     1391        margin-left: 8px;
     1392}
     1393
     1394.control-panel-themes .theme-actions .delete-theme {
     1395        left: 15px;
     1396        right: auto;
     1397}
     1398
    11461399.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
    11471400        overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
    11481401}
  • 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['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, api = wp.customize;
    44
     5        window.pagenow = 'customize'; // Needed for updates.js to function properly.
     6
    57        /**
    68         * A Customizer Setting.
    79         *
     
    777779        /**
    778780         * wp.customize.ThemesSection
    779781         *
    780          * Custom section for themes that functions similarly to a backwards panel,
    781          * and also handles the theme-details view rendering and navigation.
     782         * Custom section for themes that loads themes by category, and also
     783         * handles the theme-details view rendering and navigation.
    782784         *
    783785         * @constructor
    784786         * @augments wp.customize.Section
     
    790792                template: '',
    791793                screenshotQueue: null,
    792794                $window: $( window ),
     795                loaded: 0,
     796                loading: false,
     797                fullyLoaded: false,
     798                term: '',
    793799
    794800                /**
    795801                 * @since 4.2.0
    796802                 */
    797                 initialize: function () {
    798                         this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' );
    799                         return api.Section.prototype.initialize.apply( this, arguments );
    800                 },
    801 
    802                 /**
    803                  * @since 4.2.0
    804                  */
    805803                ready: function () {
    806804                        var section = this;
    807805                        section.overlay = section.container.find( '.theme-overlay' );
     
    829827                                }
    830828                        });
    831829
    832                         _.bindAll( this, 'renderScreenshots' );
     830                        _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked', 'clearFilters' );
    833831                },
    834832
    835833                /**
     
    836834                 * Override Section.isContextuallyActive method.
    837835                 *
    838836                 * Ignore the active states' of the contained theme controls, and just
    839                  * use the section's own active state instead. This ensures empty search
    840                  * results for themes to cause the section to become inactive.
     837                 * use the section's own active state instead. This prevents empty search
     838                 * results for theme sections from causing the section to become inactive.
    841839                 *
    842840                 * @since 4.2.0
    843841                 *
     
    853851                attachEvents: function () {
    854852                        var section = this;
    855853
    856                         // Expand/Collapse section/panel.
    857                         section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) {
    858                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    859                                         return;
    860                                 }
    861                                 event.preventDefault(); // Keep this AFTER the key filter above
    862 
    863                                 if ( section.expanded() ) {
    864                                         section.collapse();
    865                                 } else {
     854                        // Expand section/panel. Only collapse when opening another section.
     855                        $( '#customize-theme-section-navigation' ).on( 'click', '.themes-section-' + section.id, function( event ) {
     856                                if ( ! section.expanded() ) {
    866857                                        section.expand();
    867858                                }
    868859                        });
    869860
    870                         // Theme navigation in details view.
    871                         section.container.on( 'click keydown', '.left', function( event ) {
    872                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    873                                         return;
    874                                 }
     861                        // Preview installed themes.
     862                        section.container.on( 'click', '.theme-actions .preview-theme', function() {
     863                                var previewUrl = $( this ).data( 'previewUrl' );
    875864
    876                                 event.preventDefault(); // Keep this AFTER the key filter above
     865                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
    877866
     867                                window.parent.location = previewUrl;
     868                        });
     869       
     870                        // Theme navigation in details view.
     871                        section.container.on( 'click', '.left', function( event ) {
    878872                                section.previousTheme();
    879873                        });
    880874
    881                         section.container.on( 'click keydown', '.right', function( event ) {
    882                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    883                                         return;
    884                                 }
    885 
    886                                 event.preventDefault(); // Keep this AFTER the key filter above
    887 
     875                        section.container.on( 'click', '.right', function( event ) {
    888876                                section.nextTheme();
    889877                        });
    890878
    891                         section.container.on( 'click keydown', '.theme-backdrop, .close', function( event ) {
    892                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    893                                         return;
    894                                 }
    895 
    896                                 event.preventDefault(); // Keep this AFTER the key filter above
    897 
     879                        section.container.on( 'click', '.theme-backdrop, .close', function( event ) {
    898880                                section.closeDetails();
    899881                        });
    900882
    901883                        var renderScreenshots = _.throttle( _.bind( section.renderScreenshots, this ), 100 );
    902                         section.container.on( 'input', '#themes-filter', function( event ) {
     884                        $( '#customize-theme-section-navigation' ).on( 'input', '#themes-filter', function( event ) {
    903885                                var count,
    904886                                        term = event.currentTarget.value.toLowerCase().trim().replace( '-', ' ' ),
    905887                                        controls = section.controls();
     
    912894
    913895                                // Update theme count.
    914896                                count = section.container.find( 'li.customize-control:visible' ).length;
    915                                 section.container.find( '.theme-count' ).text( count );
     897                                $( '.control-panel-themes' ).find( '.theme-count' ).text( count );
    916898                        });
    917899
    918                         // Pre-load the first 3 theme screenshots.
    919                         api.bind( 'ready', function () {
    920                                 _.each( section.controls().slice( 0, 3 ), function ( control ) {
    921                                         var img, src = control.params.theme.screenshot[0];
    922                                         if ( src ) {
    923                                                 img = new Image();
    924                                                 img.src = src;
     900                        // Event listeners for queries with user-entered terms.
     901                        if ( 'search' === section.params.action ) {
     902                                var debounced = _.debounce( section.checkTerm, 800 ); // Wait until there is no input for 800 miliseconds to initiate a search.
     903                                $( '#customize-theme-section-navigation' ).on( 'keydown', '#wp-filter-search-input', function() {
     904                                        debounced( section );
     905                                });
     906                        } else if ( 'favorites' === section.params.action ) {
     907                                section.container.on( 'click', '.favorites-form-submit', function() {
     908                                        section.checkTerm( section );
     909                                });
     910                                section.container.on( 'keydown', '#wporg-username-input', function( e ) {
     911                                        if ( api.utils.isKeydownButNotEnterEvent( e ) ) {
     912                                                return;
    925913                                        }
     914                                        section.checkTerm( section );
    926915                                });
     916                        } else if ( 'feature_filter' === section.params.action ) {
     917                                section.container.on( 'click', '.filter-group input', function() {
     918                                        section.filtersChecked();
     919                                });
     920                                section.container.on( 'click', '.clear-filters', function() {
     921                                        section.clearFilters();
     922                                });
     923                                section.container.on( 'click', '.apply-filters', function() {
     924                                        section.checkTerm( section );
     925                                });
     926                                section.container.on( 'click', '.filtered-by .tags, .filtered-by button', function() {
     927                                        section.container.find( '.filter-group' ).show();
     928                                        section.container.find( '.buttons' ).show();
     929                                        section.container.find( '.filtered-by' ).hide();
     930                                        section.container.find( '.theme-browser' ).hide();
     931                                });
     932                        }
     933
     934                        // Move section-expansion buttons to consolidated menu bar in themes panel.
     935                        api.bind( 'ready', function () {
     936                                section.container.find( '.customize-themes-section-title' ).appendTo( $( '#customize-theme-section-navigation .filter-links' ) );
    927937                        });
    928938                },
    929939
     
    948958                        }
    949959
    950960                        // Note: there is a second argument 'args' passed
    951                         var position, scroll,
    952                                 panel = this,
    953                                 section = panel.container.closest( '.accordion-section' ),
    954                                 overlay = section.closest( '.wp-full-overlay' ),
    955                                 container = section.closest( '.wp-full-overlay-sidebar-content' ),
    956                                 siblings = container.find( '.open' ),
    957                                 customizeBtn = section.find( '.customize-theme' ),
    958                                 changeBtn = section.find( '.change-theme' ),
    959                                 content = section.find( '.control-panel-content' );
     961                        var section = this,
     962                                overlay = section.container.closest( '.wp-full-overlay-sidebar-content' ),
     963                                container = section.container.closest( '.control-panel-content' );
    960964
    961965                        if ( expanded ) {
    962966
     967                                // Load controls if none are loaded yet.
     968                                if ( 0 === section.loaded ) {
     969                                        section.loadControls();
     970                                }
     971
    963972                                // Collapse any sibling sections/panels
    964973                                api.section.each( function ( otherSection ) {
    965                                         if ( otherSection !== panel ) {
     974                                        if ( otherSection !== section ) {
    966975                                                otherSection.collapse( { duration: args.duration } );
    967976                                        }
    968977                                });
    969                                 api.panel.each( function ( otherPanel ) {
    970                                         otherPanel.collapse( { duration: 0 } );
    971                                 });
    972978
    973                                 content.show( 0, function() {
    974                                         position = content.offset().top;
    975                                         scroll = container.scrollTop();
    976                                         content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
    977                                         section.addClass( 'current-panel' );
    978                                         overlay.addClass( 'in-themes-panel' );
    979                                         container.scrollTop( 0 );
    980                                         _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
    981                                         panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
    982                                         if ( args.completeCallback ) {
    983                                                 args.completeCallback();
    984                                         }
    985                                 } );
    986                                 customizeBtn.focus();
     979                                section.container.addClass( 'current-section' );
     980                                $( '#customize-theme-section-navigation .themes-section-' + section.id ).addClass( 'selected' );
     981                                container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) );
     982                                container.on( 'scroll', _.throttle( section.loadMore, 300 ) );
     983                                if ( args.completeCallback ) {
     984                                        args.completeCallback();
     985                                }
     986                                section.updateCount(); // Show this section's count.
    987987                        } else {
    988                                 siblings.removeClass( 'open' );
    989                                 section.removeClass( 'current-panel' );
    990                                 overlay.removeClass( 'in-themes-panel' );
    991                                 panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
    992                                 content.delay( 180 ).hide( 0, function() {
    993                                         content.css( 'margin-top', 'inherit' ); // Reset
    994                                         if ( args.completeCallback ) {
    995                                                 args.completeCallback();
    996                                         }
    997                                 } );
    998                                 customizeBtn.attr( 'tabindex', '0' );
    999                                 changeBtn.focus();
    1000                                 container.scrollTop( 0 );
     988                                section.container.removeClass( 'current-section' );
     989                                $( '#customize-theme-section-navigation .themes-section-' + section.id ).removeClass( 'selected' );
     990                                container.off( 'scroll' );
     991                                if ( args.completeCallback ) {
     992                                        args.completeCallback();
     993                                }
    1001994                        }
    1002995                },
    1003996
    1004997                /**
    1005                  * Recalculate the top margin.
     998                 * Don't recalculate the top margin.
    1006999                 *
    1007                  * @since 4.4.0
     1000                 * @since 4.7.0
    10081001                 * @private
    10091002                 */
    1010                 _recalculateTopMargin: function() {
    1011                         api.Panel.prototype._recalculateTopMargin.call( this );
     1003                _recalculateTopMargin: function() {},
     1004
     1005                /**
     1006                 * Load theme data via ajax and add themes to the section as controls.
     1007                 *
     1008                 * @since 4.7.0
     1009                 */
     1010                loadControls: function() {
     1011                        var section = this, params, page, request, search;
     1012
     1013                        if ( section.loading ) {
     1014                                return; // We're already loading a batch of themes.
     1015                        }
     1016
     1017                        // Parameters for every API query. Additional params are set in PHP.
     1018                        page = Math.ceil( section.loaded / 100 ) + 1;
     1019                        params = {
     1020                                'customize-themes-nonce': api.settings.nonce['customize-themes'],
     1021                                'wp_customize': 'on',
     1022                                'theme_action': section.params.action,
     1023                                'customized_theme': api.settings.theme.stylesheet,
     1024                                'page': page
     1025                        }
     1026
     1027                        // Add fields for special request actions.
     1028                        if ( 'search' === section.params.action ) {
     1029                                if ( '' === section.term ) {
     1030                                        return;
     1031                                } else {
     1032                                        params.search = section.term;
     1033                                }
     1034                        } else if ( 'favorites' === section.params.action ) {
     1035                                if ( '' === section.term ) {
     1036                                        return;
     1037                                } else {
     1038                                        params.user = section.term;
     1039                                }
     1040                        } else if ( 'feature_filter' === section.params.action ) {
     1041                                if ( '' === section.term ) {
     1042                                        return;
     1043                                } else {
     1044                                        params.tags = section.term;
     1045                                }
     1046                        }
     1047
     1048                        // Load themes.
     1049                        section.container.addClass( 'loading' );
     1050                        section.loading = true;
     1051                        section.container.find( '.no-themes' ).hide();
     1052                        request = wp.ajax.post( 'customize-load-themes', params );
     1053                        request.done(function( data ) {
     1054                                var themes = data.themes,
     1055                                    themeControl, newThemeControls;
     1056                                if ( 0 !== themes.length ) {
     1057                                        newThemeControls = new Array();
     1058                                        // Add controls for each theme.
     1059                                        _.each( themes, function ( theme ) {
     1060                                                customizeId = section.params.action + '_theme_' + theme.id;
     1061                                                themeControl = new api.controlConstructor.theme( customizeId, {
     1062                                                        params: {
     1063                                                                type: 'theme',
     1064                                                                content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>',
     1065                                                                section: section.params.id,
     1066                                                                active: true,
     1067                                                                theme: theme,
     1068                                                                priority: section.loaded + 1
     1069                                                        },
     1070                                                        previewer: api.previewer
     1071                                                } );
     1072
     1073                                                api.control.add( customizeId, themeControl );
     1074                                                newThemeControls.push( themeControl );
     1075                                                section.loaded = section.loaded + 1;
     1076                                                return;
     1077                                        });
     1078                               
     1079                                        if ( 1 === page ) {
     1080                                                // Pre-load the first 3 theme screenshots.
     1081                                                _.each( section.controls().slice( 0, 3 ), function ( control ) {
     1082                                                        var img, src = control.params.theme.screenshot[0];
     1083                                                        if ( src ) {
     1084                                                                img = new Image();
     1085                                                                img.src = src;
     1086                                                        }
     1087                                                });
     1088                                        } else {
     1089                                                Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue.
     1090                                        }
     1091                                        _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible.
     1092
     1093                                        if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list.
     1094                                                section.fullyLoaded = true;
     1095                                        }
     1096                                } else {
     1097                                        if ( 0 === section.loaded ) {
     1098                                                section.container.find( '.no-themes' ).show();
     1099                                        } else {
     1100                                                section.fullyLoaded = true;
     1101                                        }
     1102                                }
     1103                                if ( 'installed' === section.params.action ) {
     1104                                        section.updateCount();
     1105                                } else {
     1106                                        section.updateCount( data.info.results );
     1107                                }
     1108                                section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown.
     1109
     1110                                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
     1111                                section.container.removeClass( 'loading' );
     1112                                section.loading = false;
     1113                        });
     1114                        request.fail(function( data ) {
     1115                                if ( 'undefined' === typeof data ) {
     1116                                        section.container.find( '.unexpected-error' ).show();
     1117                                } else if ( typeof console !== 'undefined' && console.error ) {
     1118                                        console.error( data );
     1119                                }
     1120                               
     1121                                // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case.
     1122                                section.container.removeClass( 'loading' );
     1123                                section.loading = false;
     1124                        });
    10121125                },
    10131126
    10141127                /**
     1128                 * Determines whether more themes should be loaded, and loads them.
     1129                 *
     1130                 * @since 4.7.0
     1131                 */
     1132                loadMore: function() {
     1133                        var section = this, container, bottom, threshold, page;
     1134                        if ( ! section.fullyLoaded && ! section.loading ) {
     1135                                container = section.container.closest( '.control-panel-content' );
     1136
     1137                                bottom = container.scrollTop() + container.height();
     1138                                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.
     1139
     1140                                if ( bottom > threshold ) {
     1141                                        section.loadControls();
     1142                                }
     1143                        }
     1144                },
     1145
     1146                /**
     1147                 * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed.
     1148                 *
     1149                 * @since 4.7.0
     1150                 *
     1151                 * @param api.ThemesSection section The current theme section, passed through the debouncer.
     1152                 */
     1153                checkTerm: function( section ) {
     1154                        var newTerm, filteringBy;
     1155
     1156                        // Find term.
     1157                        if ( 'search' === section.params.action ) {
     1158                                newTerm = $( '#wp-filter-search-input' ).val();
     1159                        } else if ( 'favorites' === section.params.action ) {
     1160                                newTerm = $( '#wporg-username-input' ).val();
     1161                        } else if ( 'feature_filter' === section.params.action ) {
     1162                                newTerm = section.term; // Set separately by filtersChecked(), as they're changed.
     1163                                if ( '' === newTerm ) {
     1164                                        return;
     1165                                }
     1166
     1167                                section.container.find( '.filter-group' ).hide();
     1168                                section.container.find( '.buttons' ).hide();
     1169                                section.container.find( '.filtered-by' ).show();
     1170                                section.container.find( '.theme-browser' ).show();
     1171                                filteringBy = section.container.find( '.filtered-by .tags' );
     1172                                filteringBy.empty();
     1173
     1174                                _.each( newTerm, function( tag ) {
     1175                                        name = $( 'label[for="filter-id-' + tag + '"]' ).text();
     1176                                        filteringBy.append( '<span class="tag">' + name + '</span>' );
     1177                                });
     1178                        } else {
     1179                                return;
     1180                        }
     1181
     1182                        if ( section.term === newTerm && 'feature_filter' !== section.params.action ) {
     1183                                return;
     1184                        }
     1185                        // Clear the controls in the section.
     1186                        _.each( section.controls(), function( control ) {
     1187                                control.container.remove();
     1188                                api.control.remove( control.id );
     1189                        });
     1190                        section.loaded = 0;
     1191                        section.fullyLoaded = false;
     1192                        section.screenshotQueue = null;
     1193
     1194                        if ( '' !== newTerm ) { // Empty term should not show any results.
     1195                                // Run a new query, with loadControls handling paging, etc.
     1196                                section.term = newTerm;
     1197                                section.loadControls();
     1198                        }
     1199                },
     1200               
     1201                /**
     1202                 * Check for filters checked in the feature filter list.
     1203                 *
     1204                 * @since 4.7.0
     1205                 */
     1206                filtersChecked: function() {
     1207                        var section = this,
     1208                            items = section.container.find( '.filter-group' ).find( ':checkbox' ),
     1209                            tags = [];
     1210
     1211                        if ( 'feature_filter' !== section.params.action ) {
     1212                                return false;
     1213                        }
     1214
     1215                        _.each( items.filter( ':checked' ), function( item ) {
     1216                                tags.push( $( item ).prop( 'value' ) );
     1217                        });
     1218
     1219                        // When no filters are checked, restore initial state and return
     1220                        if ( tags.length === 0 ) {
     1221                                section.container.find( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' );
     1222                                section.container.find( '.filter-drawer .clear-filters' ).hide();
     1223                                section.term = '';
     1224                        } else {
     1225                                section.container.find( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length );
     1226                                section.container.find( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); // $.show() manually.
     1227                                section.term = tags;
     1228                        }
     1229                },
     1230
     1231                /**
     1232                 * Clear filters from the feature filter list.
     1233                 *
     1234                 * @since 4.7.0
     1235                 */
     1236                clearFilters: function() {
     1237                        var section = this,
     1238                            items = section.container.find( '.filter-group' ).find( ':checkbox' );
     1239
     1240                        _.each( items.filter( ':checked' ), function( item ) {
     1241                                $( item ).prop( 'checked', false );
     1242                        });
     1243                        section.filtersChecked();
     1244                },
     1245
     1246                /**
    10151247                 * Render control's screenshot if the control comes into view.
    10161248                 *
    10171249                 * @since 4.2.0
     
    10191251                renderScreenshots: function( ) {
    10201252                        var section = this;
    10211253
    1022                         // Fill queue initially.
    1023                         if ( section.screenshotQueue === null ) {
    1024                                 section.screenshotQueue = section.controls();
     1254                        // Fill queue initially, or check for more if empty.
     1255                        if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) {
     1256                                // Add controls that haven't had their screenshots rendered.
     1257                                section.screenshotQueue = _.filter( section.controls(), function( control ) {
     1258                                        return ! control.screenshotRendered;
     1259                                });
    10251260                        }
    10261261
    1027                         // Are all screenshots rendered?
     1262                        // Are all screenshots rendered (for now)?
    10281263                        if ( ! section.screenshotQueue.length ) {
    10291264                                return;
    10301265                        }
     
    10601295                },
    10611296
    10621297                /**
     1298                 * Update the number of themes in the section.
     1299                 *
     1300                 * @since 4.7.0
     1301                 */
     1302                updateCount: function ( count ) {
     1303                        if ( ! count ) {
     1304                                count = this.loaded;
     1305                        }
     1306                        this.container.closest( '.control-panel-content' ).find( '.theme-count' ).text( count );
     1307                },
     1308
     1309                /**
    10631310                 * Advance the modal to the next theme.
    10641311                 *
    10651312                 * @since 4.2.0
     
    10791326                 * @since 4.2.0
    10801327                 */
    10811328                getNextTheme: function () {
    1082                         var control, next;
    1083                         control = api.control( 'theme_' + this.currentTheme );
     1329                        var section = this, control, next;
     1330                        control = api.control( section.params.action + '_theme_' + this.currentTheme );
    10841331                        next = control.container.next( 'li.customize-control-theme' );
    10851332                        if ( ! next.length ) {
    10861333                                return false;
    10871334                        }
    1088                         next = next[0].id.replace( 'customize-control-', '' );
     1335                        next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
    10891336                        control = api.control( next );
    10901337
    10911338                        return control.params.theme;
     
    11111358                 * @since 4.2.0
    11121359                 */
    11131360                getPreviousTheme: function () {
    1114                         var control, previous;
    1115                         control = api.control( 'theme_' + this.currentTheme );
     1361                        var section = this, control, previous;
     1362                        control = api.control( section.params.action + '_theme_' + this.currentTheme );
    11161363                        previous = control.container.prev( 'li.customize-control-theme' );
    11171364                        if ( ! previous.length ) {
    11181365                                return false;
    11191366                        }
    1120                         previous = previous[0].id.replace( 'customize-control-', '' );
     1367                        previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' );
    11211368                        control = api.control( previous );
    11221369
    11231370                        return control.params.theme;
     
    11651412                closeDetails: function () {
    11661413                        $( 'body' ).removeClass( 'modal-open' );
    11671414                        this.overlay.fadeOut( 'fast' );
    1168                         api.control( 'theme_' + this.currentTheme ).focus();
     1415                        api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus();
    11691416                },
    11701417
    11711418                /**
     
    14551702                }
    14561703        });
    14571704
     1705
    14581706        /**
     1707         * wp.customize.ThemesPanel
     1708         *
     1709         * Custom section for themes that displays without the customize preview.
     1710         *
     1711         * @constructor
     1712         * @augments wp.customize.Panel
     1713         * @augments wp.customize.Container
     1714         */
     1715        api.ThemesPanel = api.Panel.extend({
     1716                installingThemes: [],
     1717
     1718                /**
     1719                 * @since 4.7.0
     1720                 */
     1721                attachEvents: function () {
     1722                        var panel = this;
     1723
     1724                        // Expand/Collapse panel.
     1725                        panel.container.on( 'click', '.change-theme, .customize-theme', function( event ) {
     1726                                if ( panel.expanded() ) {
     1727                                        panel.collapse();
     1728                                } else {
     1729                                        panel.expand();
     1730                                }
     1731                        });
     1732
     1733                        // Toggle help display.
     1734                        panel.container.on( 'click', '.customize-help-toggle', function() {
     1735                                var button = $( this ),
     1736                                    content = button.next( '.customize-panel-description' );
     1737                                button.toggleClass( 'toggled' );
     1738                                content.toggle();
     1739                                if ( button.hasClass( 'toggled' ) ) {
     1740                                        button.attr( 'aria-expanded', 'true' );
     1741                                } else {
     1742                                        button.attr( 'aria-expanded', 'false' );
     1743                                }
     1744                        });
     1745
     1746                        api.bind( 'saved', function() {
     1747                                panel.container.find( '.customize-themes-unsaved-changes' ).hide();
     1748                        });
     1749                       
     1750                        // Save & publish customizer changes.
     1751                        panel.container.on( 'click', '#customize-themes-save', function() {
     1752                                $( '#save' ).click(); // Trigger customizer save.
     1753                                panel.container.find( '.customize-themes-unsaved-changes' ).hide();
     1754                                api.section( 'installed_themes' ).focus();
     1755                        });
     1756                       
     1757                        // Toggle theme upload view.
     1758                        panel.container.on( 'click', '.upload-toggle', function() {
     1759                                var button = $( this );
     1760                                panel.container.find( '.upload-theme' ).toggle();
     1761                                if ( 'true' === button.attr( 'aria-expanded' ) ) {
     1762                                        button.attr( 'aria-expanded', 'false' );
     1763                                } else {
     1764                                        button.attr( 'aria-expanded', 'true' );
     1765                                }
     1766                        });
     1767
     1768                        // Install theme.
     1769                        panel.container.on( 'click', '.theme-install', function( event ) {
     1770                                panel.installTheme( event );
     1771                        });
     1772
     1773                        // Update theme. Theme cards have the class, the details modal has the id.
     1774                        panel.container.on( 'click', '.update-theme, #update-theme', function( event ) {
     1775                                // #update-theme is a link.
     1776                                event.preventDefault();
     1777                                event.stopPropagation();
     1778
     1779                                panel.updateTheme( event );
     1780                        });
     1781
     1782                        // Update theme.
     1783                        panel.container.on( 'click', '.delete-theme', function( event ) {
     1784                                panel.deleteTheme( event );
     1785                        });
     1786
     1787                        _.bindAll( this, 'installTheme', 'updateTheme' );
     1788                },
     1789
     1790                /**
     1791                 * Update UI to reflect expanded state
     1792                 *
     1793                 * @since 4.7.0
     1794                 *
     1795                 * @param {Boolean}  expanded
     1796                 * @param {Object}   args
     1797                 * @param {Boolean}  args.unchanged
     1798                 * @param {Callback} args.completeCallback
     1799                 */
     1800                onChangeExpanded: function ( expanded, args ) {
     1801
     1802                        // Immediately call the complete callback if there were no changes
     1803                        if ( args.unchanged ) {
     1804                                if ( args.completeCallback ) {
     1805                                        args.completeCallback();
     1806                                }
     1807                                return;
     1808                        }
     1809
     1810                        // Note: there is a second argument 'args' passed
     1811                        var panel = this,
     1812                                section = panel.container.closest( '.accordion-section' ),
     1813                                overlay = section.closest( '.wp-full-overlay' ),
     1814                                customizeBtn = section.find( '.customize-theme' ),
     1815                                changeBtn = section.find( '.change-theme' ),
     1816                                content = section.find( '.control-panel-content' );
     1817
     1818                        if ( expanded ) {
     1819                                content.show( 0, function() {
     1820                                        overlay.addClass( 'in-themes-panel' );
     1821                                        section.addClass( 'current-panel' );
     1822                                        customizeBtn.attr( 'tabindex', '0' );
     1823                                        customizeBtn.focus();
     1824                                        if ( false === api.state( 'saved' ).get() ) {
     1825                                                panel.container.find( '.customize-themes-unsaved-changes' ).show();
     1826                                        }
     1827                                });
     1828                                // Automatically open the installed themes section.
     1829                                api.section( 'installed_themes' ).expand();
     1830                        } else {
     1831                                section.removeClass( 'current-panel' );
     1832                                overlay.removeClass( 'in-themes-panel' );
     1833                                content.delay( 200 ).hide( 0, function() {
     1834                                        if ( args.completeCallback ) {
     1835                                                args.completeCallback();
     1836                                        }
     1837                                } );
     1838                                customizeBtn.attr( 'tabindex', '-1' );
     1839                                changeBtn.focus();
     1840                        }
     1841                },
     1842
     1843                /**
     1844                 * Don't recalculate the top margin.
     1845                 *
     1846                 * @since 4.7.0
     1847                 * @private
     1848                 */
     1849                _recalculateTopMargin: function() {},
     1850
     1851                /**
     1852                 * Install a theme via wp.updates.
     1853                 *
     1854                 * @since 4.7.0
     1855                 */
     1856                installTheme: function( event ) {
     1857                        var preview = false, previewUrl,
     1858                            slug = $( event.target ).data( 'slug' );
     1859
     1860                        if ( -1 !== $.inArray( this.installingThemes, slug ) ) {
     1861                                return; // Theme is already being installed.
     1862                        }
     1863
     1864                        wp.updates.maybeRequestFilesystemCredentials( event );
     1865
     1866                        $( document ).on( 'wp-theme-install-success', function( event, response ) {
     1867                                var theme = false, customizeId, themeControl;
     1868                                if ( preview ) {
     1869                                        window.parent.location = previewUrl;
     1870                                } else {
     1871                                        api.control.each( function( control ) {
     1872                                                if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
     1873                                                        theme = control.params.theme; // Used below to add theme control.
     1874                                                        control.rerenderAsInstalled( true );
     1875                                                }
     1876                                        });
     1877
     1878                                        // Don't add the same theme more than once.
     1879                                        if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) {
     1880                                                return;
     1881                                        }
     1882
     1883                                        // Add theme control to installed section.
     1884                                        theme.type = 'installed';
     1885                                        customizeId = 'installed_theme_' + theme.id;
     1886                                        themeControl = new api.controlConstructor.theme( customizeId, {
     1887                                                params: {
     1888                                                        type: 'theme',
     1889                                                        content: '<li id="customize-control-theme-installed_' + theme.id + '" class="customize-control customize-control-theme"></li>',
     1890                                                        section: 'installed_themes',
     1891                                                        active: true,
     1892                                                        theme: theme,
     1893                                                        priority: 0 // Add all newly-installed themes to the top.
     1894                                                },
     1895                                                previewer: api.previewer
     1896                                        } );
     1897
     1898                                        api.control.add( customizeId, themeControl );
     1899                                        api.control( customizeId ).container.trigger( 'render-screenshot' );
     1900
     1901                                        // Close the details modal if it's open to the installed theme.
     1902                                        api.section.each( function( section ) {
     1903                                                if ( 'themes' !== section.params.type ) {
     1904                                                        if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere.
     1905                                                                section.closeDetails();
     1906                                                        }
     1907                                                }
     1908                                        });
     1909                                }
     1910                        } );
     1911
     1912                        $( document ).on( 'wp-theme-install-failure', function( event, response ) {
     1913                                if ( preview ) {
     1914                                        $( '.wp-full-overlay' ).removeClass( 'customize-loading' );
     1915                                }
     1916                        });
     1917
     1918                        this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again.
     1919                        wp.updates.installTheme( {
     1920                                slug: $( event.target ).data( 'slug' )
     1921                        } );
     1922                       
     1923                        // Also preview the theme as the event is triggered on Install & Preview.
     1924                        if ( $( event.target ).hasClass( 'preview' ) ) {
     1925                                preview = true;
     1926                                $( '.wp-full-overlay' ).addClass( 'customize-loading' );
     1927                                previewUrl = $( event.target ).data( 'previewurl' );
     1928                        }
     1929                },
     1930
     1931                /**
     1932                 * Update a theme via wp.updates.
     1933                 *
     1934                 * @since 4.7.0
     1935                 */
     1936                updateTheme: function( event ) {
     1937                        wp.updates.maybeRequestFilesystemCredentials( event );
     1938
     1939                        $( document ).on( 'wp-theme-update-success', function( event, response ) {
     1940                                // Rerender the control to reflect the update.
     1941                                api.control.each( function( control ) {
     1942                                        if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) {
     1943                                                control.params.hasUpdate = false;
     1944                                                control.rerenderAsInstalled( true );
     1945                                        }
     1946                                });
     1947                        } );
     1948
     1949                        wp.updates.updateTheme( {
     1950                                slug: $( event.target ).closest( '.notice' ).data( 'slug' )
     1951                        } );
     1952                },
     1953
     1954                /**
     1955                 * Delete a theme via wp.updates.
     1956                 *
     1957                 * @since 4.7.0
     1958                 */
     1959                deleteTheme: function( event ) {
     1960                        var panel = this,
     1961                                theme = $( event.target ).data( 'slug' ),
     1962                            section = api.section( 'installed_themes' );
     1963
     1964                        event.preventDefault();
     1965
     1966                        // Confirmation dialog for deleting a theme.
     1967                        if ( ! window.confirm( api.settings.l10n.confirmDeleteTheme ) ) {
     1968                                return;
     1969                        }
     1970
     1971                        wp.updates.maybeRequestFilesystemCredentials( event );
     1972
     1973                        $( document ).one( 'wp-theme-delete-success', function( event, response ) {
     1974                                var control = api.control( 'installed_theme_' + theme );
     1975
     1976                                // Remove theme control.
     1977                                control.container.remove();
     1978                                api.control.remove( control.id );
     1979                               
     1980                                // Rerender any other theme controls as uninstalled.
     1981                                api.control.each( function( control ) {
     1982                                        if ( 'theme' === control.params.type && control.params.theme.id === theme ) {
     1983                                                control.rerenderAsInstalled( false );
     1984                                        }
     1985                                });
     1986                        } );
     1987
     1988                        wp.updates.deleteTheme( {
     1989                                slug: theme
     1990                        } );
     1991                       
     1992                        // Close modal and focus the section.
     1993                        section.closeDetails();
     1994                        section.focus();
     1995                }
     1996
     1997        });
     1998
     1999
     2000        /**
    14592001         * A Customizer Control.
    14602002         *
    14612003         * A control provides a UI element that allows a user to modify a Customizer Setting.
     
    27733315        api.ThemeControl = api.Control.extend({
    27743316
    27753317                touchDrag: false,
    2776                 isRendered: false,
     3318                screenshotRendered: false,
    27773319
    27783320                /**
    2779                  * Defer rendering the theme control until the section is displayed.
    2780                  *
    27813321                 * @since 4.2.0
    27823322                 */
    2783                 renderContent: function () {
    2784                         var control = this,
    2785                                 renderContentArgs = arguments;
    2786 
    2787                         api.section( control.section(), function( section ) {
    2788                                 if ( section.expanded() ) {
    2789                                         api.Control.prototype.renderContent.apply( control, renderContentArgs );
    2790                                         control.isRendered = true;
    2791                                 } else {
    2792                                         section.expanded.bind( function( expanded ) {
    2793                                                 if ( expanded && ! control.isRendered ) {
    2794                                                         api.Control.prototype.renderContent.apply( control, renderContentArgs );
    2795                                                         control.isRendered = true;
    2796                                                 }
    2797                                         } );
    2798                                 }
    2799                         } );
    2800                 },
    2801 
    2802                 /**
    2803                  * @since 4.2.0
    2804                  */
    28053323                ready: function() {
    28063324                        var control = this;
    28073325
     
    28213339                                }
    28223340
    28233341                                // Prevent the modal from showing when the user clicks the action button.
    2824                                 if ( $( event.target ).is( '.theme-actions .button' ) ) {
     3342                                if ( $( event.target ).is( '.theme-actions .button, .update-theme' ) ) {
    28253343                                        return;
    28263344                                }
    28273345
    2828                                 var previewUrl = $( this ).data( 'previewUrl' );
    2829 
    2830                                 $( '.wp-full-overlay' ).addClass( 'customize-loading' );
    2831 
    2832                                 window.parent.location = previewUrl;
    2833                         });
    2834 
    2835                         control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) {
    2836                                 if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    2837                                         return;
    2838                                 }
    2839 
    2840                                 event.preventDefault(); // Keep this AFTER the key filter above
    2841 
    28423346                                api.section( control.section() ).showDetails( control.params.theme );
    28433347                        });
    28443348
     
    28493353                                if ( source ) {
    28503354                                        $screenshot.attr( 'src', source );
    28513355                                }
     3356                                control.screenshotRendered = true;
    28523357                        });
    28533358                },
    28543359
    28553360                /**
    2856                  * Show or hide the theme based on the presence of the term in the title, description, and author.
     3361                 * Show or hide the theme based on the presence of the term in the title, description, tags, and author.
    28573362                 *
    28583363                 * @since 4.2.0
    28593364                 */
     
    28693374                        } else {
    28703375                                control.deactivate();
    28713376                        }
     3377                },
     3378
     3379                /**
     3380                 * Rerender the theme from its JS template with the installed type.
     3381                 *
     3382                 * @since 4.7.0
     3383                 */
     3384                rerenderAsInstalled: function( installed ) {
     3385                        var control = this, section;
     3386                        if ( installed ) {
     3387                                control.params.theme.type = 'installed';
     3388                        } else {
     3389                                section = api.section( control.params.section );
     3390                                control.params.theme.type = section.params.action;
     3391                        }
     3392                        control.renderContent(); // replaces existing content
     3393                        control.container.trigger( 'render-screenshot' );
    28723394                }
    28733395        });
    28743396
     
    34323954                background:    api.BackgroundControl,
    34333955                theme:         api.ThemeControl
    34343956        };
    3435         api.panelConstructor = {};
     3957        api.panelConstructor = {
     3958                themes: api.ThemesPanel
     3959        };
    34363960        api.sectionConstructor = {
    34373961                themes: api.ThemesSection
    34383962        };
  • 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 {
  • 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        /**
     
    16261634                foreach ( $this->controls as $control ) {
    16271635                        $control->enqueue();
    16281636                }
     1637                if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
     1638                        wp_enqueue_script( 'updates' );
     1639                }
    16291640        }
    16301641
    16311642        /**
     
    17791790                $nonces = array(
    17801791                        'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
    17811792                        'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
     1793                        'customize-themes' => wp_create_nonce( 'customize-themes' ),
    17821794                );
    17831795
    17841796                /**
     
    18591871                        'autofocus' => $this->get_autofocus(),
    18601872                        'documentTitleTmpl' => $this->get_document_title_template(),
    18611873                        'previewableDevices' => $this->get_previewable_devices(),
     1874                        'l10n' => array(
     1875                                'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
     1876                        ),
    18621877                );
    18631878
    18641879                // Prepare Customize Section objects to pass to JavaScript.
     
    19621977
    19631978                /* Panel, Section, and Control Types */
    19641979                $this->register_panel_type( 'WP_Customize_Panel' );
     1980                $this->register_panel_type( 'WP_Customize_Themes_Panel' );
    19651981                $this->register_section_type( 'WP_Customize_Section' );
    19661982                $this->register_section_type( 'WP_Customize_Sidebar_Section' );
     1983                $this->register_section_type( 'WP_Customize_Themes_Section' );
    19671984                $this->register_control_type( 'WP_Customize_Color_Control' );
    19681985                $this->register_control_type( 'WP_Customize_Media_Control' );
    19691986                $this->register_control_type( 'WP_Customize_Upload_Control' );
     
    19731990                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    19741991                $this->register_control_type( 'WP_Customize_Theme_Control' );
    19751992
    1976                 /* Themes */
     1993                /* Themes (controls are loaded via ajax) */
    19771994
    1978                 $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
     1995                $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
    19791996                        'title'      => $this->theme()->display( 'Name' ),
     1997                        'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish them. Browse available themes in the categories in this menu or upload a theme from a <code>.zip</code> file.' ),
    19801998                        'capability' => 'switch_themes',
    19811999                        'priority'   => 0,
    19822000                ) ) );
    19832001
    1984                 // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
    1985                 $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
     2002                $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
     2003                        'title'      => __( 'Installed' ),
     2004                        'action'     => 'installed',
    19862005                        'capability' => 'switch_themes',
     2006                        'panel'      => 'themes',
     2007                        'priority'   => 0,
    19872008                ) ) );
    19882009
    1989                 require_once( ABSPATH . 'wp-admin/includes/theme.php' );
     2010                $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
     2011                        'title'      => __( 'Featured' ),
     2012                        'action'     => 'featured',
     2013                        'capability' => 'install_themes',
     2014                        'panel'      => 'themes',
     2015                        'priority'   => 5,
     2016                ) ) );
    19902017
    1991                 // Theme Controls.
     2018                $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
     2019                        'title'      => __( 'Popular' ),
     2020                        'action'     => 'popular',
     2021                        'capability' => 'install_themes',
     2022                        'panel'      => 'themes',
     2023                        'priority'   => 10,
     2024                ) ) );
    19922025
    1993                 // Add a control for the active/original theme.
    1994                 if ( ! $this->is_theme_active() ) {
    1995                         $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
    1996                         $active_theme = current( $themes );
    1997                         $active_theme['isActiveTheme'] = true;
    1998                         $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
    1999                                 'theme'    => $active_theme,
    2000                                 'section'  => 'themes',
    2001                                 'settings' => 'active_theme',
    2002                         ) ) );
    2003                 }
     2026                $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
     2027                        'title'      => __( 'Latest' ),
     2028                        'action'     => 'latest',
     2029                        'capability' => 'install_themes',
     2030                        'panel'      => 'themes',
     2031                        'priority'   => 15,
     2032                ) ) );
    20042033
    2005                 $themes = wp_prepare_themes_for_js();
    2006                 foreach ( $themes as $theme ) {
    2007                         if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
    2008                                 continue;
    2009                         }
     2034                $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
     2035                        'title'      => __( 'Favorites' ),
     2036                        'action'     => 'favorites',
     2037                        'capability' => 'install_themes',
     2038                        'panel'      => 'themes',
     2039                        'priority'   => 20,
     2040                ) ) );
     2041               
     2042                $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
     2043                        'title'      => __( 'Feature Filter' ),
     2044                        'action'     => 'feature_filter',
     2045                        'capability' => 'install_themes',
     2046                        'panel'      => 'themes',
     2047                        'priority'   => 25,
     2048                ) ) );
     2049               
     2050                $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
     2051                        'title'      => __( 'Search themes &hellip;' ),
     2052                        'action'     => 'search',
     2053                        'capability' => 'install_themes',
     2054                        'panel'      => 'themes',
     2055                        'priority'   => 30,
     2056                ) ) );
     2057               
     2058                // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
     2059                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
     2060                        'capability' => 'switch_themes',
     2061                ) ) );
    20102062
    2011                         $theme_id = 'theme_' . $theme['id'];
    2012                         $theme['isActiveTheme'] = false;
    2013                         $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
    2014                                 'theme'    => $theme,
    2015                                 'section'  => 'themes',
    2016                                 'settings' => 'active_theme',
    2017                         ) ) );
    2018                 }
    20192063
    20202064                /* Site Identity */
    20212065
     
    23222366        }
    23232367
    23242368        /**
     2369         * Load themes into the theme browsing/installation UI.
     2370         *
     2371         * @since 4.7.0
     2372         * @access public
     2373         */
     2374        public function load_themes_ajax() {
     2375                check_ajax_referer( 'customize-themes', 'customize-themes-nonce' );
     2376
     2377                if ( ! current_user_can( 'switch_themes' ) ) {
     2378                        wp_die( -1 );
     2379                }
     2380
     2381                if ( empty( $_POST['theme_action'] ) ) {
     2382                        wp_send_json_error( 'missing_theme_action' );
     2383                }
     2384
     2385                if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
     2386                        wp_send_json_error( 'empty_search' );
     2387                } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
     2388                        wp_send_json_error( 'empty_user' );
     2389                } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
     2390                        wp_send_json_error( 'no_features' );
     2391                }
     2392
     2393                require_once( ABSPATH . 'wp-admin/includes/theme.php' );
     2394                if ( 'installed' === $_POST['theme_action'] ) {
     2395                        $themes = array( 'themes' => wp_prepare_themes_for_js() );
     2396                        foreach ( $themes['themes'] as &$theme ) {
     2397                                $theme['type'] = 'installed';
     2398                                // Set active based on customized theme.
     2399                                if ( $_POST['customized_theme'] === $theme['id'] ) {
     2400                                        $theme['active'] = true;
     2401                                } else {
     2402                                        $theme['active'] = false;
     2403                                }
     2404                        }
     2405                } else {
     2406                        if ( ! current_user_can( 'install_themes' ) ) {
     2407                                wp_die( -1 );
     2408                        }
     2409
     2410                        // Arguments for all queries.
     2411                        $args = array(
     2412                                'per_page' => 100,
     2413                                'page' => absint( $_POST['page'] ),
     2414                                'fields' => array(
     2415                                        'slug' => true,
     2416                                        'screenshot' => true,
     2417                                        'description' => true,
     2418                                        'requires' => true,
     2419                                        'rating' => true,
     2420                                        'downloaded' => true,
     2421                                        'downloadLink' => true,
     2422                                        'last_updated' => true,
     2423                                        'homepage' => true,
     2424                                        'num_ratings' => true,
     2425                                        'tags' => true,
     2426                                )
     2427                        );
     2428
     2429                        // Specialized handling for each query.
     2430                        switch ( $_POST['theme_action'] ) {
     2431                                case 'search':
     2432                                        $args['search'] = wp_unslash( $_POST['search'] );
     2433                                        break;
     2434                                case 'favorites':
     2435                                        $args['user'] = wp_unslash(  $_POST['user'] );
     2436                                case 'featured':
     2437                                case 'popular':
     2438                                        $args['browse'] = $_POST['theme_action'];
     2439                                        break;
     2440                                case 'latest':
     2441                                        $args['browse'] = 'new';
     2442                                        break;
     2443                                case 'feature_filter':
     2444                                        $args['tag'] = wp_unslash( $_POST['tags'] );
     2445                                        break;
     2446                        }
     2447
     2448                        // Load themes from the .org API.
     2449                        $themes = themes_api( 'query_themes', $args );
     2450                        if ( is_wp_error( $themes ) ) {
     2451                                wp_send_json_error();
     2452                        }
     2453
     2454                        // Prepare a list of installed themes to check against before the loop.
     2455                        $installed_themes = array();
     2456                        $wp_themes = wp_get_themes();
     2457                        foreach ( $wp_themes as $theme ) {
     2458                                $installed_themes[] = $theme->get_stylesheet();
     2459                        }
     2460                        $update_php = network_admin_url( 'update.php?action=install-theme' );
     2461                        foreach ( $themes->themes as &$theme ) {
     2462                                $theme->install_url = add_query_arg( array(
     2463                                        'theme'    => $theme->slug,
     2464                                        '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug )
     2465                                ), $update_php );
     2466
     2467                                $theme->name        = wp_kses( $theme->name, $themes_allowedtags );
     2468                                $theme->author      = wp_kses( $theme->author, $themes_allowedtags );
     2469                                $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
     2470                                $theme->description = wp_kses( $theme->description, $themes_allowedtags );
     2471                                $theme->tags        = implode( ', ', $theme->tags );
     2472                                $theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
     2473                                $theme->num_ratings = number_format_i18n( $theme->num_ratings );
     2474                                $theme->preview_url = set_url_scheme( $theme->preview_url );
     2475
     2476                                // Handle themes that are already installed as installed themes.
     2477                                if ( in_array( $theme->slug, $installed_themes ) ) {
     2478                                        $theme->type = 'installed';
     2479                                } else {
     2480                                        $theme->type = $_POST['theme_action'];
     2481                                }
     2482
     2483                                // Set active based on customized theme.
     2484                                if ( $_POST['customized_theme'] === $theme->slug ) {
     2485                                        $theme->active = true;
     2486                                } else {
     2487                                        $theme->active = false;
     2488                                }
     2489
     2490                                // Map available theme properties to installed theme properties.
     2491                                $theme->id           = $theme->slug;
     2492                                $theme->screenshot   = array( $theme->screenshot_url );
     2493                                $theme->authorAndUri = $theme->author;
     2494                                unset( $theme->slug );
     2495                                unset( $theme->screenshot_url );
     2496                                unset( $theme->author );
     2497                        }
     2498                }
     2499                wp_send_json_success( $themes );
     2500        }
     2501
     2502
     2503        /**
    23252504         * Callback for validating the header_textcolor value.
    23262505         *
    23272506         * 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.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.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.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 ) { #>
     91                        <# if ( data.theme.active ) { #>
    9392                                <h3 class="theme-name" id="{{ 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' ); ?></span>
     100                        <# } else if ( 'installed' === data.theme.type ) { #>
     101                                <h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
     102                                <div class="theme-actions">
     103                                        <button type="button" class="button button-primary preview-theme" data-preview-url="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Live Preview' ); ?></span>
     104                                </div>
     105                                <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
    99106                        <# } else { #>
    100                                 <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
     107                                <h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
    101108                                <div class="theme-actions">
    102                                         <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
     109                                        <button type="button" class="button theme-install" data-slug="{{ data.theme.id }}"><?php _e( 'Install' ); ?></button>
     110                                        <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>
    103111                                </div>
    104                         <# } #>
     112                        <# } #>                 
    105113                </div>
    106114        <?php
    107115        }
  • 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="panel-meta accordion-section customize-info">
     74                        <div class="current-theme">
     75                                <span class="preview-notice">
     76                                        <?php
     77                                        /* translators: %s: the site/panel title in the Customizer */
     78                                        printf( __( 'Current Theme %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
     79                                        ?>
     80                                </span>
     81                                <button type="button" class="button customize-theme" tabindex="-1"><?php _e( 'Customize' ); ?></button>
     82                        </div>
     83                        <h2><?php _e( 'Themes' ); ?></h2>
     84                        <?php if ( current_user_can( 'install_themes' ) ) : ?>
     85                                <button type="button" class="upload-toggle page-title-action" aria-expanded="false"><?php _e( 'Upload Theme' ); ?></button>
     86                        <?php endif; ?>
     87                </li>
     88                <li class="upload-theme">
     89                        <?php if ( current_user_can( 'install_themes' ) ) : ?>
     90                                <p class="install-help"><?php _e( 'If you have a theme in a <code>.zip</code> format, you may install it by uploading it here.' ); ?></p>
     91                                <div class="wp-upload-form">
     92                                        <input type="file" id="themezip" name="themezip"><label class="screen-reader-text" for="themezip"><?php _e( 'Theme zip file' ); ?></label>
     93                                        <button type="button" id="upload-theme-submit" class="button"><?php _e( 'Install Now' ); ?></button>
     94                                </div>
     95                        <?php endif; ?>
     96                        </div>
     97                </li>
     98                <li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
     99                <li class="customize-themes-notifications">
     100                        <div class="notice notice-warning customize-themes-unsaved-changes" style="display: none;"><p>
     101                                <?php _e( 'You have unsaved changes that will be lost if you preview a new theme.' ); ?>
     102                                <button type="button" id="customize-themes-save" class="button" ><?php _e( 'Save & Publish' ); ?></button>
     103                        </p></div>
     104                </li>
     105                <li id="customize-theme-section-navigation" class="wp-filter">
     106                        <div class="filter-count"><span class="count theme-count">0</span></div>
     107                        <div class="filter-links"></div>
     108                        <?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
     109                                <# if ( data.description ) { #>
     110                                        <button class="customize-help-toggle dashicons dashicons-editor-help" type="button" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
     111                                        <div class="description customize-panel-description">
     112                                                {{{ data.description }}}
     113                                        </div>
     114                                <# } #>
     115                        <?php else: ?>
     116                                <p class="themes-filter-container">
     117                                        <label for="themes-filter">
     118                                                <span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
     119                                                <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
     120                                        </label>
     121                                </p>
     122                        <?php endif; ?>
     123                </li>
     124        <?php
     125        }
     126}
  • 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         * Get section parameters for JS.
     43         *
     44         * @since 4.7.0
     45         * @access public
     46         * @return array Exported parameters.
     47         */
     48        public function json() {
     49                $exported = parent::json();
     50                $exported['action'] = $this->action;
     51
     52                return $exported;
     53        }
     54
     55        /**
     56         * Render a themes section as a JS template.
     57         *
     58         * The template is only rendered by PHP once, so all actions are prepared at once on the server side.
     59         *
     60         * @since 4.7.0
    3461         * @access protected
    3562         */
    36         protected function render() {
    37                 $classes = 'accordion-section control-section control-section-' . $this->type;
     63        protected function render_template() {
    3864                ?>
    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;
    44                                 } 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">
     65                <li id="accordion-section-{{ data.id }}" class="theme-section">
     66                        <# if ( 'search' === data.action ) { #>
     67                                <div class="search-form customize-themes-section-title themes-section-search_themes">
     68                                        <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
     69                                        <input placeholder="{{ data.title }}" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
     70                                        <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
     71                                </div>
     72                        <# } else { #>
     73                                <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button>
     74                        <# } #>
     75                        <div class="customize-themes-section control-section-content themes-php">
     76                                <# if ( 'favorites' === data.action ) { #>
     77                                        <div class="favorites-form">
     78                                                <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
     79                                                <p>
     80                                                        <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
     81                                                        <input type="search" id="wporg-username-input" value="">
     82                                                        <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
     83                                                </p>
     84                                        </div>
     85                                <# } else if ( 'feature_filter' === data.action ) { #>
     86                                        <div class="filter-drawer">
     87                                                <div class="buttons">
     88                                                        <button type="button" class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></a>
     89                                                        <button type="button" class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></a>
     90                                                </div>
    6091                                        <?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;
     92                                        $feature_list = get_theme_feature_list();
     93                                        foreach ( $feature_list as $feature_name => $features ) {
     94                                                echo '<fieldset class="filter-group">';
     95                                                $feature_name = esc_html( $feature_name );
     96                                                echo '<legend>' . $feature_name . '</legend>';
     97                                                echo '<div class="filter-group-feature">';
     98                                                foreach ( $features as $feature => $feature_name ) {
     99                                                        $feature = esc_attr( $feature );
     100                                                        echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
     101                                                        echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
     102                                                }
     103                                                echo '</div>';
     104                                                echo '</fieldset>';
    65105                                        }
    66106                                        ?>
    67                                         <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
    68                                 </h3>
    69 
     107                                                <div class="filtered-by">
     108                                                        <span><?php _e( 'Filtering by:' ); ?></span>
     109                                                        <div class="tags"></div>
     110                                                        <button type="button" class="button-link"><?php _e( 'Edit' ); ?></a>
     111                                                </div>
     112                                        </div>
     113                                <# } #>
    70114                                <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; ?>
    79115                                <div class="theme-browser rendered">
    80                                         <ul class="themes accordion-section-content">
     116                                        <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>
     117                                        <ul class="themes">
    81118                                        </ul>
     119                                        <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
     120                                        <p class="spinner"></p>
    82121                                </div>
    83122                        </div>
    84123                </li>