WordPress.org

Make WordPress Core

Changeset 20140


Ignore:
Timestamp:
03/07/2012 06:24:34 PM (6 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.