WordPress.org

Make WordPress Core

Changeset 33151


Ignore:
Timestamp:
07/09/2015 09:59:47 PM (5 years ago)
Author:
ocean90
Message:

Customizer: Improve markup for available menu items.

  • 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.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r33136 r33151  
    656656#available-menu-items .accordion-section-content {
    657657    padding: 1px 15px 15px 15px;
     658    margin: 0;
    658659    min-height: 120px;
    659660    max-height: 290px;
     661}
     662
     663#available-menu-items .menu-item-tpl {
     664    margin: 0;
    660665}
    661666
  • trunk/src/wp-includes/class-wp-customize-nav-menus.php

    r33138 r33151  
    587587        ?>
    588588        <script type="text/html" id="tmpl-available-menu-item">
    589             <div id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
     589            <li id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
    590590                <div class="menu-item-bar">
    591591                    <div class="menu-item-handle">
    592                         <span class="item-type">{{ data.type_label }}</span>
    593                         <span class="item-title">
     592                        <span class="item-type" aria-hidden="true">{{ data.type_label }}</span>
     593                        <span class="item-title" aria-hidden="true">
    594594                            <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
    595595                        </span>
    596                         <button type="button" class="not-a-button item-add"><span class="screen-reader-text"><?php _e( 'Add Menu Item' ) ?></span></button>
     596                        <button type="button" class="not-a-button item-add">
     597                            <span class="screen-reader-text"><?php
     598                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
     599                                printf( __( 'Add to menu: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.type_label }}' );
     600                            ?></span>
     601                        </button>
    597602                    </div>
    598603                </div>
    599             </div>
    600         </script>
    601 
    602         <script type="text/html" id="tmpl-available-menu-item-type">
    603             <div id="available-menu-items-{{ data.type }}" class="accordion-section">
    604                 <h4 class="accordion-section-title">{{ data.type_label }}</h4>
    605                 <div class="accordion-section-content">
    606                 </div>
    607             </div>
     604            </li>
    608605        </script>
    609606
     
    653650                    <span class="spinner"></span>
    654651                </div>
    655                 <div class="accordion-section-content" data-type="search"></div>
     652                <ul class="accordion-section-content" data-type="search"></ul>
    656653            </div>
    657654            <div id="new-custom-menu-item" class="accordion-section">
     
    689686                    <div id="available-menu-items-<?php echo esc_attr( $type->name ); ?>" class="accordion-section">
    690687                        <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>
    691                         <div class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></div>
     688                        <ul class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></ul>
    692689                    </div>
    693690                <?php
     
    701698                    <div id="available-menu-items-<?php echo esc_attr( $tax->name ); ?>" class="accordion-section">
    702699                        <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>
    703                         <div class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></div>
     700                        <ul class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></ul>
    704701                    </div>
    705702                <?php
Note: See TracChangeset for help on using the changeset viewer.