REST API: Slashed Data in WordPress 4.4 and 4.5

Hi everyone. The REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. team recently discovered a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. with parameter parsing in the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. infrastructure, part of WordPress 4.4. For those of you using the API infrastructure, you need to be aware of a bug fix we’re making with the API.

The Problem

The REST API has several types of parameters that it mixes together. These come from several sources including the request body as either 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. or URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org-encoded form data ($_POST), query parameters ($_GET), the API route, and internally-set defaults. Unfortunately, due to an oversight on our behalf, these parameters can be inconsistently formatted.

In WordPress, the superglobal request variables ($_POST and $_GET) are “slashed”; effectively, turning magic quotes on for everyone. This was originally built into PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher as a feature to help guard against SQL injection, but was later removed. Due to compatibility concerns, WP cannot change this behaviour for the superglobals. This only applies to the PHP superglobals, not to other sources of input like a JSON body or parameters in the URL. It additionally does not apply to form data on PUT or DELETE requests.

Internally, some low-level WordPress functions expect slashed data. These functions internally call wp_unslash() on the data you pass in. This means input data from the superglobals can be passed in directly, but other data needs to be wrapped with a call to wp_slash().

When the REST API gathers the data sources, it accidentally mixes slashed and unslashed sources. This results in inconsistent behaviour of parameters based on their source. For example, data passed as a JSON body is unslashed, whereas data passed via form data in the body is slashed (for POST requests).

For example, the following two pieces of data are equivalent in the REST API:


// JSON body:
{"title": "Foo"}

// Form-data ($_POST)
title=Foo

// Both result in:
$request->get_param('title') === 'Foo';

However, if the data contains slashes itself, this will be inconsistently passed to the callback:


// JSON body:
{"title": "Foo\Bar"}

// Results in:
$request->get_param('title') === 'Foo\Bar';

// Form-data ($_POST) (%3D = "\")
title=Foo%3DBar

// Results in:
$request->get_param('title') === 'Foo\\Bar';

This means that callbacks need to understand where parameters come from in order to consistently handle them internally. Specifically:

  • Data passed in the query string ($_GET, $request->get_query_params()) is slashed
  • Data passed in the body as form-encoded ($_POST, $request->get_body_params()) is slashed for POST requests, and unslashed for PUT and DELETE requests.
  • Data passed in the body as JSON-encoded ($request->get_json_params()) is unslashed.
  • Data passed in the URL ($request->get_url_params()) is unslashed.
  • Data passed as a default ($request->get_default_params()) is unslashed.

In addition, parameters set internally via $request->set_param() are unslashed. Unit and integration tests for API endpoints typically use these directly, so the majority of tested code (such as the WP REST API 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) assumes parameters are unslashed.

See the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. Ticketticket Created for both bug reports and feature development on the bug tracker. #36419 for more information.

The Solution for WordPress 4.4 and 4.5

We are regarding inconsistently-slashed data as a major bug, and are changing the API infrastructure to ensure unslashed data. This will ensure that data is consistent regardless of the source. Callbacks will now receive unslashed data only, and can rely on this regardless of the original data source or request method.

If you are using functions that expect slashed data in your callback, you will need to slash your data before passing into these functions. Commonly used functions that expect slashed data are wp_insert_post, wp_update_post, update_post_meta, wp_insert_term, wp_insert_user, along with others. Before passing data into these functions, you must call wp_slash() on your data.

The fix for this issue, will be included in the WordPress 4.5 release candidates and final release. Due to the severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of the bug, we are also backporting the fix to the next minor WordPress 4.4 update. This also ensures you can update your plugins can act consistently across all versions of the REST API.

We understand that this may inadvertently break some plugins that are expecting slashed data. Right now, it’s not possible to consistently ensure that callbacks receive slashed data, so it is likely that these plugins will already break in some conditions.

tl;dr: if you’re using wp_insert_* or *_post_meta in your REST API callback, you need to ensure you are calling wp_slash() on data you are passing in, regardless of source.

We apologize for this bug existing in the first place. Slashed data is a problem that has plagued WordPress for a long time, and we’re not immune to getting caught by the issue ourselves.

