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

Twenty Twenty-One and Twenty Nineteen updates now available

After monitoring and reviewing the Support Forum issues and Trac tickets created following the release of WordPress 5.6, the need for a fast-follow WordPress 5.6.1 release before the end of 2020 was ruled out as no tickets were identified as urgent.

However, it became apparent that a large handful of those tickets were for small, self contained bugs that were discovered as more sites started using the new default theme, Twenty Twenty-One. Additionally, a bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. in Twenty Nineteen was discovered that would prevent the use of the newly added 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. patterns containing images.

Default themes are often updated in unison with WordPress releases, but there is nothing preventing them from being updated on their own. Since a WordPress 5.6.1 fast-follow was ruled out, it was deemed preferable to fix these bugs in Twenty Twenty-One independent of a release of WordPress itself before the end of 2020.

As a result, new versions of the Twenty Twenty-One and Twenty Nineteen default themes have been released to 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/ Theme Directory and are now available!

The new versions are as follows:

  • Twenty Twenty-One: 1.1
  • Twenty Nineteen: 1.9

If you have auto-updates for these themes enabled, your site should be updated within the next 12 hours.

A full list of the tickets addressed in these releases can be found on Trac.

Thanks to everyone that helped get this release out.

Ahmed Saeed, Ari Stathopoulos, basscan, Carolina Nymark, celendesign, Dan Farrow, Felix Arntz, gKibria, Helen Hou-Sandi, Ismail El Korchi, James Huff, JB Audras, Jonathan Desrosiers, Justin Ahinon, Kelly Choyce-Dwan, Kjell Reigstad, Manzur Ahammed, Mel Choyce-Dwan, Mukesh Panchal, Peter Wilson, Sergey Biryukov, Slava Abakumov, Stephen Bernhardt, Tanvirul Haque, thorlentz, Tony A, transl8or, t-p.

#bundled-theme

Twenty Twenty-One Dark Mode update

WordPress 5.6 is closing in on BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 4, and we are at a point where a final decision needs to be made about whether to include the Dark Mode functionality in the default theme, or whether it should ship separately in 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.

With this post, we are asking for your feedback, and ways that we can improve the user experience.

Since the last discussion, the Dark Mode functionality has been placed back into the theme to make it easier to test.

Two test scrubs have been completed and we have listened to the feedback and tried to make the setting easier to use.

Changes include:

  • Dark Mode Support is opt-in.
  • The button used to turn Dark Mode on or off was removed from 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.
  • In 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. and on the front, the button is now placed at the bottom right (left on RTL). The button is hidden when you scroll down to not distract from reading.
  • We renamed the Customizer section to “Colors & Dark Mode” to make the setting easier to find.
  • The description in the Customizer was updated and includes a link to the themes support page.
  • A notice in the Customizer has been removed.
  • The Privacy Policy has been updated with information about LocalStorage.

Dark Mode Walkthrough

To test the latest changes, you need to download the development version of the theme from the GitHub repository.

Install and activate the theme. The colors will be the default mint green background and dark text.

Go to the Customizer and open the Colors & Dark Mode panel:

Customizer panels.

Here you can customize the background color. If the background is light, a dark text color is used.

If the background is changed to dark, the text color is white and the Dark Mode Support option is hidden.

The Dark Mode option is a checkbox below the color picker for the Background Color.

The Dark Mode Support option is opt-in. When the option is enabled:

  • The colors respects the device settings.
  • A new button is visible on the front and in the Customizer. This button is used to turn Dark Mode on or off. This means that site owners and visitors can choose their preference independent of their device settings.
  • The same colors are used on the front, editor, and Customizer.

When Dark Mode is on, a dark grey background color is used. Images and borders also have a lower contrast.

When Dark Mode is off, the color in the background color option is used for the light background.

#bundled-theme, #dark-mode, #twenty-twenty-one

Twenty Twenty-One: Dark Mode Discussion

Yesterday in #core-themes, we discussed Dark Mode support for Twenty Twenty-One. Dark Mode is a setting in some operating systems and browsers that allows individual users to request a “dark” version of the website they’re browsing.

Dark Mode support was added to Twenty Twenty-One during its development phase, and needs testing and refinement during 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. for it to be successful. Unsurprisingly, it’s a pretty complicated feature to wrap one’s head around. There are a lot of conditionals and remaining questions we need to solve.

Dark/Light Toggle

