Customize: Ensure autofocus deep-linking applies for dynamically-created panels, sections, and controls.

Removes overly-zealous filtering of autofocus panels, sections, and controls which are unrecognized or for which the user doesn't have the capability to focus (in which case it would no-op anyway). Also defers autofocus logic until instances are created, even after initial `ready` event. This ensures that autofocus can apply for any panels, sections, or controls that get created via the loaded preview.

See #28650.
Fixes #36018.


git-svn-id: https://develop.svn.wordpress.org/trunk@36796 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-03-01 22:03:27 +00:00
parent 4bad4cd246
commit 462a7c2c70
2 changed files with 17 additions and 24 deletions

View File

@ -3468,18 +3468,25 @@
}); });
// Focus the autofocused element // Focus the autofocused element
_.each( [ 'panel', 'section', 'control' ], function ( type ) { _.each( [ 'panel', 'section', 'control' ], function( type ) {
var instance, id = api.settings.autofocus[ type ]; var id = api.settings.autofocus[ type ];
if ( id && api[ type ]( id ) ) { if ( ! id ) {
instance = api[ type ]( id ); return;
// 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 () { * Defer focus until:
* 1. The panel, section, or control exists (especially for dynamically-created ones).
* 2. The instance is embedded in the document (and so is focusable).
* 3. The preview has finished loading so that the active states have been set.
*/
api[ type ]( id, function( instance ) {
instance.deferred.embedded.done( function() {
api.previewer.deferred.active.done( function() {
instance.focus(); instance.focus();
}); });
}); });
} });
}); });
/** /**

View File

@ -1728,7 +1728,7 @@ final class WP_Customize_Manager {
'panels' => array(), 'panels' => array(),
'sections' => array(), 'sections' => array(),
'nonce' => $this->get_nonces(), 'nonce' => $this->get_nonces(),
'autofocus' => array(), 'autofocus' => $this->get_autofocus(),
'documentTitleTmpl' => $this->get_document_title_template(), 'documentTitleTmpl' => $this->get_document_title_template(),
'previewableDevices' => $this->get_previewable_devices(), 'previewableDevices' => $this->get_previewable_devices(),
'selectiveRefreshEnabled' => isset( $this->selective_refresh ), 'selectiveRefreshEnabled' => isset( $this->selective_refresh ),
@ -1753,20 +1753,6 @@ final class WP_Customize_Manager {
} }
} }
// Pass to front end the Customizer construct being deeplinked.
foreach ( $this->get_autofocus() as $type => $id ) {
$can_autofocus = (
( 'control' === $type && $this->get_control( $id ) && $this->get_control( $id )->check_capabilities() )
||
( 'section' === $type && isset( $settings['sections'][ $id ] ) )
||
( 'panel' === $type && isset( $settings['panels'][ $id ] ) )
);
if ( $can_autofocus ) {
$settings['autofocus'][ $type ] = $id;
}
}
?> ?>
<script type="text/javascript"> <script type="text/javascript">
var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>; var _wpCustomizeSettings = <?php echo wp_json_encode( $settings ); ?>;