Accessibility improvements to Media component in WordPress 5.5

WordPress 5.5 introduced several improvements in 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) of the Media component.

Improvements in the accessibility of the status and error messages in the Image Editor

On previous WordPress versions on the Edit Media page, when activating the “Restore Image” button, a message was shown above the image while the Restore button itself disappears.

Since the button would have been focused at the time when activated by keyboard, this causes the keyboard focus position to be lost and reset to the top of the page.

The message itself is also not announced by screen readers, and may not be visible to screen magnification users if it appears outside their current view.

WordPress 5.5 improved the behavior of notices inside the Edit Media page with the followings:

  • Improves the focus management by moving focus to the notices, if any, or to the first “tabbable” element: this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages.
  • Adds an ARIA role alert to all the notices.
  • Uses wp.a11y.speak() to announce messages to assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology: this leads to all visual users seeing the messages while assistive technology users will get an audible message.
  • Uses wp.i18n for translatable strings in wp-admin/js/image-edit.js

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.: #47147.

Fix the Image Editor mismatching keyboard focus order and visual reading order

On the Edit Media page, the keyboard focus order and the visual reading
order were presented in a zig-zag pattern.

This was causing some accessibility issues for users who have a cognitive disability as they may be confused by an unexpected or illogical focus order.

WordPress 5.5 fixed that by swaping the DOM order of the two main columns within the adminadmin (and super admin) Image Editor.

See more details in the Trac ticket #47136 and the attached changeset.

Improve the appearance of image editor on small and medium screens

WordPress 5.5 added new CSS rules to improve the appearance of image editor on small and medium screens. The new rules prevent the main area of Edit Media screen from being pushed down too far.

See the related ticket on Trac: #47136.

Props to @afercia for proofreading.

#5-5, #accessibility, #dev-notes, #media

Allow post boxes and metaboxes to be reordered by using the keyboard

Before WordPress 5.5, it was possible to rearrange widgets on the Dashboard and metaboxes on post editing pages (with GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ disabled) using only a pointing device, such as the mouse. This was causing 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) issues, since it was not possible to perform the same actions with the keyboard. It was also challenging to perform these actions on touch screens.

WordPress 5.5 solves this by adding new controls and functionalities to allow reordering the boxes with the keyboard. There are also improvements to facilitate reordering of boxes on touch screens.

Before WordPress 5.5: There were no controls to move and reorder Dashboard widgets
Before WordPress 5.5: There were no controls to move and reorder boxes
WordPress 5.5 adds "up" and "down" controls to reorder boxes easily with mouse, touch screens and keyboard
WordPress 5.5 added “up” and “down” controls to reorder boxes easily with mouse, touch screens and keyboard
Reordering boxes with keyboard in WordPress 5.5

In addition to this, sound messages are sent to the live region of the administration ARIA to inform screen reader users of the result of the rearrangement action.

For 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 developers

If you develop plugins that modify the “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.” of the post boxes, you will need to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). sure you adjust your code accordingly.

Here is an example:

In WooCommerce “Edit order” pages, some WooCommerce CSSCSS Cascading Style Sheets. hide the header and the handlediv button of some metaboxes using display: none. No feature is broken and the metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. is sortable as expected because it lives in an element with the CSS class meta-box-sortables.

Plugins can customize the basic metaboxes in this way, but they should also be prepared to adjust their customizations if necessary.

Related ticketticket Created for both bug reports and feature development on the bug tracker. on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.: #39074.

Props to @afercia for technical review and @audrasjb for proofread.

#5-5, #accessibility, #dev-notes

More support for JavaScript i18n in WordPress 5.5

In WordPress 5.5, several legacy 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/. localization variables have been removed in wp-admin in favor of using the modern form wp.i18n.__().

The i18n package was introduced with WordPress 5.0 to facilitate JavaScript and dynamic UIs translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.. It was therefore possible to use it instead of other functions used for localization as wp_localize_script().

Several interfaces in wp-adminadmin (and super admin) already use the functions and utilities provided by i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. for translatable strings. With WordPress 5.5, many others are now adopting this new approach.