We’ve built in a 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. setting that lets site owners opt their sites out of supporting Dark Mode, for greater design control. Additionally, we’re considering adding a front-end toggle so site viewers can turn Dark Mode on/off, regardless of their OS/Browser preference. This setting would only show if a site allows Dark Mode support.

The idea of a toggle to turn Dark Mode on and off on the user side has been brought up a number of times in issues. There’s currently a PR to explore how it would work in Twenty Twenty-One. Today’s discussion focused around the intersection of this setting, along with the ability to disable Dark Mode entirely.

Dark Mode support is a good 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) improvement; some folks, for example, enable Dark Mode because they are sensitive to bright lights, or find find dark color schemes less of an eye strain.

We identified five possible scenarios:

Option 1

  • Allow site owners to disable all dark mode support on their site, regardless of what the user has selected in their OS/browser.
  • If enabled, allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Offers the most balanced amount of control for both site owners and site viewers.
  • Cons:
    • Allows site owners to remove an accessibility feature.

Option 2

  • Allow site owners to disable all dark mode support on their site, regardless of what the user has selected in their OS/browser.
  • Don’t allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Less visual clutter on the front-end of the site.
  • Cons:
    • Site viewers who prefer Dark Mode might have situations where they’d prefer to toggle Light Mode, and vice-versa; for example, a change in lighting conditions.

Option 3

  • Don’t allow owners to disable dark mode support.
  • Allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Most amount of flexibility for site viewers.
  • Cons:
    • WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. does not provide a way to control how sites look in Dark Mode. For example, if you have a dark logo, your logo will be hard to see or even invisible in Dark Mode. There’s no way to add a lighter logo for Dark Mode without using custom CSSCSS Cascading Style Sheets.. Transparent images could face similar visibility issues.

Option 4

  • Don’t allow owners to disable dark mode support.
  • Don’t allow site viewers to toggle dark mode on/off while viewing the site.
  • Pros:
    • Least amount of UIUI User interface.
  • Cons:
    • Least amount of flexibility for site owners.
    • There are situations where site viewers might prefer the inverse of their default color mode.

Option 5

  • Don’t support dark mode in the theme at all.
  • Pros:
    • Easiest for us; we revert and boom, we don’t need to tackle the many situations and edge-cases that will arise during Beta.
    • No potential conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. between what site viewers see, and what the site owner intends.
    • We won’t need to worry about issues like transparent images or dark logos becoming invisible.
    • If a site builder is using Dark Mode, they might not realize their site colors are different for most users than what they themselves are seeing for their site.
    • WordPress itself doesn’t support Dark Mode yet, so we’re not getting ahead of core.
  • Cons:
    • We’re in a unique position to help support and grow a new web/OS feature.
    • We’re also in a unique position to influence best-practice for Dark Mode support within the wider WordPress theme community.

Amongst the folks involved in the discussion, there seemed to be a preference for Option 3, which forced Dark Mode support but allows individual site viewers to toggle it on/off. This late in the game, though, there are also compelling reasons to go with Option 5.

Showing Dark Mode when editing your site

We also talked a little bit about whether or not Dark Mode should be on within wp-adminadmin (and super admin) (specifically, the Customizer and the editor), and whether that front-end toggle should also show within those two admin contexts. This would be useful for site owners who use Dark Mode, so they could easily and quickly toggle it on/off while customizing or creating new content for their site.

Creating a UI control independent of either editor toolbars and metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes within the editor would be a new and unexpected move for a default theme, and would likely create usability and accessibility concerns. Because default themes are used as an example for theme developers, deciding to show the toggle in the editor would require much more discussion from both the default theme team and the Themes team (+make.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//themes). This would have to be outside of the scope of WordPress 5.6.

@sarahricker also suggested that we only ship a proof-of-concept for Dark Mode in 5.6 without the front-end toggle, and then push for native editing of Dark Mode within core for 5.7:

My suggested approach method might be:

Step 1) Proof of concept > theme switches colors based on user’s device
Step 2) In 5.7 – Core adopts support for editing based on user’s device / toggle in backend
Step 3) In 5.7 – TT1 extends POC to integrate with Core AND provides front end toggle

Once core supports being able to customize the design of your site in Dark Mode, we could add that support in to Twenty Twenty-One. We’d also ship the front-end toggle at this time. However, as @williampatton mentioned, default themes rarely get updated with new features after release because of backwards compatibility concerns.

@ryelle suggested that perhaps Step 2 could be more feedback gathering which we push upstream to core and 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/:

step 2 would be listening to the feedback & issues we’re finding in TT1, and pushing that feedback to core/gutenberg to get more native support there; and theoretically nothing from a 5.7 TT1 would change except maybe a new “add_theme_support”, things would just work nicer because we have core support

A new add_theme_support to enable a Dark Mode editor for core that allows you to preview and make edits to your site’s Dark Mode styles (maybe something similar to the AMP plugin, but using the Full Site Editing framework?) could be great.

There is a PR adding the front-end toggle in GitHub.

Design tweaks to Dark Mode

We didn’t have a chance to discuss this synchronously, but one other topic I’d like us to consider is making minor design tweaks to improve Dark Mode. I have two issues open which I’d love input on, especially from folks who have Dark Mode enabled on their computers:

Are there any other improvements we can make to Dark Mode which will improve the overall accessibility and usability of the feature?


Videos

Dark Mode in Twenty Twenty-One trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.:

Dark Mode front-end toggle in PR #622:

#bundled-theme, #dark-mode, #twenty-twenty-one

Twenty Twenty-One Chat Agenda: 5 October 2020

This is the agenda for the upcoming Twenty Twenty-One meeting scheduled for Monday, October 4th 2020 at 15:00 UTC.

This meeting will be held in the #core-themes 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 there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping and updates
  • Discussion topics
    • Should the theme include a footer menu location? [context]
    • Should we use starter content as an educational resource? [context and context]
    • Improving our CSSCSS Cascading Style Sheets. build process [context]
  • Open floor

#agenda, #bundled-theme, #twenty-twenty-one

TT1 Chat Summary: 28 September 2020

Full meeting transcript here on Slack. I (@melchoyce) facilitated the meeting.

Housekeeping

Because this was our first meeting, I focused largely on introducing the theme and giving a brief introduction on how people can contribute. I specifically called out:

  • Good first bug
  • Help needed
  • and reviewing PRs! PR review is a great way to keep progress moving for the project, and a great way for new contributors to get acquainted with the default theme creation process and code standards.

Q&A

We moved on to questions next.

@metodiew asked if people should open a new issue before making a PR. @jffng replied that opening a new PR is fine, but if someone has specific questions that needs discussion, open an issue.

Next up, @joyously asked about the build process. We determined that it needs more documentation for new contributors, and there’s an existing developer documentation issue people can add questions and ideas to. We also discussed the need for more clarity around what parts of the build process will make it into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

@bgnicolepaschen had a question about the starter content being included with the theme. This is a topic currently under discussion, and more input is appreciated. We discussed using female artists, and even the possibility of using art from our community members.

@joyously brought up the idea of including a sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. with the theme. I volunteered to create some mockups so we could explore adding a sidebar template to the FSE version of the theme, which we’ll be working on after 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. 1. This will be a great opportunity to explore the best way of adding sidebars to fully 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.

Next up, we talked about where to discuss questions, comments, etc. about the theme — on 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/., or in 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/? I said either is fine, and recommended that if we have conversations in Slack, we summarize them on GitHub.

Lastly, we clarified browser support and talked a little about 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. gardening.

Please join us Friday at 16:00 UTC for our next bug scrub!

#bundled-theme, #twenty-twenty-one

Introducing Twenty Twenty-One

Well friends, it’s time for what I’m sure you’ve all been waiting for: an announcement about the next WordPress default theme! The rumors are true; WordPress 5.6 will launch with a brand new default theme: Twenty Twenty-One. 

The default theme team includes:

  • Default Theme Design Lead: Mel Choyce-Dwan (@melchoyce).
  • Default Theme Development Lead: Carolina Nymark (@poena).  
  • Default Theme Wrangler: Jessica Lyschik (@luminuu).
  • …and you, our fabulous volunteers!

Background

Twenty Twenty-One is designed to be a blank canvas 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. After trying some designs heavily inspired by print resources, @kjellr remarked to me, “why not try something natively digital?” I added even more ideas to my increasingly unwieldy pinterest board and gave it a shot. The concept ended up being the most natural, usable design of the bunch. It was simple and un-opinionated, yet still refined. It felt like a fresh canvas, waiting to be painted.

Twenty Twenty-One will use a modified version of the Seedlet theme as its base. This provides us with a thorough system of nested CSSCSS Cascading Style Sheets. variables to make child theming easier, and to help integrate with the global styles functionality that’s under development for full-site editing.

Once the theme is stable, after 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. 1, we’ll start exploring Full Site Editing support.


Design Decisions