#4-4, #4-5, #rest-api

4.4.2 Release Candidate

A Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). for WordPress 4.4.2 is now available. This maintenance release is scheduled for tomorrow, Tuesday, February 2, but first it needs your testing. This release fixes 17 issues reported against 4.4 and 4.4.1.

WordPress 4.4 has thus far been downloaded over 20 million times since it’s release on December 8. Please test this release candidate to ensure 4.4.2 fixes the reported issues and doesn’t introduce any new ones.

Contributors

Thank you to the following 11 contributors to 4.4.2:

afercia, berengerzyla, boonebgorges, chandrapatel, chriscct7, dd32, firebird75, ivankristianto, jmdodd, ocean90, salvoaranzulla

Fixes

A total of 17 fixes are included in this RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). (trac log). Notable fixes include:

  • #35344 – Strange pagination issue on front page after 4.4.1 update.This was a very visible issue for certain users with specific settings. While remnants of this issue still exist (see #35689), the bulk of it has been fixed and is ready for testing.
  • Comments – A total of 6 issues were fixed within the Comments component.
    • #35419 – Incorrect comment pagination when comment threading is turned off
    • #35402 – per_page parameter no longer works in wp_list_comments
    • #35378 – Incorrect comment ordering when comment threading is turned off
    • #35192 – Comments_clauses 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. (issue)
    • #35478 – 4.4 Regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. on Querying for Comments by Multiple Post Fields
    • #35356 – wp_list_comments ignores $comments parameter

Download & Test

We need your help to ensure there are no issues with the fixes in 4.4.2. Please download the RC and test!

#4-4, #4-4-2, #maintenance, #release

4.4.1 Release Candidate

A Release Candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). for WordPress 4.4.1 is now available. This maintenance release is scheduled for Wednesday, January 6, but first it needs your testing. This release fixes 52 issues reported against 4.4.

WordPress 4.4 has thus far been downloaded over 7 million times since it’s release on December 8. Please test this release candidate to ensure 4.4.1 fixes the reported issues and doesn’t introduce any new ones.

Contributors

A total of 36 contributors have contributed to 4.4.1:

Compute, DvanKooten, JPr, KrissieV, SergeyBiryukov, ShinichiN, aaroncampbell, afercia, azaozz, boonebgorges, dd32, dossy, eherman24, gblsm, hnle, igmoweb, jadpm, jeff@pyebrook.com, joemcgill, johnbillion, jorbin, meitar, nacin, netweb, obenland, ocean90, pento, peterwilsoncc, redsweater, rmccue, rogerhub, salcode, smerriman, scottbrownconsulting, stephenharris, swissspidy, tharsheblows, tyxla, voldemortensen, webaware, wonderboymusic, wp-architect

Notable Bug Fixes

Two severe bugs have been fixed. In some cases, users with an out of date version of OpenSSL being used by PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher were unable to use the HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. to communicate with to communicate with some httpsHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. sites. Additionally, posts that reused a slug (or a part of a slug) would be redirected.
The polyfill for emoji support has been updated to support Unicode 8.0. This means that diversity emoji, and other new emoji like 🌮 and 🏒 are fully supported. 

All Changes

Most components have received at least one change. This is a list of all tickets closed, sorted by component.
Continue reading

#4-4, #4-4-1, #maintenance, #release

December 10 Meeting Summary and 4.5 Call for Volunteers

We gathered together after the marvelous release of 4.4. Many congrats to @wonderboymusic, his deputies @sergeybiryukov and @ocean90, and all contributors who helped out! See the full transcript for the entire chat.

On 4.4

What’s Next?
@helen is building a product design team that is kicking off shortly. I’m excited about this — it’s an opportunity to really step up our game in the UXUX User experience space. She’ll be building out a few projects and calling for volunteers on make/design, so watch there if you’re interested in getting involved.

Officially, 4.5 doesn’t kick off until early January, but I’d like to start off with a ready-to-go set of teams. The time between now and then is also great for preparing feature plugins that you’re interested in seeing merged.

