Make WordPress Core

Opened 9 years ago

Last modified 3 years ago

#32667 new defect (bug)

Customizer: autofocus should load as soon as the panel/section/control is active

Reported by: celloexpressions's profile celloexpressions Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: needs-patch
Focuses: javascript Cc:

Description

Currently, autofocusing waits until the preview loads fully, which can take quite a while on a lot of pages and themes. Widgets need to wait for this to determine whether they should be activated, but for most other sections, we should be able to autofocus as soon as the Customizer controls finish loading. For menus, this would shave seconds off of the percieved loading time of the Customizer. See https://make.wordpress.org/flow/2015/06/14/menus-in-the-admin-and-the-customizer-ux-flow-performance-comparisons/.

Change History (9)

This ticket was mentioned in Slack in #core by voldemortensen. View the logs.


9 years ago

#2 @obenland
9 years ago

@celloexpressions, can you add a patch here?

Last edited 9 years ago by obenland (previous) (diff)

#3 @valendesigns
9 years ago

@celloexpressions do you have time to patch this issue? If not, can you share your thoughts on how to do it?

#4 @celloexpressions
9 years ago

Will dig some when I get a chance and determine whether this is viable for 4.3. Unless you have time before I get to it @valendesigns, in which case go for it. I haven't looked at the internals yet here, but I think there's a good chance it's a reasonably contained adjustment that would call focus as soon as the section is first visible or rendered or something along those lines, deferring if it's not yet active until it does become active.

#5 @westonruter
9 years ago

  • Milestone changed from 4.3 to Future Release

The logic in customize-controls.js that handles the expansion:

// Focus the autofocused element
_.each( [ 'panel', 'section', 'control' ], function ( type ) {
        var instance, id = api.settings.autofocus[ type ];
        if ( id && api[ type ]( id ) ) {
                instance = api[ type ]( id );
                // Wait until the element is embedded in the DOM
                instance.deferred.embedded.done( function () {
                        // Wait until the preview has activated and so active panels, sections, controls have been set
                        api.previewer.deferred.active.done( function () {
                                instance.focus();
                        });
                });
        }
});

So you can see that it waits until the panel, section, or control is embedded into the document until it focuses on the element. If we wanted to make it so that the top-level sections aren't shown at the initial load, then we should probably hide the pane and show a spinner, and wrap the focus call in an expand call with a duration of 0 to skip the animation, for instance:

instance.expand({
    completeCallback: function() {
        instance.focus();
    },
    duration: 0
});

There's too much work to do here for 4.3 I think, so it should be punted. Also this it is going to be heavily impacted by #28580 since if we're requesting autofocus of a certain section, then the controls and their settings in the section should be pre-loaded up-front. If there is no autofocus, then we can defer the loading of the controls/settings until the section is expanded.

#6 @joop54.vwsetup.net
9 years ago

  • Focuses javascript removed

#7 @westonruter
9 years ago

  • Focuses javascript added

@joop54.vwsetup.net why did you remove the javascript focus?

#8 @westonruter
8 years ago

See also #33052 (Widgets section in customize late to show up).

#9 @celloexpressions
3 years ago

  • Milestone set to Future Release

This is most noticeable for deep links that core has to the theme installer in the customizer. We'd also want to get this fixed before deep linking to widgets if the widgets screen gets replaced with a deep link to the customizer panel.

Note: See TracTickets for help on using tickets.