By default, the theme uses a native system font stack. I made this choice for a couple reasons:

  • No extra load time. Let’s keep this theme simple and fast.
  • This particular stack is pretty typographically “neutral” — none of the fonts are super opinionated, so the theme can be used broadly across different types of sites.
  • Using just the one font stack, without loading additional font files, also makes it easier for folks to customize or create 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/. for Twenty Twenty-One. We want this theme to be a teaching tool, and an outlet for your creativity.

The theme also uses a limited color palette: a pastel green background color, and two shades of dark grey for text. We’ll be bundling the theme with some additional color palettes, including both a white and a black color scheme. Why pastel green? Pastels and muted colors are pretty in right now (seriously I could keep going).

(Who doesn’t love a little pastel cottagecore during these troubling times?)

All this is to say: the design? It’s pretty simple. That’s where patterns come 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/ introduced support for patterns in WordPress 5.5. This is the perfect time to show them off. Twenty Twenty-One will come packaged with a bunch of unique patterns designed explicitly for the theme. The theme’s overall design is simple, so you can make it your own, but the patterns will be opinionated. There are a couple already designed, and we’ll be relying on our talented community designers for more ideas. Here’s what we’re thinking about so far:

Want to contribute a block pattern? We have an issue template for that.

Lastly, we’d love to make the theme meet relevant guidelines from WCAG 2.1 level AAA. We loved the idea when +make.wordpress.org/accessibility/ brought it up, and would appreciate any and all guidance from our community a11yAccessibility 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) experts to help make this possible.

You can find full page mockups of Twenty Twenty-One in the Figma file.


Timeline

Per the development cycle information, the upcoming important dates are:

  • WP 5.6 Beta 1 – October 20
    • Last chance for feature projects and new enhancements
    • Theme should be committed to trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.
    • Start exploring FSE support in a second, block-based theme
  • WP 5.6 Beta 4 – November 10
    • Soft string freeze
    • Starter content should be committed
  • WP 5.6 RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). 1 – November 17
    • Hard string freeze
    • Starter content needs to be finalized
  • WP 5.6 Release – December 8

Get Involved

If you are interested in contributing to Twenty Twenty-One, make sure you are following this blogblog (versus network, site). During the design and development process, there will be weekly meetings starting Monday, September 28 at 15:00 UTC in #core-themes. We’ll also be holding weekly triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. sessions at starting this Friday at 16:00 UTC.

Theme development will happen 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/ and in the interest of time, an in-progress version of the theme code has been uploaded here: https://github.com/wordpress/twentytwentyone.

Once the theme is stable, it will be merged into coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and the GitHub repo will be deprecated.


Learn More

If you’re interested in learning more about default themes, you can read the following posts:

#5-6, #bundled-theme, #core-themes, #twenty-twenty-one

Twenty Twenty: animated scroll changes in WordPress 5.3.1

In WordPress 5.3, Twenty Twenty new bundled theme added smooth scroll animations to anchor links. These animations were handled by native 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/. and it caused several issues, mentioned in the following TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets 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:

  • #48763 – Twenty Twenty: SmoothScroll is broken
  • #48551 – Twenty Twenty: Replace JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.-based smooth scroll with CSSCSS Cascading Style Sheets.
  • #48866 – TwentyTwenty: Paginated comments don’t work
  • GitHub issue 476 – Consider removing JS-based smooth scroll

Additionally to the multiple issues listed in the above tickets, JavaScript-based scroll animations add a bunch of relatively complex JS code, override natural anchor behavior and may interfere with how specific user agents handle in-page scrolling.

In WordPress 5.3.1, the current smooth scroll JavaScript implementation will be replaced with “scroll-behavior” CSS property.

This change fixes the issues encountered with the current JavaScript implementation, and also includes an 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) enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. by using prefers-reduced-motion: reduce media query property for users that have opted in to reduced motion in their browser settings.

For further explanation on this media query, see Mozilla Developer Network documentation.

Browsers that don’t support scroll-behavior CSS property will fallback to default HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. anchor behavior. For reference, see full browsers support for this CSS property on MDN.

New CSS scroll animation implementation in Twenty Twenty:

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Developers are able to remove scroll-behavior effect on specific elements by using a class CSS selector, as follows:

.disable-smooth-scrolling {
    scroll-behavior: auto;
}

For reference, see the related changeset in 5.3.1 branch.

#5-3-1, #accessibility, #bundled-theme, #core-css, #dev-notes, #twentytwenty