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/class-wp-customize-nav-menus.php

    r41670 r41768  
    396396        $temp_nav_menu_item_setting = new WP_Customize_Nav_Menu_Item_Setting( $this->manager, 'nav_menu_item[-1]' );
    397397
     398        $num_locations = count( get_registered_nav_menus() );
     399        if ( 1 === $num_locations ) {
     400            $locations_description = __( 'Your theme can display menus in one location.' );
     401        } else {
     402            /* translators: %s: number of menu locations */
     403            $locations_description = sprintf( _n( 'Your theme can display menus in %s location.', 'Your theme can display menus in %s locations.', $num_locations ), number_format_i18n( $num_locations ) );
     404        }
     405
    398406        // Pass data to JS.
    399407        $settings = array(
     
    401409            'itemTypes'            => $this->available_item_types(),
    402410            'l10n'                 => array(
    403                 'untitled'          => _x( '(no label)', 'missing menu item navigation label' ),
    404                 'unnamed'           => _x( '(unnamed)', 'Missing menu name.' ),
    405                 'custom_label'      => __( 'Custom Link' ),
    406                 'page_label'        => get_post_type_object( 'page' )->labels->singular_name,
    407                 /* translators: %s: menu location */
    408                 'menuLocation'      => _x( '(Currently set to: %s)', 'menu' ),
    409                 'menuNameLabel'     => __( 'Menu Name' ),
    410                 'itemAdded'         => __( 'Menu item added' ),
    411                 'itemDeleted'       => __( 'Menu item deleted' ),
    412                 'menuAdded'         => __( 'Menu created' ),
    413                 'menuDeleted'       => __( 'Menu deleted' ),
    414                 'movedUp'           => __( 'Menu item moved up' ),
    415                 'movedDown'         => __( 'Menu item moved down' ),
    416                 'movedLeft'         => __( 'Menu item moved out of submenu' ),
    417                 'movedRight'        => __( 'Menu item is now a sub-item' ),
     411                'untitled'               => _x( '(no label)', 'missing menu item navigation label' ),
     412                'unnamed'                => _x( '(unnamed)', 'Missing menu name.' ),
     413                'custom_label'           => __( 'Custom Link' ),
     414                'page_label'             => get_post_type_object( 'page' )->labels->singular_name,
     415                /* translators: %s:      menu location */
     416                'menuLocation'           => _x( '(Currently set to: %s)', 'menu' ),
     417                'locationsDescription'   => $locations_description,
     418                'menuNameLabel'          => __( 'Menu Name' ),
     419                'newMenuNameDescription' => __( 'If your theme has multiple menus, giving them clear names will help you manage them.' ),
     420                'itemAdded'              => __( 'Menu item added' ),
     421                'itemDeleted'            => __( 'Menu item deleted' ),
     422                'menuAdded'              => __( 'Menu created' ),
     423                'menuDeleted'            => __( 'Menu deleted' ),
     424                'movedUp'                => __( 'Menu item moved up' ),
     425                'movedDown'              => __( 'Menu item moved down' ),
     426                'movedLeft'              => __( 'Menu item moved out of submenu' ),
     427                'movedRight'             => __( 'Menu item is now a sub-item' ),
    418428                /* translators: ▸ is the unicode right-pointing triangle, and %s is the section title in the Customizer */
    419                 'customizingMenus'  => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
     429                'customizingMenus'       => sprintf( __( 'Customizing ▸ %s' ), esc_html( $this->manager->get_panel( 'nav_menus' )->title ) ),
    420430                /* translators: %s: title of menu item which is invalid */
    421                 'invalidTitleTpl'   => __( '%s (Invalid)' ),
     431                'invalidTitleTpl'        => __( '%s (Invalid)' ),
    422432                /* translators: %s: title of menu item in draft status */
    423                 'pendingTitleTpl'   => __( '%s (Pending)' ),
    424                 'itemsFound'        => __( 'Number of items found: %d' ),
    425                 'itemsFoundMore'    => __( 'Additional items found: %d' ),
    426                 'itemsLoadingMore'  => __( 'Loading more results... please wait.' ),
    427                 'reorderModeOn'     => __( 'Reorder mode enabled' ),
    428                 'reorderModeOff'    => __( 'Reorder mode closed' ),
    429                 'reorderLabelOn'    => esc_attr__( 'Reorder menu items' ),
    430                 'reorderLabelOff'   => esc_attr__( 'Close reorder mode' ),
     433                'pendingTitleTpl'        => __( '%s (Pending)' ),
     434                'itemsFound'             => __( 'Number of items found: %d' ),
     435                'itemsFoundMore'         => __( 'Additional items found: %d' ),
     436                'itemsLoadingMore'       => __( 'Loading more results... please wait.' ),
     437                'reorderModeOn'          => __( 'Reorder mode enabled' ),
     438                'reorderModeOff'         => __( 'Reorder mode closed' ),
     439                'reorderLabelOn'         => esc_attr__( 'Reorder menu items' ),
     440                'reorderLabelOff'        => esc_attr__( 'Close reorder mode' ),
    431441            ),
    432442            'settingTransport'     => 'postMessage',
     
    538548        $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Control' );
    539549        $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Name_Control' );
     550        $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Locations_Control' );
    540551        $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Auto_Add_Control' );
    541552        $this->manager->register_control_type( 'WP_Customize_Nav_Menu_Item_Control' );
     
    559570        // Menu locations.
    560571        $locations     = get_registered_nav_menus();
    561         $num_locations = count( array_keys( $locations ) );
     572        $num_locations = count( $locations );
    562573        if ( 1 == $num_locations ) {
    563             $description = '<p>' . __( 'Your theme supports one menu. Select which menu you would like to use.' ) . '</p>';
     574            $description = '<p>' . __( 'Your theme can display menus in one location. Select which menu you would like to use.' ) . '</p>';
    564575        } else {
    565576            /* translators: %s: number of menu locations */
    566             $description = '<p>' . sprintf( _n( 'Your theme supports %s menu. Select which menu appears in each location.', 'Your theme supports %s menus. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
    567         }
     577            $description = '<p>' . sprintf( _n( 'Your theme can display menus in %s location. Select which menu you would like to use.', 'Your theme can display menus in %s locations. Select which menu appears in each location.', $num_locations ), number_format_i18n( $num_locations ) ) . '</p>';
     578        }
     579
    568580        if ( current_theme_supports( 'widgets' ) ) {
    569581            /* translators: URL to the widgets panel of the customizer */
    570             $description .= '<p>' . sprintf( __( 'You can also place menus in <a href="%s">widget areas</a> with the &#8220;Custom Menu&#8221; widget.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
     582            $description .= '<p>' . sprintf( __( 'If your theme has widget areas, you can also add menus there. Visit the <a href="%s">Widgets panel</a> and add a &#8220;Custom Menu widget&#8221; to display a menu in a sidebar or footer.' ), "javascript:wp.customize.panel( 'widgets' ).focus();" ) . '</p>';
    571583        }
    572584
    573585        $this->manager->add_section( 'menu_locations', array(
    574             'title'       => __( 'Menu Locations' ),
    575             'panel'       => 'nav_menus',
    576             'priority'    => 5,
    577             'description' => $description,
     586            'title'         => __( 'View All Locations' ),
     587            'panel'         => 'nav_menus',
     588            'priority'      => 30,
     589            'description'   => $description
    578590        ) );
    579591
     
    668680
    669681        // Add the add-new-menu section and controls.
    670         $this->manager->add_section( new WP_Customize_New_Menu_Section( $this->manager, 'add_menu', array(
    671             'title'    => __( 'Add a Menu' ),
     682        $this->manager->add_section( 'add_menu', array(
     683            'type'     => 'new_menu',
     684            'title'    => __( 'New Menu' ),
    672685            'panel'    => 'nav_menus',
    673             'priority' => 999,
    674         ) ) );
    675 
    676         $this->manager->add_control( 'new_menu_name', array(
    677             'label'       => __( 'New menu name' ),
    678             'section'     => 'add_menu',
    679             'type'        => 'text',
    680             'settings'    => array(),
    681             'input_attrs' => array(
    682                 'class'       => 'menu-name-field',
    683             ),
     686            'priority' => 20,
    684687        ) );
    685 
    686         $this->manager->add_control( new WP_Customize_New_Menu_Control( $this->manager, 'create_new_menu', array(
    687             'section'  => 'add_menu',
    688             'settings' => array(),
    689         ) ) );
    690688
    691689        $this->manager->add_setting( new WP_Customize_Filter_Setting( $this->manager, 'nav_menus_created_posts', array(
     
    925923                ?>
    926924            </div>
     925        </script>
     926
     927        <script type="text/html" id="tmpl-nav-menu-delete-button">
     928            <div class="menu-delete-item">
     929                <button type="button" class="button-link button-link-delete">
     930                    <?php _e( 'Delete Menu' ); ?>
     931                </button>
     932            </div>
     933        </script>
     934
     935        <script type="text/html" id="tmpl-nav-menu-submit-new-button">
     936            <p id="customize-new-menu-submit-description"><?php _e( 'Click "next" to start adding links to your new menu.' ); ?></p>
     937            <button id="customize-new-menu-submit" type="button" class="button" aria-describedby="customize-new-menu-submit-description"><?php _e( 'Next' ); ?></button>
     938        </script>
     939
     940        <script type="text/html" id="tmpl-nav-menu-locations-header">
     941            <span class="customize-control-title customize-section-title-menu_locations-heading"><?php _e( 'Menu Locations' ); ?></span>
     942            <p class="customize-control-description customize-section-title-menu_locations-description">{{ data.l10n.locationsDescription }}</p>
     943        </script>
     944
     945        <script type="text/html" id="tmpl-nav-menu-create-menu-section-title">
     946            <h3>
     947                <button type="button" class="button customize-add-menu-button">
     948                    <?php _e( 'Create New Menu' ); ?>
     949                </button>
     950            </h3>
    927951        </script>
    928952    <?php
Note: See TracChangeset for help on using the changeset viewer.