Performance team meeting summary 4 January 2022

Meeting agenda here and the full chat log is available beginning here on Slack.

Focus group updates

Images

@adamsilverstein

GitHub project

  • @adamsilverstein offline
  • @mitogh: Tested current functionality and opened several issues from testing (will clean up today); will begin work on a doc for planning the migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of existing images to webp.

Feedback requested

  • N/A

Object caching

@tillkruess @dustinrue

GitHub project

  • @tillkruess: Work in progress on a better Health Check suggestion for object caching, but haven’t pushed anything new yet. Splitting up all WP_Object_Cache improvements in 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/ to make each a distinct issue.

Feedback requested

  • N/A

Site Health

@audrasjb

GitHub project

Feedback requested

Measurement

@wp-source @josephscott

GitHub project

Feedback requested

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

@aristath

GitHub project

Feedback requested

  • N/A

Infrastructure

Feedback requested

Open floor

  • @blogaid asked about testing image changes; @mitogh shared the repo link and @shetheliving confirmed that testing can be done via 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 and image-related feedback should be shared on the WebP for uploads PR

#core-media, #meeting, #performance, #performance-chat, #summary

Miscellaneous Core changes in WordPress 5.9

WordPress 5.9 brings a lot of smaller changes that developers should know about. Here’s a breakdown.

Comment text field now marked as required

With WP 5.9, a required asterisk is added to the comment text field. Historically, the name and email fields were marked as required, but the comment text field was not, though it was actually a required field.

Please note this change also adds a container to the comment required text sentence, with the required-field-message class.

If the theme (or 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) creates a custom logged_in_as or comment_notes_before message, this could result in having the asterisk character indicate the required Comment field without a “Required fields are marked *” explanation. For example, Twenty Nineteen and Twenty Twenty-One had removed the logged_in_as text by setting it to null, so the default text has been restored to display the required fields message (with the links).

Also, if a theme styles the indicator character specifically for the Name and Email field labels—as Twenty Eleven had done—those styles should apply to the Comment field label as well.

For more information, see 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. #16206 and related commits: [52029], [52149], [52200].

Two new oEmbed providers: Wolfram Notebook and Pinterest

All of the Wolfram services are tied together by the Wolfram Language: Notebooks are their hosted version of Wolfram Language based documents. Their oEmbed 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. is based on the following URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org scheme: https://www.wolframcloud.com/oembed. There is also a secondary endpoint that returns the embed wrapped in an iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser.: https://www.wolframcloud.com/oembed/iframe/.

For more information, see Trac ticket #53326.

Pinterest provides a single oEmbed endpoint, which handles URLs of pins, boards, and profiles: https://www.pinterest.com/oembed.json.

For more information, see Trac ticket #53448.

KSES: Add options for restricting tags based upon their attributes

This change adds two now attribute-related config options to KSES:

  • An array of allowed values can be defined for attributes. If the attribute value doesn’t fall into the list, the attribute will be removed from the 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.).
  • Attributes can be marked as required. If a required attribute is not present, KSES will remove all attributes from the tag. As KSES doesn’t match opening and closing tags, it’s not possible to safely remove the tag itself, the safest fallback is to strip all attributes from the tag, instead.

Allow PDFs to be embedded as objects

Included with this change is an implementation of these options, allowing the <object> tag to be stored in posts, but only when it has a type attribute set to application/pdf.

This implementation also introduces the _wp_kses_allow_pdf_objects callback function, which is used to check if a PDF URL is safe.

For more information, see ticket #54261.

Remove role="navigation" from <nav> elements

According to HTML5 documentation, adding role="navigation" to a <nav> element is unnecessary. It should only be added to elements like <div> instead, when using the semantically correct <nav> is not possible.

Historically, role="navigation" was required for 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 to recognize HTML5 element’s native ARIA roles while HTML5 and ARIA were being introduced. With the deprecation of IE11, the role attribute is only required when mapping elements that don’t have native role.

