Twenty Twenty-One, Twenty Twenty, and Twenty Seventeen updates now available

New versions for the Twenty Twenty-One, Twenty Twenty, and Twenty Seventeen default themes are now available for download. If your site has enabled auto-updates for these themes, you should be receiving the updates shortly. The new versions are as follows:

  • Twenty Seventeen: 3.5
  • Twenty Twenty: 2.5
  • Twenty Twenty-One: 2.1

These updates revert a recent change from using false !== strpos( ... ) in favor of the newer native str_contains() PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher function made in [55988], and released in coordination with WordPress 6.3 in August 2023.

While this is a desirable change overall, str_contains() is only available in PHP >= 8.0. To help modernize the code base, a polyfill was merged into WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. in [52039] and first released as a part of WordPress 5.9. Because all three of these themes work with versions of WordPress earlier than 5.9, any site running WordPress < 5.9 could run into fatal PHP errors.

To find more information on this change, check out #60241 on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress..

Special thanks goes out to all of the contributors that helped with this release.

Aaron Jorbin, Carolina Poena, Sergey Biryukov and Stephen Bernhardt.

Props @jeffpaul for pre-publication review.

#bundled-theme

Default Theme chat summary: September 6, 2023

This post summarizes the latest weekly Default Theme meeting (agenda, slack transcript), held in the #core-themes 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/. channel, on Wednesday, september 6th 2023 at 3pm UTC.

Announcements

Twenty Twenty-Four introduction post: https://make.wordpress.org/core/2023/08/24/introducing-twenty-twenty-four/

Housekeeping and updates

  • Most patterns are in the theme, but need polish
  • Over 40 contributors so far

Changes in the editor are needed for the default theme. Please check out the list of issues and PRs relevant to TT4 and see if you can help in any way.

Open Floor

@colorful-tones proposed adding clarification for contributors to add the new define( ‘WP_DEVELOPMENT_MODE’, ‘theme’ ); in their wp-config.php. Will open a PR for the theme’s README

Translations will happen later on because it is hard to keep updating patterns and then making sure the translations functions persist when copy/pasting 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. markup from editor into files.

@maneshtimilsina pointed out that there are some issues with new lines, non-uniform spaces/tabs, which can be verified with linting. It exists in the repo. We’ll wait and do this as part of the overall cleanup later on.

@onemaggie is prioritizing getting patterns merged

It would be helpful for someone to do a walk-through of how to modify a pattern in the Site Editor, which could help onboard contributors (and be used in future default themes going forward).

Reminder: contributing to the theme is not just adding patterns or designing things, but documentation and triaging communication and GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ issues/PRs is invaluable work too.

Props to @colorful-tones for helping with creating this post.

#6-4 #bundled-theme #core-themes #summary #twenty-twenty-four

Default Theme Chat Agenda: September 6th, 2023

This is the agenda for the weekly Default Theme chat scheduled for Sep 6th, 2023, 3pm UTC.

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

  • Topics
    • Housekeeping and updates
    • Changes in the editor needed for the default theme.
  • Open Floor

#6-4 #agenda #bundled-theme #core-themes #twenty-twenty-four

Default Theme chat summary: August 30th, 2023

This post summarizes the latest weekly Default Theme meeting (agenda, slack transcript), held in the #core-themes 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/. channel, on Wednesday, August 30th 2023 at 3pm UTC.

Announcements

  • This meeting is aimed at the work around the next default theme Twenty Twenty-Four, which will be released with WordPress 6.4 in November. Please keep the topic on the theme!
  • We set the meeting time to Wednesday, 3pm UTC. In the agenda, the meeting time will be noted with the automatic timezone conversion. The meetings happen weekly and may be switched to bi-weekly if we’re closer to the release.
  • The next default theme has been introduced last week: Introduction to Twenty Twenty-Four
  • How you can contribute:
    • The work on TT4 will happen in this GithubGitHub GitHub is a website that offers online implementation of git repositories that 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/ repository: https://github.com/WordPress/twentytwentyfour
    • Please read through the readme file carefully, as it contains important information on how to get started.
    • If you want to contribute, check out the open issues and Pull Requests first, to see if your topic has been addressed already. If not, feel free to open an issue!
    • It would be fantastic if you can link a created PR to an issue, so it’s easier to keep track of things.

