Now an update for the hottest most buzz-worthy JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/.-driven single page application (SPA) in WordPress: Calypso the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. Earlier in the release cycle there was a proposed roadmap for the Customizer and I wanted to share an update for what improvements have made it into the 4.4 release. I won’t include everything, but I’ll highlight some items that you may notice or want to make note of.

Performance

As noted on the roadmap, the focus for the Customizer in 4.4 has been to improve performance, and there are some drastic improvements in this release. Note that selective refresh (#27355, neé partial refresh) did not make it in, however the feature pluginFeature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins. now has a pull request for review.

Multidimensional Customizer settings (options & theme mods) are not scalable (#32103)

In 4.3 the time to load/refresh the Customizer preview increases exponentially as the number of settings/controls grows. If you have 200 settings it can take 15 seconds for the preview to update. If you have 300 settings, it can take 36 seconds to load/refresh the Customizer preview. And the time to reload the preview continues to grow exponentially as the number increases:

With the fixes in place for 4.4, the time to refresh the preview grows linearly very slowly (basically flatlined) as opposed to exponentially. I would share a graph, but it would be a very boring flat horizontal line.

See also aggregated multidimensional settings below.

Reduce Customizer peak memory usage by JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.-encoding settings and controls separately (#33898)

In addition to the slow preview load/refresh time, when there are a lot of Customizer settings/controls registered, the process for exporting the data from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher to JavaScript used a lot of server memory when it serializes the JSON data in 4.3. In 4.4, each setting and control now gets serialized individually in a loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. to avoid the memory spike, and this helps avoid any white screen of death due to the allowed memory size being exhausted in PHP.

Defer embedding Customizer widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. controls to improve DOM performance (#33901)

The previous performance improvements were for the server and reduced the amount of time it takes to get a response (TTFB). Nevertheless, for sites that have a lot of widgets, the Customizer would still load very slowly, not due to WordPress being slow on the server, but due to the JavaScript running in the browser. In 4.3 given 100 widgets (with a lot of inputs), the Customizer could take 40 seconds to finish building the page due to all of the widget controls being embedded into the DOM. So in 4.4 we defer the embedding of widget controls until the contained widget area section is expanded, that is until the widget control is actually shown to the user. This results in the Customizer loading over 10× faster: what did take 40 seconds now takes 3 seconds in WordPress 4.4.

Widgets section in customize late to show up (#33052)

The widgets panel now will now always be shown even if there are no widget areas currently displayed in the preview. This ensures that the widgets panel doesn’t slide down after the preview finishes loading. This is another browser-based improvement that doesn’t actually improve actual performance but it does improve perceived performance, or at least the user experience.

Aggregated Multidimensional Settings

The problem with the scalability of multidimensional settings for options or theme mods (#32103) is that the number of filters added to preview changes grows exponentially (see above). The fix for this is to ensure that only one filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. gets added for a multidimensional settings that share a common ID base. The entire root value for the option or theme mod gets stored in a variable, and any previewed setting’s value gets applied to that variable once, and this root value then gets returned by the filter. This construct is referred to in the source as a “aggregated multidimensional setting”. Note that this has only been implemented for options and theme mods: custom multidimensional setting types that subclass WP_Customize_Setting should also be able to make use of the functionality, although this has not been specifically tested.

Two new actions have been introduced:

• customize_post_value_set
• customize_post_value_set_{$setting_id}

These are triggered whenever WP_Customize_Manager::set_post_value() is called, and they allow for WP_Customize_Setting::preview() to update the value being previewed. You can now, for instance, call preview() on a setting up-front and then set the post value later, and the new value will be applied for previewing as expected. This can be called a “deferred preview” or “just in time” previewing.

Facilitate plugins to override Customizer features (#33552)

Sometimes widgets or menus are not applicable for a given site. Ticketticket Created for both bug reports and feature development on the bug tracker. #33552 introduces a new filter customize_loaded_components which allows nav menus or widgets to be skipped from initialization. For example, to prevent the nav menu functionality from being loaded the following pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party code can be used:

add_filter( 'customize_loaded_components', function ( $components ) {
    return array_filter( $components, function ( $component ) {
        return 'nav_menus' !== $component;
    } );
} );

JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Inline Docsinline docs (phpdoc, docblock, xref)

The Customizer is a JavaScript-heavy application, and in #33503 #33639 the inline docs for JS have been improved to help developers understand how it works. See [33709] [33911] [33841].

Non-autoloaded Option Settings (#33499)

When settings are registered for options that don’t already exist in the DB, an update for these settings in the Customizer would result in update_option() called with the default $autoload parameter and thus them being saved as autoloaded. In 4.4 you can now register option settings to explicitly not get added with autoloading, for example:

$wp_customize->add_setting( 'foo[first]', array(
    'type' => 'option',
    'autoload' => false,
) );

Other Improvements

• #21389 Retina theme custom headers
• #31540 Dropdown pages Customizer description option
• #32637 Customizer should default to returning to the front page, not the themes page
• #32812 Customizer Menus: Escaping inconsistencies — You can now use limited markup in nav menu item titles in the Customizer.
• #33319 Customizer headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. image crop uses static URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org when refreshing UIUI User interface after crop.
• #33665 Menu Customizer: Implement indicators for invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. menu items
• #34432 Customizer subclasses can be broken out and remain BC — All Customizer PHP classes now reside in a separate files.
• #34607 Customizer: Wrapped labels should align to start of label, not checkbox or radio button
• New methods:
  • WP_Customize_Manager::get_preview_url()
  • WP_Customize_Manager::set_preview_url()
  • WP_Customize_Manager::get_return_url()
  • WP_Customize_Manager::set_return_url()
  • WP_Customize_Manager::set_autofocus()
  • WP_Customize_Manager::get_autofocus()
  • WP_Customize_Manager::customize_pane_settings()

Several accessibility fixes were also made.

See also the full list of tickets that were closed during the 4.4 release for the customize component.

#4-4, #customize, #dev-notes