This change removes the navigation role from the following items:

  • All the legacy navigation widgets
  • All the bundled themes from Twenty Eleven to Twenty Twenty-One
  • Functions such as the_posts_pagination(), which go through the _navigation_markup() function in the /wp-includes/link-template.php file.

For more information, see ticket #54054.

New hook in wp_http_validate_url to control which ports are allowed for remote requests

By default, WordPress only allows ports 80, 443, and 8080 to be used for (safe) remote requests. WordPress 5.9 adds a way to remove these hardcoded ports so it is possible to better control which ports are allowed or not.

The http_allowed_safe_ports can be used to control the list of ports considered safe in 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. API, with the following parameters:

  • $allowed_ports: Array of integers for valid ports.
  • $host: Host name of the requested URL.
  • $url: The requested URL.

Usage example:

function wporg_customize_http_allowed_safe_ports( $allowed_ports, $host, $url ) {
	$allowed_ports = array( 80, 81, 443, 444, 8080, 8081 );
	return $allowed_ports;
}
apply_filters( 'http_allowed_safe_ports', 'wporg_customize_http_allowed_safe_ports', 10, 3 );

For more information, see ticket #54331.

New wp_mail_succeeded hook for the wp_mail() function

WordPress 5.9 adds a new wp_mail_succeeded action in wp_mail() after the mail is sent. Please note that the hook’s firing does not necessarily mean the recipient received the mail, only that the mail was processed without any errors.

Usage example:

/*
 * Logs each successful mail operation related to a specific user. 
 */
function wporg_wp_mail_succeeded( $mail_data ) {
	$successful_mail_logs = get_site_option( 'successful_mail_logs', array() );
	if ( 'user@example.org' === $mail_data['to'] ) {
		$successful_mail_logs[] = current_time( 'mysql' );
		update_site_option( 'successful_mail_logs', $successful_mail_logs );
	}
}
add_action( 'wp_mail_succeeded', 'wporg_wp_mail_succeeded', 10, 1 );

For more information, see Trac ticket #53826.

Use global post as the default for wp_get_post_parent_id()

Starting with WordPress 5.9, the $post parameter of wp_get_post_parent_id() is now optional, defaulting to the current global post object when called within the 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..

For more information, see Trac ticket #48358.

Allow wp_register_script() to be called after wp_enqueue_script()

When a plugin registers styles/scripts on wp_enqueue_scripts (as plugin authors are encouraged to do), and conditionally enqueues their script/style on the_content 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., things “just work”. In 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. themes, the_content is run prior to 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. being processed, which results in the above scenario failing.

With WordPress 5.9, the following example will work:

wp_enqueue_script( 'example' );
wp_register_script( 'example' ); 

Before 5.9, the enqueue silently failed (no “doing it wrong” message) and the following register has no impact.

Now, scripts can therefore be enqueued and dequeued (by “handle”) before they are registered.

For more information, see Trac ticket #54529.

get_term() accepts a term ID, instance of WP_Term, or an object (i.e. stdClass as a result of a db query). Starting with WordPress 5.9, functions that use get_term() also now allow for the same data types. This adds consistency, and this change is also removing extra processing code in consuming functions, so it provides better performance.

The following functions were changed accordingly:

  • get_category_feed_link()
  • get_term_feed_link()
  • get_tag_feed_link()
  • get_edit_tag_link()
  • get_edit_term_link()
  • edit_term_link()

For each of consumer of these functions, it is now possible to pass the object instead of the term ID.

For more information, see Trac ticket #50225.


Thanks @sabernhardt for proofreading.

#5-9, #dev-notes

Editor Chat Agenda: 5 January 2021

Facilitator and notetaker: @jorgefilipecosta

This is the agenda for the weekly editor chat scheduled for Wednesday, January 5 2021, 03:00 PM GMT+1.

This meeting is held in the #core-editor channel in the Making 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/..

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

Performance Chat Agenda: 4 January 2022

Here is the agenda for this week’s performance team meeting scheduled for January 4, 2022, at 16:00 UTC.

  • Announcements
  • Focus group updates
    • Images
    • Object caching
    • Site Health
    • Measurement
    • 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/.
  • Infrastructure
  • Open floor

