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

8
wp-includes/class-wp-customize-panel.php
View File

@@ -315,15 +315,17 @@ class WP_Customize_Panel {
*/
protected function render_content() {
?>
<li class="panel-meta accordion-section control-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
<div class="accordion-section-title" tabindex="0">
<li class="panel-meta customize-info accordion-section<?php if ( empty( $this->description ) ) { echo ' cannot-expand'; } ?>">
<button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
<div class="accordion-section-title">
<span class="preview-notice"><?php
/* translators: %s is the site/panel title in the Customizer */
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title">' . esc_html( $this->title ) . '</strong>' );
?></span>
<button class="customize-help-toggle dashicons dashicons-editor-help" tabindex="0" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
</div>
<?php if ( ! empty( $this->description ) ) : ?>
<div class="accordion-section-content description">
<div class="description customize-panel-description">
<?php echo $this->description; ?>
</div>
<?php endif; ?>

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>

12
wp-includes/class-wp-customize-widgets.php
View File

@@ -681,6 +681,18 @@ final class WP_Customize_Widgets {
?>
<div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
<div id="available-widgets">
<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
/* 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( 'widgets' )->title ) );
?></span>
<?php _e( 'Add a Widget' ); ?>
</h3>
</div>
<div id="available-widgets-filter">
<label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
<input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />

2
wp-includes/version.php
View File

@@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.3-alpha-32648';
$wp_version = '4.3-alpha-32649';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.