4.5 Call for Volunteers
Currently looking for those interested in:

  • Being a Release Backup/Deputy
  • Contributing to Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Summary Posts
  • Working on a particular development focus or feature

If you’re interested in contributing in any of these areas/roles, please leave a comment! Feel free to pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” me in the Make WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. (@mike) if you have any questions on these roles.

#4-4, #4-5, #deputies, #deputy

Customizer improvements in 4.4

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

WordPress 4.4: Field Guide

WordPress 4.4 is the next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. of WordPress and is shaping up to be an amazing release. While you have likely discovered many of the changes from testing your plugins, themes, and sites (you have been testing, right?), this post highlights some of the exciting 🎉changes developers can look forward to. 💥

Externally Embeddable

Using a handful of filters, you can customize how your site looks when it’s embedded elsewhere. As a part of the work around embeds, there are also a couple of new functions for retrieving and displaying embeddable content. The post above also links to a plugin which will remove the ability to embed your site elsewhere.

REST API Infrastructure Introduction

The infrastructure to create a REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. has landed in WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..  Adding your own endpoints (or using the latest version of the REST API plugin) is now even easier.  The new embed feature mentioned above uses this new infrastructure.
Note: If you are using v1 of the APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. 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, it is incompatible with 4.4, however an update is planned before 4.4 ships. The update will not use the new REST API infrastructure, so you’ll want to update your REST API usage eventually. If you are using v2 of the API plugin, be sure you’re on betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 5 or later; previous versions do not support WordPress 4.4.

Responsive Image Insertion

Through the use of a display filter, image tags in WordPress now include srcset and sizes.  These two attributes to the <img> tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) allow browsers to choose the most appropriate image size and download it, ignoring the others. This can save bandwidth and speed up page load times. There are new functions, filters, and an additional default image size available to help with the creation of responsive images.

wp_title Deprecation Decision

Since WordPress 4.1, add_theme_support( 'title-tag' ); has been the recommended way of outputing a title tag for themes.  Now, a year later the wp_title function has been officially deprecated. Take a look at this post if you want to see all the great new filters you can use to modify title tags.

UPDATE 12 November – wp_title has been reinstated for the time being. It is a zombie function.  add_theme_support( 'title-tag' ); remains the recommended way to insert a title tag into your theme, however there were use cases for wp_title that were not accounted for in the original deprecation decison

Term Taxonomy Tranquility

WordPress 4.4 is the latest in a string of releases to feature major updates to the taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. system. This release introduces of term metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress., a new WP_Term class, and a host of other under the hood changes.

Comment Component Cultivation

Comments received love both on the front end of sites and on the backend. On the front-end, the comment field will always appear first, before the name and email fields. This fixes a longstanding bug where the behavior was different for logged in and logged out users.

Under the hood, comments are now represented by a WP_Comment class and comment queries are now considerably more powerful.

Multisite Momentum

Like taxonomy and comments, the multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site features gains a new class, WP_Network. Additionally, there are now *_network_option functions which make it easier to use multiple networks. The linked post also highlights new hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same., some notable bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes, and two newly-deprecated functions. If you use WordPress in a multisite environment, this is a must-read.

Heading Hierarchy Happiness

Headings on the adminadmin (and super admin) screens are now more semantic. Be sure to update your custom admin screens to follow the proper heading structure. These changes help users of assistive technologies, such as screen readers.

Twenty Sixteen

Each year, WordPress releases a new default theme and this year is no exception. Twenty Sixteen is a brand new theme, bundled with WordPress 4.4. Default themes are incredibly popular; be sure to test your plugins to ensure they function well with Twenty Sixteen.

Other Notes

So far, this release has had over two thousand commits. There are many additional changes not outlined above including: the removal of support for my-hacks.php(Update Nov 20th: My Hacks support was added back), giving add_rewrite_rule support for an easier-to-read syntax, support for single-{post_type}-{post_name} in the template hierarchy, pretty permalinks for unattached media, and stronger enforcement of the show_ui argument in custom post types. As with every major update, it is very important to test every feature in your plugins and themes to ensure there are no regressions in their behavior.

