Replace all instances of thickbox theme preview with the theme customizer. fixes #20404.

* Use theme customizer in theme install/update screens.
* Separate the customize loader from the customizer. Use wp_customize_loader() to include the loader script and markup.
* Deprecated: wp-admin/js/theme-preview.js is now no longer used by core.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20419 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2012-04-10 02:25:03 +00:00
parent b15a9dde67
commit c2fb0c425b
9 changed files with 97 additions and 56 deletions

View File

@ -1494,19 +1494,33 @@ class Theme_Installer_Skin extends WP_Upgrader_Skin {
return;
$theme_info = $this->upgrader->theme_info();
if ( empty($theme_info) )
if ( empty( $theme_info ) )
return;
$name = $theme_info->display('Name');
$name = $theme_info->display('Name');
$stylesheet = $this->upgrader->result['destination_name'];
$template = $theme_info->get_template();
$template = $theme_info->get_template();
$preview_link = htmlspecialchars( add_query_arg( array('preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'preview_iframe' => 1, 'TB_iframe' => 'true' ), trailingslashit(esc_url(get_option('home'))) ) );
$activate_link = wp_nonce_url("themes.php?action=activate&template=" . urlencode($template) . "&stylesheet=" . urlencode($stylesheet), 'switch-theme_' . $template);
$preview_link = add_query_arg( array(
'preview' => 1,
'template' => $template,
'stylesheet' => $stylesheet,
), trailingslashit( get_home_url() ) );
$install_actions = array(
'preview' => '<a href="' . $preview_link . '" class="thickbox thickbox-preview" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)) . '">' . __('Preview') . '</a>',
'activate' => '<a href="' . $activate_link . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>'
);
$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) ) . '"
. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
$activate_link = add_query_arg( array(
'action' => 'activate',
'template' => $template,
'stylesheet' => $stylesheet,
), admin_url('themes.php') );
$activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $template );
$install_actions = array();
$install_actions['preview'] = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
$install_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
$install_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
if ( is_network_admin() && current_user_can( 'manage_network_themes' ) )
$install_actions['network_enable'] = '<a href="' . esc_url( wp_nonce_url( 'themes.php?action=enable&amp;theme=' . $template, 'enable-theme_' . $template ) ) . '" title="' . esc_attr__( 'Enable this theme for all sites in this network' ) . '" target="_parent">' . __( 'Network Enable' ) . '</a>';
@ -1550,17 +1564,31 @@ class Theme_Upgrader_Skin extends WP_Upgrader_Skin {
$update_actions = array();
if ( ! empty( $this->upgrader->result['destination_name'] ) && $theme_info = $this->upgrader->theme_info() ) {
$name = $theme_info->display('Name');
$name = $theme_info->display('Name');
$stylesheet = $this->upgrader->result['destination_name'];
$template = $theme_info->get_template();
$template = $theme_info->get_template();
$preview_link = htmlspecialchars( add_query_arg( array('preview' => 1, 'template' => $template, 'stylesheet' => $stylesheet, 'TB_iframe' => 'true' ), trailingslashit(esc_url(get_option('home'))) ) );
$activate_link = wp_nonce_url("themes.php?action=activate&amp;template=" . urlencode($template) . "&amp;stylesheet=" . urlencode($stylesheet), 'switch-theme_' . $template);
$preview_link = add_query_arg( array(
'preview' => 1,
'template' => $template,
'stylesheet' => $stylesheet,
), trailingslashit( get_home_url() ) );
$update_actions['preview'] = '<a href="' . $preview_link . '" class="thickbox thickbox-preview" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name)) . '">' . __('Preview') . '</a>';
$update_actions['activate'] = '<a href="' . $activate_link . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
$customize_attributes = 'title="' . esc_attr( sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) ) . '"
. data-customize-template="' . esc_attr( $template ) . '" data-customize-stylesheet="' . esc_attr( $stylesheet ) . '"';
if ( ( ! $this->result || is_wp_error($this->result) ) || $stylesheet == get_stylesheet() )
$activate_link = add_query_arg( array(
'action' => 'activate',
'template' => $template,
'stylesheet' => $stylesheet,
), admin_url('themes.php') );
$activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $template );
$update_actions['preview'] = '<a href="' . esc_url( $preview_link ) . '" class="hide-if-js" title="' . esc_attr(sprintf(__('Preview &#8220;%s&#8221;'), $name ) ) . '">' . __('Preview') . '</a>';
$update_actions['preview'] .= '<a href="#" class="hide-if-no-js load-customize" ' . $customize_attributes . '>' . __('Customize') . '</a>';
$update_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink" title="' . esc_attr( sprintf( __('Activate &#8220;%s&#8221;'), $name ) ) . '">' . __('Activate') . '</a>';
if ( ( ! $this->result || is_wp_error( $this->result ) ) || $stylesheet == get_stylesheet() )
unset($update_actions['preview'], $update_actions['activate']);
}

View File

@ -30,9 +30,6 @@ if ( !is_network_admin() )
$submenu_file = 'themes.php';
wp_enqueue_script( 'theme-install' );
add_thickbox();
wp_enqueue_script( 'theme-preview' );
wp_enqueue_script( 'theme' );
$body_id = $tab;

View File

