WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/25/2015 09:01:46 PM (6 years ago)
Author:
westonruter
Message:

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

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-widgets.php

    r33535 r34563  
    899899     */
    900900    public function get_widget_control( $args ) {
     901        $args[0]['before_form'] = '<div class="form">';
     902        $args[0]['after_form'] = '</div><!-- .form -->';
     903        $args[0]['before_widget_content'] = '<div class="widget-content">';
     904        $args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
    901905        ob_start();
    902 
    903906        call_user_func_array( 'wp_widget_control', $args );
    904         $replacements = array(
    905             '<form method="post">' => '<div class="form">',
    906             '</form>' => '</div><!-- .form -->',
    907         );
    908 
    909907        $control_tpl = ob_get_clean();
    910 
    911         $control_tpl = str_replace( array_keys( $replacements ), array_values( $replacements ), $control_tpl );
    912 
    913908        return $control_tpl;
     909    }
     910
     911    /**
     912     * Get the widget control markup parts.
     913     *
     914     * @since 4.4.0
     915     * @access public
     916     *
     917     * @param array $args Widget control arguments.
     918     * @return array {
     919     *     @type string $control  Markup for widget control wrapping form.
     920     *     @type string $content  The contents of the widget form itself.
     921     * }
     922     */
     923    public function get_widget_control_parts( $args ) {
     924        $args[0]['before_widget_content'] = '<div class="widget-content">';
     925        $args[0]['after_widget_content'] = '</div><!-- .widget-content -->';
     926        $control_markup = $this->get_widget_control( $args );
     927
     928        $content_start_pos = strpos( $control_markup, $args[0]['before_widget_content'] );
     929        $content_end_pos = strrpos( $control_markup, $args[0]['after_widget_content'] );
     930
     931        $control = substr( $control_markup, 0, $content_start_pos + strlen( $args[0]['before_widget_content'] ) );
     932        $control .= substr( $control_markup, $content_end_pos );
     933        $content = trim( substr(
     934            $control_markup,
     935            $content_start_pos + strlen( $args[0]['before_widget_content'] ),
     936            $content_end_pos - $content_start_pos - strlen( $args[0]['before_widget_content'] )
     937        ) );
     938
     939        return compact( 'control', 'content' );
    914940    }
    915941
Note: See TracChangeset for help on using the changeset viewer.