HostForge-Systems/wordpress
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Customizer: Replace accordion behavior of sections with a slide-in navigation.

Browse Source 
This allows users to focus on the contents of the active section more easily and separating the navigation from the content/controls in the Customizer.

props valendesigns, celloexpressions.
see #31336.
Built from https://develop.svn.wordpress.org/trunk@32649


git-svn-id: http://core.svn.wordpress.org/trunk@32619 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Dominik Schilling
2015-05-29 13:57:26 +00:00
parent ebac76facc
commit fccc19b510
17 changed files with 724 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
wp-includes/class-wp-customize-section.php
View File

@@ -305,14 +305,30 @@ class WP_Customize_Section {
<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>
<span class="screen-reader-text"><?php _e( 'Press return or enter to open' ); ?></span>
</h3>
<ul class="accordion-section-content">
<?php if ( ! empty( $this->description ) ) : ?>
<li class="customize-section-description-container">
<li class="customize-section-description-container">
<div class="customize-section-title">
<button class="customize-section-back" tabindex="-1">
<span class="screen-reader-text"><?php _e( 'Back' ); ?></span>
</button>
<h3>
<span class="customize-action"><?php
if ( $this->panel ) {
/* translators: &#9656; is the unicode right-pointing triangle, and %s is the section title in the Customizer */
echo sprintf( __( 'Customizing &#9656; %s' ), esc_html( $this->manager->get_panel( $this->panel )->title ) );
} else {
_e( 'Customizing' );
}
?></span>
<?php echo esc_html( $this->title ); ?>
</h3>
</div>
<?php if ( ! empty( $this->description ) ) : ?>
<p class="description customize-section-description"><?php echo $this->description; ?></p>
</li>
<?php endif; ?>
<?php endif; ?>
</li>
</ul>
</li>
<?php
@@ -353,29 +369,29 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
<?php
if ( $this->manager->is_theme_active() ) {
/* translators: %s: theme name */
printf( __( '<span>Active theme</span> %s' ), $this->title );
printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
} else {
/* translators: %s: theme name */
printf( __( '<span>Previewing theme</span> %s' ), $this->title );
printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
}
?>
<button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button>
<button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
</h3>
<div class="customize-themes-panel control-panel-content themes-php">
<h2>
<h3 class="accordion-section-title customize-section-title">
<span class="customize-action"><?php _e( 'Customizing' ); ?></span>
<?php _e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
</h2>
</h3>
<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 );
printf( __( '<span class="customize-action">Active theme</span> %s' ), $this->title );
} else {
/* translators: %s: theme name */
printf( __( '<span>Previewing theme</span> %s' ), $this->title );
printf( __( '<span class="customize-action">Previewing theme</span> %s' ), $this->title );
}
?>
<button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>