Closing

If you haven’t been testing your themes, plugins, and sites with WordPress 4.4, now is a great time to start. You can grab a copy from svn (or git), download the nightly builds, or install it using the Beta Tester Plugin.

WordPress 4.4 is not recommended for use on production servers until the final release has been announced on the WordPress News blog. The release is currently targeted for December 8, 2015. Get testing today!

#4-4, #dev-notes, #field-guide

Responsive Images in WordPress 4.4

WordPress 4.4 will add native responsive image support by including srcset and sizes attributes to the image markup it generates. For background on this feature, read the merge proposal.

How it works

WordPress automatically creates several sizes of each image uploaded to the media library. By including the available sizes of an image into a srcset attribute, browsers can now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.

To help browsers select the best image from the source set list, we also include a default sizes attribute that is equivalent to (max-width: {{image-width}}px) 100vw, {{image-width}}px. While this default will work out of the box for a majority of sites, themes should customize the default sizes attribute as needed using the wp_calculate_image_sizes 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..

Note that for compatibility with existing markup, neither srcset nor sizes are added or modified if they already exist in content HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers..

For a full overview of how srcset and sizes works, I suggest reading Responsive Images in Practice, by Eric Portis over at A List Apart.

New functions and hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.

To implement this feature, we’ve added the following new functions to WordPress:

  • wp_get_attachment_image_srcset() – Retrieves the value for an image attachment’s srcset attribute.
  • wp_calculate_image_srcset() – A helper function to calculate the image sources to include in a srcset attribute.
  • wp_get_attachment_image_sizes() – Creates a sizes attribute value for an image.
  • wp_calculate_image_sizes() – A helper function to create the sizes attribute for an image.
  • wp_make_content_images_responsive() – Filters img elements in post content to add srcset and sizes attributes. For more information about the use of a display filter, read this post.
  • wp_image_add_srcset_and_sizes() – Adds srcset and sizes attributes to an existing img element. Used by wp_make_content_images_responsive().

As a safeguard against adding very large images to srcset attributes, we’ve included a max_srcset_image_width filter, which allows themes to set a maximum image width for images include in source set lists. The default value is 1600px.

A new default image size

A new default intermediate size, medium_large, has been added to better take advantage of responsive image support. The new size is 768px wide by default, with no height limit, and can be used like any other size available in WordPress. As it is a standard size, it will only be generated when new images are uploaded or sizes are regenerated with third party plugins.

The medium_large size is not included in the UIUI User interface when selecting an image to insert in posts, nor are we including UI to change the image size from the media settings page. However, developers can modify the width of this new size using the update_option() function, similar to any other default image size.

Customizing responsive image markup

To modify the default srcset and sizes attributes,  you should use the wp_calculate_image_srcset and wp_calculate_image_sizes filters, respectively.

Overriding the srcset or sizes attributes for images not embedded in post content (e.g. post thumbnails, galleries, etc.), can be accomplished using the wp_get_attachment_image_attributes filter, similar to how other image attributes are modified.

Additionally, you can create your own custom markup patterns by using wp_get_attachment_image_srcset() directly in your templates. Here is an example of how you could use this function to build an <img> element with a custom sizes attribute:

<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="<?php echo esc_url( $img_src ); ?>"
     srcset="<?php echo esc_attr( $img_srcset ); ?>"
     sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">

Final notes

Users of the RICG Responsive Images 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 should upgrade to version 3.0.0 now in order to be compatible with the functionality that included in WordPress 4.4.

#4-4, #dev-notes, #media, #respimg

Headings hierarchy changes in the admin screens

For a number of years, the headings hierarchy in the adminadmin (and super admin) screens have been setup without careful thought. WordPress 4.4 aims to fix this. This work is mainly focused on helping those users of assistive technologies such as screen readers, and is a continuation of the work started in 4.3 on restoring the H1 (heading level 1) to the admin screens.

If you’re a 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 or theme author and you’re providing custom admin screens for settings, etc., there are a few things you should check and update.

Why it matters