This meeting happens in the #performance channel. To join the meeting, you’ll need an account on the Making WordPress Slack.

#agenda, #meeting, #performance, #performance-chat

A Week in Core – January 3, 2022

Welcome back to a new issue of Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Let’s take a look at what changed on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. between December 27, 2021 and January 3, 2022.

  • 17 commits
  • 21 contributors
  • 34 tickets created
  • 1 tickets reopened
  • 23 tickets closed

The Core team is currently working on the next major release, WordPress 5.9 🛠

Ticketticket Created for both bug reports and feature development on the bug tracker. numbers are based on the Trac timeline for the period above. The following is a summary of commits, organized by component and/or focus.

Code changes

Build/Test Tools

  • Update PHPCompatibilityWP to version 2.1.3 – #54711

Bundled Themes

  • Twenty Twenty-Two: Sync updates from 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 RC 1 – #54318

Coding Standards

  • Use strict comparison in wp-admin/options-reading.php#53359
  • Use strict comparison in wp-admin/options.php#53359

Docs

  • Further corrections and improvements to the inline documentation for wpdb#53399, #54610
  • Miscellaneous inline documentation improvements – #53399

Editor

  • Update wordpress packages for WP 5.9 RC 1 – #54487

External Libraries

  • Update jQuery hoverIntent to version 1.10.2 – #54722, #51812

General

  • Bump the recommended MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. and MariaDB versions in readme.html#41490, #meta5999
  • Happy New Year! 🎄 – Update copyright year to 2022 in license.txt and bundled themes

Login and registration

  • Rename login_language_switcher_args to login_language_dropdown_args#54696
  • Rename two filters related to language dropdown for better consistency – #54696

Plugins

  • Escape 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/ 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 page URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the Plugin Installation modal – #54362

RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.

  • Improve _set_preview for case when autosave is missing – #54708

Tests

  • Add a unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. for the recommended MariaDB version in readme.html#41490
  • Correct the check for the recommended MySQL version in readme.html#41490

Users

  • Use the “Posts” post type general name to contextualize the string used in Users posts count column label – #54712

Props

Thanks to the 21 people who contributed to WordPress Core on Trac last week: @SergeyBiryukov (4), @audrasjb (3), @hellofromTonya (2), @titsmaker (1), @henrywright (1), @dimadin (1), @Presskopp (1), @chintan1896 (1), @JavierCasares (1), @jrf (1), @jdy68 (1), @richtabor (1), @kjellr (1), @faisal03 (1), @Clorith (1), @mukesh27 (1), @kebbet (1), @Mamaduka (1), @walbo (1), @adamsilverstein (1), and @aezazshekh (1).

Congrats and welcome to our new contributor of the week: @titsmaker ♥️

Core committers: @sergeybiryukov (8), @audrasjb (5), @johnbillion (2), @noisysocks (1), and @hellofromtonya (1).

#5-9, #core, #meta5999, #week-in-core

Block themes, a new way to build themes in WordPress 5.9

WordPress 5.9 makes the official introduction to 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. themes in WordPress, which previously required the 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/ 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 to work and prioritizes working with the latest Full Site Editing features. The new default theme, Twenty Twenty-Two, ships with WordPress 5.9 and is the very first default block theme, which makes it a beautiful reference theme to learn from.

If you aren’t ready for a block theme just yet, no worries – classic themes continue to exist and work as always. Keep in mind though that to use the latest and greatest with full site editing, you’ll need to use a block theme, which is tailored to the newest features coming to WordPress. If you’re a theme author, see if you can start to incorporate some of these latest features into your themes, like theme.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 the template editor.

A collection of screenshots featuring the Twenty Twenty-Two theme

Overview

At a high level, block themes use blocks to define the templates that layout and structure your entire site. The new templates and template parts are defined in HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., and use the custom styling offered through theme.json.

After enabling a block theme, a new menu item under Appearance called “Editor (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.)” will show. This editor unlocks the ability to visually edit your homepage, templates, and template parts allowing you to create more of what you want in more places.

