Changeset 33071 for trunk/src/wp-admin/js/customize-nav-menus.js

Timestamp:

07/03/2015 08:46:48 PM (9 years ago)

Author:

westonruter

Message:

Customizer: Fix saving menus with empty names or names that are already used.

Adds validation for initially-supplied nav menu name, blocking empty names from being supplied. If later an empty name is supplied and the nav menu is saved, the name "(unnamed)" will be supplied instead and supplied back to the client. If a name is supplied for the menu which is currently used by another menu, then the name conflict is resolved by adding a numerical counter similar to how post_name conflicts are resolved. Includes unit tests.

Fixes #32760.

File:

• trunk/src/wp-admin/js/customize-nav-menus.js (modified) (18 diffs)

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

@@ -834 +834 @@
                 button.attr( 'aria-expanded', 'false' );
                 content.slideUp( 'fast' );
+                content.find( '.menu-name-field' ).removeClass( 'invalid' );
             }
         }
@@ -870 +871 @@
                 }
                 menuId = matches[1];
-                option = new Option( setting().name, menuId );
+                option = new Option( displayNavMenuName( setting().name ), menuId );
                 control.container.find( 'select' ).append( option );
             });
@@ -896 +897 @@
                     control.container.find( 'option[value=' + menuId + ']' ).remove();
                 } else {
-                    control.container.find( 'option[value=' + menuId + ']' ).text( setting().name );
+                    control.container.find( 'option[value=' + menuId + ']' ).text( displayNavMenuName( setting().name ) );
                 }
             });
@@ -1606 +1607 @@
         ready: function() {
             var control = this,
-                menuId = control.params.menu_id;
+                menuId = control.params.menu_id,
+                menu = control.setting(),
+                name;
 
             if ( 'undefined' === typeof this.params.menu_id ) {
@@ -1637 +1640 @@
 
             // Add menu to Custom Menu widgets.
-            if ( control.setting() ) {
+            if ( menu ) {
+                name = displayNavMenuName( menu.name );
+
                 api.control.each( function( widgetControl ) {
                     if ( ! widgetControl.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== widgetControl.params.widget_id_base ) {
@@ -1644 +1649 @@
                     var select = widgetControl.container.find( 'select' );
                     if ( select.find( 'option[value=' + String( menuId ) + ']' ).length === 0 ) {
-                        select.append( new Option( control.setting().name, menuId ) );
+                        select.append( new Option( name, menuId ) );
                     }
                 } );
-                $( '#available-widgets-list .widget-inside:has(input.id_base[value=nav_menu]) select:first' ).append( new Option( control.setting().name, menuId ) );
+                $( '#available-widgets-list .widget-inside:has(input.id_base[value=nav_menu]) select:first' ).append( new Option( name, menuId ) );
             }
         },
@@ -1678 +1683 @@
 
             control.setting.bind( function( to ) {
+                var name;
                 if ( false === to ) {
                     control._handleDeletion();
                 } else {
                     // Update names in the Custom Menu widgets.
+                    name = displayNavMenuName( to.name );
                     api.control.each( function( widgetControl ) {
                         if ( ! widgetControl.extended( api.controlConstructor.widget_form ) || 'nav_menu' !== widgetControl.params.widget_id_base ) {
@@ -1687 +1694 @@
                         }
                         var select = widgetControl.container.find( 'select' );
-                        select.find( 'option[value=' + String( menuId ) + ']' ).text( to.name );
+                        select.find( 'option[value=' + String( menuId ) + ']' ).text( name );
                     });
-                    $( '#available-widgets-list .widget-inside:has(input.id_base[value=nav_menu]) select:first option[value=' + String( menuId ) + ']' ).text( to.name );
+                    $( '#available-widgets-list .widget-inside:has(input.id_base[value=nav_menu]) select:first option[value=' + String( menuId ) + ']' ).text( name );
                 }
             } );
@@ -1848 +1855 @@
                         container.find( '.theme-location-set' ).hide();
                     } else {
-                        container.find( '.theme-location-set' ).show().find( 'span' ).text( menuSetting().name );
+                        container.find( '.theme-location-set' ).show().find( 'span' ).text( displayNavMenuName( menuSetting().name ) );
                     }
                 };
@@ -1880 +1887 @@
                 }
 