Headings provide document structure, which can directly aid keyboard navigation. Users of assistive technologies use headings as the predominant mechanism for finding page information. When heading levels are skipped, it’s more likely for these users to be confused or experience difficulty navigating pages.

Putting it simply, one of the first things screen reader users do in a web page to find relevant content is to press the 1 key on their keyboard to jump to the first <h1> heading and then they will try the key 2 to find the <h2> headings and so on. Thus, it’s extremely important for WordPress to provide a correct headings hierarchy, ensuring no headings levels are skipped.

How to fix your Plugin or Theme

Restructure the document headings hierarchy to ensure that heading levels are not skipped. The main heading should be a <h1> and any subsequent headings should (likely) be bumped one level up. There should be no skipped levels. Check your headings in the Admin, for example in settings pages, list tables, screen options, (dashboard) widgets, and metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes.

See for example the screenshot below, the first heading (Sharing Settings) should be a <h1> followed by a <h2> for Sharing Buttons.

main h1 heading example

Your plugin screens should start with a H1!

List Table headings

List tables (such as on wp-admin/edit.php ) have now additional headings added, though you won’t see them. These headings are hidden with the .screen-reader-text CSSCSS Cascading Style Sheets. class and are intended to allow users to jump to the relevant sections in these screens.

For more in-depth information on using the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.Core Core is the set of software required to run WordPress. The Core Development Team builds WordPress. .screen-reader-text class, the AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)Accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) team has a great write-up on it.

The screenshot below illustrates the new headings in the Posts and Categories screens.

In the screen wp-admin/edit.php the heading structure is now:

  • H1: Posts
  • H2: Filter posts list (visually hidden)
  • H2: Posts list navigation (visually hidden)
  • H2: Posts list (visually hidden)

In the screen wp-admin/edit-tags.php?taxonomy=category the heading structure is now:

  • H1: Categories
  • H2: Categories list navigation (visually hidden)
  • H2: Categories list (visually hidden)
  • H2: Add new category

hidden headings for default posts and taxonomies lists

The hidden headings in the default posts and taxonomies lists.

If your plugin or theme provides custom post types or custom taxonomies, these new headings will use their default values “Post” and Category”:

hidden headings for custom posts and taxonomies lists

The hidden headings in the custom posts and taxonomies lists.

New post type and taxonomy labels in 4.4

In order to provide for better heading text, some new labels have been added for use with register_post_type() and register_taxonomy().

For register_post_type():

'filter_items_list'     => __( 'Filter your-cpt-name list', 'your-plugin-text-domain' ),
'items_list_navigation' => __( 'Your-cpt-name list navigation', 'your-plugin-text-domain' ),
'items_list'            => __( 'Your-cpt-name list', 'your-plugin-text-domain' ),

For register_taxonomy():

'items_list_navigation' => __( 'Your-tax-name list navigation', 'your-plugin-text-domain' ),
'items_list'            => __( 'Your-tax-name list', 'your-plugin-text-domain' ),

Here’s an example for a custom post type:

custom posts list with proper headings

Using the new labels to provide proper headings for a custom post.

Screen Options tab changes

Some plugins add custom options in the Screen Options tab. Previously, a h5 heading was used for the options “title”. In WordPress 4.4, the Screen Options tab has been revamped and together with other changes, it has been decided to remove the h5 heading which didn’t allow for a good headings hierarchy.

Each group of options is now within its own form fieldset and uses a legend element as “title”. You’re strongly encouraged to change the HTML you use for your plugin options and use the new markup.

the new Screen Options tab

The new Screen Options tab: each option is in a separate fieldset.

Dashboard widgets and meta boxes changes

All Dashboard widgets and meta boxes headings changed from an H3 to an H2.

<h2 class="hndle ui-sortable-handle">
	<span>your-widget-title</span>
</h2>

If you are a theme or plugin developer: please check the heading structure in the content of your widgets and meta boxes, use an H3 and lower in the right order and context.

Get ahead of 4.4 and update now!

Now is a great time to update your plugins and themes! The power of the Web is in its universality. Help us to make the Web a place designed to work for all people. Any feedback and thoughts are more than welcome, please let us know in the comments below.

