WordPress.org
Get WordPress

Make WordPress Core

Changeset 20140


Ignore:
Timestamp:
03/07/2012 06:24:34 PM (15 years ago)
Author:
koopersmith
Message:

Theme Customizer: Make theme installer no-js compatible. Fix JS click handler that caught clicks on the 'Activate' link. Relocate display_theme() to WP_Theme_Install_List_Table->single_row(). see #19910.

Location:
trunk/wp-admin
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/wp-admin/css/wp-admin.dev.css

    r20138 r20140  
    53675367}
    53685368
     5369#theme-installer.single-theme {
     5370        display: block;
     5371}
     5372
    53695373.install-theme-info {
    53705374        display: none;
    53715375        padding: 45px 20px 15px;
     5376}
     5377.single-theme .install-theme-info {
     5378        padding-top: 15px;
    53725379}
    53735380

  • trunk/wp-admin/includes/class-wp-theme-install-list-table.php

    r20138 r20140  
    152152
    153153                foreach ( $theme_names as $theme_name ) {
    154                                 $class = array( 'available-theme' );
    155154                                ?>
    156                                 <div class="<?php echo join( ' ', $class ); ?>"><?php
     155                                <div class="available-theme installable-theme"><?php
    157156                                        if ( isset( $themes[$theme_name] ) )
    158157                                                display_theme( $themes[$theme_name] );
    … …  
    160159                <?php } // end foreach $theme_names
    161160
     161                $this->theme_installer();
     162        }
     163
     164
     165
     166        /*
     167         * Prints a theme from the WordPress.org API.
     168         *
     169         * @param object $theme An object that contains theme data returned by the WordPress.org API.
     170         *
     171         * Example theme data:
     172         *   object(stdClass)[59]
     173         *     public 'name' => string 'Magazine Basic' (length=14)
     174         *     public 'slug' => string 'magazine-basic' (length=14)
     175         *     public 'version' => string '1.1' (length=3)
     176         *     public 'author' => string 'tinkerpriest' (length=12)
     177         *     public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36)
     178         *     public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68)
     179         *     public 'rating' => float 80
     180         *     public 'num_ratings' => int 1
     181         *     public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49)
     182         *     public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by <a href="http://bavotasan.com">c.bavota</a> of <a href="http://tinkerpriestmedia.com">Tinker Priest Media</a>.' (length=214)
     183         *     public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66)
     184         */
     185        function single_row( $theme ) {
     186                global $themes_allowedtags;
     187
     188                if ( empty( $theme ) )
     189                        return;
     190
     191                $name   = wp_kses( $theme->name,   $themes_allowedtags );
     192                $author = wp_kses( $theme->author, $themes_allowedtags );
     193
     194                $preview_title = sprintf( __('Preview &#8220;%s&#8221;'), $name );
     195                $preview_url   = add_query_arg( array(
     196                        'tab'   => 'theme-information',
     197                        'theme' => $theme->slug,
     198                ) );
     199
     200                ?>
     201                <a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
     202                        <img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' />
     203                </a>
     204
     205                <h3><?php
     206                        /* translators: 1: theme name, 2: author name */
     207                        printf( __( '%1$s <span>by %2$s</span>' ), $name, $author );
     208                ?></h3>
     209
     210                <?php
     211                $this->install_theme_info( $theme );
     212        }
     213
     214        /*
     215         * Prints the wrapper for the theme installer.
     216         */
     217        function theme_installer() {
    162218                ?>
    163219                <div id="theme-installer" class="wp-full-overlay">
    … …  
    173229        }
    174230
     231        /*
     232         * Prints the wrapper for the theme installer with a provided theme's data.
     233         * Used to make the theme installer work for no-js.
     234         *
     235         * @param object $theme - A WordPress.org Theme API object.
     236         */
     237        function theme_installer_single( $theme ) {
     238                $class = 'wp-full-overlay';
     239                if ( $theme )
     240                        $class .= ' single-theme';
     241
     242                ?>
     243                <div id="theme-installer" class="wp-full-overlay single-theme">
     244                        <div class="wp-full-overlay-sidebar">
     245                                <?php $this->install_theme_info( $theme ); ?>
     246                        </div>
     247                        <div class="wp-full-overlay-main">
     248                                <iframe src="<?php echo esc_url( $theme->preview_url ); ?>"></iframe>
     249                        </div>
     250                </div>
     251                <?php
     252        }
     253
     254        /*
     255         * Prints the info for a theme (to be used in the theme installer modal).
     256         *
     257         * @param object $theme - A WordPress.org Theme API object.
     258         */
     259        function install_theme_info( $theme ) {
     260                global $themes_allowedtags;
     261
     262                if ( empty( $theme ) )
     263                        return;
     264
     265                $name   = wp_kses( $theme->name,   $themes_allowedtags );
     266                $author = wp_kses( $theme->author, $themes_allowedtags );
     267
     268                $num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
     269
     270                $install_url = add_query_arg( array(
     271                        'action' => 'install-theme',
     272                        'theme'  => $theme->slug,
     273                ), self_admin_url( 'update.php' ) );
     274
     275                ?>
     276                <div class="install-theme-info">
     277                        <a class="theme-install button-primary" href="<?php echo wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ); ?>"><?php _e( 'Install' ); ?></a>
     278                        <h3 class="theme-name"><?php echo $name; ?></h3>
     279                        <span class="theme-by"><?php printf( __( 'By %s' ), $author ); ?></span>
     280                        <?php if ( isset( $theme->screenshot_url ) ): ?>
     281                                <img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" />
     282                        <?php endif; ?>
     283                        <div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
     284                                <div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
     285                        </div>
     286                        <div class="theme-version">
     287                                <strong><?php _e('Version:') ?> </strong>
     288                                <?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
     289                        </div>
     290                        <div class="theme-description">
     291                                <?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
     292                        </div>
     293                        <input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" />
     294                </div>
     295                <?php
     296        }
     297
    175298        /**
    176299         * Send required variables to JavaScript land

  • trunk/wp-admin/includes/theme-install.php

    r20138 r20140  
    132132 *
    133133 * @param object $theme An object that contains theme data returned by the WordPress.org API.
    134  *
    135  * Example theme data:
    136  *   object(stdClass)[59]
    137  *     public 'name' => string 'Magazine Basic' (length=14)
    138  *     public 'slug' => string 'magazine-basic' (length=14)
    139  *     public 'version' => string '1.1' (length=3)
    140  *     public 'author' => string 'tinkerpriest' (length=12)
    141  *     public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36)
    142  *     public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68)
    143  *     public 'rating' => float 80
    144  *     public 'num_ratings' => int 1
    145  *     public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49)
    146  *     public 'description' => string 'A basic magazine style layout with a fully customizable layout through a backend interface. Designed by <a href="http://bavotasan.com">c.bavota</a> of <a href="http://tinkerpriestmedia.com">Tinker Priest Media</a>.' (length=214)
    147  *     public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66)
    148134 */
    149135function display_theme( $theme ) {
    150         global $themes_allowedtags;
     136        global $wp_list_table;
    151137
    152         if ( empty( $theme ) )
    153                 return;
    154 
    155         $name   = wp_kses( $theme->name,   $themes_allowedtags );
    156         $author = wp_kses( $theme->author, $themes_allowedtags );
    157 
    158         $num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
    159 
    160         $preview_url   = add_query_arg( 'theme_preview', '1' );
    161         $preview_title = sprintf( __('Preview &#8220;%s&#8221;'), $name );
    162 
    163         $install_url = add_query_arg( array(
    164                 'action' => 'install-theme',
    165                 'theme'  => $theme->slug,
    166         ), self_admin_url( 'update.php' ) );
    167 
    168         ?>
    169         <a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
    170                 <img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' />
    171         </a>
    172 
    173         <h3><?php
    174                 /* translators: 1: theme name, 2: author name */
    175                 printf( __( '%1$s <span>by %2$s</span>' ), $name, $author );
    176         ?></h3>
    177 
    178         <div class="install-theme-info">
    179                 <a class="theme-install button-primary" href="<?php echo wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ); ?>"><?php _e( 'Install' ); ?></a>
    180                 <h3 class="theme-name"><?php echo $name; ?></h3>
    181                 <span class="theme-by"><?php printf( __( 'By %s' ), $author ); ?></span>
    182                 <img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" />
    183                 <div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
    184                         <div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
    185                 </div>
    186                 <div class="theme-version">
    187                         <strong><?php _e('Version:') ?> </strong>
    188                         <?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
    189                 </div>
    190                 <div class="theme-description">
    191                         <?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
    192                 </div>
    193                 <input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" />
    194         </div>
    195         <?php
     138        return $wp_list_table->single_row( $theme );
    196139}
    197140
    … …  
    217160 */
    218161function install_theme_information() {
    219         //TODO: This function needs a LOT of UI work :)
    220         global $tab, $themes_allowedtags;
     162        global $tab, $themes_allowedtags, $wp_list_table;
    221163
    222         $api = themes_api('theme_information', array('slug' => stripslashes( $_REQUEST['theme'] ) ));
     164        $theme = themes_api( 'theme_information', array( 'slug' => stripslashes( $_REQUEST['theme'] ) ) );
    223165
    224         if ( is_wp_error($api) )
    225                 wp_die($api);
     166        if ( is_wp_error( $theme ) )
     167                wp_die( $theme );
    226168
    227         // Sanitize HTML
    228         foreach ( (array)$api->sections as $section_name => $content )
    229                 $api->sections[$section_name] = wp_kses($content, $themes_allowedtags);
    230 
    231         foreach ( array('version', 'author', 'requires', 'tested', 'homepage', 'downloaded', 'slug') as $key ) {
    232                 if ( isset($api->$key) )
    233                         $api->$key = wp_kses($api->$key, $themes_allowedtags);
    234         }
    235 
    236         iframe_header( __('Theme Install') );
    237 
    238         if ( empty($api->download_link) ) {
    239                 echo '<div id="message" class="error"><p>' . __('<strong>ERROR:</strong> This theme is currently not available. Please try again later.') . '</p></div>';
    240                 iframe_footer();
    241                 exit;
    242         }
    243 
    244         if ( !empty($api->tested) && version_compare($GLOBALS['wp_version'], $api->tested, '>') )
    245                 echo '<div class="updated"><p>' . __('<strong>Warning:</strong> This theme has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
    246         else if ( !empty($api->requires) && version_compare($GLOBALS['wp_version'], $api->requires, '<') )
    247                 echo '<div class="updated"><p>' . __('<strong>Warning:</strong> This theme has not been marked as <strong>compatible</strong> with your version of WordPress.') . '</p></div>';
    248 
    249         // Default to a "new" theme
    250         $type = 'install';
    251         // Check to see if this theme is known to be installed, and has an update awaiting it.
    252         $update_themes = get_site_transient('update_themes');
    253         if ( is_object($update_themes) && isset($update_themes->response) ) {
    254                 foreach ( (array)$update_themes->response as $theme_slug => $theme_info ) {
    255                         if ( $theme_slug === $api->slug ) {
    256                                 $type = 'update_available';
    257                                 $update_file = $theme_slug;
    258                                 break;
    259                         }
    260                 }
    261         }
    262 
    263         $theme = wp_get_theme( $api->slug );
    264         if ( is_a( $theme, 'WP_Theme' ) ) {
    265                 switch ( version_compare( $theme->get('Version'), $api->version ) ) {
    266                         case 0; // equal
    267                                 $type = 'latest_installed';
    268                         case 1: // installed theme > api version
    269                                 $type = 'newer_installed';
    270                                 $newer_version = $theme->get('Version');
    271                 }
    272         }
    273 ?>
    274 
    275 <div class='available-theme'>
    276 <img src='<?php echo esc_url($api->screenshot_url) ?>' width='300' class="theme-preview-img" />
    277 <h3><?php echo $api->name; ?></h3>
    278 <p><?php printf(__('by %s'), $api->author); ?></p>
    279 <p><?php printf(__('Version: %s'), $api->version); ?></p>
    280 
    281 <?php
    282 $buttons = '<a class="button" id="cancel" href="#" onclick="tb_close();return false;">' . __('Cancel') . '</a> ';
    283 
    284 switch ( $type ) {
    285 default:
    286 case 'install':
    287         if ( current_user_can('install_themes') ) :
    288         $buttons .= '<a class="button-primary" id="install" href="' . wp_nonce_url(self_admin_url('update.php?action=install-theme&theme=' . $api->slug), 'install-theme_' . $api->slug) . '" target="_parent">' . __('Install Now') . '</a>';
    289         endif;
    290         break;
    291 case 'update_available':
    292         if ( current_user_can('update_themes') ) :
    293         $buttons .= '<a class="button-primary" id="install"     href="' . wp_nonce_url(self_admin_url('update.php?action=upgrade-theme&theme=' . $update_file), 'upgrade-theme_' . $update_file) . '" target="_parent">' . __('Install Update Now') . '</a>';
    294         endif;
    295         break;
    296 case 'newer_installed':
    297         if ( current_user_can('install_themes') || current_user_can('update_themes') ) :
    298         ?><p><?php printf(__('Newer version (%s) is installed.'), $newer_version); ?></p><?php
    299         endif;
    300         break;
    301 case 'latest_installed':
    302         if ( current_user_can('install_themes') || current_user_can('update_themes') ) :
    303         ?><p><?php _e('This version is already installed.'); ?></p><?php
    304         endif;
    305         break;
    306 } ?>
    307 <br class="clear" />
    308 </div>
    309 
    310 <p class="action-button">
    311 <?php echo $buttons; ?>
    312 <br class="clear" />
    313 </p>
    314 
    315 <?php
    316         iframe_footer();
    317         exit;
     169        $wp_list_table->theme_installer_single( $theme );
    318170}
    319171add_action('install_themes_pre_theme-information', 'install_theme_information');

  • trunk/wp-admin/js/theme.dev.js

    r20138 r20140  
    2323        });
    2424
    25         $('#availablethemes').on( 'click', '.available-theme', function( event ) {
     25        $('#availablethemes').on( 'click', '.installable-theme', function( event ) {
    2626                var src;
    2727
Note: See TracChangeset for help on using the changeset viewer.