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/tests/phpunit/tests/customize/widgets.php

    r31622 r34563  
    196196        $this->assertEquals( $unsanitized_from_js, $new_categories_instance );
    197197    }
     198
     199    /**
     200     * Get the widget control args for tests.
     201     *
     202     * @return array
     203     */
     204    function get_test_widget_control_args() {
     205        global $wp_registered_widgets;
     206        require_once ABSPATH . '/wp-admin/includes/widgets.php';
     207        $widget_id = 'search-2';
     208        $widget = $wp_registered_widgets[ $widget_id ];
     209        $args = array(
     210            'widget_id' => $widget['id'],
     211            'widget_name' => $widget['name'],
     212        );
     213        $args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
     214        return $args;
     215    }
     216
     217    /**
     218     * @see WP_Customize_Widgets::get_widget_control()
     219     */
     220    function test_get_widget_control() {
     221        $this->do_customize_boot_actions();
     222        $widget_control = $this->manager->widgets->get_widget_control( $this->get_test_widget_control_args() );
     223
     224        $this->assertContains( '<div class="form">', $widget_control );
     225        $this->assertContains( '<div class="widget-content">', $widget_control );
     226        $this->assertContains( '<input type="hidden" name="id_base" class="id_base" value="search"', $widget_control );
     227        $this->assertContains( '<input class="widefat"', $widget_control );
     228    }
     229
     230    /**
     231     * @see WP_Customize_Widgets::get_widget_control_parts()
     232     */
     233    function test_get_widget_control_parts() {
     234        $this->do_customize_boot_actions();
     235        $widget_control_parts = $this->manager->widgets->get_widget_control_parts( $this->get_test_widget_control_args() );
     236        $this->assertArrayHasKey( 'content', $widget_control_parts );
     237        $this->assertArrayHasKey( 'control', $widget_control_parts );
     238
     239        $this->assertContains( '<div class="form">', $widget_control_parts['control'] );
     240        $this->assertContains( '<div class="widget-content">', $widget_control_parts['control'] );
     241        $this->assertContains( '<input type="hidden" name="id_base" class="id_base" value="search"', $widget_control_parts['control'] );
     242        $this->assertNotContains( '<input class="widefat"', $widget_control_parts['control'] );
     243        $this->assertContains( '<input class="widefat"', $widget_control_parts['content'] );
     244    }
     245
     246    /**
     247     * @see WP_Widget_Form_Customize_Control::json()
     248     */
     249    function test_wp_widget_form_customize_control_json() {
     250        $this->do_customize_boot_actions();
     251        $control = $this->manager->get_control( 'widget_search[2]' );
     252        $params = $control->json();
     253
     254        $this->assertEquals( 'widget_form', $params['type'] );
     255        $this->assertRegExp( '#^<li[^>]+>\s+</li>$#', $params['content'] );
     256        $this->assertRegExp( '#^<div[^>]*class=\'widget\'[^>]*#s', $params['widget_control'] );
     257        $this->assertContains( '<div class="widget-content"></div>', $params['widget_control'] );
     258        $this->assertNotContains( '<input class="widefat"', $params['widget_control'] );
     259        $this->assertContains( '<input class="widefat"', $params['widget_content'] );
     260        $this->assertEquals( 'search-2', $params['widget_id'] );
     261        $this->assertEquals( 'search', $params['widget_id_base'] );
     262        $this->assertArrayHasKey( 'sidebar_id', $params );
     263        $this->assertArrayHasKey( 'width', $params );
     264        $this->assertArrayHasKey( 'height', $params );
     265        $this->assertInternalType( 'bool', $params['is_wide'] );
     266
     267    }
    198268}
Note: See TracChangeset for help on using the changeset viewer.