wordpress/twentytwentyone

Ongoing development of Twenty Twenty-One, the new default WordPress theme slated for 5.6.

This theme has been merged into the WordPress Core SVN repository, and is no longer maintained on GitHub.

Please report all new bugs of reature requests on Trac: https://core.trac.wordpress.org/newticket.

Browse open issues: https://core.trac.wordpress.org/search?q=twenty+twenty-one.

Twenty Twenty-One

Contributors: wordpressdotorg Requires at least: 5.3 Tested up to: 5.6 Requires PHP: 5.6 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html

Description

Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush.

With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine.

Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.

Contributing

From this point on any new issues should be opened on the WordPress Core Trac instead of at GitHub to save them needing to be transitioned over there manually at a later point.

Please prefix tickets with Twenty Twenty-One: so that they are easy to find and collect with a search or filters. Thank you!

https://core.trac.wordpress.org/newticket?component=Bundled+Theme&summary=Twenty+Twenty-One

https://core.trac.wordpress.org/search?q=twenty+twenty-one.

twentytwentyone's Issues

Repo organisation: Update readme files

Update the README.md for the repository and readme.txt for Twenty Twenty One.

Code quality: Add Github actions for pull requests

Each pull request should be checked for PHP compatibility and to ensure that coding standards are followed.

Adding the menu style and functionality

The menu style needs to be added and the functionality must be carefully tested for any accessibility problems.

Design:
https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=487%3A61

• The toggled menu should be closable with the Esc key.

• The modal only closes when the user actively closes it.

• -When opened, the focus is kept inside the menu modal. Including the site title or logo in the focus order is acceptable (when it is linked)

-The opened responsive menu will cover the full viewport.

-The existing markup for the toggle and close button should be simplified if possible.

-All controls and menu items must work/be able to be accessed when using the keyboard.

-The sub menu items should also be navigable with arrow keys.

-Ideally the user should be able to chose if they want to tab through all the sub menu items, or go directly to the next parent menu item. Avoid unnecessary tabbing.

Block styles
By assuring that the primary menu and the navigation block (both variations) looks the same,
a user can easily add secondary menus that matches the design and that are accessible.

The menu needs to be tested both with and without Gutenberg installed because there are some known differences in how the colors are used.

Search / search results page

The are designs given for three search results related views: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=269%3A0

• Search results with multiple entries
• Search result page if no matching posts were found

Right now the theme does not feature any search icon in the header or footer areas, so we're not sure from where the first design should be reached.

The search results page has their own template file and may be changed if the default archive file changes.

The third design already has an issue: #31

Update the design of the author bio

The author bio needs an overhaul of the markup, CSS and spacing to match the final design.

See https://github.com/WordPress/twentytwentyone/blob/trunk/template-parts/post/author-bio.php

Including developer documentation

One of the recurring comments about Twenty Twenty is that it is difficult for theme developers to make changes to,
and that it can be difficult to use it as a starter theme.

Can we make it easier for theme developers to work with the theme by creating more detailed documentation
about any custom functionality (filters, classes, functions etc)?
-More than the inline code comments and the contributing.md file.

The main questions that I see is:

• Is there enough time

• Is it something we will be able to maintain in the future

• Where would the documentation live

• How could we best work together with the docs team (without causing them extra work)

Update custom logo settings, including title and tagline

In addition to #56,

• the unlink-homepage-logo needs to be added to the theme support for custom logo.
  See https://make.wordpress.org/core/2020/07/28/themes-changes-related-to-get_custom_logo-in-wordpress-5-5/

- [ ] Apply the different design and positions of the logo and site title
https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=468%3A328
https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=487%3A17

• A decision is needed regarding the logo size limit, currently set to 240x240 with no option to change the size.
  See https://github.com/WordPress/twentytwentyone/blob/trunk/functions.php#L84
  https://github.com/WordPress/twentytwentyone/blob/trunk/assets/sass/01-settings/global.scss#L160

