Customizer Theme Switcher: Navigation streamlining.

* Detach Themes section from other controls
* Move to buttons to navigate back and forth
* Change titles based on current theme status, active/previewing
* Hide the active/previewing theme from the list of available themes

props folletto for the design concepts.
props designsimply, celloexpressions for initial patches.
props Team Gandalf.
see #31289.

git-svn-id: https://develop.svn.wordpress.org/trunk@31975 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
2015-04-01 22:50:10 +00:00
parent d6a590e087
commit a05bbf7e7b
4 changed files with 89 additions and 75 deletions
@@ -1148,9 +1148,9 @@ final class WP_Customize_Manager {
/* Themes */
$this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
'title' => sprintf( __( 'Theme: %s' ), $this->theme()->display('Name') ),
'title' => $this->theme()->display( 'Name' ),
'capability' => 'switch_themes',
'priority' => 0,
'priority' => 0,
) ) );
// Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
@@ -1163,10 +1163,14 @@ final class WP_Customize_Manager {
// Theme Controls.
$themes = wp_prepare_themes_for_js();
foreach ( $themes as $theme ) {
if ( $theme['active'] ) {
continue;
}
$theme_id = 'theme_' . $theme['id'];
$this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
'theme' => $theme,
'section' => 'themes',
'theme' => $theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
+31 -6
View File
@@ -341,17 +341,42 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
$classes = 'accordion-section control-section control-section-' . $this->type;
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
<h3 class="accordion-section-title" tabindex="0">
<?php echo esc_html( $this->title ); ?>
<span class="screen-reader-text"><?php _e( 'Press return or enter to expand' ); ?></span>
<h3 class="accordion-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
/* translators: %s: theme name */
printf( __( '<span>Active theme</span> %s' ), $this->title );
} else {
/* translators: %s: theme name */
printf( __( '<span>Previewing theme</span> %s' ), $this->title );
}
?>
<button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
</h3>
<div class="customize-themes-panel control-panel-content themes-php">
<h2><?php esc_html_e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo count( $this->controls ) - 1; ?></span>
<h2>
<?php _e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
</h2>
<h3 class="accordion-section-title customize-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
/* translators: %s: theme name */
printf( __( '<span>Active theme</span> %s' ), $this->title );
} else {
/* translators: %s: theme name */
printf( __( '<span>Previewing theme</span> %s' ), $this->title );
}
?>
<button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
</h3>
<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
<div id="customize-container"></div>
<?php if ( 6 < count( $this->controls ) ) : ?>
<?php if ( count( $this->controls ) > 4 ) : ?>
<p><label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search installed themes...' ); ?></span>
<input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes...' ); ?>" />