sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customizer: Improve markup for available menu items.

Browse Source 
* Use lists for available menu items.
* Remove unused template for available item types.
* Hide the type label and title from screen readers and instead include them in the add button.

props celloexpressions, afercia.
fixes #32724.

git-svn-id: https://develop.svn.wordpress.org/trunk@33151 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90) 2015-07-09 21:59:47 +00:00
parent cf6504c787
commit e0e83f8608
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/wp-admin/css/customize-nav-menus.css
View File

@ -655,10 +655,15 @@ button.not-a-button {
#available-menu-items .accordion-section-content { #available-menu-items .accordion-section-content {
padding: 1px 15px 15px 15px; padding: 1px 15px 15px 15px;
margin: 0;
min-height: 120px; min-height: 120px;
max-height: 290px; max-height: 290px;
} }
#available-menu-items .menu-item-tpl {
margin: 0;
}
#custom-menu-item-name.invalid, #custom-menu-item-name.invalid,
#custom-menu-item-url.invalid, #custom-menu-item-url.invalid,
.menu-name-field.invalid, .menu-name-field.invalid,

29
src/wp-includes/class-wp-customize-nav-menus.php
View File

@ -586,25 +586,22 @@ final class WP_Customize_Nav_Menus {
public function print_templates() { public function print_templates() {
?> ?>
<script type="text/html" id="tmpl-available-menu-item"> <script type="text/html" id="tmpl-available-menu-item">
<div id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}"> <li id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
<div class="menu-item-bar"> <div class="menu-item-bar">
<div class="menu-item-handle"> <div class="menu-item-handle">
<span class="item-type">{{ data.type_label }}</span> <span class="item-type" aria-hidden="true">{{ data.type_label }}</span>
<span class="item-title"> <span class="item-title" aria-hidden="true">
<span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span> <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
</span> </span>
<button type="button" class="not-a-button item-add"><span class="screen-reader-text"><?php _e( 'Add Menu Item' ) ?></span></button> <button type="button" class="not-a-button item-add">
</div> <span class="screen-reader-text"><?php
</div> /* translators: 1: Title of a menu item, 2: Type of a menu item */
</div> printf( __( 'Add to menu: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.type_label }}' );
</script> ?></span>
</button>
<script type="text/html" id="tmpl-available-menu-item-type">
<div id="available-menu-items-{{ data.type }}" class="accordion-section">
<h4 class="accordion-section-title">{{ data.type_label }}</h4>
<div class="accordion-section-content">
</div> </div>
</div> </div>
</li>
</script> </script>
<script type="text/html" id="tmpl-menu-item-reorder-nav"> <script type="text/html" id="tmpl-menu-item-reorder-nav">
@ -652,7 +649,7 @@ final class WP_Customize_Nav_Menus {
<p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p> <p class="screen-reader-text" id="menu-items-search-desc"><?php _e( 'The search results will be updated as you type.' ); ?></p>
<span class="spinner"></span> <span class="spinner"></span>
</div> </div>
<div class="accordion-section-content" data-type="search"></div> <ul class="accordion-section-content" data-type="search"></ul>
</div> </div>
<div id="new-custom-menu-item" class="accordion-section"> <div id="new-custom-menu-item" class="accordion-section">
<h4 class="accordion-section-title"><?php _e( 'Custom Links' ); ?><button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4> <h4 class="accordion-section-title"><?php _e( 'Custom Links' ); ?><button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
@ -688,7 +685,7 @@ final class WP_Customize_Nav_Menus {
?> ?>
<div id="available-menu-items-<?php echo esc_attr( $type->name ); ?>" class="accordion-section"> <div id="available-menu-items-<?php echo esc_attr( $type->name ); ?>" class="accordion-section">
<h4 class="accordion-section-title"><?php echo esc_html( $type->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4> <h4 class="accordion-section-title"><?php echo esc_html( $type->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
<div class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></div> <ul class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></ul>
</div> </div>
<?php <?php
endforeach; endforeach;
@ -700,7 +697,7 @@ final class WP_Customize_Nav_Menus {
?> ?>
<div id="available-menu-items-<?php echo esc_attr( $tax->name ); ?>" class="accordion-section"> <div id="available-menu-items-<?php echo esc_attr( $tax->name ); ?>" class="accordion-section">
<h4 class="accordion-section-title"><?php echo esc_html( $tax->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4> <h4 class="accordion-section-title"><?php echo esc_html( $tax->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
<div class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></div> <ul class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></ul>
</div> </div>
<?php <?php
endforeach; endforeach;