wordpress / twentytwentyone Goto Github PK
View Code? Open in Web Editor NEWOngoing development of Twenty Twenty-One, the new default WordPress theme slated for 5.6.
License: GNU General Public License v2.0
Ongoing development of Twenty Twenty-One, the new default WordPress theme slated for 5.6.
License: GNU General Public License v2.0
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.
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.
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?
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
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.
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?
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
andheight
attributes, since these are added dnamically,- before rendering the SVG code.
Update the README.md for the repository and readme.txt for Twenty Twenty One.
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.
Merge the files of Twenty Nineteen and Twenty Twenty for this repository.
In addition to #56,
unlink-homepage-logo
needs to be added to the theme support for custom logo.- [ ] 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.
This idea is based on 3 things:
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.
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(
__( '© %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 -->`
The are designs given for three search results related views: https://www.figma.com/file/OEtsCj8oD8JPVx4OvsS0U2/Twenty-Twenty-One?node-id=269%3A0
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
The comments area needs some work not least with the spacing.
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
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/
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.
The header (post title area) for single posts needs to be updated to match the final design.
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
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 separator WordPress/gutenberg#25147
Updates to the column block WordPress/gutenberg#24711
Alignments added to headings block WordPress/gutenberg#25917
-Remove code that is not used from the print style.
-Test the print style.
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
@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.
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)
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.
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?
The spacing around the content, especially for the responsive versions, needs to be reviewed and updated according to the design.
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 :)
Navigation widgets are not wrapped with a <nav>
HTML5 tag.
Navigation widgets should ideally be wrapped with a <nav>
HTML5 tag.
Each pull request should be checked for PHP compatibility and to ensure that coding standards are followed.
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.
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
We need to check that the default pages provided by core are matching the design and adjust them if needed.
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.
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%.
Twenty Twenty One will come packaged with several block patterns. Here's a couple to get us started.
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.
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).
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">
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
Information about the user’s location within a set of Web pages is available.
Reference:
https://www.w3.org/TR/WCAG21/#location
@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?
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
.
Describe the bug
Currently, featured images don't appear to be output on pages.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Featured images should appear wherever set, whether page or post.
Screenshots
Editor | Front-end |
---|---|
![]() |
![]() |
We need to improve the conditional statement actually used.
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
);
?>
When the background color is changed, the text color should change automatically to maintain a high color contrast ratio against the background.
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.
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.
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?
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:
Expected behavior
I expect the footer widget content to be aligned and look more even.
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.
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:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.