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.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20140 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-03-07 18:24:34 +00:00
parent b1ac47a0f0
commit fba11c56e1
4 changed files with 140 additions and 158 deletions

View File

@ -5366,10 +5366,17 @@ body.full-overlay-active {
display: none; display: none;
} }
#theme-installer.single-theme {
display: block;
}
.install-theme-info { .install-theme-info {
display: none; display: none;
padding: 45px 20px 15px; padding: 45px 20px 15px;
} }
.single-theme .install-theme-info {
padding-top: 15px;
}
#theme-installer .install-theme-info { #theme-installer .install-theme-info {
display: block; display: block;

View File

@ -151,14 +151,70 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
$theme_names = array_keys( $themes ); $theme_names = array_keys( $themes );
foreach ( $theme_names as $theme_name ) { foreach ( $theme_names as $theme_name ) {
$class = array( 'available-theme' );
?> ?>
<div class="<?php echo join( ' ', $class ); ?>"><?php <div class="available-theme installable-theme"><?php
if ( isset( $themes[$theme_name] ) ) if ( isset( $themes[$theme_name] ) )
display_theme( $themes[$theme_name] ); display_theme( $themes[$theme_name] );
?></div> ?></div>
<?php } // end foreach $theme_names <?php } // end foreach $theme_names
$this->theme_installer();
}
/*
* Prints a theme from the WordPress.org API.
*
* @param object $theme An object that contains theme data returned by the WordPress.org API.
*
* Example theme data:
* object(stdClass)[59]
* public 'name' => string 'Magazine Basic' (length=14)
* public 'slug' => string 'magazine-basic' (length=14)
* public 'version' => string '1.1' (length=3)
* public 'author' => string 'tinkerpriest' (length=12)
* public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36)
* public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68)
* public 'rating' => float 80
* public 'num_ratings' => int 1
* public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49)
* 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)
* public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66)
*/
function single_row( $theme ) {
global $themes_allowedtags;
if ( empty( $theme ) )
return;
$name = wp_kses( $theme->name, $themes_allowedtags );
$author = wp_kses( $theme->author, $themes_allowedtags );
$preview_title = sprintf( __('Preview &#8220;%s&#8221;'), $name );
$preview_url = add_query_arg( array(
'tab' => 'theme-information',
'theme' => $theme->slug,
) );
?>
<a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
<img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' />
</a>
<h3><?php
/* translators: 1: theme name, 2: author name */
printf( __( '%1$s <span>by %2$s</span>' ), $name, $author );
?></h3>
<?php
$this->install_theme_info( $theme );
}
/*
* Prints the wrapper for the theme installer.
*/
function theme_installer() {
?> ?>
<div id="theme-installer" class="wp-full-overlay"> <div id="theme-installer" class="wp-full-overlay">
<a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a> <a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
@ -172,6 +228,73 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
<?php <?php
} }
/*
* Prints the wrapper for the theme installer with a provided theme's data.
* Used to make the theme installer work for no-js.
*
* @param object $theme - A WordPress.org Theme API object.
*/
function theme_installer_single( $theme ) {
$class = 'wp-full-overlay';
if ( $theme )
$class .= ' single-theme';
?>
<div id="theme-installer" class="wp-full-overlay single-theme">
<div class="wp-full-overlay-sidebar">
<?php $this->install_theme_info( $theme ); ?>
</div>
<div class="wp-full-overlay-main">
<iframe src="<?php echo esc_url( $theme->preview_url ); ?>"></iframe>
</div>
</div>
<?php
}
/*
* Prints the info for a theme (to be used in the theme installer modal).
*
* @param object $theme - A WordPress.org Theme API object.
*/
function install_theme_info( $theme ) {
global $themes_allowedtags;
if ( empty( $theme ) )
return;
$name = wp_kses( $theme->name, $themes_allowedtags );
$author = wp_kses( $theme->author, $themes_allowedtags );
$num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
$install_url = add_query_arg( array(
'action' => 'install-theme',
'theme' => $theme->slug,
), self_admin_url( 'update.php' ) );
?>
<div class="install-theme-info">
<a class="theme-install button-primary" href="<?php echo wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ); ?>"><?php _e( 'Install' ); ?></a>
<h3 class="theme-name"><?php echo $name; ?></h3>
<span class="theme-by"><?php printf( __( 'By %s' ), $author ); ?></span>
<?php if ( isset( $theme->screenshot_url ) ): ?>
<img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" />
<?php endif; ?>
<div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
<div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
</div>
<div class="theme-version">
<strong><?php _e('Version:') ?> </strong>
<?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
</div>
<div class="theme-description">
<?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
</div>
<input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" />
</div>
<?php
}
/** /**
* Send required variables to JavaScript land * Send required variables to JavaScript land
* *

View File

@ -131,68 +131,11 @@ add_action('install_themes_upload', 'install_themes_upload', 10, 1);
* Prints a theme on the Install Themes pages. * Prints a theme on the Install Themes pages.
* *
* @param object $theme An object that contains theme data returned by the WordPress.org API. * @param object $theme An object that contains theme data returned by the WordPress.org API.
*
* Example theme data:
* object(stdClass)[59]
* public 'name' => string 'Magazine Basic' (length=14)
* public 'slug' => string 'magazine-basic' (length=14)
* public 'version' => string '1.1' (length=3)
* public 'author' => string 'tinkerpriest' (length=12)
* public 'preview_url' => string 'http://wp-themes.com/?magazine-basic' (length=36)
* public 'screenshot_url' => string 'http://wp-themes.com/wp-content/themes/magazine-basic/screenshot.png' (length=68)
* public 'rating' => float 80
* public 'num_ratings' => int 1
* public 'homepage' => string 'http://wordpress.org/extend/themes/magazine-basic' (length=49)
* 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)
* public 'download_link' => string 'http://wordpress.org/extend/themes/download/magazine-basic.1.1.zip' (length=66)
*/ */
function display_theme( $theme ) { function display_theme( $theme ) {
global $themes_allowedtags; global $wp_list_table;
if ( empty( $theme ) ) return $wp_list_table->single_row( $theme );
return;
$name = wp_kses( $theme->name, $themes_allowedtags );
$author = wp_kses( $theme->author, $themes_allowedtags );
$num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
$preview_url = add_query_arg( 'theme_preview', '1' );
$preview_title = sprintf( __('Preview &#8220;%s&#8221;'), $name );
$install_url = add_query_arg( array(
'action' => 'install-theme',
'theme' => $theme->slug,
), self_admin_url( 'update.php' ) );
?>
<a class="screenshot" href="<?php echo esc_url( $preview_url ); ?>" title="<?php echo esc_attr( $preview_title ); ?>">
<img src='<?php echo esc_url( $theme->screenshot_url ); ?>' width='150' />
</a>
<h3><?php
/* translators: 1: theme name, 2: author name */
printf( __( '%1$s <span>by %2$s</span>' ), $name, $author );
?></h3>
<div class="install-theme-info">
<a class="theme-install button-primary" href="<?php echo wp_nonce_url( $install_url, 'install-theme_' . $theme->slug ); ?>"><?php _e( 'Install' ); ?></a>
<h3 class="theme-name"><?php echo $name; ?></h3>
<span class="theme-by"><?php printf( __( 'By %s' ), $author ); ?></span>
<img class="theme-screenshot" src="<?php echo esc_url( $theme->screenshot_url ); ?>" />
<div class="theme-rating" title="<?php echo esc_attr( $num_ratings ); ?>">
<div style="width:<?php echo esc_attr( intval( $theme->rating ) . 'px' ); ?>;"></div>
</div>
<div class="theme-version">
<strong><?php _e('Version:') ?> </strong>
<?php echo wp_kses( $theme->version, $themes_allowedtags ); ?>
</div>
<div class="theme-description">
<?php echo wp_kses( $theme->description, $themes_allowedtags ); ?>
</div>
<input class="theme-preview-url" type="hidden" value="<?php echo esc_url( $theme->preview_url ); ?>" />
</div>
<?php
} }
/** /**
@ -216,104 +159,13 @@ add_action('install_themes_updated', 'display_themes');
* @since 2.8.0 * @since 2.8.0
*/ */
function install_theme_information() { function install_theme_information() {
//TODO: This function needs a LOT of UI work :) global $tab, $themes_allowedtags, $wp_list_table;
global $tab, $themes_allowedtags;
$api = themes_api('theme_information', array('slug' => stripslashes( $_REQUEST['theme'] ) )); $theme = themes_api( 'theme_information', array( 'slug' => stripslashes( $_REQUEST['theme'] ) ) );
if ( is_wp_error($api) ) if ( is_wp_error( $theme ) )
wp_die($api); wp_die( $theme );
// Sanitize HTML $wp_list_table->theme_installer_single( $theme );
foreach ( (array)$api->sections as $section_name => $content )
$api->sections[$section_name] = wp_kses($content, $themes_allowedtags);
foreach ( array('version', 'author', 'requires', 'tested', 'homepage', 'downloaded', 'slug') as $key ) {
if ( isset($api->$key) )
$api->$key = wp_kses($api->$key, $themes_allowedtags);
}
iframe_header( __('Theme Install') );
if ( empty($api->download_link) ) {
echo '<div id="message" class="error"><p>' . __('<strong>ERROR:</strong> This theme is currently not available. Please try again later.') . '</p></div>';
iframe_footer();
exit;
}
if ( !empty($api->tested) && version_compare($GLOBALS['wp_version'], $api->tested, '>') )
echo '<div class="updated"><p>' . __('<strong>Warning:</strong> This theme has <strong>not been tested</strong> with your current version of WordPress.') . '</p></div>';
else if ( !empty($api->requires) && version_compare($GLOBALS['wp_version'], $api->requires, '<') )
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>';
// Default to a "new" theme
$type = 'install';
// Check to see if this theme is known to be installed, and has an update awaiting it.
$update_themes = get_site_transient('update_themes');
if ( is_object($update_themes) && isset($update_themes->response) ) {
foreach ( (array)$update_themes->response as $theme_slug => $theme_info ) {
if ( $theme_slug === $api->slug ) {
$type = 'update_available';
$update_file = $theme_slug;
break;
}
}
}
$theme = wp_get_theme( $api->slug );
if ( is_a( $theme, 'WP_Theme' ) ) {
switch ( version_compare( $theme->get('Version'), $api->version ) ) {
case 0; // equal
$type = 'latest_installed';
case 1: // installed theme > api version
$type = 'newer_installed';
$newer_version = $theme->get('Version');
}
}
?>
<div class='available-theme'>
<img src='<?php echo esc_url($api->screenshot_url) ?>' width='300' class="theme-preview-img" />
<h3><?php echo $api->name; ?></h3>
<p><?php printf(__('by %s'), $api->author); ?></p>
<p><?php printf(__('Version: %s'), $api->version); ?></p>
<?php
$buttons = '<a class="button" id="cancel" href="#" onclick="tb_close();return false;">' . __('Cancel') . '</a> ';
switch ( $type ) {
default:
case 'install':
if ( current_user_can('install_themes') ) :
$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>';
endif;
break;
case 'update_available':
if ( current_user_can('update_themes') ) :
$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>';
endif;
break;
case 'newer_installed':
if ( current_user_can('install_themes') || current_user_can('update_themes') ) :
?><p><?php printf(__('Newer version (%s) is installed.'), $newer_version); ?></p><?php
endif;
break;
case 'latest_installed':
if ( current_user_can('install_themes') || current_user_can('update_themes') ) :
?><p><?php _e('This version is already installed.'); ?></p><?php
endif;
break;
} ?>
<br class="clear" />
</div>
<p class="action-button">
<?php echo $buttons; ?>
<br class="clear" />
</p>
<?php
iframe_footer();
exit;
} }
add_action('install_themes_pre_theme-information', 'install_theme_information'); add_action('install_themes_pre_theme-information', 'install_theme_information');

View File

@ -22,7 +22,7 @@ jQuery( function($) {
event.preventDefault(); event.preventDefault();
}); });
$('#availablethemes').on( 'click', '.available-theme', function( event ) { $('#availablethemes').on( 'click', '.installable-theme', function( event ) {
var src; var src;
info.html( $(this).find('.install-theme-info').html() ); info.html( $(this).find('.install-theme-info').html() );