WordPress.org

Make WordPress Core

Changeset 41899


Ignore:
Timestamp:
10/18/2017 02:50:34 PM (3 years ago)
Author:
obenland
Message:

Customize: Allow menu creation in locations pane

Adds a link to the menu creation workflow from the locations selector in the nav menu control.

Props bpayton, westonruter, Travel_girl, melchoyce, celloexpressions.
Fixes #36279.

Location:
trunk
Files:
4 edited

Legend:

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

    r41832 r41899  
    3333}
    3434
    35 /* The `edit-menu` button uses also the `button-link` class. */
    36 .customize-control-nav_menu_location .edit-menu {
     35/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
     36.customize-control-nav_menu_location .edit-menu,
     37.customize-control-nav_menu_location .create-menu {
    3738    margin-left: 6px;
    3839    vertical-align: middle;
  • trunk/src/wp-admin/js/customize-nav-menus.js

    r41887 r41899  
    13851385            // Focus on the new menu section.
    13861386            api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
     1387        },
     1388
     1389        /**
     1390         * Select a default location.
     1391         *
     1392         * This method selects a single location by default so we can support
     1393         * creating a menu for a specific menu location.
     1394         *
     1395         * @since 4.9.0
     1396         *
     1397         * @param {string|null} locationId - The ID of the location to select. `null` clears all selections.
     1398         * @returns {void}
     1399         */
     1400        selectDefaultLocation: function( locationId ) {
     1401            var locationControl = api.control( this.id + '[locations]' ),
     1402                locationSelections = {};
     1403
     1404            if ( locationId !== null ) {
     1405                locationSelections[ locationId ] = true;
     1406            }
     1407
     1408            locationControl.setSelections( locationSelections );
    13871409        }
    13881410    });
     
    14171439            };
    14181440
    1419             // Edit menu button.
     1441            // Create and Edit menu buttons.
     1442            control.container.find( '.create-menu' ).on( 'click', function() {
     1443                var addMenuSection = api.section( 'add_menu' );
     1444                addMenuSection.selectDefaultLocation( this.dataset.locationId );
     1445                addMenuSection.focus();
     1446            } );
    14201447            control.container.find( '.edit-menu' ).on( 'click', function() {
    14211448                var menuId = control.setting();
     
    14231450            });
    14241451            control.setting.bind( 'change', function() {
    1425                 if ( 0 === control.setting() ) {
    1426                     control.container.find( '.edit-menu' ).addClass( 'hidden' );
    1427                 } else {
    1428                     control.container.find( '.edit-menu' ).removeClass( 'hidden' );
    1429                 }
     1452                var menuIsSelected = 0 !== control.setting();
     1453                control.container.find( '.create-menu' ).toggleClass( 'hidden', menuIsSelected );
     1454                control.container.find( '.edit-menu' ).toggleClass( 'hidden', ! menuIsSelected );
    14301455            });
    14311456
     
    23512376                updateSelectedMenuLabel( navMenuLocationSetting.get() );
    23522377            });
     2378        },
     2379
     2380        /**
     2381         * Set the selected locations.
     2382         *
     2383         * This method sets the selected locations and allows us to do things like
     2384         * set the default location for a new menu.
     2385         *
     2386         * @since 4.9.0
     2387         *
     2388         * @param {Object.<string,boolean>} selections - A map of location selections.
     2389         * @returns {void}
     2390         */
     2391        setSelections: function( selections ) {
     2392            this.container.find( '.menu-location' ).each( function( i, checkboxNode ) {
     2393                var locationId = checkboxNode.dataset.locationId;
     2394                checkboxNode.checked = locationId in selections ? selections[ locationId ] : false;
     2395            } );
    23532396        }
    23542397    });
  • trunk/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php

    r41162 r41899  
    5151     *
    5252     * @since 4.3.0
     53     * @since 4.9.0 Added a button to create menus.
    5354     */
    5455    public function render_content() {
     
    7475            </select>
    7576        </label>
     77        <button type="button" class="button-link create-menu<?php if ( $this->value() ) { echo ' hidden'; } ?>" data-location-id="<?php echo esc_attr( $this->location_id ); ?>" aria-label="<?php esc_attr_e( 'Create a menu for this location' ); ?>"><?php _e( '+ Create New Menu' ); ?></button>
    7678        <button type="button" class="button-link edit-menu<?php if ( ! $this->value() ) { echo ' hidden'; } ?>" aria-label="<?php esc_attr_e( 'Edit selected menu' ); ?>"><?php _e( 'Edit Menu' ); ?></button>
    7779        <?php
  • trunk/tests/qunit/wp-admin/js/customize-nav-menus.js

    r41773 r41899  
    111111    // @todo Add tests for api.Menus.NewMenuSection
    112112    // @todo Add tests for api.Menus.MenuLocationControl
     113    // @todo Add tests for api.Menus.MenuLocationsControl
    113114    // @todo Add tests for api.Menus.MenuAutoAddControl
    114115    // @todo Add tests for api.Menus.MenuControl
Note: See TracChangeset for help on using the changeset viewer.