Here are the related tickets for these changes on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.: #50235, #50525, #50526, #50527, #50535, #50553, #50576, #50577, #50578, #50579, #50596, #50597, #50599, #50601, #50602, #50603, #50604, #50605.

For developers

If you develop WordPress themes or extensions some previously globally accessible localization variables could stop working and cause breaks in your code.

You can see how to use the functions and utilities of i18n package in this p2 post.

Props to @loicblascos for raising this note topic and @francina and @johnbillion for review.

#5-5, #dev-notes, #i18n

New editor preview options

You can now preview editor content in different screen sizes. Replacing the old preview button there is now a dropdown with “Desktop”, “Tablet” and “Mobile” sizes, as well as the previous front end preview option.

The new preview options currently only work on medium to large screens (>= 600px). In the future, there may be a way to preview large screens on a phone.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. developers

If you’re a block developer and would like to have responsive styles for your blocks in the editor, use the #start-resizable-editor-section and#end-resizable-editor-section markers to define responsive styles. Styles between these markers will be picked up by the editor and render correctly when it is resized. As an example, this is what your styles would look like:

#start-resizable-editor-section {
    display: none;
}

/* add all responsive styles here */

#end-resizable-editor-section {
    display: none;
}

Currently, we aren’t able to manipulate theme editor styles because they are loaded inline in a <style> 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.), instead of a separate stylesheet.

Related pull request on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ for this feature: https://github.com/WordPress/gutenberg/pull/19082.

#5-5, #dev-notes, #editor, #gutenberg

Registering default values for meta data

With WordPress 5.5, the register_meta() functions ( including register_post_meta() ) now support registering default values. Previously it was only possible to register default values for 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/. schema like this:

register_meta(
     'post',
     'greeting',
     array(
         'single'       => true,
         'type'         => 'string',
         'show_in_rest' => array(
             'schema' => array(
                 'type'  => 'string',
                 'default' => 'hello',
             ),
         ),
     )
 );

However, this would only be applied to calls made from within the REST API – calls to get_post_meta() would not use this default value. Now it is possible to pass in a default value that will be applied to all calls to any of the 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. functions, like this:

register_meta(
     'post',
     'greeting',
     array(
         'single'       => true,
         'type'         => 'string',
         'default'      => 'hello',
         'show_in_rest' => array(
             'schema' => array(
                 'type'  => 'string',
             ),
         ),
     )
 );

This brings register_meta() inline with register_setting() where it has been possible to register default values for options since WordPress 4.7.

Default values can also be paired with object sub types (introduced in WordPress 4.9.8) to limit the scope of a default value. An example of this might be if 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 registers a custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. of product. A developer could register a default value that would only apply to the post of type product.

register_post_meta(
     'product',
     'price',
     array(
         'single'       => true,
         'type'         => 'string',
         'default'      => '0.00',
     )
 );

It is worth noting that registering a default value to a custom post type like this may have some performance overhead. To determine which post type the current post ID is, it has to load that object. See get_object_subtype for more detail. In most cases, the meta and main objects are loaded at the same time (like when using WP_Query) but if your code is doing something other than just loading meta data, it may now load the main object type too.

Non-Single Metadata

It is also possible to register not-single default values like this:

register_post_meta(
     'product',
     'price',
     array(
         'single'       => false,
         'type'         => 'string',
         'default'      => '0.00',
     )
 );

When requesting multiple values, like this:

$result = get_post_meta( 123, 'price', false );

The above code will return a numeric array with 0.00, as the first value.

Validation

When registering a default meta value the data must match the type provided. The following example will trigger a _doing_it_wrong notice as hello is not an integer.

register_meta(
     'post',
     'greeting',
     array(
         'single'       => true,
         'type'         => 'integer',
         'default'      => 'hello',
     )
 );

New 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.

If you desire to do some really custom with default meta values, there is now a filter:

$value = apply_filters( "default_{$meta_type}_metadata", $value, $object_id, $meta_key, $single, $meta_type );

This is a dynamic filter, requiring you to add the meta type. This is an example of it’s use:

function add_my_meta_value( $value, $object_id, $meta_key, $single ){
	if( 'price' === $meta_key ) {
		if ( ! $single ) {
	   		$value = array( '0.99' );
		} else {
			$value = '0.99';
		}
	}
}
add_filter( 'default_post_metadata', 'add_my_meta_value', 10, 4 );

