Make WordPress Core

Changeset 37437


Ignore:
Timestamp:
05/16/2016 07:21:22 AM (9 years ago)
Author:
westonruter
Message:

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.

Location:
trunk/src
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-widgets.js

    r37040 r37437  
    21412141
    21422142    /**
     2143     * Initialize Edit Menu button in Nav Menu widget.
     2144     */
     2145    $( document ).on( 'widget-added', function( event, widgetContainer ) {
     2146        var parsedWidgetId, widgetControl, navMenuSelect, editMenuButton;
     2147        parsedWidgetId = parseWidgetId( widgetContainer.find( '> .widget-inside > .form > .widget-id' ).val() );
     2148        if ( 'nav_menu' !== parsedWidgetId.id_base ) {
     2149            return;
     2150        }
     2151        widgetControl = api.control( 'widget_nav_menu[' + String( parsedWidgetId.number ) + ']' );
     2152        if ( ! widgetControl ) {
     2153            return;
     2154        }
     2155        navMenuSelect = widgetContainer.find( 'select[name*="nav_menu"]' );
     2156        editMenuButton = widgetContainer.find( '.edit-selected-nav-menu > button' );
     2157        if ( 0 === navMenuSelect.length || 0 === editMenuButton.length ) {
     2158            return;
     2159        }
     2160        navMenuSelect.on( 'change', function() {
     2161            if ( api.section.has( 'nav_menu[' + navMenuSelect.val() + ']' ) ) {
     2162                editMenuButton.parent().show();
     2163            } else {
     2164                editMenuButton.parent().hide();
     2165            }
     2166        });
     2167        editMenuButton.on( 'click', function() {
     2168            var section = api.section( 'nav_menu[' + navMenuSelect.val() + ']' );
     2169            if ( section ) {
     2170                focusConstructWithBreadcrumb( section, widgetControl );
     2171            }
     2172        } );
     2173    } );
     2174
     2175    /**
     2176     * Focus (expand) one construct and then focus on another construct after the first is collapsed.
     2177     *
     2178     * This overrides the back button to serve the purpose of breadcrumb navigation.
     2179     *
     2180     * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} focusConstruct - The object to initially focus.
     2181     * @param {wp.customize.Section|wp.customize.Panel|wp.customize.Control} returnConstruct - The object to return focus.
     2182     */
     2183    function focusConstructWithBreadcrumb( focusConstruct, returnConstruct ) {
     2184        focusConstruct.focus();
     2185        function onceCollapsed( isExpanded ) {
     2186            if ( ! isExpanded ) {
     2187                focusConstruct.expanded.unbind( onceCollapsed );
     2188                returnConstruct.focus();
     2189            }
     2190        }
     2191        focusConstruct.expanded.bind( onceCollapsed );
     2192    }
     2193
     2194    /**
    21432195     * @param {String} widgetId
    21442196     * @returns {Object}
  • trunk/src/wp-includes/widgets/class-wp-nav-menu-widget.php

    r37040 r37437  
    1515 * @see WP_Widget
    1616 */
    17  class WP_Nav_Menu_Widget extends WP_Widget {
     17class WP_Nav_Menu_Widget extends WP_Widget {
    1818
    1919    /**
     
    111111     *
    112112     * @param array $instance Current settings.
     113     * @global WP_Customize_Manager $wp_customize
    113114     */
    114115    public function form( $instance ) {
     116        global $wp_customize;
    115117        $title = isset( $instance['title'] ) ? $instance['title'] : '';
    116118        $nav_menu = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
     
    123125        <p class="nav-menu-widget-no-menus-message" <?php if ( ! empty( $menus ) ) { echo ' style="display:none" '; } ?>>
    124126            <?php
    125             if ( isset( $GLOBALS['wp_customize'] ) && $GLOBALS['wp_customize'] instanceof WP_Customize_Manager ) {
     127            if ( $wp_customize instanceof WP_Customize_Manager ) {
    126128                $url = 'javascript: wp.customize.panel( "nav_menus" ).focus();';
    127129            } else {
     
    147149                </select>
    148150            </p>
     151            <?php if ( $wp_customize instanceof WP_Customize_Manager ) : ?>
     152                <p class="edit-selected-nav-menu" style="<?php if ( ! $nav_menu ) { echo 'display: none;'; } ?>">
     153                    <button type="button" class="button"><?php _e( 'Edit Menu' ) ?></button>
     154                </p>
     155            <?php endif; ?>
    149156        </div>
    150157        <?php
Note: See TracChangeset for help on using the changeset viewer.