• Add option for retina logo
  See https://themes.trac.wordpress.org/browser/twentytwenty/1.5/classes/class-twentytwenty-customize.php#L65
  https://themes.trac.wordpress.org/browser/twentytwenty/1.5/functions.php#L66

• Display logo in site footer

• Adjust footer logo size.

Add color palette to editor

Let's add support for Twenty Twenty One's recommended colors to the block color palette: https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes

Colors:

Black: #28303D
Dark Grey: #39414D
Green: #D1E4DD
Blue: #D1DFE4
Purple: #D1D1E4
Red: #E4D1D1
Orange: #E4DAD1
Yellow: #EEEADD
White: #FFFFFF

Update the design of the single post header

The header (post title area) for single posts needs to be updated to match the final design.

• Wider title
• Add a visible bottom border when there is no featured image.

Remove duplicate ID's from the search widget.

Create a new searchform.php file or filter with the purpose of preventing the duplicate ID when more than one search form /search widget is present.

Reference:
WCAG: 4.1.1 Parsing Level A

Revise icon functionality and icons

Since the theme does not include a social menu, the functionality for including the icons for the social menu can be removed.
See
https://github.com/WordPress/twentytwentyone/blob/trunk/inc/icon-functions.php
https://github.com/WordPress/twentytwentyone/blob/trunk/classes/class-twenty-twenty-one-svg-icons.php

The design uses the following icons:
Hamburger menu
Arrows for next and previous navigation
+ for opening sub menus
- for closing sub menu

There are two examples of hamburger menu icons currently being tested, a decision needs to made for which one to use, or
to create a custom icon.

+ and - icons needs to be added to
https://github.com/WordPress/twentytwentyone/blob/trunk/classes/class-twenty-twenty-one-svg-icons.php#L73
The remaining unused icons in this array can be removed.