#4-4, #accessibility, #dev-notes, #example-flow, #user-anecdote, #visual-comparison

Multisite Focused Changes in 4.4

WordPress 4.4 has been a very productive release for multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site. In addition to some exciting new enhancements, we were able to resolve some long standing bugs. Check out the full list of multisite focused changes on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. if you want even more wonderful reading material. 💖

Introduce WP_Network

The $current_site global has been maintaining a stdClass object representing an assumed description of a networknetwork (versus site, blog) since the original merge of WordPress MU with WordPress. With the introduction of WP_Network, we give a network a bit more definition and open up possibilities for working with a network (or networks) in a more sane way. Take a look at ms-settings.php if you are using a custom sunrise.php to populate the $current_blog or $current_site globals. We now create a WP_Network object from the existing $current_site if it has been populated elsewhere. This is a backward compatible change, though should be tested wherever your code interacts with $current_site, especially if anything has been done to extend its structure. See #31985 for more discussion while this was built.

Introduce *_network_option functions

During the introduction of WP_Network, we needed a way to populate network options (stored in wp_sitemeta) for a network other than the current. add_network_option(), update_network_option(), get_network_option(), and delete_network_option() are all new functions in 4.4. Each takes the network ID as its first argument, matching the structure of the *_blog_option() functions. *_site_option() functions remain as the proper way for working with a current network’s options. These now wrap the new *_network_option() functions and pass the current network’s $wpdb->site_id. In a future release, likely 4.5, we can look at the introduction of network 0 as a way to store global options. See #28290 for more discussion.

New actions and filters

  • before_signup_header fires before the signup 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. in wp-signup.php. #17630
  • ms_network_not_found fires when the $current_site global has not been filled and ms_not_installed() is about to fire. #31702
  • invite_user fires immediately after a user is invited to join a site, but before the notification is sent. #33008

Other enhancements of note:

  • WordPress has always enforced a /blog prefix for the main site’s permalink structure to avoid collisions with other sites in a subdirectory configuration. This was always changeable in the network adminadmin (and super admin), though the permalinks UIUI User interface in the site admin never reflected the change and could cause confusion. Now, thanks to #12002, WordPress forgets that /blog was ever assigned if it is changed in the network admin to anything else. When changing this value, choose something that won’t conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved..
  • manage_network_users is now used to determine edit_users caps rather than is_super_admin. In preparation for 4.4, take a look at how you’re using the manage_network_users capability in your code to be sure access is set as intended. #16860
  • Network activated plugins are now visible as “network activated” in an individual site admin if the user can manage network plugins. These are not shown to site administrators. #20104
  • Recently active plugins are now displayed as such in the network admin. #20468
  • Language selection is now available when adding a new site through the network admin. 🌍 #33528
  • Language selection is also now available when signing up for a new site through wp-signup.php. 🌏 #33844
  • Network user searching has been improved by wrapping search terms in asterisk for looser matching. #32913

Bugs of note fixed:

  • It was previously impossible to set the upload limit for an individual site to 0 as it would then fallback to the default of 100MB. In 4.4, 0 is a respected number. #34037
  • When a site’s home, siteurl, or page_on_front option was updated in the network admin, rewrite rules were previously flushed incorrectly, causing rewrite rules for the main site on the network to take the place of the rewrite rules for the site being changed. #33816
  • Subdirectory sites created on an HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information. network are now set to HTTPS rather than the incorrect HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands.. 🔒 #33620
  • A site’s title can now be longer than 50 characters! #33973

Deprecated functions:

Both get_admin_users_for_domain() #34122 and create_empty_blog() #34120 have never been used by WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and are now deprecated. 🍻

#4-4, #dev-notes, #multisite

Today’s 4.4 Dev Chat: Oct 28

Dev chat is still at 20:00 UTC this week, even though Europe lost an hour, but it will change next week to 21:00 UTC after the US changes.

TODAY’S DEV CHAT: Wednesday, October 28, 2015 16:00 UTC-4:

Agenda:

  • BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 2
  • Open floor for components
  • Dev post roundup

Fin.

#4-4, #agenda