Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-24 13:54:59 +02:00
Code Issues Projects Releases Wiki Activity

Customizer: Defer embedding widget controls to improve DOM performance and initial load time.

Browse Source 
The Menu Customizer feature includes a performance technique whereby the controls for nav menu items are only embedded into the DOM once the containing menu section is expanded. This commit implements the same DOM deferral for widgets but goes a step further than just embedding the controls once the widget area's Customizer section is expanded: it also defers the embedding of the widget control's form until the widget is expanded, at which point the `widget-added` event also fires to allow any additional widget initialization to be done. The deferred DOM embedding can speed up initial load time by 10x or more. This DOM deferral also yields a reduction in overall memory usage in the browser process.

Includes changes to `wp_widget_control()` to facilitate separating out the widget form from the surrounding accordion container; also includes unit tests for this previously-untested function. Also included are initial QUnit tests (finally) for widgets in the Customizer.

Fixes #33901.

Built from https://develop.svn.wordpress.org/trunk@34563


git-svn-id: http://core.svn.wordpress.org/trunk@34527 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2015-09-25 21:02:27 +00:00
parent 4e051fa421
commit 208330f2dc
6 changed files with 159 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
wp-admin/includes/widgets.php
View File

@ -181,6 +181,11 @@ function wp_widget_control( $sidebar_args ) {
$multi_number = isset($sidebar_args['_multi_num']) ? $sidebar_args['_multi_num'] : '';
$add_new = isset($sidebar_args['_add']) ? $sidebar_args['_add'] : '';
$before_form = isset( $sidebar_args['before_form'] ) ? $sidebar_args['before_form'] : '<form method="post">';
$after_form = isset( $sidebar_args['after_form'] ) ? $sidebar_args['after_form'] : '</form>';
$before_widget_content = isset( $sidebar_args['before_widget_content'] ) ? $sidebar_args['before_widget_content'] : '<div class="widget-content">';
$after_widget_content = isset( $sidebar_args['after_widget_content'] ) ? $sidebar_args['after_widget_content'] : '</div>';
$query_arg = array( 'editwidget' => $widget['id'] );
if ( $add_new ) {
$query_arg['addnew'] = 1;
@ -225,14 +230,16 @@ function wp_widget_control( $sidebar_args ) {
</div>
<div class="widget-inside">
<form method="post">
<div class="widget-content">
<?php
if ( isset($control['callback']) )
<?php echo $before_form; ?>
<?php echo $before_widget_content; ?>
<?php
if ( isset( $control['callback'] ) ) {
$has_form = call_user_func_array( $control['callback'], $control['params'] );
else
echo "\t\t<p>" . __('There are no options for this widget.') . "</p>\n"; ?>
</div>
} else {
echo "\t\t<p>" . __('There are no options for this widget.') . "</p>\n";
}
?>
<?php echo $after_widget_content; ?>
<input type="hidden" name="widget-id" class="widget-id" value="<?php echo esc_attr($id_format); ?>" />
<input type="hidden" name="id_base" class="id_base" value="<?php echo esc_attr($id_base); ?>" />
<input type="hidden" name="widget-width" class="widget-width" value="<?php if (isset( $control['width'] )) echo esc_attr($control['width']); ?>" />
@ -252,7 +259,7 @@ function wp_widget_control( $sidebar_args ) {
</div>
<br class="clear" />
</div>
</form>
<?php echo $after_form; ?>
</div>
<div class="widget-description">

105
wp-admin/js/customize-widgets.js
View File

@ -417,37 +417,104 @@
/**
* @since 4.1.0
*/
initialize: function ( id, options ) {
initialize: function( id, options ) {
var control = this;
api.Control.prototype.initialize.call( control, id, options );
control.expanded = new api.Value();
control.widgetControlEmbedded = false;
control.widgetContentEmbedded = false;
control.expanded = new api.Value( false );
control.expandedArgumentsQueue = [];
control.expanded.bind( function ( expanded ) {
control.expanded.bind( function( expanded ) {
var args = control.expandedArgumentsQueue.shift();
args = $.extend( {}, control.defaultExpandedArguments, args );
control.onChangeExpanded( expanded, args );
});
control.expanded.set( false );
api.Control.prototype.initialize.call( control, id, options );
},
/**
* Set up the control
* Set up the control.
*
* @since 3.9.0
*/
ready: function() {
this._setupModel();
this._setupWideWidget();
this._setupControlToggle();
this._setupWidgetTitle();
this._setupReorderUI();
this._setupHighlightEffects();
this._setupUpdateUI();
this._setupRemoveUI();
var control = this;
/*
* Embed a placeholder once the section is expanded. The full widget
* form content will be embedded once the control itself is expanded,
* and at this point the widget-added event will be triggered.
*/
if ( ! control.section() ) {
control.embedWidgetControl();
} else {
api.section( control.section(), function( section ) {
var onExpanded = function( isExpanded ) {
if ( isExpanded ) {
control.embedWidgetControl();
section.expanded.unbind( onExpanded );
}
};
if ( section.expanded() ) {
onExpanded( true );
} else {
section.expanded.bind( onExpanded );
}
} );
}
},
/**
* Embed the .widget element inside the li container.
*
* @since 4.4.0
*/
embedWidgetControl: function() {
var control = this, widgetControl;
if ( control.widgetControlEmbedded ) {
return;
}
control.widgetControlEmbedded = true;
widgetControl = $( control.params.widget_control );
control.container.append( widgetControl );
control._setupModel();
control._setupWideWidget();
control._setupControlToggle();
control._setupWidgetTitle();
control._setupReorderUI();
control._setupHighlightEffects();
control._setupUpdateUI();
control._setupRemoveUI();
},
/**
* Embed the actual widget form inside of .widget-content and finally trigger the widget-added event.
*
* @since 4.4.0
*/
embedWidgetContent: function() {
var control = this, widgetContent;
control.embedWidgetControl();
if ( control.widgetContentEmbedded ) {
return;
}
control.widgetContentEmbedded = true;
widgetContent = $( control.params.widget_content );
control.container.find( '.widget-content:first' ).append( widgetContent );
/*
* Trigger widget-added event so that plugins can attach any event
* listeners and dynamic UI elements.
*/
$( document ).trigger( 'widget-added', [ this.container.find( '.widget:first' ) ] );
$( document ).trigger( 'widget-added', [ control.container.find( '.widget:first' ) ] );
},
/**
@ -1008,6 +1075,9 @@
var self = this, instanceOverride, completeCallback, $widgetRoot, $widgetContent,
updateNumber, params, data, $inputs, processing, jqxhr, isChanged;
// The updateWidget logic requires that the form fields to be fully present.
self.embedWidgetContent();
args = $.extend( {
instance: null,
complete: null,
@ -1255,6 +1325,11 @@
onChangeExpanded: function ( expanded, args ) {
var self = this, $widget, $inside, complete, prevComplete;
self.embedWidgetControl(); // Make sure the outer form is embedded so that the expanded state can be set in the UI.
if ( expanded ) {
self.embedWidgetContent();
}
// If the expanded state is unchanged only manipulate container expanded states
if ( args.unchanged ) {
if ( expanded ) {

2
wp-admin/js/customize-widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

25
wp-includes/class-wp-customize-control.php
View File

@ -1487,20 +1487,21 @@ class WP_Widget_Form_Customize_Control extends WP_Customize_Control {
public $height;
public $is_wide = false;
/**
* Gather control params for exporting to JavaScript.
*
* @global array $wp_registered_widgets
*/
public function to_json() {
global $wp_registered_widgets;
parent::to_json();
$exported_properties = array( 'widget_id', 'widget_id_base', 'sidebar_id', 'width', 'height', 'is_wide' );
foreach ( $exported_properties as $key ) {
$this->json[ $key ] = $this->$key;
}
}
/**
*
* @global array $wp_registered_widgets
*/
public function render_content() {
global $wp_registered_widgets;
// Get the widget_control and widget_content.
require_once ABSPATH . '/wp-admin/includes/widgets.php';
$widget = $wp_registered_widgets[ $this->widget_id ];
@ -1514,9 +1515,17 @@ class WP_Widget_Form_Customize_Control extends WP_Customize_Control {
);
$args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
echo $this->manager->widgets->get_widget_control( $args );
$widget_control_parts = $this->manager->widgets->get_widget_control_parts( $args );
$this->json['widget_control'] = $widget_control_parts['control'];
$this->json['widget_content'] = $widget_control_parts['content'];
}
/**
* Override render_content to be no-op since content is exported via to_json for deferred embedding.
*/
public function render_content() {}
/**
* Whether the current widget is rendered on the page.
*

44
wp-includes/class-wp-customize-widgets.php
View File

@ -898,21 +898,47 @@ final class WP_Customize_Widgets {
* @return string Widget control form HTML markup.
*/
public function get_widget_control( $args ) {
$args[0]['before_form'] = '<div class="form">';
$args[0]['after_form'] = '</div><!-- .form -->';
$args[0]['before_widget_content'] = '<div class="widget-content">';
$args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
ob_start();
call_user_func_array( 'wp_widget_control', $args );
$replacements = array(
'<form method="post">' => '<div class="form">',
'</form>' => '</div><!-- .form -->',
);
$control_tpl = ob_get_clean();
$control_tpl = str_replace( array_keys( $replacements ), array_values( $replacements ), $control_tpl );
return $control_tpl;
}
/**
* Get the widget control markup parts.
*
* @since 4.4.0
* @access public
*
* @param array $args Widget control arguments.
* @return array {
* @type string $control Markup for widget control wrapping form.
* @type string $content The contents of the widget form itself.
* }
*/
public function get_widget_control_parts( $args ) {
$args[0]['before_widget_content'] = '<div class="widget-content">';
$args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
$control_markup = $this->get_widget_control( $args );
$content_start_pos = strpos( $control_markup, $args[0]['before_widget_content'] );
$content_end_pos = strrpos( $control_markup, $args[0]['after_widget_content'] );
$control = substr( $control_markup, 0, $content_start_pos + strlen( $args[0]['before_widget_content'] ) );
$control .= substr( $control_markup, $content_end_pos );
$content = trim( substr(
$control_markup,
$content_start_pos + strlen( $args[0]['before_widget_content'] ),
$content_end_pos - $content_start_pos - strlen( $args[0]['before_widget_content'] )
) );
return compact( 'control', 'content' );
}
/**
* Add hooks for the Customizer preview.
*

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.4-alpha-34562';
$wp_version = '4.4-alpha-34563';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.