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/qunit/index.html

    r33528 r34563  
    2626            <script src="fixtures/customize-settings.js"></script>
    2727            <script src="fixtures/customize-menus.js"></script>
     28            <script src="fixtures/customize-widgets.js"></script>
    2829        </div>
    2930        <p><a href="editor">TinyMCE tests</a></p>
     
    4546        <script src="../../src/wp-admin/js/nav-menu.js"></script>
    4647        <script src="../../src/wp-admin/js/customize-nav-menus.js"></script>
     48        <script src="../../src/wp-admin/js/customize-widgets.js"></script>
    4749        <script src="../../src/wp-admin/js/word-count.js"></script>
    4850
     
    5557        <script src="wp-admin/js/customize-controls-utils.js"></script>
    5658        <script src="wp-admin/js/customize-nav-menus.js"></script>
     59        <script src="wp-admin/js/customize-widgets.js"></script>
    5760        <script src="wp-admin/js/word-count.js"></script>
    5861
     
    268271                <button type="button" class="menus-move-up">Move up</button><button type="button" class="menus-move-down">Move down</button><button type="button" class="menus-move-left">Move one level up</button><button type="button" class="menus-move-right">Move one level down</button>         </div>
    269272        </script>
     273
     274        <script type="text/html" id="tmpl-customize-section-sidebar">
     275            <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
     276            <h3 class="accordion-section-title" tabindex="0">
     277                {{ data.title }}
     278                <span class="screen-reader-text">Press return or enter to open</span>
     279            </h3>
     280            <ul class="accordion-section-content">
     281                <li class="customize-section-description-container">
     282                    <div class="customize-section-title">
     283                        <button class="customize-section-back" tabindex="-1">
     284                            <span class="screen-reader-text">Back</span>
     285                        </button>
     286                        <h3>
     287                            <span class="customize-action">
     288                                {{{ data.customizeAction }}}
     289                            </span>
     290                            {{ data.title }}
     291                        </h3>
     292                    </div>
     293                    <# if ( data.description ) { #>
     294                        <div class="description customize-section-description">
     295                            {{{ data.description }}}
     296                        </div>
     297                    <# } #>
     298                </li>
     299            </ul>
     300            </li>
     301        </script>
     302
    270303        <div hidden>
    271304            <div id="available-menu-items" class="accordion-container">
     
    376409            </div><!-- end nav menu templates -->
    377410
    378 
     411        <div hidden>
     412            <div id="widgets-left"><!-- compatibility with JS which looks for widget templates here -->
     413                <div id="available-widgets">
     414                    <div class="customize-section-title">
     415                        <button class="customize-section-back" tabindex="-1">
     416                            <span class="screen-reader-text">Back</span>
     417                        </button>
     418                        <h3>
     419                            <span class="customize-action">Customizing &#9656; Widgets</span>
     420                            Add a Widget                </h3>
     421                    </div>
     422                    <div id="available-widgets-filter">
     423                        <label class="screen-reader-text" for="widgets-search">Search Widgets</label>
     424                        <input type="search" id="widgets-search" placeholder="Search widgets&hellip;" />
     425                    </div>
     426                    <div id="available-widgets-list">
     427                                    <div id="widget-tpl-search-2" data-widget-id="search-2" class="widget-tpl search-2" tabindex="0">
     428                            <div id='widget-11_search-__i__' class='widget'>    <div class="widget-top">
     429            <div class="widget-title-action">
     430                <a class="widget-action hide-if-no-js" href="#available-widgets"></a>
     431                <a class="widget-control-edit hide-if-js" href="/wp-admin/customize.php?editwidget=search-2&#038;addnew=1&#038;num=3&#038;base=search">
     432                    <span class="edit">Edit</span>
     433                    <span class="add">Add</span>
     434                    <span class="screen-reader-text">Search</span>
     435                </a>
     436            </div>
     437            <div class="widget-title"><h4>Search<span class="in-widget-title"></span></h4></div>
     438            </div>
     439
     440            <div class="widget-inside">
     441            <div class="form">
     442            <div class="widget-content">
     443                <p><label for="widget-search-__i__-title">Title: <input class="widefat" id="widget-search-__i__-title" name="widget-search[__i__][title]" type="text" value="" /></label></p>
     444            </div>
     445            <input type="hidden" name="widget-id" class="widget-id" value="search-__i__" />
     446            <input type="hidden" name="id_base" class="id_base" value="search" />
     447            <input type="hidden" name="widget-width" class="widget-width" value="250" />
     448            <input type="hidden" name="widget-height" class="widget-height" value="200" />
     449            <input type="hidden" name="widget_number" class="widget_number" value="2" />
     450            <input type="hidden" name="multi_number" class="multi_number" value="3" />
     451            <input type="hidden" name="add_new" class="add_new" value="multi" />
     452
     453            <div class="widget-control-actions">
     454                <div class="alignleft">
     455                <a class="widget-control-remove" href="#remove">Delete</a> |
     456                <a class="widget-control-close" href="#close">Close</a>
     457                </div>
     458                <div class="alignright">
     459                    <input type="submit" name="savewidget" id="widget-search-__i__-savewidget" class="button button-primary widget-control-save right" value="Save"  />         <span class="spinner"></span>
     460                </div>
     461                <br class="clear" />
     462            </div>
     463            </div><!-- .form -->
     464            </div>
     465
     466            <div class="widget-description">
     467        A search form for your site.
     468            </div>
     469        </div>              </div>
     470                    </div><!-- #available-widgets-list -->
     471                </div><!-- #available-widgets -->
     472            </div><!-- #widgets-left -->
     473        </div><!-- end widget templates -->
    379474        <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>
    380475        <script src="editor/js/utils.js"></script>
Note: See TracChangeset for help on using the changeset viewer.