Resources:
https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library
(https://github.com/WordPress/gutenberg/tree/master/packages/icons)
https://developer.wordpress.org/resource/dashicons/

---

The reason for keeping the svg icon functionality instead of using HTML entities or pure CSS is to enable developers to change, remove, or add new icons easily.

footer widgets are not aligned

Describe the bug
When more than one widget is placed in the footer widget area, the widgets do not align vertically.

To Reproduce
Steps to reproduce the behavior:

1. Add widgets to the footer widget area
2. View the front...
3. Scroll down to the footer...
4. See error

Expected behavior
I expect the footer widget content to be aligned and look more even.

Screenshots

Add initial block patterns

Twenty Twenty One will come packaged with several block patterns. Here's a couple to get us started.

---

• Two images showcase

• Full-width block
• Maybe a media and text block, where instead of text, we show a second, smaller, framed image?

---

• Overlapping gallery

• Wide-width block
• Maybe every third image overlaps every second image? Or horizontal images always overlap vertical images? We'll need to play with this in code to determine the best approach.

---

• Image underlapping text box

• Wide-width block
• Image block
• Overlapped by a paragraph in a container with a border

---

• Media & Text article title

• Width-width block
• Media and text block with a border. The text includes an H2, short separator block, and a small paragraph

---

• Portfolio list

• Width-width block
• Separator, H2, tiny image

---

• Large text

• 144px paragraph block, 300 font weight

---

• Two overlapping blocks of text

• Wide-width block
• Extra large paragraph in the first block, large paragraph in the second

---

• Link CTA

• Width-width block
• Group or cover block with a border
• 96px paragraph block, 300 font weight
• Spacer block?
• Columns block
• Left column: social media links
• Right column: email link

---

You can view all of these block patterns in Figma: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=269%3A68

As more pattern designs come in, we'll likely end up modifying or removing some of these initial patterns, but they should be good to get us started.

Add starter content

Starter content makes it easier for users to get started with editing their front page.
It populates menus, widget areas, and can set the front page to be static page. It is also possible to assign featured images.

The starter content front page should reflect the front page of the figma design.
We are able to use markup for blocks inside the content itself and this would be a good opportunity to showcase block patterns.
Images placed directly in the starter content will not be in the media library but in the theme folder.

Because any text content needs to be translated, the earlier we can decide the text, the better.
The amount of text should be limited for the same reason.

What kind of images do we want to use for the front page?
Art? Photography?
Neutral "block themed" images as in 2020?
-Are there any female artists in the community that we want to highlight?

Use aria-current attribute on footer homepage link when home is the current page

It would be nice to use aria-current attribute on footer homepage link when home is the current page.
Eg: replace

<div class="site-name">
	<a href="http://localhost:8888/twentytwentyone/" rel="home">Testing 2021</a>
</div>

with:

<div class="site-name">
	<a href="http://localhost:8888/twentytwentyone/" rel="home" aria-current="page">Testing 2021</a>
</div>

When we are at the homepage URL (blog posts or page on front).

Add custom background color option to the Customizer

By default, Twenty Twenty One's background color is a muted, pastel green. Because this is a rather opinionated color, we should allow folks to update the background color for the site. Until we have FSE in core, this should be a Customizer setting.

Additionally, we should populate the color picker with our own recommended background colors:

Green: #D1E4DD (Default)
Blue: #D1DFE4
Purple: #D1D1E4
Red: #E4D1D1
Orange: #E4DAD1
Yellow: #EEEADD
White: #FFFFFF
Black: #111111

There's some documentation on how to update the recommended palette swatches here: http://automattic.github.io/Iris/

Idea: Using block markup and block CSS classes outside the content

This idea is based on 3 things:

1. By using block markup for sections outside the content, the theme can take advantage of CSS that is already in WP core.
   For example, a header and footer with two or 3 columns can be built using markup and CSS that matches a columns block.
   It reduces the CSS that needs to be in the theme.

2. It helps prepare the theme for when global styles is available.
   By using the same CSS classes used by different blocks, global styles can be used to style the entire site and not only the content. -Without extra options in the customizer.

And thirdly, it makes creating an FSE version easier since the PHP version would already use block markup.

It might not be possible to use block markup for everything but that's OK.
It does not limit us to using only block CSS classes.
It needs testing through different WP versions to assure backwards compatibility

I would be interested in hearing more pros and cons.

Partial footer, where the columns flex styles would be provided by the block library style.

`

	<?php get_template_part( 'template-parts/footer/footer-widgets' ); ?>

	<div class="wp-block-columns site-info">
		<div class="wp-block-column imprint">
			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ); ?>" >
			<?php
			/* translators: %s: WordPress. */
			printf( __( 'Proudly powered by %s', 'twentytwentyone' ), 'WordPress' );
			?>
			</a>
		</div>
		<div class="wp-block-column site-name">
			<?php
			$blog_info = get_bloginfo( 'name' );
			if ( ! empty( $blog_info ) ) {
				?>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
				<?php
			}
			?>
		</div>
		<div class="wp-block-column copyright">
			<?php
			/* translators: 1: Copyright date format, see https://www.php.net/date, 2: Site name */
			printf(
				__( '&copy; %1$s %2$s', 'twentytwentyone' ),
				esc_html( date_i18n( _x( 'Y', 'copyright date format', 'twentytwentyone' ) ) ),
				esc_html( get_bloginfo( 'name' ) )
			);
			if ( function_exists( 'the_privacy_policy_link' ) ) {
				the_privacy_policy_link();
			}
			?>
		</div>

	</div><!-- .site-info -->
</footer><!-- #colophon -->`

Update the design of the comments area

The comments area needs some work not least with the spacing.

Don't link the site title when displayed on the homepage

Describe the bug
For full reference, see https://core.trac.wordpress.org/ticket/37011 which was merged in WordPress 5.5.

Expected behavior
When displaying the homepage (blogposts or home Page), the site title should not be linked.

Continue the code clean up

Describe the bug
There is still code inherited from Seedlet that needs to be removed.

-Block patterns, including any related CSS (Keep the file and functions for when we are ready to add the new patterns!)
-Left over CSS from removing the gradients
-The foreground color that is no longer used.
-Empty CSS selectors.

If you find anything else that you feel needs to be mentioned here, that you do not have time to work on,
you can add it to the issue.

Accessibility: Visual Presentation & Reflow

References:
https://www.w3.org/TR/WCAG21/#visual-presentation
https://www.w3.org/TR/WCAG21/#reflow

• Foreground and background colors can be selected by the user.

• Width is no more than 80 characters or glyphs (40 if CJK).
  *Content creator may be able to bypass this.

• Text is not justified (aligned to both the left and the right margins).

• Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.
  -CSS line height for paragraphs is 1.5.

• Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
  -Reflow and text size tested up to 400%.

Accessibility: WCAG 2.5.3 Label in Name Level A

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Reference: https://www.w3.org/TR/WCAG21/#label-in-name
Resource: https://www.deque.com/blog/understanding-wcag-2-1-reviewing-mobile-success-criteria-2/

-I may have misunderstood this guideline and I also did not test the comments form with speech technology.

If I understand correctly, the default comment form does not pass this guideline, since the label is"Name *", and the name of the field is "author" ? Would the label "Author Name *" pass?

I actually think the use of "Author" here is confusing. I don't often express that I am "authoring a comment," or "authoring a reply"

<label for="author">Name <span class="required">*</span></label>
<input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required">

Pluralize search form results count string

Describe the bug
Search result count string should be pluralized in search.php.

Currently:

		<?php
		printf(
			/* translators: %d: the number of search results. */
			esc_html__( 'We found %d results for your search.', 'twentytwentyone' ),
			(int) $wp_query->found_posts
		);
		?>

Remove duplicate width/height attributes from SVG icons

We shouldn’t use width and height attributes in Twenty_Twenty_One_SVG_Icons class.
This currently results in duplicated attributes in SVG icons.

Worth noting that there is a DocBlock with this information in the class-twenty-twenty-onesvg-icons.php file:

• Place each source on its own array key, without adding the
• both width and height attributes, since these are added dnamically,
• before rendering the SVG code.

Testing and adjusting default WP pages

We need to check that the default pages provided by core are matching the design and adjust them if needed.

• 404 page
• No content
• Attachment (Seedlet theme provided an image.php file)

Add custom gradients

The theme currently has no custom gradients, but a placeholder for editor-gradient-presets has been left in functions.php
to make them easier to include.
If no custom gradients are added, this code needs to be removed in time for beta 1.

Clean up print style

-Remove code that is not used from the print style.
-Test the print style.

Header: Homepage is linked when page on front is a static page

We need to improve the conditional statement actually used.

Update font sizes

The font sizes have been increased in the design and both the CSS variables
and the editor-font-sizes theme support needs to be updated.

Pages - How to implement two page heading styles

In the design, pages with multiple columns (assumed to be columns blocks in content),
position the page title differently compared to when the content only has a single column.

Single column: Centered page title
Multiple columns: Left aligned wide page title.

How do we best implement this?
Perhaps using a body class?

Repo organisation: add CONTRIBUTING.md file

Merge the files of Twenty Nineteen and Twenty Twenty for this repository.

Implement the design for forms, inputs and buttons

Implement the designs for forms/inputs/buttons.

• Buttons block -filled

• Buttons block -outlined

• HTML buttons (including disabled state)

• Input elements

• Select lists (including blocks)

• Tested standard form elements as well as widgets and blocks.

• Tested focus and hover states.

When does development and work start here?

There is no files in the repo yet and no links to designs or plans but the development cycle for 5.6 kicked off 3 weeks ago. The one biggest thing I learned last year was the the more time we have with the community to work on things the better.

We need to have something workable here soon to share with everyone to get their feedback and their help.

Is anyone opposed to me putting the base files into the repo now for everyone to look over and get an idea of what we are working with?

Latest Posts Block

There's a design for the latest posts block, the first one: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=7%3A33

Todos:

• Make the list view match the given design.
• Check how other features the latest posts block offers can be integrated in the minimalistic design.
• Decide how the grid view the block offers should look like (@melchoyce ?)

Should the theme have an "about" page in the admin area?

With so many new features in 5.5 and 5.6 together, -and especially if an FSE version of the theme is created, should the theme have a page in the admin area?

A help page describing:
How to use the block patterns
How to use the social links block (since this type of menu is currently not part of the theme)
How to place blocks in widget areas
-Perhaps even some accessibility tips on how to make content accessible.

It think it would be the first default theme to have an admin page.

The downsides are:
More to translate
May possibly need updates as features evolve between WordPress versions.

Declare support for HTML5 navigation widgets

Steps to replicate

The theme doesn't implement HTML5 navigation widgets added in WordPress 5.5.
See https://make.wordpress.org/core/2020/07/09/accessibility-improvements-to-widgets-outputting-lists-of-links-in-5-5/

This would be a nice enhancement for Seedlet’s accessibility :)