New functions

To makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). this functionality possible there are two new functions added to WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.:

  • get_metadata_raw()
  • get_metadata_default()

Now the get_metadata() function calls get_metadata_raw() and if the value is null, calls get_metadata_default(). So calling get_metadata() no longer gets the raw value, that is what get_metadata_raw() is now intended for.

More detail of the history of this change can be found in the original 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. #43941.

Props @timothyblynjacobs, @jjj and @justinahinon for reviewing prior to publish.

#5-5, #dev-notes, #rest-api

Recommended usage of the Updates API to support the auto-updates UI for Plugins and Themes in WordPress 5.5

This is an addendum to Controlling Plugin and Theme auto-updates UI in WordPress 5.5.

Edit 8/05/2020: An error in the example of populating no_updates for plugins has been corrected: in site_transient_update_plugins the value of response and no_update are arrays of objects; whereas in site_transient_update_themes, they are arrays of arrays. props @afragen. @pbiron

By default, the enable and disable auto-updates action links for plugins (detailed in the previous developer note) will only appear when the WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Updates 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. (available since version 3.7.0) is supported.

All plugins that are hosted in the WordPress Plugin Directory and themes that are hosted in the WordPress Theme Directory already fully support the Updates API and require no changes.

Plugins and themes that are hosted elsewhere (such as premium or “private” plugins) can also support the Updates API with a little bit of code.

Though there is currently no one “official” way for such plugins to support the Updates API, this note offers recommendations for how developers can provide enough support for the auto-updates UIUI User interface to work for their plugins.

Filtering the 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 update transient

The responses received from querying the WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/ Updates API are stored in the update_plugins site transient. There are several existing filters that developers can use to add information about the availability or lack of available updates for a specific plugin that is not hosted in the WordPress Plugin Directory to that transient. The most common are:

Using pre_set_site_transient_update_plugins, for example, developers can do:

<?php
function myplugin_pre_set_site_transient_update_plugins( $transient ) {
	// Query premium/private repo for updates.
	$update = myplugin_check_for_updates( 'my-plugin' );
	if ( $update ) {
		// Update is available.
		// $update should be an array containing all of the fields in $item below.
		$transient->response['my-plugin/my-plugin.php'] = $update;
	} else {
		// No update is available.
		$item = (object) array(
			'id'            => 'my-plugin/my-plugin.php',
			'slug'          => 'my-plugin',
			'plugin'        => 'my-plugin/my-plugin.php',
			'new_version'   => $myplugin_current_version,
			'url'           => '',
			'package'       => '',
			'icons'         => array(),
			'banners'       => array(),
			'banners_rtl'   => array(),
			'tested'        => '',
			'requires_php'  => '',
			'compatibility' => new stdClass(),
		);
		// Adding the "mock" item to the `no_update` property is required
		// for the enable/disable auto-updates links to correctly appear in UI.
		$transient->no_update['my-plugin/my-plugin.php'] = $item;
	}

	return $transient;
}

add_filter( 'pre_set_site_transient_update_plugins', 'myplugin_pre_set_site_transient_update_plugins' );

Developers that have already been using the Updates API to offer updates for their plugins that are not hosted in the WordPress Plugins Directory have already been populating the response property for their plugin.

The no_update property is a requirement for the auto-update UI to work correctly for externally hosted plugins.

Some are already populating the no_update for their plugin. Any that are not should update their code accordingly for the best user experience.

Filtering the theme update transient

For themes, the responses received from querying the WordPress.org Updates API are stored in the update_themes site transient. The filters used to modify the values of these transients are similar to the ones used for plugins but slightly different:

Using pre_set_site_transient_update_themes, for example, developers of a theme hosted in a different location can do:

<?php
function mytheme_pre_set_site_transient_update_themes( $transient ) {
	// Query premium/private repo for updates.
	$update = mytheme_check_for_updates( 'my-theme' );
	if ( $update ) {
		// Update is available.
		// $update should be an array containing all of the fields in $item below.
		$transient->response['my-theme'] = $update;
	} else {
		// No update is available.
		$item = array(
			'theme'        => 'my-theme',
			'new_version'  => $mytheme_current_version,
			'url'          => '',
			'package'      => '',
			'requires'     => '',
			'requires_php' => '',
		);
		// Adding the "mock" item to the `no_update` property is required
		// for the enable/disable auto-updates links to correctly appear in UI.
		$transient->no_update['my-theme'] = $item;
	}

	return $transient;
}

