From 9cd6dd9aae50550015d336ad4398ae591da57f77 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Mon, 16 May 2016 07:21:22 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@37437 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/customize-widgets.js          | 52 +++++++++++++++++++
 .../widgets/class-wp-nav-menu-widget.php      | 11 +++-
 2 files changed, 61 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index fee74cfe34..aec773bc36 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/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}
diff --git a/src/wp-includes/widgets/class-wp-nav-menu-widget.php b/src/wp-includes/widgets/class-wp-nav-menu-widget.php
index d465525913..d43aa3325b 100644
--- a/src/wp-includes/widgets/class-wp-nav-menu-widget.php
+++ b/src/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
 	}