Result

Navigation widgets are not wrapped with a <nav> HTML5 tag.

Expected

Navigation widgets should ideally be wrapped with a <nav> HTML5 tag.

Testing and adjusting WP default blocks

Twenty Twenty One uses the default block styles that are provided by WP core. For the release of the theme we need to check that every block is working well with the theme and add adjustments if needed. The list only contains blocks that have an output.

Text

• Paragraph
• Heading
• List
• Quote
• Code
• Classic
• Preformatted
• Pullquote
• Table
• Verse

Media

• Image
• Gallery
• Audio
• Cover
• File
• Media & Text
• Video

Design

• Buttons
• Columns
• Group
• Separator
• More

Widgets

• Archives
• Calendar
• Categories
• Latest Comments
• Latest Posts
• RSS
• Search
• Social Icons
• Tag Cloud

Testing and adjusting footer widget area

There's only one widget area given in Twenty Twenty One and each widget is added to the next available spot. It consists of three columns on wide screens.

As the new block based widget screen got out of experimental status in Gutenberg 8.9.0, it's most likely to land in 5.6, so we need to have this area working for both the old-school widgets and the blocks.

In my recent test the social icons block did not align right due to the given setup (float is added but as it's a flex item float doesn't work, it needs to be justify-content: flex-end). It's also not possible to style the icons with the dark grey color unless you add additional CSS via the customizer.

