Changeset 41899

Timestamp:

10/18/2017 02:50:34 PM (8 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:

• src/wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• src/wp-admin/js/customize-nav-menus.js (modified) (4 diffs)
• src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php (modified) (2 diffs)
• tests/qunit/wp-admin/js/customize-nav-menus.js (modified) (1 diff)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -33 +33 @@
 }
 
-/* The `edit-menu` button uses also the `button-link` class. */
-.customize-control-nav_menu_location .edit-menu {
+/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
+.customize-control-nav_menu_location .edit-menu,
+.customize-control-nav_menu_location .create-menu {
     margin-left: 6px;
     vertical-align: middle;

trunk/src/wp-admin/js/customize-nav-menus.js

@@ -1385 +1385 @@
             // Focus on the new menu section.
             api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
+        },
+
+        /**
+         * Select a default location.
+         *
+         * This method selects a single location by default so we can support
+         * creating a menu for a specific menu location.
+         *
+         * @since 4.9.0
+         *
+         * @param {string|null} locationId - The ID of the location to select. `null` clears all selections.
+         * @returns {void}
+         */
+        selectDefaultLocation: function( locationId ) {
+            var locationControl = api.control( this.id + '[locations]' ),
+                locationSelections = {};
+
+            if ( locationId !== null ) {
+                locationSelections[ locationId ] = true;
+            }
+
+            locationControl.setSelections( locationSelections );
         }
     });
@@ -1417 +1439 @@
             };
 
-            // Edit menu button.
+            // Create and Edit menu buttons.
+            control.container.find( '.create-menu' ).on( 'click', function() {
+                var addMenuSection = api.section( 'add_menu' );
+                addMenuSection.selectDefaultLocation( this.dataset.locationId );
+                addMenuSection.focus();
+            } );
             control.container.find( '.edit-menu' ).on( 'click', function() {
                 var menuId = control.setting();
@@ -1423 +1450 @@
             });
             control.setting.bind( 'change', function() {
-                if ( 0 === control.setting() ) {
-                    control.container.find( '.edit-menu' ).addClass( 'hidden' );
-                } else {
-                    control.container.find( '.edit-menu' ).removeClass( 'hidden' );
-                }
+                var menuIsSelected = 0 !== control.setting();
+                control.container.find( '.create-menu' ).toggleClass( 'hidden', menuIsSelected );
+                control.container.find( '.edit-menu' ).toggleClass( 'hidden', ! menuIsSelected );
             });
 
@@ -2351 +2376 @@
                 updateSelectedMenuLabel( navMenuLocationSetting.get() );
             });
+        },
+
+        /**
+         * Set the selected locations.
+         *
+         * This method sets the selected locations and allows us to do things like
+         * set the default location for a new menu.
+         *
+         * @since 4.9.0
+         *
+         * @param {Object.<string,boolean>} selections - A map of location selections.
+         * @returns {void}
+         */
+        setSelections: function( selections ) {
+            this.container.find( '.menu-location' ).each( function( i, checkboxNode ) {
+                var locationId = checkboxNode.dataset.locationId;
+                checkboxNode.checked = locationId in selections ? selections[ locationId ] : false;
+            } );
         }
     });

trunk/src/wp-includes/customize/class-wp-customize-nav-menu-location-control.php

@@ -51 +51 @@
      *
      * @since 4.3.0
+     * @since 4.9.0 Added a button to create menus.
      */
     public function render_content() {
@@ -74 +75 @@
             </select>
         </label>
+        <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>
         <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>
         <?php

trunk/tests/qunit/wp-admin/js/customize-nav-menus.js

@@ -111 +111 @@
     // @todo Add tests for api.Menus.NewMenuSection
     // @todo Add tests for api.Menus.MenuLocationControl
+    // @todo Add tests for api.Menus.MenuLocationsControl
     // @todo Add tests for api.Menus.MenuAutoAddControl
     // @todo Add tests for api.Menus.MenuControl