WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33396 closed defect (bug) (fixed)

Customizer: focusing a control outside of a panel when a panel is open results in a blank screen with no navigation back

Reported by: celloexpressions Owned by: westonruter
Milestone: 4.3.1 Priority: normal
Severity: major Version: 4.3
Component: Customize Keywords: has-patch commit fixed-major
Focuses: javascript Cc:
PR Number:

Description

When focusing a control in JS, ex. with something like:

wp.customize.control('site_icon').focus();

If a panel happens to be open (say, we're in widgets or menus somewhere and a context change to site icon is triggered by an interaction in the controls or the preview), and the newly-focused control is not nested within a panel, the Customizer controls become hidden off screen with no way to get them back without reloading.

This seems to be somewhat of an issue in 4.2 also, but navigation to get back was accessible. Now, there is no way for a user to recover from the results of this interaction. Reasonably simple fix in the attached patch (exact placement/approach could be adjusted, but this seems to be what we need and didn't break anything else in quick testing).

We would run into this with the shift-click widget focusing, but it steps around it since those controls are within a panel.

Attachments (3)

33396.diff (412 bytes) - added by celloexpressions 4 years ago.
33396.png (5.6 KB) - added by celloexpressions 4 years ago.
Resulting UI after experiencing this bug.
33396.2.diff (1.5 KB) - added by westonruter 4 years ago.
Additional change: https://github.com/xwp/wordpress-develop/commit/12a50bfbf2c4574a06f54169d6a5484d1f831008

Download all attachments as: .zip

Change History (13)

#1 @celloexpressions
4 years ago

  • Milestone changed from Awaiting Review to 4.3

Moving to 4.3 for tracking; it's late but a small change so it could probably get in. If not, we definitely need to get it into 4.3.1.

@celloexpressions
4 years ago

Resulting UI after experiencing this bug.

#2 @obenland
4 years ago

  • Keywords 4.3.1 added
  • Milestone changed from 4.3 to Future Release

#3 @obenland
4 years ago

  • Keywords 4.3.1 removed
  • Milestone changed from Future Release to 4.3.1

#4 @westonruter
4 years ago

This is related to a workaround I had to put in place for the WP_Nav_Menu_Widget to deep link to the menus panel from a given nav menu widget:

<?php
if ( isset( $GLOBALS['wp_customize'] ) && $GLOBALS['wp_customize'] instanceof WP_Customize_Manager ) {
        // @todo When expanding a panel, the JS should be smart enough to collapse any existing panels and sections.
        $url = 'javascript: wp.customize.section.each(function( section ){ section.collapse(); }); wp.customize.panel( "nav_menus" ).focus();';
} else {
        $url = admin_url( 'nav-menus.php' );
}
?>
<?php echo sprintf( __( 'No menus have been created yet. <a href="%s">Create some</a>.' ), esc_attr( $url ) ); ?>

#5 @westonruter
4 years ago

  • Keywords needs-testing added
  • Owner set to westonruter
  • Status changed from new to accepted

Per my issue above, the problem of the blank screen was still happening if a section within a panel was open. So for instance, if I went to edit a widget and I opened the console and ran:

wp.customize.panel( 'nav_menus' ).focus();

Then I would get the same blank screen behavior, and this is why I put in that WP_Nav_Menu_Widget workaround.

In the latest patch I believe I've addressed this one as well, which now means that my workaround in the WP_Nav_Menu_Widget can also be removed. See amended patch 33396.2.diff.

@celloexpressions Can you confirm?

#6 @celloexpressions
4 years ago

Looks good to me.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


4 years ago

#8 @westonruter
4 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 33837:

Customizer: Collapse any expanded panel/sections before expanding other panel/sections

Fix removes need for workaround introduced in [33488] for direct link from nav menu widget to the customizer widgets panel. The todo is now implemented.

Props celloexpressions, westonruter.
Fixes #33396 for trunk.

#9 @westonruter
4 years ago

  • Keywords commit fixed-major added; needs-testing removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for 4.3.1; [33837] will need to be cherry-picked into the 4.3 branch.

#10 @westonruter
4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 33942:

Customizer: Collapse any expanded panel/sections before expanding other panel/sections.

Fix removes need for workaround introduced in [33488] for direct link from nav menu widget to the customizer widgets panel. The todo is now implemented.

Cherry-picks [33837] onto 4.3 branch.
Props celloexpressions, westonruter.
Fixes #33396 for 4.3.

Note: See TracTickets for help on using tickets.