Accessibility: WCAG 2.4.8 Location Level AAA

Information about the user’s location within a set of Web pages is available.
Reference:
https://www.w3.org/TR/WCAG21/#location

• aria-current in pagination for page breaks within content
• aria-current in archive pagination
• aria-current in comment pagination -Depends on the final design, currently only "newer comments" and "older comments" is used for this navigation.
• aria-current in widgets, from WP 5.3 (Widgets are optional).
• aria-current in the primary menu -We need to confirm that the navigation menu includes aria-current for all the WP versions that the theme supports.

@audrasjb Would the above be enough, or is a bread crumb required?
If not required, is adding a breadcrumb an improvement that we should still consider?

Gutenberg feature watch list

In this issue we can keep track of possible changes to Gutenberg that can affect the theme.

• Theme Support: Enable custom units by default
  The theme currently includes add_theme_support( 'custom-units' );
  If this will be enabled by default, the above will no longer be needed.

• Updates to the search block (#103)

• Updates to the separator WordPress/gutenberg#25147

• Updates to the column block WordPress/gutenberg#24711

• Alignments added to headings block WordPress/gutenberg#25917

Accessibility: WCAG 2.4.5 Multiple Ways Level AA

More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.

Reference: https://www.w3.org/TR/WCAG21/#multiple-ways

• Menu -Optional
• Next and previous post navigation, links between paginated posts (page breaks), link to parent on attachment page (image.php)
• Search Optional with widget or block

@audrasjb do I understand the criteria correctly that this will fail because both the menu and search is optional?
There is no fall back page menu, so if no menu is set, there is no menu at all.

Even though 5.5 added a sitemap, it is not a solution for this guideline since it is not really human readable nor helpful for screen reader users, since the link name is just the file name and the slug.

Accessibility: WCAG 3.2.5 Change on Request Level AAA

Changes of context are initiated only by user request or a mechanism is available to turn off such changes.
Reference:
https://www.w3.org/TR/WCAG21/#change-on-request
https://www.w3.org/WAI/WCAG21/quickref/#change-on-request

Core widgets uses select lists that unexpectedly change and will fail this guideline.

-When a select list is expanded by pressing enter or space, and tab is pressed next, the item is opened and the page is refreshed.
-When a select list is in focus but not expanded and an arrow key is used, the item is opened and the page is refreshed.
Meaning a user can't even read the items in the list because moving up and down the list opens the item directly.

@audrasjb I was not able to find a trac ticket for this. I would like to ask the accessibility team if this is:
-A non issue, in case I misunderstood the guideline and how users use these select lists.
-Something that the theme should solve.
-Something that the theme does not need to solve for 5.6 because it is a core problem.

-But because this is a level AAA requirement core is not likely to solve it because it only requires level AA?

Feature: Change text color/foreground color depending on background color

When the background color is changed, the text color should change automatically to maintain a high color contrast ratio against the background.

Discussion: Methods for including IE specific CSS

Currently, two separate style sheets are created for Internet Explorer by running the final style sheets through postcss:
https://github.com/WordPress/twentytwentyone/blob/trunk/assets/css/ie-editor.css
https://github.com/WordPress/twentytwentyone/blob/trunk/assets/css/ie.css

These files are only loaded when the $is_IE WordPress global is set to true. This global is created by checking the $_SERVER['HTTP_USER_AGENT.

-Is this the preferred method or should the theme include fall backs for IE in the main style.css and editor styles?
Are there other methods that should be considered?

+User Agent is not completely reliable
+Less files

-Larger files
-Unused styles will always be loaded

Pages: Add featured image support

Describe the bug
Currently, featured images don't appear to be output on pages.

To Reproduce
Steps to reproduce the behavior:

1. Go to a new page.
2. Add a featured image.
3. Publish the page.
4. View the page; featured image doesn't appear.

Expected behavior
Featured images should appear wherever set, whether page or post.

Screenshots

Editor	Front-end

The text for the search result count is incorrect if there is only one match

The search result template displays the number of search results,
but the text needs to be updated to work with both singular and plural.
If there is only one result, the text reads: We found 1 results for your search.

404 Page: Update Design

I'm running through and trying to make page designs more consistent. I've updated the 404 page to include the same full-width title + border than search results have:

Update spacing

The spacing around the content, especially for the responsive versions, needs to be reviewed and updated according to the design.

Featured images are not aligned correctly

In the design, (large) featured images are centered. In archives and search results, featured images are also wider than the excerpt.

In the theme, these images are not aligned correctly, and featured images in single posts and archives are even aligned to the opposite sides.

Theme archive page:

Theme single post:

Expected:

Accessibility: WCAG 2.4.10 Section Headings Level AAA

Section headings are used to organize the content.
Note 1: "Heading" is used in its general sense and includes titles and other ways to add a heading to different types of content.

Reference:
https://www.w3.org/WAI/WCAG21/Understanding/section-headings.html

Question, do we need a visually hidden heading for the footer, or is the HTML5 footer element and content info ARIA role enough for this section?
The aria role does not help users that wishes to navigate using headings, but for others the information would be repeated?

https://github.com/WordPress/twentytwentyone/blob/trunk/footer.php#L19