Opened 9 years ago
Last modified 4 years ago
#32667 new defect (bug)
Customizer: autofocus should load as soon as the panel/section/control is active
Reported by: | 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
@
9 years ago
#3
@
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
@
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
@
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.
@celloexpressions, can you add a path here?