Thanks to the new features block themes offer and the ability to edit your content directly, 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. menu is hidden from the dashboard unless you’re using a plugin that requires it. Read this GitHub issue for additional context.

For any current block theme authors, please note that there are new, simplified directory names: The name for the directory containing template files will be templates, and the name for the directory containing template part files will be parts. The block- prefix was dropped from both.

Join the fun and submit your own block theme to the WordPress Theme directory using the full-site-editing 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.). Find the listing of available block themes here: https://wordpress.org/themes/tags/full-site-editing/

Building block themes

This dev notedev 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. cannot cover completely how to build a block theme, but here are some pointers to the documentation and reference to get you started.

First off, WordPress 5.9 ships with a beautiful block theme, TwentyTwentyTwo. Look in your theme directory or browse the GitHub repo to review the source and see what a block theme looks like.

The theme-experiments repository has an Empty Theme that is a good boilerplate to start your first block theme from. There is also a command-line script to help generate a block theme to get you started:

git clone https://github.com/WordPress/theme-experiments
cd theme-experiments
php new-empty-theme.php

Follow the prompts to create your theme and then copy the generated folder to your wp-content/themes directory.

Block theme documentation

Theme blocks

Explore building with Theme blocks a set of special blocks included for full site editing and block themes. Theme blocks are dynamic blocks that pull in content similar to the template tag functions from PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher, for example the Post Title block mirrors the the_title() function.

Here are two examples using theme blocks in a block templates. A singular post template (singular.html) is loaded with the post data, so using a theme blocks can be used stand-alone, for example:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:post-title /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

When using theme blocks on an index or archive page, the theme blocks are used inside a Query 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. and Post Template, for example:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:query {"queryId":1,"query":{"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":""}} -->
   <!-- wp:post-template -->
       <!-- wp:post-title {"isLink":true} /-->
       <!-- wp:post-excerpt /-->
   <!-- /wp:post-template -->
<!-- /wp:query -->

A pattern block can be used to insert translatable content inside a block template, since patterns are PHP-based, there is a mechanism to mark strings for translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. or supply dynamic URLs. See the internationalization documentation


Props to @annezazu for contributing and reviewing this post.

#5-9, #dev-notes

New API to access global settings & styles

Following the introduction of a theme.json API in WordPress 5.8 and its corresponding JavaScript API, WordPress 5.9 comes with a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher public 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 read data from theme.json.

Access to settings & styles

The following new functions give access to the settings and styles keys found in a theme.json:

wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );

where:

  • $path is a list with the path to the speciffic setting, e.g.: array( 'color', 'link' ) returns the setting stored at settings.color.link. If no path is provided, all settings are returned.
  • $context is a named array through which consumers can have a finer-grained control of the data returned:
    • using the block_name key, consumers can access the settings of a particular 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.. For example, array( 'block_name' => 'core/paragraph' ) returns only the settings of the paragraph block.
    • using the origin key, consumers can decide to ignore custom data coming from the user by setting it to base. Otherwise, the data returned will be the result of merging defaults, theme, and custom data.

Some examples:

// Returns all settings
// after merging defaults, theme, and user data.
wp_get_global_settings(); 


// Returns the blockGap setting
// after merging defaults, theme, and user data.
wp_get_global_settings( array( 'spacing', 'blockGap' ) );

// Returns the borderRadius style for the group block
// after merging default, theme, and user data.
wp_get_global_styles(
  array( 'border', 'radius' ),
  array( 'block_name' => 'core/group' )
); 

// Returns the background color for the block paragraph
// after merging defaults and theme data (ignoring user data).
wp_get_global_styles(
  array( 'color', 'background' ),
  array(
    'block_name' => 'core/paragraph',
    'origin'     => 'base',
  )
); 

Access to the resulting stylesheet

Additionally, there’s a function to generate the stylesheet resulting of merging defaults, theme, and custom settings and styles:

wp_get_global_stylesheet( $types = array() );

