Ticket #60916: 60916.diff

src/js/_enqueues/lib/nav-menu.js

@@ -589 +589 @@
                 },
 
                 initPreviewing : function() {
+
+                        const menuToEdit = $( '#menu-to-edit' );
+
                         // Update the item handle title when the navigation label is changed.
-                        $( '#menu-to-edit' ).on( 'change input', '.edit-menu-item-title', function(e) {
+                        menuToEdit.on( 'change input', '.edit-menu-item-title', function(e) {
                                 var input = $( e.currentTarget ), title, titleEl;
                                 title = input.val();
                                 titleEl = input.closest( '.menu-item' ).find( '.menu-item-title' );
@@ -601 +604 @@
                                         titleEl.text( wp.i18n._x( '(no label)', 'missing menu item navigation label' ) ).addClass( 'no-title' );
                                 }
                         } );
+
+                        // Show warning when url is empty/invalid in custom menu item type.
+                        menuToEdit.on( 'change input', '.edit-menu-item-url', function( e ) {
+
+                                const input = $( e.currentTarget );
+                                const url = input.val();
+                                const urlEl = input.closest( '.menu-item' ).find( '.field-url' );
+
+                                if ( '' === url || 'https://' === url || 'http://' === url ) {
+
+                                        urlEl.addClass( 'form-invalid' );
+                                        urlEl.attr( 'placeholder', 'https://' );
+
+                                } else {
+
+                                        urlEl.removeClass( 'form-invalid' );
+                                        urlEl.attr( 'placeholder', '' );
+
+                                }
+                        } );
                 },
 
                 initToggles : function() {
@@ -1063 +1086 @@
                 },
 
                 attachMenuSaveSubmitListeners : function() {
+                        const updateNavMenuEl = $( '#update-nav-menu' );
+
                         /*
                          * When a navigation menu is saved, store a JSON representation of all form data
                          * in a single input to avoid PHP `max_input_vars` limitations. See #14134.
                          */
-                        $( '#update-nav-menu' ).on( 'submit', function() {
-                                var navMenuData = $( '#update-nav-menu' ).serializeArray();
+                        updateNavMenuEl.on( 'submit', function() {
+
+                                // Stop saving of menu if it has invalid field.
+                                if ( updateNavMenuEl.has( '.form-invalid' ).length > 0 ) {
+
+                                        updateNavMenuEl.find( '.form-invalid' ).each( function () {
+
+                                                const menuItem = $( this ).closest( '.menu-item' );
+
+                                                // Open all the menu items containing invalid fields.
+                                                if( menuItem.hasClass( 'menu-item-edit-inactive' ) ) {
+
+                                                        menuItem.find( '.menu-item-settings' ).slideDown( 'fast' );
+                                                        menuItem.removeClass('menu-item-edit-inactive')
+                                                                .addClass('menu-item-edit-active');
+
+                                                }
+                                        } );
+
+                                        return false;
+                                }
+
+                                var navMenuData = updateNavMenuEl.serializeArray();
                                 $( '[name="nav-menu-data"]' ).val( JSON.stringify( navMenuData ) );
                         });
                 },

src/wp-admin/includes/class-walker-nav-menu-edit.php

@@ -196 +196 @@
                                         <p class="field-url description description-wide">
                                                 <label for="edit-menu-item-url-<?php echo $item_id; ?>">
                                                         <?php _e( 'URL' ); ?><br />
-                                                        <input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item->url ); ?>" />
+                                                        <input type="text" id="edit-menu-item-url-<?php echo $item_id; ?>" class="widefat code form-required edit-menu-item-url" name="menu-item-url[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item->url ); ?>" placeholder="https://" />
                                                 </label>
                                         </p>
                                 <?php endif; ?>

src/wp-admin/includes/nav-menu.php

@@ -1425 +1425 @@
                                 continue;
                         }
 
+                        // Menu item URL can't be blank.
+                        if ( isset( $_POST['menu-item-type'][ $_key ] ) && 'custom' === $_POST['menu-item-type'][ $_key ] && '' === $_POST['menu-item-url'][ $_key ] ) {
+                continue;
+                        }
+
                         $args = array();
                         foreach ( $post_fields as $field ) {
                                 $args[ $field ] = isset( $_POST[ $field ][ $_key ] ) ? $_POST[ $field ][ $_key ] : '';