Theme Switcher: Provide an easier way to reset back to the current active theme.

* Add control for the active theme when doing a theme preview
* Highlight an active theme and move it to the top

props valendesigns, ocean90.
fixes #32002.

git-svn-id: https://develop.svn.wordpress.org/trunk@32265 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90) 2015-04-22 16:15:01 +00:00
parent ca11d4c876
commit f029572866
4 changed files with 50 additions and 8 deletions

View File

@ -1089,6 +1089,10 @@ body.cheatin p {
.wp-customizer .theme:not(.active):focus .theme-actions {
display: block;
}
.wp-customizer .theme-browser .theme.active .theme-name span {
display: inline;
}
}
@media screen and ( max-width: 640px ) {

View File

@ -259,6 +259,10 @@
box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.theme-browser .customize-control .theme.active .theme-name {
padding-right: 15px;
}
.theme-browser .theme.active .theme-name span {
font-weight: 600;
}

View File

@ -1243,10 +1243,16 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
*/
public function content_template() {
$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
$active_url = esc_url( remove_query_arg( 'theme', $current_url ) );
$preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
$preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
?>
<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# if ( data.theme.isActiveTheme ) { #>
<div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } else { #>
<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } #>
<# if ( data.theme.screenshot[0] ) { #>
<div class="theme-screenshot">
<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
@ -1254,14 +1260,28 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
<# } else { #>
<div class="theme-screenshot blank"></div>
<# } #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
<# if ( data.theme.isActiveTheme ) { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
<# } else { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
<# } #>
<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
</div>
<# if ( data.theme.isActiveTheme ) { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Active:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<# } else { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
</div>
<# } #>
</div>
<?php
}

View File

@ -1198,13 +1198,27 @@ final class WP_Customize_Manager {
require_once( ABSPATH . 'wp-admin/includes/theme.php' );
// Theme Controls.
// Add a control for the active/original theme.
if ( ! $this->is_theme_active() ) {
$themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
$active_theme = current( $themes );
$active_theme['isActiveTheme'] = true;
$this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
'theme' => $active_theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
$themes = wp_prepare_themes_for_js();
foreach ( $themes as $theme ) {
if ( $theme['active'] ) {
if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
continue;
}
$theme_id = 'theme_' . $theme['id'];
$theme['isActiveTheme'] = false;
$this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
'theme' => $theme,
'section' => 'themes',