where $types is a list of the styles to generate. Valid values are:

  • presets, the classes coming from the presets, e.g.: .has-black-color { ... }.
  • styles, the classes coming from the styles section of the theme.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., e.g.: .wp-block-group {...}.
  • variables, the CSSCSS Cascading Style Sheets. Custom Properties coming from the presets and the custom section of the theme.json, e.g.: --wp--preset--duotone--dark-grayscale.

This function also considers whether the theme has theme.json support or not, abstracting that implementation detail from the consumers. By default, all styles are returned if the theme supports theme.json; if it doesn’t, only styles for variables and presets are returned.

Note that this function only takes care of generating the stylesheet string, it doesn’t actually enqueue any styles.


Props to @oandregal for creating this dev notedev 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., it was review and published by me (@mkaz).

#5-9, #dev-notes

Miscellaneous block editor changes in WordPress 5.9

This dev notedev 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. covers updates and changes made to the 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. editors for WordPress 5.9.

Blocks

Post Title

A div wrapper element around the post title in the post editor has been removed to align it better with the post title block. Some theme styles targeting the post title (that include the removed div’s class name) may no longer apply. Please use the wp-block-post-title class to style the post title, which will also style the post title block.

Data Module

batch function

New in the data module, the batch function triggers multiple consecutive actions to one or several data stores without re-rendering the components or notifying any data store subscriber. The store listeners are only notified when the batch callback ends.

This can be a performance improvement in situations when it’s unnecessary to rerender all the components while all the actions haven’t triggered yet. As an example, when typing in the canvas, the block editor generally triggers two actions on each character being typed: one action to update the content of the post and another one to track the current text selection. To avoid unnecessary re-renders that can impact the typing performance we batch these two actions together.

Example:

import { useRegistry } from '@wordpress/data';

function Component() {
  const registry = useRegistry();
  function callback() {
    // This will only rerender the components once. 
    registry.batch( () => { 
      registry.dispatch( someStore ).someAction(); 
      registry.dispatch( someStore ).someOtherAction(); 
    } );
  }

  return <button onClick={ callback }>Click me</button>;
}

Components

ColorPicker

The property onChangeComplete was deprecated to make the component more consistent with the rest of the codebase. Developers should update their code to the onChange property, a function that receives just a string with the color code.

The property onChangeComplete received an object instead of a string. We tried for backward compatibility, and in many cases, onChangeComplete can still be used (although not recommended). The following properties of the object passed to onChangeComplete are still valid hex, rgb, hsv, hsl, source, oldHue. The property color that contained a tinycolor2 color object is no longer valid. Code that relied on the color property must be updated as the property is not present anymore because we removed the tinycolor2 library from the project.


This change should have almost no impact as the ColorPicker component is a very low-level component used to implement the picking of custom colors, this component, although useful internally, is not particularly useful to outside 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. Therefore, code that uses the higher level and useful components like ColorPalette or PanelColorGradientSettingsdoes do not require updates related to this change.

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

The properties in the editor.PostTaxonomyType filter is no longer passed a value other than slug.

These following properties are no longer available debouncedSpeak, hasAssignAction, hasCreateAction, instanceId, onUpdateTerms, speak, taxonomy, and terms. To retrieve these values use the hook useSelect.

For example:

import { addFilter } from '@wordpress/hooks';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';

const myEditorPostTaxonomiesFilter = ( OriginalComponent ) => {
    return ( props ) => {
        const { slug } = props;
        const { taxonomy, terms } = useSelect( ( select ) => {
            const { getEditedPostAttribute } = select( editorStore );
            const { getTaxonomy } = select( coreStore );

            const _taxonomy = getTaxonomy( slug );

            return {
                taxonomy: _taxonomy,
                terms: _taxonomy
                    ? getEditedPostAttribute( taxonomy.rest_base )
                    : [],
            };
        } );

        return <MyPostTaxonomyType terms={ terms } taxonomy={ taxonomy } />;
    };
};

addFilter(
    'editor.PostTaxonomyType',
    'myFilter/my-editor-post-taxonomies-filter',
    myEditorPostTaxonomiesFilter
);

Props to @youknowriad, @jorgefilipecosta, @toro_unit, and @ellatrix for contributions to this post.