add_filter( 'pre_set_site_transient_update_themes', 'mytheme_pre_set_site_transient_update_themes' );

The no_update property was only recently added to API responses for theme update queries, and like plugins, the no_update property is a requirement for the auto-update UI to work correctly for externally hosted themes.

Props @desrosj and @audrasjb for review prior to publishing.

#5-5, #auto-update, #auto-updates, #dev-notes, #feature-autoupdates

Themes field guide: WordPress 5.5

WordPress 5.5 will contain several changes to existing features that will directly impact themes. This theme specific field guideField guide The field guide is a type of blogpost published on Make/Core during the release candidate phase of the WordPress release cycle. The field guide generally lists all the dev notes published during the beta cycle. This guide is linked in the about page of the corresponding version of WordPress, in the release post and in the HelpHub version page. details a few changes and also links several that were previously published separately.

Theme compatibility checks

In WordPress 5.4, support was added to the style.css file for the RequiresWP (Requires at least) and RequiresPHP (Requires PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20) file headers (see #44592). These headers allow theme authors to define the minimum versions of WordPress and PHP required to reliably run their themes. Though support was added for these headers, they were not yet used in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

In 5.5, the values provided by these headers will now be respected. Users will be unable to install, activate, or preview themes when a site does not meet the specified requirements.

Please ensure your theme contains these headers, and that the values are up to date and accurate.

For more information, check out the related tickets on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. (#48491, #48507, #49334, #49653).

Adding icons in Twenty Twenty

The Twenty Twenty default theme includes a feature that displays SVG icons to a page from a defined list if available icons. Additionally, there is an array that maps icon names to specific social website URLs. When a menu is assigned to the social menu location, the link text is automatically replaced with logo icons for each link (should one match the predefined list of supported icons).

Continuing to add requested icons (there are a small handful every few months) is not sustainable. Because of this, no new requests for icons will be considered for the Twenty Twenty theme. However, filters have been added in the theme to allow additional icons to be added as desired.

  • The twentytwenty_svg_icons_{$group} 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. allows new SVG icon tags to be added to a group’s list of icons. The default groups are ui (twentytwenty_svg_icons_ui), and social (twentytwenty_svg_icons_social). Custom groups could be added if needed.
  • The twentytwenty_social_icons_map filter allows new services to be added to the list of site links that are automatically replaced with icons in a menu assigned to the social menu location.
  • And finally, the new twentytwenty_svg_icon_color filter allows the color of the icon being displayed to be changed.

For example, say you wish to replace the calendar icon provided by default with your own.

<?php
function mychildtheme_twentytwenty_svg_icons_ui( $icons ) {
	$icons['calendar'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M6.75 0a.75.75 0 01.75.75V3h9V.75a.75.75 0 011.5 0V3h2.75c.966 0 1.75.784 1.75 1.75v16a1.75 1.75 0 01-1.75 1.75H3.25a1.75 1.75 0 01-1.75-1.75v-16C1.5 3.784 2.284 3 3.25 3H6V.75A.75.75 0 016.75 0zm-3.5 4.5a.25.25 0 00-.25.25V8h18V4.75a.25.25 0 00-.25-.25H3.25zM21 9.5H3v11.25c0 .138.112.25.25.25h17.5a.25.25 0 00.25-.25V9.5z"></path></svg>';

	return $icons;
}
add_filter( 'twentytwenty_svg_icons_ui', 'mychildtheme_twentytwenty_svg_icons_ui' );

As a second example, say you have a separate photography blogblog (versus network, site) and would like to add a link in your social navigation.

<?php
function mychildtheme_twentytwenty_social_icons_map( $icons ) {
	$icons['myphotoblog'] = array(
		'myphotoblogdomain.com',
		'asecondphotoblogdomain.com',
	);

	return $icons;
}
add_filter( 'twentytwenty_social_icons_map', 'mychildtheme_twentytwenty_social_icons_map' );

function mychildtheme_twentytwenty_svg_icons_social( $icons ) {
	$icons['myphotoblog'] = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" d="M2.25 4a.25.25 0 00-.25.25v15.5c0 .138.112.25.25.25h3.178L14 10.977a1.75 1.75 0 012.506-.032L22 16.44V4.25a.25.25 0 00-.25-.25H2.25zm3.496 17.5H21.75a1.75 1.75 0 001.75-1.75V4.25a1.75 1.75 0 00-1.75-1.75H2.25A1.75 1.75 0 00.5 4.25v15.5c0 .966.784 1.75 1.75 1.75h3.496zM22 19.75v-1.19l-6.555-6.554a.25.25 0 00-.358.004L7.497 20H21.75a.25.25 0 00.25-.25zM9 9.25a1.75 1.75 0 11-3.5 0 1.75 1.75 0 013.5 0zm1.5 0a3.25 3.25 0 11-6.5 0 3.25 3.25 0 016.5 0z"></path></svg>';

	return $icons;
}
add_filter( 'twentytwenty_svg_icons_social', 'mychildtheme_twentytwenty_svg_icons_social' );

For more information on this change, check out #48713 on Trac.

The icons in the examples above courtesy of Octicons.

Other theme related updates

There are several other changes affecting themes that were published as separate developer notes. You can find them below for easy reference.

For a full list of developer notes associated with WordPress 5.5 (including those documenting new features), please read the full WordPress 5.5 field guide.

Props @audrasjb for reviewing prior to publish.

#5-5, #dev-notes

Controlling Plugin and Theme auto-update email notifications and Site Health infos in WP 5.5

This is the second part of the plugins and themes auto-updates dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. for WordPress 5.5. The first part was dedicated to Controlling Plugins and Themes auto-updates user interface.

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 and Theme auto-update email notifications

As of WordPress 5.5, email notifications will be sent after each attempt to auto-update a plugin or theme regardless of outcome (success or failure).

Here’s what you need to know about these emails.

Filtering the emails

Using the auto_plugin_theme_update_email hook, the recipient, subject, headers, and email content can be filtered to adjust a site’s needs.

Example of use:

<?php
function myplugin_auto_plugin_theme_update_email( $email, $type, $successful_updates, $failed_updates ) {
	// Change the email recipient.
	$email['to'] = 'admin@example.com';
	// Change the email subject when updates failed
	if ( 'fail' === $type ) {
		$email['subject'] = __( 'ATTN: IT Department – SOME AUTO-UPDATES WENT WRONG!', 'my-plugin' );
	}

	return $email;
}
add_filter( 'auto_plugin_theme_update_email', 'myplugin_auto_plugin_theme_update_email', 10, 4 );

Repeated failures email notifications prevention

Sometimes, a specific update may fail multiple times. When this happens, a notification email will be sent for only the first failure. A failure is considered a repeat when attempting to update to the same version.

For example, if version 1.0.1 fails and then 1.0.2 is released and fails, that is not a repeat failure.

For more information, see #50448 on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..

Disabling email notifications

Email notifications can be disabled using two filters:

  • auto_plugin_update_send_email
  • auto_theme_update_send_email

Emails are enabled by default (true). Returning false to either 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. will disable email notifications for that auto-update type.

The following snippet can be used to disable email notifications for themes and/or plugins auto-updates.

<?php
// Disable auto-update email notifications for plugins.
add_filter( 'auto_plugin_update_send_email', '__return_false' );

// Disable auto-update email notifications for themes.
add_filter( 'auto_theme_update_send_email', '__return_false' );

Auto-updates information in Site Health

Each plugin and theme’s auto-update status is also surfaced on the Site Health “Info” tab.

This text can be adjusted using the plugin_auto_update_debug_string and theme_auto_update_debug_string filters.

The following example replaces the text for the status of auto-updates for plugins:

<?php
function myplugin_plugin_auto_update_debug_string( $text, $plugin, $enabled ) {
	if ( false === $enabled ) {
		return __( 'Please consider turning on auto-updates!', 'my-plugin' );
	} else {
		return __( 'Thanks for enabling auto-updates!', 'my-plugin' );
	}
}
add_filter( 'plugin_auto_update_debug_string', 'myplugin_plugin_auto_update_debug_string', 10, 3 )

The following example replaces the text for the status of auto-updates for themes:

<?php
function mytheme_theme_auto_update_debug_string( $text, $active_theme, $enabled ) {
	if ( false === $enabled ) {
		return __( 'Please consider turning on auto-updates!', 'my-theme' );
	} else {
		return __( 'Thanks for enabling auto-updates!', 'my-theme' );
	}
}
add_filter( 'theme_auto_update_debug_string', 'mytheme_theme_auto_update_debug_string', 10, 3 )

Please note: Site Health support was introduced in the Feature Plugin, so there is no Changelog/Trac ticketticket Created for both bug reports and feature development on the bug tracker. to link.

Reviewed by @pbiron and @desrosj

#5-5, #dev-notes

Filtering archive page headings in WordPress 5.5

With WordPress 5.5, theme authors will now be able to easily 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. archive pages headings, so they can use their own HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup.

The existing get_the_archive_title hook was previously limited to filter the whole title string used on archive pages. Some contributors pointed out that this filter was not specific enough to address all theme developers needs related to the archive pages headings.

In get_the_archive_title() this change splits the internal $title variable into $title and $prefix.

By using the new get_the_archive_title_prefix filter, the prefix can now be wrapped within custom elements or removed completely.

Basic examples

get_the_archive_title_prefix can be used to filter the archive pages heading prefix. It accepts only one argument, $prefix, which is a string containing the text prefix of the heading.

To replace the archive title prefix with another text, use:

function mytheme_archive_title_prefix( $prefix ){
    $prefix = __( 'Currently viewing archives for:', 'my-theme' ); 
    return $prefix;
}
add_filter( 'get_the_archive_title_prefix', 'mytheme_archive_title_prefix' );

To completely remove the archive title prefix, use:

add_filter( 'get_the_archive_title_prefix', '__return_empty_string' );

This change also wrap the title part with a span element and pass the original title and prefix to the existing get_the_archive_title filter, allowing further customization to the archive titles.

This filter passes the following arguments:

  • $title: Archive title to be displayed
  • $original_title: Archive title without prefix
  • $prefix: Archive title prefix

Here is a sample example of use:

function mytheme_get_the_archive_title( $title, $original_title, $prefix ) {
    $prefix = '<span class="archive-prefix">' . __( 'Currently viewing archives for:', 'my-theme' ) . '</span>';
    $title  = '<span class="archive-title">' . $original_title . '</span>';
    return $prefix . $title;
}
add_filter( 'get_the_archive_title', 'mytheme_get_the_archive_title', 10, 3 );

For full context on this change, see the related tickets: #31237, #38545 and #42768.

Note reviewed by @justinahinon

#5-5, #dev-notes

Block API Updates in 5.5

Coauthored by @aduth and @gziolo.

BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Categories

The block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is no longer mandatory or doesn’t have to match an existing category slug during blocks’ registration. When that happens, a block is rendered in the inserter under the Uncategorized section.

The default set of block categories was updated.

The new set of block categories is:

  • Text
  • Media
  • Design
  • Widgets
  • Embeds
  • Reusable

Of the above, a few have remained unchanged: Widgets, Embeds, Reusable.

Mappings have been added to ensure that existing blocks will be assigned to as close as possible to an equivalent category in the new set:

  • Common → Text
  • Formatting → Text
  • Layout → Design

Note that if you update your blocks to one of the new block categories, your block may no longer register correctly in older versions of WordPress. If your 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 supports older versions, you should consider to check if a category is registered before using it:

In PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20:

global $post;
$has_formatting_category = in_array( 'formatting', wp_list_pluck( get_block_categories( $post ), 'slug' ) );

register_block_type( 'my-plugin/my-block', array(
   'category' => $has_formatting_category ? 'formatting' : 'media',
   
   // ...
) );

In 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/.:

var hasFormattingCategory = wp.blocks.getCategories().some( function( category ) {
   return category.slug === 'formatting';
} );

wp.blocks.registerBlockType( 'my-plugin/my-block', {
   category: hasFormattingCategory ? 'formatting' : 'media',

   // ...
} );

Block Type Metadata

To register a new block type using metadata that can be shared between JavaScript and PHP code, start by creating a block.json file. This file:

  • Gives a name to the block type.
  • Defines some important metadata about the registered block type (title, category, icon, description, keywords).
  • Defines the attributes of the block type.
  • Registers all the scripts and styles for your block type.

Example:

{
	"name": "my-plugin/notice",
	"title": "Notice",
	"category": "text",
	"parent": [ "core/group" ],
	"icon": "star",
	"description": "Shows warning, error or success notices…",
	"keywords": [ "alert", "message" ],
	"textdomain": "my-plugin",
	"attributes": {
		"message": {
			"type": "string",
			"source": "html",
			"selector": ".message"
		}
	},
	"providesContext": {
		"my-plugin/message": "message"
	},
	"usesContext": [ "groupId" ],
	"supports": {
		"align": true,
		"lightBlockWrapper": true
	},
	"styles": [
		{ "name": "default", "label": "Default", "isDefault": true },
		{ "name": "other", "label": "Other" }
	],
	"example": {
		"attributes": {
			"message": "This is a notice!"
		}
	},
	"editorScript": "file:./build/index.js",
	"script": "file:./build/script.js",
	"editorStyle": "file:./build/index.css",
	"style": "file:./build/style.css"
}

For more information on 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., see the documentation.

Block Context

Block context is a feature which enables ancestor blocks to provide values which can be consumed by descendant blocks within its own hierarchy. Those descendant blocks can inherit these values without resorting to hard-coded values and without an explicit awareness of the block which provides those values.

This is especially useful in full-site editing where, for example, the contents of a block may depend on the context of the post in which it is displayed. A blogroll template may show excerpts of many different posts. Using block context, there can still be one single “Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.” block which displays the contents of the post based on an inherited post ID.

If you are familiar with React Context, block context adopts many of the same ideas. In fact, the client-side block editor implementation of block context is a very simple application of ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Context. Block context is also supported in server-side render_callback implementations, demonstrated in the examples below.

Defining Block Context

Block context is defined in the registered settings of a block. A block can provide a context value, or consume a value it seeks to inherit.

Providing Block Context

A block can provide a context value by assigning a providesContext property in its registered settings. This is an object which maps a context name to one of the block’s own attributes. The value corresponding to that attribute value is made available to descendant blocks and can be referenced by the same context name. Currently, block context only supports values derived from the block’s own attributes. This could be enhanced in the future to support additional sources of context values.

record/block.json

{
	"name": "my-plugin/record",
	"attributes": {
		"recordId": {
			"type": "number"
		}
	},
	"providesContext": {
		"my-plugin/recordId": "recordId"
	}
}

As seen in the above example, it is recommended that you include a namespace as part of the name of the context key so as to avoid potential conflicts with other plugins or default context values provided by WordPress. The context namespace should be specific to your plugin, and in most cases can be the same as used in the name of the block itself.

Consuming Block Context

A block can inherit a context value from an ancestor provider by assigning a usesContext property in its registered settings. This should be assigned as an array of the context names the block seeks to inherit.

record-title/block.json

{
	"name": "my-plugin/record-title",
	"usesContext": [ "my-plugin/recordId" ]
}

Using Block Context

Once a block has defined the context it seeks to inherit, this can be accessed in the implementation of edit (JavaScript) and render_callback (PHP). It is provided as an object (JavaScript) or associative array (PHP) of the context values which have been defined for the block. Note that a context value will only be made available if the block explicitly defines a desire to inherit that value.

JavaScript

record-title/index.js

registerBlockType( 'my-plugin/record-title', {
	edit( { context } ) {
		return 'The current record ID is: ' + context[ 'my-plugin/recordId' ];
	},
} );

PHP

A block’s context values are available from the context property of the $block argument passed as the third argument to the render_callback function.

record-title/index.php

register_block_type( 'my-plugin/record-title', array(
	'render_callback' => function( $attributes, $content, $block ) {
		return 'The current record ID is: ' . $block->context['my-plugin/recordId'];
	},
) );

#5-5, #block-editor, #dev-notes