Live update the menu item title when the user is editing the "Navigation Label" field.

Props celloexpressions.
See #23076.


git-svn-id: https://develop.svn.wordpress.org/trunk@28707 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -507,6 +507,10 @@ ul.add-menu-item-tabs li {
 	margin-right: 13em;
 }
 
+.menu-item-handle .menu-item-title.no-title {
+	color: #999;
+}
+
 /* Sortables */
 li.menu-item.ui-sortable-helper dl {
 	margin-top: 0;

src/wp-admin/js/nav-menu.js

@@ -57,6 +57,8 @@ var wpNavMenu;
 			this.initAccessibility();
 
 			this.initToggles();
+
+			this.initPreviewing();
 		},
 
 		jQueryExtensions : function() {
@@ -530,6 +532,21 @@ var wpNavMenu;
 			});
 		},
 
+		initPreviewing : function() {
+			// Update the item handle title when the navigation label is changed.
+			$( 'body' ).on( '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' );
+				// Don't update to empty title.
+				if ( title ) {
+					titleEl.text( title ).removeClass( 'no-title' );
+				} else {
+					titleEl.text( navMenuL10n.untitled ).addClass( 'no-title' );
+				}
+			} );
+		},
+
 		initToggles : function() {
 			// init postboxes
 			postboxes.add_postbox_toggles('nav-menus');

src/wp-includes/script-loader.php

@@ -530,7 +530,8 @@ function wp_default_scripts( &$scripts ) {
 		did_action( 'init' ) && $scripts->localize( 'nav-menu', 'navMenuL10n', array(
 			'noResultsFound' => _x('No results found.', 'search results'),
 			'warnDeleteMenu' => __( "You are about to permanently delete this menu. \n 'Cancel' to stop, 'OK' to delete." ),
-			'saveAlert' => __('The changes you made will be lost if you navigate away from this page.')
+			'saveAlert' => __('The changes you made will be lost if you navigate away from this page.'),
+			'untitled' => _x('(no label)', 'missing menu item navigation label')
 		) );
 
 		$scripts->add( 'custom-header', "/wp-admin/js/custom-header.js", array( 'jquery-masonry' ), false, 1 );