#5-9, #core-editor, #dev-notes

Proposal: Approving Block Pattern Directory Submissions

Happy new year, everyone!

The 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. Pattern Directory will soon be live and ready to accept custom Block Pattern submissions! In anticipation of this new directory, questions have been raised around best practices for submitted Block Patterns.

To help encourage contributors to submit Block Patterns, I propose that some basic automated checks, along with spam filters, are implemented. These automated checks could be modeled after what the Plugins team has in place to avoid naming confusion, trademarks, etc. As long as a submitted Block Pattern passes these checks, it will be published immediately. Of course, if a Block Pattern passes the automated check, but includes inadvisable content (for example, an inappropriate image), it can be flagged for manual review.

If you have any concerns, questions, or thoughts about this proposal, please leave your thoughts in the comments by next Friday, January 14, 2022.

Enhanced lazy-loading performance in 5.9

Lazy-loading images was introduced in WordPress 5.5 and later expanded to also cover iframes in WordPress 5.7. In the upcoming WordPress 5.9 release, the implementation for both has received some fine tuning to improve performance.

A performance analysis from mid-2021 had discovered that the lazy-loading implementation from WordPress had been causing a slight performance regression in the Largest Contentful Paint metric (LCP). As outlined in the referenced post, the reason for that was that images and iframes in the initial viewport would be marked to lazy-load them, since the WordPress implementation would mark nearly all images with loading="lazy". The aforementioned post then further explains that this can be improved by skipping addition of loading="lazy" for the first content image or iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser., which in the vast majority of cases will appear within the initial viewport. WordPress can only make educated guesses around that and not be 100% certain, but an analysis taking into account 50 popular themes showed that the enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. brought LCP improvements across the board, up to 30% faster page load. WordPress 5.9 now comes with this refinement implemented, leading to the corresponding enhanced LCP performance.

How it works

So far, fine tuning which images and iframes should be lazy-loaded or not has been possible using the wp_img_tag_add_loading_attr and wp_iframe_tag_add_loading_attr filters, and these are still available as before. However, to improve the performance out-of-the-box without requiring a developer to customize the behavior, WordPress will now skip the very first “content image or iframe” on the page from being lazy-loaded. The term “content image or iframe” here denotes any image or iframe that is found within content of any post in the current main query 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. as well any featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. of such a post. This applies to both “singular” and “archive” content: In a “singular” context the first image or iframe of the (only) post is not lazy-loaded, while in an “archive” context the first image or iframe of the first post in the query is not lazy-loaded.

Customizing the behavior

The approach of not lazy-loading the first content image or iframe enhances LCP performance correctly for the majority of themes, which use a single-column layout for post content. For themes with alternative layouts such as multi-column, a new wp_omit_loading_attr_threshold 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. is now available and can be used to change how many of the first images/iframes should be skipped from being lazy-loaded – per the above, the default is 1. It is recommended for theme authors to use this filter in cases where based on the layout it is likely to have more than one content image/iframe in the initial viewport.

For example, a theme that uses a three-column grid of posts in its archives could leverage the filter to override the threshold to 3 on archive pages, which would then result in the first three content images/iframes not being lazy-loaded. The following code snippet illustrates what that could look like:

function skip_lazyloading_on_first_three_archive_images( $omit_threshold ) {
    if ( is_home() || is_archive() ) {
        return 3;
    }
    return $omit_threshold;
}
add_filter( 'wp_omit_loading_attr_threshold', 'skip_lazyloading_on_first_three_archive_images' );

The refinement of the lazy-loading implementation should notably improve LCP performance for most sites that rely on it, while not having adverse effects for sites where the default heuristics described above do not apply to. That is only a solid starting point though. In the future, specifically with the more semantic content specification that 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.-based themes will facilitate, we will be able to further fine tune the lazy-loading implementation by using the available block information.

For more background information on the changes described above, see #53675.

Props to @adamsilverstein and @audrasjb for review and proofreading.

#5-9, #dev-notes, #feature-lazyloading, #performance