WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/05/2017 02:21:22 AM (2 years ago)
Author:
westonruter
Message:

Customize: Improve the menu creation flow.

Often, folks run into two issues when they create new menus: they click "Add a Menu" thinking it will add a new page to their menu, or they forget to assign their new menu to a location, and then wonder why it doesn't show up on their site.

This commit rearranges the order of items in the menu panel, and updates the flow for creating a menu by breaking it up into steps. Additionally, more help text has been added to guide people through the process of creating a menu.

Also adds default type lookups for Panel and Section instances. See #30741.

Props bpayton, obenland, westonruter, celloexpessions, afercia, melchoyce, zoonini, michelleweber.
Fixes #40104.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

    r41740 r41768  
    2424
    2525    /**
    26      * The nav menu setting.
    27      *
    28      * @since 4.3.0
    29      * @var WP_Customize_Nav_Menu_Setting
    30      */
    31     public $setting;
    32 
    33     /**
    3426     * Don't render the control's content - it uses a JS template instead.
    3527     *
     
    4537    public function content_template() {
    4638        ?>
    47         <# var elementId; #>
    48         <button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
    49             <?php _e( 'Add Items' ); ?>
    50         </button>
    51         <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
    52             <span class="reorder"><?php _e( 'Reorder' ); ?></span>
    53             <span class="reorder-done"><?php _e( 'Done' ); ?></span>
    54         </button>
     39        <p class="new-menu-item-invitation"><?php _e( 'Time to add some links! Click "Add menu items" to start putting pages, categories, and custom links in your menu. Add as many things as you\'d like.' ); ?></p>
     40        <div class="customize-control-nav_menu-buttons">
     41            <button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
     42                <?php _e( 'Add Items' ); ?>
     43            </button>
     44            <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
     45                <span class="reorder"><?php _e( 'Reorder' ); ?></span>
     46                <span class="reorder-done"><?php _e( 'Done' ); ?></span>
     47            </button>
     48        </div>
    5549        <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}"><?php _e( 'When in reorder mode, additional controls to reorder menu items will be available in the items list above.' ); ?></p>
    56         <span class="menu-delete-item">
    57             <button type="button" class="button-link button-link-delete">
    58                 <?php _e( 'Delete Menu' ); ?>
    59             </button>
    60         </span>
    61         <?php if ( current_theme_supports( 'menus' ) ) : ?>
    62         <ul class="menu-settings">
    63             <li class="customize-control">
    64                 <span class="customize-control-title"><?php _e( 'Display Location' ); ?></span>
    65             </li>
    66 
    67             <?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
    68                 <# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
    69                 <li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
    70                     <input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
    71                     <label for="{{ elementId }}">
    72                         <?php echo $description; ?>
    73                         <span class="theme-location-set">
    74                             <?php
    75                             /* translators: %s: menu name */
    76                             printf( _x( '(Current: %s)', 'menu location' ),
    77                                 '<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
    78                             );
    79                             ?>
    80                         </span>
    81                     </label>
    82                 </li>
    83             <?php endforeach; ?>
    84         </ul>
    85         <?php endif; ?>
    8650        <?php
    8751    }
Note: See TracChangeset for help on using the changeset viewer.