[wp-trac] [WordPress Trac] #32683: Custom Menu widget should include a shortcut to load selected menu inside the customiser

[WordPress Trac]

#32683: Custom Menu widget should include a shortcut to load selected menu inside
the customiser
-----------------------------+--------------------------
 Reporter:  paulwilde        |       Owner:  westonruter
     Type:  feature request  |      Status:  reviewing
 Priority:  normal           |   Milestone:  4.6
Component:  Customize        |     Version:  4.3
 Severity:  normal           |  Resolution:
 Keywords:  has-patch        |     Focuses:  javascript
-----------------------------+--------------------------

Comment (by westonruter):

 @celloexpressions thanks for that. This is definitely a good starting
 point. I agree that the JS needs better placement, but it provides the
 prototype for what is needed. Adding a link from the widget to the menu
 section is indeed a huge usability improvement. One improvement that I see
 is the behavior of the back button. A user would probably expect after
 clicking “back” that they would be taken back to editing the widget and
 not be taken to the list of menus. If a user doesn't expect this (such as
 we who have gotten so used to navigating around panels so much), then they
 probably should.

 I've been thinking about this a bit this week and I think we could very
 nicely override the back button here to serve as a breadcrumb/history
 navigation rather than a structural navigation in particular cases. For
 example, when clicking on Edit Menu, it could invoke this JS logic instead
 of just expanding the section. Consider this logic:

 {{{#!js

 /**
  * Focus (expand) another construct and return to this control when it is
 collapsed.
  *
  * @param {wp.customize.Section|wp.customize.Panel} construct - The thing
 to expand.
  * @this {wp.customize.Control}
  */
 function focusConstructAndRturnToControlWhenCollapsed( construct ) {
         var control = this;

         construct.focus();
         function onceCollapsed( isExpanded ) {
                 if ( ! isExpanded ) {
                         construct.expanded.unbind( onceCollapsed );
                         control.focus();
                 }
         }
         construct.expanded.bind( onceCollapsed );
 }
 }}}

 To simulate from your browser console:

 1. Open the Site Title and Tagline section.
 2. Paste in the above function into your console.
 3. Focus on the blogname and pretend there is a button to expand a given
 menu section.
 4. Paste this into your console:
 `focusConstructAndRturnToControlWhenCollapsed.call( wp.customize.control(
 'blogname' ), wp.customize.section( 'nav_menu[87]' ) );`
 5. Notice that you are now in the given nav menu section (adapt the ID as
 needed in your example).
 6. Click on Back and notice that instead of being navigated to the Menus
 panel that you are instead brought back to the `blogname` control with
 focus applied.

 This would be a great improvement to usability I think.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32683#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform