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
This commit is contained in:
Weston Ruter 2016-05-16 07:21:22 +00:00
parent 62dc6e6dfa
commit 9cd6dd9aae
2 changed files with 61 additions and 2 deletions

View File

@ -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}

View File

@ -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
}