WordPress.org

Make WordPress Core

Ticket #27055: 27055.2.diff

File 27055.2.diff, 20.9 KB (added by matveb, 5 years ago)
  • wp-admin/includes/theme.php

     
    452452         */
    453453        $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
    454454        return array_values( $prepared_themes );
     455}
     456
     457
     458/**
     459 * Get public themes from the themes directory
     460 * and prepare them for JavaScript
     461 *
     462 * @since 3.8.0
     463 *
     464 * @uses themes_api themes_directory_sections
     465 * @return array with $theme objects
     466 */
     467function prepare_public_themes_for_js( $themes = array() ) {
     468
     469        $sections = array(
     470                'featured' => __( 'Featured Themes' ),
     471                'popular'  => __( 'Popular Themes' ),
     472                'new'      => __( 'Newest Themes' ),
     473        );
     474
     475        $sections = array_keys( $sections );
     476
     477        $args = array(
     478                'page' => 1,
     479                'per_page' => 12,
     480        );
     481
     482        foreach ( $sections as $section ) {
     483                $args['browse'] = $section;
     484                $themes[ $section ] = themes_api( 'query_themes', $args );
     485        }
     486
     487        return $themes;
    455488}
     489 No newline at end of file
  • wp-admin/js/theme.js

     
    1212themes.data = _wpThemeSettings;
    1313l10n = themes.data.l10n;
    1414
     15// Shortcut for (bool) isBrowsing check
     16themes.isInstall = themes.data.settings.isBrowsing;
     17
    1518// Setup app structure
    16 _.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template });
     19_.extend( themes, { model: {}, view: {}, routes: {}, router: {}, template: wp.template, orgAPI: {} });
    1720
    1821themes.model = Backbone.Model.extend({});
    1922
     
    5558                this.$el.append( '<br class="clear"/>' );
    5659        },
    5760
     61        // Defines search element container
     62        searchContainer: $( '#wpbody h2:first' ),
     63
    5864        // Search input and view
    5965        // for current theme collection
    6066        search: function() {
     
    6672                        return;
    6773                }
    6874
    69                 view = new themes.view.Search({ collection: self.collection });
     75                view = new themes.view.Search({
     76                        collection: self.collection,
     77                        parent: this
     78                });
    7079
    7180                // Render and append after screen title
    7281                view.render();
    73                 $('#wpbody h2:first')
     82                this.searchContainer
    7483                        .append( $.parseHTML( '<label class="screen-reader-text" for="theme-search-input">' + l10n.search + '</label>' ) )
    7584                        .append( view.el );
    7685        },
     
    749758        }
    750759};
    751760
     761// --------------------
     762// PUBLIC THEME BROWSER
     763// --------------------
     764//
     765// The public theme browser relies on the basic structure of the script
     766// but overwrites some aspects of the main views
     767//
     768// The theme collection is the same but models have different attributes
     769// as determined by the public themes_api
     770//
     771// @ bool check if it's the 'browsing themes' screen
     772if ( themes.isInstall ) {
     773
     774        // Extend the main view controller
     775        // @see themes.view.Appearance {}
     776        //
     777        // Overwrites properties and functions as needed
     778        _.extend( themes.view.Appearance.prototype, {
     779
     780                el: '#wpbody-content .wrap',
     781
     782                // Register events for sorting and filters in theme-navigation
     783                events: {
     784                        'click .theme-section': 'setSort',
     785                        'click .theme-filter': 'setFilter'
     786                },
     787
     788                // Handles all the rendering of the public theme directory
     789                install: function( section ) {
     790                        // Create a new collection with the proper theme data
     791                        // for each section
     792                        this.collection = new themes.Collection( themes.data.browse.publicThemes[ section ].themes );
     793
     794                        // Set ups the view and passes the section argument
     795                        this.view = new themes.view.Themes({
     796                                collection: this.collection,
     797                                section: section,
     798                                parent: this
     799                        });
     800
     801                        // Reset pagination every time the install view handler is run
     802                        this.page = 0;
     803
     804                        // Render and append
     805                        this.$el.find( '.themes' ).remove();
     806                        this.view.render();
     807                        this.$el.find( '.theme-browser' ).append( this.view.el );
     808
     809                        this.uploader();
     810                },
     811
     812                // Initial render method
     813                render: function() {
     814                        this.search();
     815                        return this.install( this.options.section );
     816                },
     817
     818                // Sorting navigation
     819                setSort: function( event ) {
     820                        var $el = $( event.target ),
     821                                sort = $el.data( 'sort' );
     822
     823                        // Bail if this is already active
     824                        if ( $el.hasClass( this.activeClass ) ) {
     825                                return;
     826                        }
     827
     828                        $( '#theme-search-input' ).val( '' );
     829
     830                        $( '.theme-section' ).removeClass( this.activeClass );
     831                        $el.addClass( this.activeClass );
     832
     833                        this.install( sort );
     834                },
     835
     836                // Top filters
     837                setFilter: function( event ) {
     838                        var $el = $( event.target ),
     839                                filter = $el.data( 'filter' );
     840
     841                        // Bail if this is already active
     842                        if ( $el.hasClass( this.activeClass ) ) {
     843                                return;
     844                        }
     845
     846                        $( '.theme-filter' ).removeClass( this.activeClass );
     847                        $el.addClass( this.activeClass );
     848
     849                        //
     850                },
     851
     852                activeClass: 'current',
     853
     854                // Overwrite search container class to append search
     855                // in new location
     856                searchContainer: $( '.theme-navigation' ),
     857
     858                uploader: function() {
     859                        $( 'a.upload.button' ).on( 'click', function() {
     860                                $( '.upload-theme' )
     861                                        .toggleClass( 'opened' )
     862                                        .hasClass( 'opened' ) ? $( this ).text( l10n.back ) : $( this ).text( l10n.upload );
     863                        });
     864                }
     865        });
     866
     867        _.extend( themes.view.Search.prototype, {
     868
     869                events: {
     870                        'keyup': 'search'
     871                },
     872
     873                // Handles Ajax request for searching through themes in public repo
     874                search: function() {
     875                        var request,
     876                                self = this;
     877
     878                        this.collection = this.options.parent.view.collection;
     879
     880                        // Clear on escape.
     881                        if ( event.type === 'keyup' && event.which === 27 ) {
     882                                event.target.value = '';
     883                        }
     884
     885                        // Construct the main `search` request
     886                        // using all the defaul values
     887                        _.extend( themes.orgAPI.data.request, {
     888                                search: event.target.value
     889                        });
     890
     891                        // Intercept an [author] search.
     892                        //
     893                        // If input value starts with `author:` send a request
     894                        // for `author` instead of a regular `search`
     895                        if ( event.target.value.substring( 0, 7 ) === 'author:' ) {
     896                                _.extend( themes.orgAPI.data.request, {
     897                                        search: '',
     898                                        author: event.target.value.slice( 7 )
     899                                });
     900                        }
     901
     902                        // Send Ajax POST request to api.wordpress.org/themes
     903                        $.ajax({
     904                                url: themes.orgAPI.url,
     905
     906                                // We want JSON data
     907                                dataType: 'json',
     908                                type: 'POST',
     909
     910                                // Request data
     911                                data: themes.orgAPI.data,
     912
     913                                beforeSend: function() {
     914                                        // Spin it
     915                                        $( 'body' ).addClass( 'loading-themes' );
     916                                }
     917                        })
     918                                .done( function( data ) {
     919                                        // Update the collection with the queried data
     920                                        self.collection.reset( data.themes );
     921                                        // Trigger a collection refresh event to render the views
     922                                        self.collection.trigger( 'update' );
     923
     924                                        // Un-spin it
     925                                        $( 'body' ).removeClass( 'loading-themes' );
     926                        })
     927                                .fail( function() {
     928                                        // Fail
     929                        });
     930                }
     931        });
     932
     933        // Store api.wordpress.org/themes values and structure
     934        // for internal access
     935        themes.orgAPI = {
     936
     937                data: {
     938                        action: 'query_themes',
     939                        request: {
     940                                fields: {
     941                                        tags: true,
     942                                }
     943                        }
     944                },
     945
     946                url: 'http://api.wordpress.org/themes/info/1.1/?action=query_themes'
     947        };
     948
     949        // Overwrite main application initializer
     950        themes.Run.init = function() {
     951                // Initializes the main view
     952                // and bootstraps the default sorting section
     953
     954                // Set up the view
     955                // Passes the default 'section' as an option
     956                this.view = new themes.view.Appearance({
     957                        el: $( '#appearance' ),
     958                        section: 'featured'
     959                });
     960
     961                // Render results
     962                this.render();
     963        }
     964
     965}
     966
    752967// Ready...
    753968jQuery( document ).ready(
    754969
  • wp-admin/css/themes.css

     
    10641064  16.2 - Install Themes
    10651065------------------------------------------------------------------------------*/
    10661066
    1067 .theme-install-php h4 {
    1068         margin: 2.5em 0 8px;
     1067.theme-install-php h2 .upload {
     1068        margin-left: 10px;
    10691069}
    1070 
    1071 .theme-install-php .tablenav {
    1072         height: auto;
     1070.theme-navigation {
     1071        background: #fff;
     1072        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
     1073        -moz-box-sizing: border-box;
     1074        box-sizing: border-box;
     1075        color: #555;
     1076        display: inline-block;
     1077        font-size: 13px;
     1078        margin: 20px 0 30px;
     1079        padding: 0 20px;
     1080        position: relative;
     1081        width: 100%;
    10731082}
    1074 
    1075 .theme-install-php .spinner {
    1076         margin-top: 9px;
    1077 }
    1078 
    1079 .available-theme {
    1080         display: inline-block;
    1081         margin-right: 10px;
     1083.upload-theme {
     1084        /*background: #fff;
     1085        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);*/
     1086        -moz-box-sizing: border-box;
     1087        box-sizing: border-box;
     1088        margin: 0px 0 0;
     1089        padding: 0;
     1090        width: 100%;
     1091        height: 0;
     1092        -webkit-transition: height 200ms;
     1093        transition: height 200ms;
    10821094        overflow: hidden;
    1083         padding: 20px 20px 20px 0;
    1084         vertical-align: top;
    1085         width: 300px;
     1095        position: relative;
     1096                top: 10px;
    10861097}
    1087 
    1088 .available-theme .screenshot {
    1089         width: 300px;
    1090         height: 225px;
     1098.upload-theme.opened {
    10911099        display: block;
    1092         border: 1px solid #ccc;
    1093         margin-bottom: 10px;
    1094         overflow: hidden;
    1095         background-color: #fff;
     1100        height: auto;
    10961101}
    1097 
    1098 .available-theme img {
    1099         width: 300px;
     1102.upload-theme .wp-upload-form {
     1103        background: #fafafa;
     1104        border: 1px solid #e5e5e5;
     1105        padding: 30px;
     1106        margin: 30px auto;
     1107        max-width: 380px;
    11001108}
    1101 
    1102 .available-theme h3 {
    1103         margin: 15px 0 0;
     1109.upload-theme .install-help {
     1110        color: #999;
     1111        font-size: 18px;
     1112        font-style: normal;
     1113        margin: 0;
     1114        padding: 40px 0 0;
     1115        text-align: center;
    11041116}
    1105 
    1106 .available-theme .theme-author {
    1107         line-height: 18px;
     1117.upload-theme.opened + .theme-navigation,
     1118.upload-theme.opened + .theme-navigation + .theme-browser {
     1119        display: none;
    11081120}
    1109 
    1110 .available-theme .action-links {
    1111         margin-top: 10px;
    1112         overflow: hidden;
     1121.theme-section {
     1122        color: #666;
     1123        cursor: pointer;
     1124        display: inline-block;
     1125        margin: 0 10px;
     1126        padding: 15px 0;
    11131127}
    1114 
    1115 .available-theme a.screenshot:focus {
    1116         border-color: #777;
     1128.theme-section.current {
     1129        border-bottom: 4px solid #666;
     1130        color: #222;
    11171131}
    1118 
    1119 .available-theme .action-links li {
    1120         float: left;
    1121         padding-right: 10px;
    1122         margin-right: 10px;
    1123         border-right: 1px solid #dfdfdf;
     1132.theme-top-filters {
     1133        display: inline-block;
     1134        border-left: 1px solid #ddd;
     1135        padding-bottom: 4px;
     1136        padding-left: 20px;
     1137        margin-left: 20px;
    11241138}
    1125 
    1126 .available-theme .action-links li {
    1127         padding-right: 8px;
    1128         margin-right: 8px;
     1139.theme-navigation .theme-filter {
     1140        color: #666;
     1141        cursor: pointer;
     1142        display: inline-block;
     1143        margin: 0 10px;
     1144        padding: 4px 5px;
    11291145}
    1130 
    1131 .ie8 .available-theme .action-links li {
    1132         padding-right: 7px;
    1133         margin-right: 7px;
     1146.theme-navigation .theme-filter.current {
     1147        background: rgb(46, 162, 204);
     1148        border-radius: 3px;
     1149        color: #fff;
    11341150}
    1135 
    1136 .available-theme .action-links li:last-child {
    1137         padding-right: 0;
    1138         margin-right: 0;
    1139         border-right: 0;
     1151.theme-install-php .theme-search {
     1152        position: absolute;
     1153                right: 10px;
     1154                top: 9px;
     1155        font-size: 16px;
     1156        font-weight: 300;
     1157        line-height: 1.5;
     1158        width: 280px;
    11401159}
    1141 
    1142 .available-theme .action-links .delete-theme {
    1143         float: right;
    1144         margin-left: 8px;
    1145         margin-right: 0;
     1160.add-new-theme {
     1161        display: none !important;
    11461162}
    11471163
    1148 .available-theme .action-links .delete-theme a {
    1149         color: red;
    1150         padding: 2px;
     1164.rating {
     1165        margin: 30px 0;
    11511166}
    1152 
    1153 .available-theme .action-links .delete-theme a:hover {
    1154         background: red;
    1155         color: #fff;
    1156         text-decoration: none;
     1167.rating span:before {
     1168        color: #E6B800;
     1169        content: "\f154";
     1170        display: inline-block;
     1171        -webkit-font-smoothing: antialiased;
     1172        font: normal 20px/1 'dashicons';
     1173        vertical-align: top;
    11571174}
    1158 
    1159 .available-theme .action-links p {
    1160         float: left;
     1175/* Half stars */
     1176.rating-10 span.one:before,
     1177.rating-30 span.two:before,
     1178.rating-50 span.three:before,
     1179.rating-70 span.four:before,
     1180.rating-90 span.five:before {
     1181        content: "\f459";
    11611182}
    1162 
    1163 /* Allow for three-up in small windows when sidebar is collapsed */
    1164 @media only screen and (max-width: 1200px) {
    1165         .folded .available-theme,
    1166         .folded .available-theme .screenshot {
    1167                 width: 300px;
    1168         }
    1169 
    1170         .folded .available-theme .screenshot {
    1171                 height: 225px;
    1172         }
     1183/* Full stars */
     1184.rating-20 span.one:before {
     1185        content: "\f155";
    11731186}
    1174 
    1175 /* Adjust three-up display in smaller windows when sidebar is collapsed */
    1176 @media only screen and (max-width: 1079px) {
    1177         .folded .available-theme,
    1178         .folded .available-theme .screenshot {
    1179                 width: 270px;
    1180         }
    1181 
    1182         .folded .available-theme .screenshot {
    1183                 height: 203px;
    1184         }
     1187.rating-30 span.one:before,
     1188.rating-40 span.one:before,
     1189.rating-40 span.two:before {
     1190        content: "\f155";
    11851191}
    1186 
    1187 /* Allow for three-up on 1024px wide screens, e.g. tablets */
    1188 @media only screen and (max-width: 1200px) {
    1189         .available-theme,
    1190         .available-theme .screenshot {
    1191                 width: 240px;
    1192         }
    1193 
    1194         .available-theme .screenshot {
    1195                 height: 180px;
    1196         }
    1197 
    1198         .available-theme img {
    1199                 width: 100%;
    1200         }
     1192.rating-50 span.one:before,
     1193.rating-50 span.two:before,
     1194.rating-60 span.one:before,
     1195.rating-60 span.two:before,
     1196.rating-60 span.three:before {
     1197        content: "\f155";
    12011198}
    1202 
    1203 .feature-filter {
    1204         padding: 8px 12px 0;
     1199.rating-70 span.one:before,
     1200.rating-70 span.two:before,
     1201.rating-70 span.three:before,
     1202.rating-80 span.one:before,
     1203.rating-80 span.two:before,
     1204.rating-80 span.three:before,
     1205.rating-80 span.four:before {
     1206        content: "\f155";
    12051207}
    12061208
    1207 .feature-filter .feature-group {
    1208         float: left;
    1209         margin: 5px 10px 10px;
     1209.rating-90 span.one:before,
     1210.rating-90 span.two:before,
     1211.rating-90 span.three:before,
     1212.rating-90 span.four:before,
     1213.rating-100 span.one:before,
     1214.rating-100 span.two:before,
     1215.rating-100 span.three:before,
     1216.rating-100 span.four:before,
     1217.rating-100 span.five:before {
     1218        content: "\f155";
    12101219}
    12111220
    1212 .feature-filter .feature-group li {
    1213         display: inline-block;
    1214         vertical-align: top;
    1215         list-style-type: none;
    1216         padding-right: 25px;
    1217         width: 150px;
     1221.loading-themes .theme-browser {
     1222        display: none;
    12181223}
     1224.loading-themes .spinner {
     1225        display: block;
     1226        margin: 40px auto 0;
     1227        float: none;
     1228}
    12191229
    12201230/*------------------------------------------------------------------------------
    12211231  16.3 - Custom Header Screen
  • wp-admin/theme-install.php

     
    2020        exit();
    2121}
    2222
    23 $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
    24 $pagenum = $wp_list_table->get_pagenum();
    25 $wp_list_table->prepare_items();
     23// $wp_list_table = _get_list_table('WP_Theme_Install_List_Table');
     24// $pagenum = $wp_list_table->get_pagenum();
     25// $wp_list_table->prepare_items();
    2626
    27 $title = __('Install Themes');
     27$title = __( 'Add Themes' );
    2828$parent_file = 'themes.php';
    29 if ( !is_network_admin() )
     29
     30if ( ! is_network_admin() ) {
    3031        $submenu_file = 'themes.php';
     32}
    3133
    32 wp_enqueue_script( 'theme-install' );
     34// wp_enqueue_script( 'theme-install' );
    3335wp_enqueue_script( 'theme-preview' );
    3436
    35 $body_id = $tab;
     37wp_localize_script( 'theme', '_wpThemeSettings', array(
     38        'themes'   => false,
     39        'settings' => array(
     40                'isBrowsing'    => (bool) ( get_current_screen()->id == 'theme-install' ),
     41                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
     42                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
     43                'root'          => parse_url( admin_url( 'theme-install.php' ), PHP_URL_PATH ),
     44                '_ajax_fetch_list_nonce' => wp_nonce_field( 'fetch-list-WP_Theme_Install_List_Table', '_ajax_fetch_list_nonce' ),
     45        ),
     46        'l10n' => array(
     47                'addNew' => __( 'Add New Theme' ),
     48                'search'  => __( 'Search Themes' ),
     49                'searchPlaceholder' => __( 'Search themes...' ),
     50                'upload' => __( 'Upload Theme' ),
     51                'back'   => __( 'Back' ),
     52        ),
     53        'browse' => array(
     54                'sections' => apply_filters( 'install_theme_sections', array(
     55                        'featured' => __( 'Featured Themes' ),
     56                        'popular'  => __( 'Popular Themes' ),
     57                        'new'      => __( 'Newest Themes' ),
     58                ) ),
     59                'publicThemes' => ( get_current_screen()->id == 'theme-install' ) ? prepare_public_themes_for_js() : null,
     60        ),
     61) );
    3662
     63wp_enqueue_script( 'theme' );
     64
     65// $body_id = $tab;
     66
    3767/**
    3868 * Fires before each of the tabs are rendered on the Install Themes page.
    3969 *
     
    4373 *
    4474 * @since 2.8.0
    4575 */
    46 do_action( "install_themes_pre_{$tab}" );
     76// do_action( "install_themes_pre_{$tab}" );
    4777
    4878$help_overview =
    4979        '<p>' . sprintf(__('You can find additional themes for your site by using the Theme Browser/Installer on this screen, which will display themes from the <a href="%s" target="_blank">WordPress.org Theme Directory</a>. These themes are designed and developed by third parties, are available free of charge, and are compatible with the license WordPress uses.'), 'http://wordpress.org/themes/') . '</p>' .
     
    73103);
    74104
    75105include(ABSPATH . 'wp-admin/admin-header.php');
     106
     107/**
     108 * Uploader
     109 */
     110function install_themes_upload() {
     111        ?>
     112        <div class="upload-theme">
     113                <p class="install-help"><?php _e( 'If you have a theme in a .zip format, you may install it by uploading it here.' ); ?></p>
     114                <form method="post" enctype="multipart/form-data" class="wp-upload-form" action="<?php echo self_admin_url('update.php?action=upload-theme'); ?>">
     115                        <?php wp_nonce_field( 'theme-upload'); ?>
     116                        <input type="file" name="themezip" />
     117                        <?php submit_button( __( 'Install Now' ), 'button', 'install-theme-submit', false ); ?>
     118                </form>
     119        </div>
     120        <?php
     121}
     122add_action( 'install_themes_upload', 'install_themes_upload', 10, 1 );
     123
    76124?>
    77 <div class="wrap">
    78 <h2><?php echo esc_html( $title ); ?></h2>
    79 <?php
     125<div id="appearance" class="wrap">
     126        <h2>
     127                <?php echo esc_html( $title ); ?>
     128                <a class="upload button button-secondary"><?php esc_html_e( 'Upload Theme' ); ?></a>
     129        </h2>
    80130
    81 $wp_list_table->views(); ?>
     131        <?php install_themes_upload(); ?>
    82132
    83 <br class="clear" />
     133        <div class="theme-navigation">
     134                <span class="theme-section current" data-sort="featured"><?php esc_html_e( 'Featured' ); ?></span>
     135                <span class="theme-section" data-sort="popular"><?php esc_html_e( 'Popular' ); ?></span>
     136                <span class="theme-section" data-sort="new"><?php esc_html_e( 'New' ); ?></span>
     137                <div class="theme-top-filters">
     138                        <span class="theme-filter current" data-sort="all">All</span>
     139                        <span class="theme-filter" data-sort="photography">Photography</span>
     140                        <span class="theme-filter" data-sort="magazine">Magazine</span>
     141                        <span class="theme-filter" data-sort="blogging">Blogging</span>
     142                        <span class="theme-filter" data-sort="responsive">Responsive</span>
     143                </div>
     144                <?php wp_nonce_field( 'fetch-list-WP_Theme_Install_List_Table', '_ajax_fetch_list_nonce' ); ?>
     145        </div>
     146        <div class="theme-browser"></div>
     147        <div class="theme-overlay"></div>
     148        <img class="spinner" src="<?php echo admin_url( 'images/spinner-2x.gif' ); ?>" />
     149
     150        <br class="clear" />
    84151<?php
    85152/**
    86153 * Fires at the top of each of the tabs on the Install Themes page.
     
    93160 *
    94161 * @param int $paged Number of the current page of results being viewed.
    95162 */
    96 do_action( "install_themes_{$tab}", $paged );
     163// do_action( "install_themes_{$tab}", $paged );
    97164?>
    98165</div>
     166
     167
     168<script id="tmpl-theme" type="text/template">
     169        <# if ( data.screenshot_url ) { #>
     170                <div class="theme-screenshot">
     171                        <img src="{{ data.screenshot_url }}" alt="" />
     172                </div>
     173        <# } else { #>
     174                <div class="theme-screenshot blank"></div>
     175        <# } #>
     176        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     177        <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
     178        <h3 class="theme-name">{{{ data.name }}}</h3>
     179
     180        <div class="theme-actions">
     181                <a class="button button-primary"><?php esc_html_e( 'Install' ); ?></a>
     182                <a class="button button-secondary preview"><?php esc_html_e( 'Preview' ); ?></a>
     183        </div>
     184</script>
     185
     186<script id="tmpl-theme-single" type="text/template">
     187        <div class="theme-backdrop"></div>
     188        <div class="theme-wrap">
     189                <div class="theme-header">
     190                        <button alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></button>
     191                        <button alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></button>
     192                        <button alt="<?php _e( 'Close overlay' ); ?>" class="close dashicons dashicons-no"></button>
     193                </div>
     194                <div class="theme-about">
     195                        <div class="theme-screenshots">
     196                        <# if ( data.screenshot_url ) { #>
     197                                <div class="screenshot"><img src="{{ data.screenshot_url }}" alt="" /></div>
     198                        <# } else { #>
     199                                <div class="screenshot blank"></div>
     200                        <# } #>
     201                        </div>
     202
     203                        <div class="theme-info">
     204                                <h3 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{{ data.version }}}' ); ?></span></h3>
     205                                <h4 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></h4>
     206                                <p class="theme-description">{{{ data.description }}}</p>
     207
     208                                <div class="rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
     209                                        <span class="one"></span>
     210                                        <span class="two"></span>
     211                                        <span class="three"></span>
     212                                        <span class="four"></span>
     213                                        <span class="five"></span>
     214                                </div>
     215                        </div>
     216                </div>
     217
     218                <div class="theme-actions">
     219                        <a href="" class="button button-primary"><?php _e( 'Install' ); ?></a>
     220                        <a href="" class="button button-secondary"><?php _e( 'Preview' ); ?></a>
     221                        <a href="" class="button button-secondary"><?php _e( 'Download' ); ?></a>
     222                </div>
     223        </div>
     224</script>
     225
    99226<?php
    100227include(ABSPATH . 'wp-admin/admin-footer.php');