Open Floor

@maneshtimilsina mentioned contributers get confused about using esc_html__ or esc_html_x_ functions in patterns for translations.

  • Resource to translation documentation: https://developer.wordpress.org/apis/internationalization/internationalization-functions/
  • Resource to esc_html__ documentation: https://developer.wordpress.org/reference/functions/esc_html__/
  • Resource to esc_html_x documentation: https://developer.wordpress.org/reference/functions/esc_html_x/
  • Discussion summary:
    • Patterns should be checked if they use the correct functions
    • Any sample text should be commented that this is sample text, using the esc_html_x function
    • Any strings that may need further explanation to be correctly translated also need comments
    • Check on previous default themes for similar strings to see how it was handled there

@maneshtimilsina mentioned that there’s confusion about the home.php file, which contains multiple patterns

  • The patterns should be extracted into smaller components, which then possibly make home.php not needed anymore.

@kafleg mentioned the backlog of open PRs regarding patterns in the repository.

  • These will be taken care of this week.

@poena asked about the status of pattern categories and pattern switching for 6.4, and if this will work with non synced patterns

  • It seems this has not yet been discussed, an issue needs to be created to start a discussion around this topic

#6-4 #bundled-theme #core-themes #summary #twenty-twenty-four

Default Theme Chat Agenda: August 30th, 2023

This is the agenda for the weekly Default Theme chat scheduled for Aug 30, 2023 3pm UTC.

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

Props to @poena for helping with creating this post.

#6-4 #agenda #bundled-theme #core-themes #twenty-twenty-four

Bundled themes dropping Internet Explorer scripts and styles

Due to very low traffic from Internet Explorer users, and because WordPress no longer supports this obsolete browser, default themes have removed some IE-specific scripts and styles to give everyone else a better experience.

Most default themes had a skip-link focus fix script for navigating by keyboard in Internet Explorer and old versions of Chrome. As of WordPress 6.3, Twenty Thirteen and Twenty Fourteen no longer include it in their functions.js files, and the six themes from Twenty Fifteen to Twenty Twenty-One do not enqueue or print the script.

In addition, special stylesheets and the HTML5 Shiv script are not enqueued or included in the header.php template for three themes:

  • Twenty Thirteen (its conditional code is also removed)
  • Twenty Fifteen
  • Twenty Seventeen

Future versions of Twenty Eleven, Twenty Twelve, Twenty Fourteen and Twenty Sixteen may remove their special styles and conditional code too.

What if I want to continue supporting Internet Explorer?

Twenty Thirteen users can add a minified version of the script found in later themes:

