Customize: Include shortcut button in Custom Menu widget to edit the selected menu in the Customizer.

Clicking on the Edit Menu button focuses on the corresponding nav menu section. Upon collapsing the nav menu section, the focus is returned to the Custom Menu widget instead of taking the user to the menus root panel. In this way, the back button behavior is modified once to serve as breadcrumb/history navigation. The Edit Menu button with the breadcrumb back button behavior greatly reduce the number of UI interactions needed to edit a menu referenced in a Custom Menu widget.

Props celloexpressions, westonruter.
Fixes #32683.

Built from https://develop.svn.wordpress.org/trunk@37437


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

wp-admin/js/customize-widgets.js

@@ -2139,6 +2139,58 @@
 		return foundControl;
 	};
 
+	/**
+	 * Initialize Edit Menu button in Nav Menu widget.
+	 */
+	$( document ).on( 'widget-added', function( event, widgetContainer ) {
+		var parsedWidgetId, widgetControl, navMenuSelect, editMenuButton;
+		parsedWidgetId = parseWidgetId( widgetContainer.find( '> .widget-inside > .form > .widget-id' ).val() );
+		if ( 'nav_menu' !== parsedWidgetId.id_base ) {
+			return;
+		}
+		widgetControl = api.control( 'widget_nav_menu[' + String( parsedWidgetId.number ) + ']' );
+		if ( ! widgetControl ) {
+			return;
+		}
+		navMenuSelect = widgetContainer.find( 'select[name*="nav_menu"]' );
+		editMenuButton = widgetContainer.find( '.edit-selected-nav-menu > button' );
+		if ( 0 === navMenuSelect.length || 0 === editMenuButton.length ) {
+			return;
+		}
+		navMenuSelect.on( 'change', function() {
+			if ( api.section.has( 'nav_menu[' + navMenuSelect.val() + ']' ) ) {
+				editMenuButton.parent().show();
+			} else {
+				editMenuButton.parent().hide();
+			}
+		});
+		editMenuButton.on( 'click', function() {
+			var section = api.section( 'nav_menu[' + navMenuSelect.val() + ']' );
+			if ( section ) {
+				focusConstructWithBreadcrumb( section, widgetControl );
+			}
+		} );
+	} );
+
+	/**
+	 * Focus (expand) one construct and then focus on another construct after the first is collapsed.
+	 *
+	 * This overrides the back button to serve the purpose of breadcrumb navigation.
+	 *
+	 * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} focusConstruct - The object to initially focus.
+	 * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} returnConstruct - The object to return focus.
+	 */
+	function focusConstructWithBreadcrumb( focusConstruct, returnConstruct ) {
+		focusConstruct.focus();
+		function onceCollapsed( isExpanded ) {
+			if ( ! isExpanded ) {
+				focusConstruct.expanded.unbind( onceCollapsed );
+				returnConstruct.focus();
+			}
+		}
+		focusConstruct.expanded.bind( onceCollapsed );
+	}
+
 	/**
 	 * @param {String} widgetId
 	 * @returns {Object}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.6-alpha-37436';
+$wp_version = '4.6-alpha-37437';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-nav-menu-widget.php

@@ -14,7 +14,7 @@
  *
  * @see WP_Widget
  */
- class WP_Nav_Menu_Widget extends WP_Widget {
+class WP_Nav_Menu_Widget extends WP_Widget {
 
 	/**
 	 * Sets up a new Custom Menu widget instance.
@@ -110,8 +110,10 @@
 	 * @access public
 	 *
 	 * @param array $instance Current settings.
+	 * @global WP_Customize_Manager $wp_customize
 	 */
 	public function form( $instance ) {
+		global $wp_customize;
 		$title = isset( $instance['title'] ) ? $instance['title'] : '';
 		$nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
 
@@ -122,7 +124,7 @@
 		?>
 		<p class="nav-menu-widget-no-menus-message" <?php if ( ! empty( $menus ) ) { echo ' style="display:none" '; } ?>>
 			<?php
-			if ( isset( $GLOBALS['wp_customize'] ) && $GLOBALS['wp_customize'] instanceof WP_Customize_Manager ) {
+			if ( $wp_customize instanceof WP_Customize_Manager ) {
 				$url = 'javascript: wp.customize.panel( "nav_menus" ).focus();';
 			} else {
 				$url = admin_url( 'nav-menus.php' );
@@ -146,6 +148,11 @@
 					<?php endforeach; ?>
 				</select>
 			</p>
+			<?php if ( $wp_customize instanceof WP_Customize_Manager ) : ?>
+				<p class="edit-selected-nav-menu" style="<?php if ( ! $nav_menu ) { echo 'display: none;'; } ?>">
+					<button type="button" class="button"><?php _e( 'Edit Menu' ) ?></button>
+				</p>
+			<?php endif; ?>
 		</div>
 		<?php
 	}