@ -66,9 +66,8 @@ get_current_screen()->set_help_sidebar(
'<p>' . __('<a href="http://wordpress.org/support/" target="_blank">Support Forums</a>') . '</p>'
);
add_thickbox();
wp_enqueue_script( 'theme-preview' );
wp_enqueue_script( 'theme' );
wp_customize_loader();
endif;

View File

@ -152,8 +152,8 @@ if ( isset($_GET['action']) ) {
check_admin_referer('upgrade-theme_' . $theme);
add_thickbox();
wp_enqueue_script('theme-preview');
wp_customize_loader();
$title = __('Update Theme');
$parent_file = 'themes.php';
$submenu_file = 'themes.php';
@ -204,8 +204,8 @@ if ( isset($_GET['action']) ) {
if ( is_wp_error($api) )
wp_die($api);
add_thickbox();
wp_enqueue_script('theme-preview');
wp_customize_loader();
$title = __('Install Themes');
$parent_file = 'themes.php';
$submenu_file = 'themes.php';
@ -230,11 +230,12 @@ if ( isset($_GET['action']) ) {
$file_upload = new File_Upload_Upgrader('themezip', 'package');
wp_customize_loader();
$title = __('Upload Theme');
$parent_file = 'themes.php';
$submenu_file = 'theme-install.php';
add_thickbox();
wp_enqueue_script('theme-preview');
require_once(ABSPATH . 'wp-admin/admin-header.php');
$title = sprintf( __('Installing Theme from uploaded file: %s'), basename( $file_upload->filename ) );

View File

@ -29,7 +29,6 @@ final class WP_Customize {
add_action( 'setup_theme', array( $this, 'setup_theme' ) );
add_action( 'admin_init', array( $this, 'admin_init' ) );
add_action( 'wp_loaded', array( $this, 'wp_loaded' ) );
add_action( 'admin_footer', array( $this, 'admin_footer' ) );
add_action( 'customize_previewing', array( $this, 'customize_previewing' ) );
add_action( 'customize_register', array( $this, 'register_controls' ) );
@ -275,8 +274,6 @@ final class WP_Customize {
if ( isset( $_REQUEST['save_customize_controls'] ) )
$this->save();
wp_enqueue_script( 'customize-loader' );
if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
return;
@ -294,24 +291,6 @@ final class WP_Customize {
die;
}
/**
* Print the customize template.
*
* @since 3.4.0
*/
public function admin_footer() {
?>
<div id="customize-container" class="wp-full-overlay">
<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
<a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
<span class="collapse-sidebar-arrow"></span>
</a>
</div>
<?php
}
/**
* Switch the theme and trigger the save action of each setting.
*

View File

@ -2108,7 +2108,7 @@ function wp_admin_css( $file = 'wp-admin', $force_echo = false ) {
* Enqueues the default ThickBox js and css.
*
* If any of the settings need to be changed, this can be done with another js
* file similar to media-upload.js and theme-preview.js. That file should
* file similar to media-upload.js. That file should
* require array('thickbox') to ensure it is loaded after.
*
* @since 2.5.0

View File

@ -41,7 +41,7 @@ if ( typeof wp === 'undefined' )
$( function() {
Loader.initialize();
$('#current-theme, #availablethemes').on( 'click', '.load-customize', function( event ) {
$('#wpbody').on( 'click', '.load-customize', function( event ) {
var load = $(this);
event.preventDefault();

View File

@ -364,8 +364,9 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'thickbox' ), false, 1 );
$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'jquery' ), false, 1 );
// @todo: Core no longer uses theme-preview.js. Remove?
$scripts->add( 'theme-preview', "/wp-admin/js/theme-preview$suffix.js", array( 'thickbox', 'jquery' ), false, 1 );
$scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'suggest' ), false, 1 );

View File

@ -1563,9 +1563,16 @@ function check_theme_switched() {
}
}
function wp_customize_load() {
/**
* Includes and instantiates the WP_Customize class.
*
* Fires when ?customize=on.
*
* @since 3.4.0
*/
function _wp_customize_include() {
// Load on themes.php or ?customize=on
if ( ! ( isset( $_REQUEST['customize'] ) && 'on' == $_REQUEST['customize'] ) && 'themes.php' != $GLOBALS['pagenow'] )
if ( ! ( isset( $_REQUEST['customize'] ) && 'on' == $_REQUEST['customize'] ) )
return;
require( ABSPATH . WPINC . '/class-wp-customize.php' );
@ -1573,4 +1580,33 @@ function wp_customize_load() {
// @todo Dependency injection instead
$GLOBALS['customize'] = new WP_Customize;
}
add_action( 'plugins_loaded', 'wp_customize_load' );
add_action( 'plugins_loaded', '_wp_customize_include' );
/**
* Includes the loading scripts for the theme customizer and
* adds the action to print the customize container template.
*
* @since 3.4.0
*/
function wp_customize_loader() {
wp_enqueue_script( 'customize-loader' );
add_action( 'admin_footer', '_wp_customize_loader_template' );
}
/**
* Print the customize container template.
*
* @since 3.4.0
*/
function _wp_customize_loader_template() {
?>
<div id="customize-container" class="wp-full-overlay">
<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
<a href="#" class="close-full-overlay"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
<span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
<span class="collapse-sidebar-arrow"></span>
</a>
</div>
<?php
}