Menus: Add sticky footer to avoid duplicate save buttons.

Make the navigation menu footer sticky so a Save Menu button is always available in the viewport. Improves usability and effectiveness of the interface when in a responsive view. 

Props garrett-eclipse, audrasjb, maxpertici, sabernhardt, kburgoine, poena
Fixes #51631
Built from https://develop.svn.wordpress.org/trunk@50115


git-svn-id: http://core.svn.wordpress.org/trunk@49794 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/nav-menus-rtl.css

@@ -892,6 +892,23 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	}
 }
 
+@media only screen and (min-width: 783px) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) and (scroll-margin-bottom: 130px) {
+		
+		#nav-menu-footer {
+                position: -webkit-sticky;
+                position: sticky;
+				bottom: 0;
+				z-index: 10;
+				box-shadow: 0 -1px 0 0px #ddd;
+        }
+
+        #save_menu_header {
+                display: none;
+        }
+    }
+}
+
 @media only screen and (max-width: 768px) {
 	/* menu locations */
 	#menu-locations-wrap .widefat {

wp-admin/css/nav-menus.css

@@ -891,6 +891,23 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
 	}
 }
 
+@media only screen and (min-width: 783px) {
+    @supports ((position: -webkit-sticky) or (position: sticky)) and (scroll-margin-bottom: 130px) {
+		
+		#nav-menu-footer {
+                position: -webkit-sticky;
+                position: sticky;
+				bottom: 0;
+				z-index: 10;
+				box-shadow: 0 -1px 0 0px #ddd;
+        }
+
+        #save_menu_header {
+                display: none;
+        }
+    }
+}
+
 @media only screen and (max-width: 768px) {
 	/* menu locations */
 	#menu-locations-wrap .widefat {

wp-admin/js/nav-menu.js

@@ -1331,6 +1331,27 @@
 
 	};
 
-	$(document).ready(function(){ wpNavMenu.init(); });
+	$(document).ready(function() {
 
-})(jQuery);
+		wpNavMenu.init();
+
+		// Prevent focused element from being hidden by the sticky footer.
+		$( '.menu-edit a, .menu-edit button, .menu-edit input, .menu-edit textarea, .menu-edit select' ).on('focus', function() {
+			if ( window.innerWidth >= 783 ) {
+				var navMenuHeight = $( '#nav-menu-footer' ).height() + 20;
+				var bottomOffset = $(this).offset().top - ( $(window).scrollTop() + $(window).height() - $(this).height() );
+
+				if ( bottomOffset > 0 ) {
+					bottomOffset = 0;
+				}
+				bottomOffset = bottomOffset * -1;
+
+				if( bottomOffset < navMenuHeight ) {
+					var scrollTop = $(document).scrollTop();
+					$(document).scrollTop( scrollTop + ( navMenuHeight - bottomOffset ) );
+				}
+			}
+		});
+	});
+
+})(jQuery);

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.7-alpha-50114';
+$wp_version = '5.7-alpha-50115';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.