-                // Empty names are not allowed (will not be saved), don't update to one.
-                if ( menu.name ) {
-                    var section = control.container.closest( '.accordion-section' ),
-                        menuId = control.params.menu_id,
-                        controlTitle = section.find( '.accordion-section-title' ),
-                        sectionTitle = section.find( '.customize-section-title h3' ),
-                        location = section.find( '.menu-in-location' ),
-                        action = sectionTitle.find( '.customize-action' );
-
-                    // Update the control title
-                    controlTitle.text( menu.name );
-                    if ( location.length ) {
-                        location.appendTo( controlTitle );
+                var section = control.container.closest( '.accordion-section' ),
+                    menuId = control.params.menu_id,
+                    controlTitle = section.find( '.accordion-section-title' ),
+                    sectionTitle = section.find( '.customize-section-title h3' ),
+                    location = section.find( '.menu-in-location' ),
+                    action = sectionTitle.find( '.customize-action' ),
+                    name = displayNavMenuName( menu.name );
+
+                // Update the control title
+                controlTitle.text( name );
+                if ( location.length ) {
+                    location.appendTo( controlTitle );
+                }
+
+                // Update the section title
+                sectionTitle.text( name );
+                if ( action.length ) {
+                    action.prependTo( sectionTitle );
+                }
+
+                // Update the nav menu name in location selects.
+                api.control.each( function( control ) {
+                    if ( /^nav_menu_locations\[/.test( control.id ) ) {
+                        control.container.find( 'option[value=' + menuId + ']' ).text( name );
                     }
-
-                    // Update the section title
-                    sectionTitle.text( menu.name );
-                    if ( action.length ) {
-                        action.prependTo( sectionTitle );
+                } );
+
+                // Update the nav menu name in all location checkboxes.
+                section.find( '.customize-control-checkbox input' ).each( function() {
+                    if ( $( this ).prop( 'checked' ) ) {
+                        $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
                     }
-
-                    // Update the nav menu name in location selects.
-                    api.control.each( function( control ) {
-                        if ( /^nav_menu_locations\[/.test( control.id ) ) {
-                            control.container.find( 'option[value=' + menuId + ']' ).text( menu.name );
-                        }
-                    } );
-
-                    // Update the nav menu name in all location checkboxes.
-                    section.find( '.customize-control-checkbox input' ).each( function() {
-                        if ( $( this ).prop( 'checked' ) ) {
-                            $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( menu.name );
-                        }
-                    } );
-                }
+                } );
             } );
         },
@@ -2152 +2157 @@
         /**
          * Create the new menu with the name supplied.
-         *
-         * @returns {boolean}
          */
         submit: function() {
@@ -2164 +2167 @@
                 customizeId,
                 placeholderId = api.Menus.generatePlaceholderAutoIncrementId();
+
+            if ( ! name ) {
+                nameInput.addClass( 'invalid' );
+                nameInput.focus();
+                return;
+            }
 
             customizeId = 'nav_menu[' + String( placeholderId ) + ']';
@@ -2190 +2199 @@
                     id: customizeId,
                     panel: 'nav_menus',
-                    title: name,
+                    title: displayNavMenuName( name ),
                     customizeAction: api.Menus.data.l10n.customizingMenus,
                     type: 'nav_menu',
@@ -2201 +2210 @@
             // Clear name field.
             nameInput.val( '' );
+            nameInput.removeClass( 'invalid' );
 
             wp.a11y.speak( api.Menus.data.l10n.menuAdded );
@@ -2270 +2280 @@
 
         _( data.nav_menu_updates ).each(function( update ) {
-            var oldCustomizeId, newCustomizeId, oldSetting, newSetting, settingValue, oldSection, newSection;
+            var oldCustomizeId, newCustomizeId, customizeId, oldSetting, newSetting, setting, settingValue, oldSection, newSection, wasSaved;
             if ( 'inserted' === update.status ) {
                 if ( ! update.previous_term_id ) {
@@ -2292 +2302 @@
                     throw new Error( 'Did not expect setting to be empty (deleted).' );
                 }
-                settingValue = _.clone( settingValue );
+                settingValue = $.extend( _.clone( settingValue ), update.saved_value );
 
                 insertedMenuIdMapping[ update.previous_term_id ] = update.term_id;
@@ -2350 +2360 @@
 
                 // @todo Update the Custom Menu selects, ensuring the newly-inserted IDs are used for any that have selected a placeholder menu.
+            } else if ( 'updated' === update.status ) {
+                customizeId = 'nav_menu[' + String( update.term_id ) + ']';
+                if ( ! api.has( customizeId ) ) {
+                    throw new Error( 'Expected setting to exist: ' + customizeId );
+                }
+
+                // Make sure the setting gets updated with its sanitized server value (specifically the conflict-resolved name).
+                setting = api( customizeId );
+                if ( ! _.isEqual( update.saved_value, setting.get() ) ) {
+                    wasSaved = api.state( 'saved' ).get();
+                    setting.set( update.saved_value );
+                    setting._dirty = false;
+                    api.state( 'saved' ).set( wasSaved );
+                }
             }
         } );
@@ -2497 +2521 @@
     }
 
+    /**
+     * Apply sanitize_text_field()-like logic to the supplied name, returning a
+     * "unnammed" fallback string if the name is then empty.
+     *
+     * @param {string} name
+     * @returns {string}
+     */
+    function displayNavMenuName( name ) {
+        name = $( '<div>' ).text( name ).html(); // Emulate esc_html() which is used in wp-admin/nav-menus.php.
+        name = $.trim( name );
+        return name || api.Menus.data.l10n.unnamed;
+    }
+
 })( wp.customize, wp, jQuery );