Bundled theme updates with WordPress 5.9

Besides creating the Twenty Twenty-Two theme, 30 tickets related to existing bundled themes have been closed as fixed during this 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. cycle. Below are some of the significant changes.

When a page is set as the site’s Privacy Policy, a link to it is now automatically added to the footer in both Twenty Twenty and Twenty Twenty-One.

Privacy Policy link displays below copyright on smaller screens
Twenty Twenty (600 pixels wide)
Privacy Policy link displays below site title on smaller screens
Twenty Twenty-One (600 pixels wide)

With Twenty Twenty, the “Powered by WordPress” link displays on screens 1,000 pixels or wider. This had shown at the 700-pixel breakpoint, but the change helps reduce the possibility that footer content wraps across two lines.

Privacy Policy link displays between copyright and powered-by link on larger screens in Twenty Twenty
Twenty Twenty (1200 pixels wide)
Privacy Policy link displays beside the powered-by link on larger screens in Twenty Twenty-One
Twenty Twenty-One (1200 pixels wide)

TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #53446 (Twenty Twenty) and #53445 (Twenty Twenty-One)

These themes had used the WhatsApp icon for links in the social navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. that include the whatsapp.com domain. Now the icon also appears for links with the preferred wa.me domain.

WhatsApp icon in Twenty Seventeen social navigation
Twenty Seventeen
WhatsApp icon in Twenty Twenty social navigation
Twenty Twenty

Trac tickets: #51946 (Twenty Seventeen) and #50542 (Twenty Twenty)

Comment form required fields

When logged in, Twenty Nineteen and Twenty Twenty-One now have the default logged-in-as links and required fields message:

Logged in as [username]. Log out? Required fields are marked *

Comment form lacked required fields message in Twenty Nineteen
Twenty Nineteen
Required fields message will be included in Twenty Nineteen
Twenty Nineteen
(with links and message)
Comment form lacked required fields message in Twenty Twenty-One
Twenty Twenty-One
Required fields message will be included in Twenty Twenty-One
Twenty Twenty-One
(with links and message)

Improving required field indicator styling

In previous versions of Twenty Eleven, the star character to signify required comment form fields could overlap the text in some languages. In addition to removing the absolute positioning that caused the overlap, this revision makes the star’s styling more consistent between the input labels and the comment notes paragraph.

Comment field was not marked as required
Logged in, before
Comment field is required, with red indicator in Comment label and required fields message
Logged in, after
Comment field was not marked as required, but Name and Email fields had red indicator
Logged out, before
Comment field is marked as required, and all indicators are red
Logged out, after

Trac tickets: #54392 (Twenty Nineteen and Twenty Twenty-One) and #54408 (Twenty Eleven)

Additional updates for Twenty Seventeen

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 alternative text

The header image’s alternative text is customizable with WordPress 5.9, and the default alt attribute is empty instead of the site title. If the image conveys meaning to people who do not see it, you can go to the Media Library—after uploading and assigning it as the header image—and compose the alternative text there. (Writing alt text within the upload dialog does not yet save to the new image.)

RSS 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. icon position

In right-to-left languages, the legacy RSS widget (with Classic Widgets) now positions the feed icon on the left side of the feed title. In other languages, the icon has floated to the right side, and this change mirrors that layout.

RSS feed icon floats to the left for right-to-left languages

Trac tickets: #46124 (header image) and #52224 (RSS widget)

Since the first version of Twenty Twenty-One, the feed icon beside the classic/legacy RSS widget title has been hidden, which resulted in an invisible link.

Using the rss_widget_feed_link 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. introduced in WordPress 5.9, the theme disables the output of the icon and its link. The visible text heading (the feed title) is still linked.

Trac ticketticket Created for both bug reports and feature development on the bug tracker.: #52880

Removing 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) landmark role attributes

With modern browsers, 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 does not require attributes such as role="navigation" to recognize several HTML5 elements’ native ARIA role. The role attribute is only necessary when an element does not have a native role.

These native roles have been removed from bundled themes:

  • role="banner" for <header> elements
  • role="navigation" for <nav> elements
  • role="main" for <main> elements
  • role="contentinfo" for most <footer> elements
  • role="complementary" for <aside> elements

Note: Twenty Twelve continues to include <footer role="contentinfo"> to maintain the styling, particularly if a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. edits the markup but uses the original stylesheet’s selectors.

Trac tickets: #54054 (navigation) and #54079 (other roles)

When clicking “Continue reading” or “Skip to content” links, a header fixed to the top of the page can cover where that content starts. Likewise, the border for Twenty Sixteen needs a slight offset.

WordPress 5.9 includes a --wp-admin--admin-bar--height CSSCSS Cascading Style Sheets. variable and uses scroll padding to compensate for the adminadmin (and super admin) toolbar when it shows. Now, three bundled themes add the height of their headers to that offset value:

  • Twenty Fourteen (48 pixels)
  • Twenty Sixteen (21 pixels)
  • Twenty Seventeen (72 pixels)

Twenty Fourteen had a solution for the “Read more” links, which is now replaced by the more thorough option.

Trac tickets: #46371 (scroll padding for anchor links) and #52623 (CSS variable)

Thanks @audrasjb and @annezazu for reviewing.

#5-9, #bundled-theme, #dev-notes