function wpdocs_twentythirteen_add_skip_link_fix_inline() {
	wp_add_inline_script(
		'twentythirteen-script',
		'/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);'
	);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentythirteen_add_skip_link_fix_inline', 11 );

Twenty Fourteen would need an adjustment for the fixed 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.:

function wpdocs_twentyfourteen_add_skip_link_fix_inline() {
	wp_add_inline_script(
		'twentyfourteen-script',
		'/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus(),window.scrollBy(0,-80))},!1);'
	);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyfourteen_add_skip_link_fix_inline', 11 );

Enqueue the theme’s script for Twenty Fifteen, Twenty Sixteen or Twenty Seventeen:

function wpdocs_twentyseventeen_add_skip_link_fix() {
	wp_enqueue_script( 'twentyseventeen-skip-link-focus-fix' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyseventeen_add_skip_link_fix' );

Add the theme’s function to the wp_print_footer_scripts action for Twenty Nineteen, Twenty Twenty or Twenty Twenty-One:

add_action( 'wp_print_footer_scripts', 'twenty_twenty_one_skip_link_focus_fix' );

Restoring conditional code, styles and scripts

Sites may have been severely broken when using old versions of Internet Explorer, even with the HTML5 Shiv script and IE-specific styles, but you could add them again.

If you have 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/. of Twenty Thirteen, you can ensure it has a header.php template that includes the conditional code and HTML5 script from previous versions of the theme. Then you could enqueue the styles in the child theme functions (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).

function wpdocs_twentythirteen_ie_restore() {
	wp_enqueue_style( 'twentythirteen-ie' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentythirteen_ie_restore' );

For Twenty Fifteen, you could enqueue the two IE stylesheets. If a child theme does not already have the HTML5 script in a header.php template, the same function could enqueue that too.

function wpdocs_twentyfifteen_ie_restore() {
	// Enqueue stylesheets.
	wp_enqueue_style( 'twentyfifteen-ie' );
	wp_enqueue_style( 'twentyfifteen-ie7' );

	// If the header template does not have the HTML5 script already, enqueue it.
	wp_enqueue_script(
		'twentyfifteen-html5',
		get_template_directory_uri() . '/js/html5.js',
		array(),
		'3.7.0',
		false
	);
	wp_script_add_data( 'twentyfifteen-html5', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyfifteen_ie_restore' );

With Twenty Seventeen, both the style and script can be enqueued.

function wpdocs_twentyseventeen_ie_restore() {
	wp_enqueue_style( 'twentyseventeen-ie8' );
	wp_enqueue_script( 'html5' );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_twentyseventeen_ie_restore' );

For more details, see TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets #54421 and #56699.

Props to @westonruter and @joedolson for technical review, to @stevenlinx and @audrasjb for review.

#6-3, #bundled-theme, #core-themes, #dev-notes, #dev-notes6-3

Proposal: Retiring Older Default Themes

Since 2010, WordPress has released a new default theme every year but one. Each default theme (though sometimes stylistically opinionated) is meant to provide a solid and flexible foundation that site owners can use to build out their new WordPress site.

Though only the three most recent bundled themes are included in new WordPress installs, all 13 of the default “Twenty” themes are currently actively maintained. The level of effort to support 13 themes is not insignificant, especially in the times of the rapidly evolving 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. editor. The burden of maintaining these themes has historically fallen on the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. team to ensure they continue to receive any needed updates.

Because there are so many, it’s not uncommon for it to take several months before older default themes properly support newer features added in WordPress Core. Additionally, themes created prior to the existence of certain APIs are often unable to fully take advantage of these new features (global styles, block patterns, etc.).

Trimming the number of default themes actively supported will allow contributors to be more effective at providing the best possible experience in modern WordPress through the block editor for sites using newer default themes. It also helps clear the path for work on new block theme-focused experiments and initiatives (such as the Community Themes Initiative) attempting to refine the role that themes will have in the block editor era.

This post summarizes the current state of bundled themes in WordPress before proposing new support states for bundled themes, as well as two potential ways to decrease the total number of themes receiving regular updates.

Documentation and Data

Before proposing any changes to the bundled theme support policy, it’s important to fully document the current state of bundled themes, how they are maintained, and the bundled theme life cycle (which can roughly be divided into three stages).

Bundled Theme Life Cycle

  1. Build Out: Once per year, a new default theme is announced and planned in coordination with a major version of WordPress (typically the final one of the calendar year). A small team of contributors build each theme out on GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ over the course of 1-3 months before it’s merged into the WordPress Core SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. code base for release and future maintenance.
  2. Active Default Theme: The theme is released with the next major version of WordPress where it receives its time in the spotlight being activated as the default for all new sites. The original theme authors typically continue to work on improving the theme and fixing bugs during this stage. Active default themes are usually the first bundled theme to receive support for new features added to Core. Every effort is made to ensure full support when the next version of WP is released within reason and where appropriate. The active default theme ideally shows the full capability of what WordPress can do.
    Note: “active” default theme is currently not an officially recognized designation.
  3. Maintenance: The next default theme is built and merged into Core and activated for new sites. The previous theme continues to be maintained, but those involved with creating it often are not able to keep up with maintaining it long term, or are assigned to other projects and initiatives. Bundled Theme component maintainers and other Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. become almost entirely responsible for maintaining the theme, in addition to all others that came before it.

Defining Maintenance

Maintenance means many things in different contexts. Here is an incomplete list of typical maintenance currently required by and performed on bundled themes in no particular order:

  • Ensuring compatibility with new versions of PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher.
  • Fixing reported bugs.
  • Adjustments to code utilizing pre-existing WordPress APIs and functions to prevent additional bugs.
  • Deprecations related to jQuery and other 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/. Library updates.
  • Utilizing new functions, APIs, or best practices as necessary.
  • Changes required to adhere to new and more modern web standards and requirements.
  • Adding support for new features in the block editor and throughout Core.
  • Updating npm dependencies and build scripts.
  • Security updates.
  • Curating changelog updates.
  • Bundling, testing, and pushing releases to the theme directory.

Along with these maintenance tasks, there are some factors that need to be considered and make 

  • When themes are built, they target support for specific browsers and versions. This does not change over time and the support policy is “locked in” for the life of the theme. As an example, older bundled themes likely still contain code that specifically targets IE6-9. It’s usually not worth the effort and risk to remove this code because it’s impossible to anticipate the impact in the wild, especially for any child themes that have been created.
  • The minimum version of WordPress required for default theme when released is set to the version of WordPress it is initially released with and does not change. As an example, Twenty Ten still technically supports back to WordPress 3.0.
  • Shipping patterns in themes that support WordPress 5.0 and up is particularly complicated since valid block syntax changes over time (see #53617 for an example).
  • Adding support for new features is not always straightforward and takes a substantial amount of time to test, especially for older themes (see #56487 for an example).

Current Default Theme Usage

Another important factor to consider before making any changes to a support policy is overall usage. Here is a rough breakdown of the active install counts for the “Twenty” default themes (according to 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/) as of April 26, 2023 (note: this does not include sites running child themes of any “Twenty” themes):

  • Twenty Ten: 90,000+ installs (~0.3%)
  • Twenty Eleven: 100,000+ installs (~0.4%)
  • Twenty Twelve: 90,000+ installs (~0.3%)
  • Twenty Thirteen: 50,000+ installs (~0.2%)
  • Twenty Fourteen: 100,000+ installs (~0.35%)
  • Twenty Fifteen: 100,000+ installs (~0.45%)
  • Twenty Sixteen: 100,000+ installs (~0.7%)
  • Twenty Seventeen: 700,000+ installs (~2.5%)
  • Twenty Nineteen: 200,000+ installs (~1%)
  • Twenty Twenty: 600,000+ installs (~2%)
  • Twenty Twenty-One: 800,000+ installs (~3%)
  • Twenty Twenty-Two: 800,000+ installs (~3%)
  • Twenty Twenty-Three: 1M+ installs (~3.5%)

Some interesting findings:

  • Twenty Thirteen is the least used default theme at roughly 50,000 installs (0.2%).
  • Twenty Fifteen and older are all active on less than 0.5% of all WordPress sites each. Cumulatively they account for slightly more than 2% of all sites.
  • Twenty Sixteen and older all have less than 1% of all installs.
  • Twenty Twenty-Three is currently the most used default theme active on 1M+ sites.
  • Twenty Twenty through Twenty Twenty-Three all have roughly 2% of all sites or more each, cumulatively accounting for nearly 12% of all sites.
  • Twenty Seventeen through Twenty Twenty-Three accounts for 15% of all sites.

Defining and clarifying the different default theme states

This proposal is also a good opportunity to refine and clarify what the different states of bundled themes are before deciding if any default themes should be retired. Currently, there is only “actively maintained”. In order to retire older themes, there needs to be a new retired state defined. It would also help to have an intermediary state (similar to long-term support or LTS) where some support and maintenance is performed, but not all.

Actively supported state

This state is for all themes included with new WordPress installs (three most recent). Ensuring the themes in this state are fully compatible with the latest version of WordPress when released is top priority. Themes in this state will receive:

  • All types of bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.
  • All types of compatibility fixes (PHP, WP, etc.).
  • Support for all new features added to WordPress (when they are relevant).
  • Security updates.
  • Changes to utilize new functions or APIs.
  • Changes to adhere to best practices or modern web standards.

Maintained state

This state is for all themes that have not yet met the requirements for retirement but are no longer included with new WordPress installs. Themes in this state will receive:

  • All types of bug fixes.
  • All types of compatibility fixes (PHP, WP, etc.).
  • Security updates.

Retired theme state

These themes have met the requirements for retirement and are no longer actively maintained. Themes in this state will receive:

  • No new enhancements, features, or bug fixes.
  • Security updates.

In addition, the “Tested up to:” value will no longer be updated with each WordPress release. Any tickets currently open on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. for a theme being placed in the retired state will be scrubbed and closed. 

Retiring older bundled themes

Regardless of which methodology is used to identify when themes should be retired, the following points should be considered:

  • Policies can always be altered as themes and WordPress continue to evolve. What constitutes a theme currently evolving being re-explored. Any support policy set after discussion can always be revisited in the future with new context.
  • A review of the actively supported themes will be conducted annually. After a new default theme is built and released, the list of default themes will be reviewed using the criteria chosen from this proposal. When a theme qualifies for retirement, a proposal will be made on the Making WordPress blogblog (versus network, site). Barring any compelling evidence that the theme should continue to remain in maintenance state, the open tickets for it will be scrubbed and closed appropriately and the theme will be retired after the next major WordPress release.

Proposed Criteria for retiring bundled themes

The following criteria is proposed as the requirements to retire a bundled theme:

  • Themes must be supported for a minimum of 5 years. Even if a bundled theme is not widely used, it must be actively supported for at least 5 years.
  • Themes must be active on fewer than 1% of all WordPress sites (as determined by WordPress.org data).

Themes that would be retired today with this criteria:

  • Twenty Ten
  • Twenty Eleven
  • Twenty Twelve
  • Twenty Thirteen
  • Twenty Fourteen
  • Twenty Fifteen
  • Twenty Sixteen

Themes that would be moved to maintained status

  • Twenty Seventeen
  • Twenty Nineteen
  • Twenty Twenty

Themes that are actively maintained (currently shipped with WordPress)

  • Twenty Twenty-One
  • Twenty Twenty-Two
  • Twenty Twenty-Three

This proposal uses a minimum percentage of active installs as the criteria for retiring default themes.

While percentages like 1% may seem low, it’s important to call out that when applied to WordPress installs, even 1% equates to a few hundred thousand sites. As more new WordPress sites are created and this number is greater, the policy can be revisited and altered if necessary (see above).

Pros

  • Brings the number of actively supported themes from 13 to 6.
  • Drops support for themes with an outdated aesthetic (less emphasis on visual elements, content visually “contained” within a boxed layout, etc.).
  • Results in both fully block-based themes (2) and some classic-style themes (4) being actively supported or maintained.
  • Establishes a clear criteria for an annual review going forward.
  • Reduces the maintenance burden for 3 themes by refining what it means to be maintained vs. actively maintained.

Cons

  • A non-zero number of WordPress sites currently use these themes (roughly 730,000).

Conclusion

This post presents a thoroughly refined recommendation as a result of feedback from several contributors listed below. However, it is only a proposal and is not concrete. Adjustments can be made to this proposal based on feedback from contributors in the comments below. If you have any thoughts, please do leave them below!

Unless there is a need to republish a modified version of this proposal for further feedback, after a consensus is reached and any needed approval from leadership to implement this proposal is received, the following action items would need to be addressed:

  • The Making WordPress Core handbook should be updated in the appropriate places to outline the annual process to review for retirement candidates.
  • Contributors should scrub all tickets for themes being retired and either close them out with a message why, or complete them before the theme retirement date.
  • A post on WordPress.org/news announcing the retirement of any themes being retired and clarifying what that means.
  • Any other action items identified while discussing this proposal.

Props @jeffpaul, @flixos90, @poena, @annezazu, @jorbin, @chanthaboune, @joemcgill, @azaozz for contributing to this post through providing feedback and proof reading.

#bundled-theme, #themes

Google Fonts are included locally in bundled themes

Due to privacy concerns, the themes from Twenty Twelve to Twenty Seventeen will not fetch their fonts from Google addresses, starting with the next version.

Twenty Twelve3.9
Twenty Thirteen3.8
Twenty Fourteen3.6
Twenty Fifteen3.4
Twenty Sixteen2.9
Twenty Seventeen3.2


Each theme would serve a new stylesheet from the theme directory, under the site’s domain. With multiple fonts, Twenty Thirteen creates a reference like this:

<link rel='stylesheet' id='twentythirteen-fonts-css' href='https://example.com/wp-content/themes/twentythirteen/fonts/source-sans-pro-plus-bitter.css?ver=20230328' media='all' />

If you have edited or removed the font stylesheet in 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/. or 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, please verify that your site will work properly with this change.

Language support

When a language has disabled certain custom fonts, the stylesheet should continue to respect that setting.

Google Fonts had offered all character sets, ignoring any specified in the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org, so the new styles for all six themes likewise gather the font files for any character sets. Modern browsers select only the sets they need for the page.

Developers may still choose only certain character subsets, either to create a reduced stylesheet or to use in a preload resource hint. Creating an array of language codes could help, mapping them to their script families.

Fixing the editor style within a custom theme-setup function

Twenty Fourteen, Twenty Fifteen and Twenty Sixteen have allowed custom overrides to their setup functions in a child theme.

  • twentyfourteen_setup()
  • twentyfifteen_setup()
  • twentysixteen_setup()

For 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. editor, the new font stylesheet URL needs to be relative in the add_editor_style() function, or else it would try fetching fonts from a nonexistent wp-admin URL. If a child theme replaces the setup function, it should remove the theme directory before including the fonts in the editor style array. Twenty Fourteen has this (arranged in fewer lines):

$font_stylesheet = str_replace(
	array(
		get_template_directory_uri() . '/',
		get_stylesheet_directory_uri() . '/'
	),
	'',
	twentyfourteen_font_url()
);
add_editor_style(
	array(
		'css/editor-style.css',
		$font_stylesheet,
		'genericons/genericons.css'
	)
);

Removing the font stylesheet

Twenty Fifteen and Twenty Sixteen have allowed replacing the font stylesheet since their debut, and the upcoming versions of the other four themes will enable the same. (Previous versions of those four would cause an error by declaring the function twice.)

To remove the font stylesheet and use system fonts, you could return an empty string in the child theme’s functions.php.

function twentyfifteen_fonts_url() {
	return '';
}

To protect against errors in older versions of Twenty Twelve, Twenty Thirteen, Twenty Fourteen or Twenty Seventeen, the child theme could establish a minimum version for the parent theme before declaring the function.

if ( version_compare( wp_get_theme( 'twentythirteen' )->get( 'Version' ), '3.8', '>=' ) ) {
	function twentythirteen_fonts_url() {
		return '';
	}
}

Including a custom set of fonts in the child theme

A child theme could include a different set of fonts and its own stylesheet. For example, a site that needs additional weights and styles for Montserrat—but does not use Twenty Sixteen’s other fonts—could have this in its functions.php:

function twentysixteen_fonts_url() {
	return get_stylesheet_directory_uri() . '/fonts/montserrat-all.css';
}

Classic Editor would require special considerations for the new URL:

  1. The above example uses '/fonts/montserrat-all.css' because Twenty Sixteen has '/fonts/montserrat.css' in its directory. If the child theme’s filename and directory match a stylesheet in the parent theme, the editor would fetch both stylesheets. Child themes that already have a font stylesheet with the same name and directory could use the mce_css 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. to remove the extra file.
  2. If the child theme font URL includes a version query string, whether hardcoding ver=1.0 or using add_query_arg(), Classic Editor would ignore the entire stylesheet. If the version is important on the front end, the function could add the parameter only when it is not an administration page.

Child themes also could build similar stylesheets to override choices in the parent font stylesheet. If you want to extend the time limit for fonts to load and replace system fonts, you could change the font-display property to swap and refer to the parent theme’s font files within your theme’s stylesheet.

/* montserrat-latin-400-normal */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	/* Go up two levels if this stylesheet is at '/fonts/montserrat-all.css' in the child theme. */
	src:
		url('../../twentysixteen/fonts/montserrat/montserrat-latin-400-normal.woff2?ver=25') format('woff2'),
		url('../../twentysixteen/fonts/montserrat/montserrat-all-400-normal.woff?ver=25') format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Adjusting the query string

If you amended parameters in the Google Fonts URL with add_query_arg or remove_query_arg, those adjustments would not have the desired effect anymore.

Without a child theme, the default stylesheet can be replaced within a plugin:

function wpdocs_replace_twentyseventeen_font_stylesheet( $src, $handle ) {
	if ( 'twentyseventeen-fonts' === $handle ) {
		$src = plugins_url( '/css/new-font.css', __FILE__ );
	}
	return $src;
}
add_filter( 'style_loader_src', 'wpdocs_replace_twentyseventeen_font_stylesheet', 10, 2 );

// Adjust for Classic Editor, too.
function wpdocs_replace_twentyseventeen_font_for_classic_editor( $mce_css ) {
	if ( ! empty( twentyseventeen_fonts_url() ) ) {
		$mce_css = str_replace(
			twentyseventeen_fonts_url(),
			plugins_url( '/css/new-font.css', __FILE__ ),
			$mce_css
		);
	}
	return $mce_css;
}
add_filter( 'mce_css', 'wpdocs_replace_twentyseventeen_font_for_classic_editor', 11 );

Continuing to use Google Fonts

If you created a custom Google Fonts URL and you do not need to change it to meet privacy laws, you may want to restore the preconnect resource hint filter. A PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher comment disables it, but either a child theme or a plugin can add the filter again. Each theme has its own filter callback name:

add_filter( 'wp_resource_hints', 'twentytwelve_resource_hints', 10, 2 );

For more information, please see ticketticket Created for both bug reports and feature development on the bug tracker. #55985.

Props to @audrasjb for help with the title, @milana_cap for formatting help, @bph for review.

#6-2, #bundled-theme, #core-privacy, #core-themes, #dev-notes, #dev-notes-6-2

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
(before)
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
(before)
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

Twenty Twenty-Two Chat Summary — 11 Oct 2021

In #core-themes, full transcript starts here. I (@jffng) facilitated the meeting. It was the first one!

Building TT2 for Full Site Editing

We discussed the approach to the theme’s development, which is developing this as a 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. theme and fixing as much in 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/ as possible. One of the goals is for the theme to have as little CSSCSS Cascading Style Sheets. and PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher as possible.

Our current development focuses are two-fold:

  1. Identifying the gaps / blockers in Gutenberg. There is an overview issue tracking what’s needed on the Gutenberg side: https://github.com/WordPress/twentytwentytwo/issues/75 We could use help testing various blocks and filing issues whenever they’re not looking or working as expected.
  2. Block patterns coming soon, @kjellr is leading that effort. We could use help with PR reviews and testing as those become available, follow along using this 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.).

Meeting Cadence

We plan to do meetings once a week at this time (Mondays, 15 UTC), aiming to keep them around 30 minutes as to be respectful of folks time and focus on async for inclusivity.

Open Floor Q&A

  • How do we decide what needs to be worked on?
    • Ideally everything that’s being worked on has an issue — so if you find something that needs fixing, please open an issue for it, and then work on a PR.
    • Keep an eye on the github milestones
  • Is there a mechanism for collaborating on an issue?
    • Comment on the issue, so it’s clear you’re working on it and if folks want to collaborate, they can communicate in the issue and 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 needed
  • Is the way fonts are enqueued going to change?
  • Are you looking for triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. help?
    • You can pingPing The act of sending a very small amount of data to an end point. Ping is used in computer science to illicit a response from a target server to test it’s connection. Ping is also a term used by Slack users to @ someone or send them a direct message (DM). Users might say something along the lines of “Ping me when the meeting starts.” @kjellr or me (@jffng) if you would like to help this way.
  • Will TT2 align with 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) level AA like TT1 did? How do we make sure this gets addressed?
    • Short answer is yes, let’s use this issue to track
    • A lot of this lands on Gutenberg, and for what we can do on the theme side, we hope to make this as accessible as possible. For example, the color palettes have been designed to pass WCAGWCAG WCAG is an acronym for Web Content Accessibility Guidelines. These guidelines are helping make sure the internet is accessible to all people no matter how they would need to access the internet (screen-reader, keyboard only, etc) https://www.w3.org/TR/WCAG21/. AAA contrast.
    • Button states will be important too.
#bundled-theme, #summary, #twenty-twenty-two