The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site for general updates, status reports, and the occasional code debate. There’s lots of ways to contribute:
Found a bugbugA 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.?Create a ticket in the bug tracker.
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 BetaBetaA 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 CustomizerCustomizerTool 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 accessibilityAccessibilityAccessibility (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 coreCoreCore 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 CSSCSSCascading 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 UIUIUser 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 conflictconflictA 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 metaMetaMeta 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.orgThe 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 GutenbergGutenbergThe 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.
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 trunktrunkA 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.:
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:
…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 coreCoreCore 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 sidebarSidebarA 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 BetaBetaA 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 blockBlockBlock 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 SlackSlackSlack 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 GitHubGitHubGitHub 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 bugbugA 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.
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.
Twenty Twenty-One is designed to be a blank canvas for the blockBlockBlock 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 CSSCSSCascading 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 BetaBetaA 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 themeA 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 mutedcolors are prettyinrightnow(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.
GutenbergGutenbergThe 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:
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 a11yAccessibilityAccessibility (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.
Last chance for feature projects and new enhancements
Theme should be committed to trunktrunkA 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 candidateOne 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 triagetriageThe 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 GitHubGitHubGitHub 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 coreCoreCore 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:
We have a couple of the more advanced widgetWidgetA 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. blocks with v2 designs. These are “nice to haves,” but not necessarily scoped to any particular release.
The Classic Widget [13511] is going to be moved into the “widget area GutenbergGutenbergThe 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/ support” project, since it impacts all of the widget screens.
You can track progress on GitHubGitHubGitHub 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/: https://github.com/WordPress/gutenberg/projects/20
The following iterations on existing widgetWidgetA 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. blocks are “would-be-nice-to-tries”:
There’s an estimated ~4 weeks until this project is finished.
The Classic Widget [13511] is going to be moved into the “widget area GutenbergGutenbergThe 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/ support” project, since it impacts all of the widget screens.
The MetaMetaMeta 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. Widget [13335] issue has been closed in lieu of adding login/logout and RSS subscription support to the navigation menuNavigation MenuA 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.blockBlockBlock 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..
You can track progress on GitHubGitHubGitHub 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/: https://github.com/WordPress/gutenberg/projects/20
Per 9 Projects for 2019, all widgets will be ported over to GutenbergGutenbergThe 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/ blocks. I went through and audited how close we are to completing this goal:
Any existing widgetWidgetA 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. will work by using the Classic Widget blockBlockBlock 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..
Navigation MenuNavigation MenuA 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. [1466]
This has a bunch of design ideas, but not a finished design. This block design is still a WIP.
Note: This is also its own 2019 project.
Additionally, the following completed widget blocks have v2 designs:
There’s a couple widgets that I personally think can be deprecated:
MetaMetaMeta 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.: Feels anachronistic and out-of-place in modern WordPress.
Pages: Should be replaceable with a navigation menu block.
Next Steps
Given this list, I think our top priorities are:
Reopen, finish up, and merge existing widget block PRs.
Create a PR for Calendar — maybe two: one following the original design, and one following the more complex v2. The original can likely be completed and merged quickly, which would put us in a great place in terms of widget support.
Review the Classic Widget block design to ensure it matches current Gutenberg patterns, and create a PR.
Create v2 PRs for Archives, Calendar, Recent Comments, and Recent Posts. Having a working PR can help us establish whether or not the designs are feasible, and a better experience.
Navigation Menu, as a broader block that extends beyond just widgets, should be tackled separately from this effort.
@karmatosed has created a new GitHubGitHubGitHub 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/ project we can use to track progress: https://github.com/WordPress/gutenberg/projects/20.
Phase 1 of GutenbergGutenbergThe 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/ was intended to make post and page editing easier and more flexible for users, leveraging blocks as the main mode of interaction offering greater virtuosity, especially for non-technical users. The next phase seeks to expand this idea beyond the post, allowing editing and customizing the rest of a website in WordPress. This process also aims to eliminate the complex obstacles users have to find their way through — like multiple layers of abstraction and navigation — and to reduce the amount of technical knowledge required to customize the overall appearance and functionality of their site.
The next phase of Gutenberg will take the ease of use that was introduced with blockBlockBlock 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 editing and extend that capability to the CustomizerCustomizerTool 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., starting with widgets, to make it easier for users to customize the rest of their sites.
In the first step of phase 2, we will bring blocks into the Customizer to create a more consistent user experience and give developers a smoother path to upgrading themes to Gutenberg. Longer term, we will expand the current Gutenberg post and page editor to become a full-fledged site editor, bringing everything together into a unified, modern product experience.
If you currently have a site like this and you want to edit any of these widgets that aren’t part of the post content, you have to use an interface like this:
It’s really disconnected from anything you see on the front end of the site, it requires you to sort through a list of widgets on the left and then know how to drag and drop them into these different widgetWidgetA 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. areas on the right. More to the point, if you think about widgets, they kind of represent a really early idea of blocks — they’re discrete areas for content and functionality that you can add to your site. But now with Gutenberg, we have a much more advanced, elegant, and robust concept of blocks and how you interact with them.
The first step for phase 2 will involve upgrading the widgets UIUIUser interface to incorporate a modern block editor that is consistent with how you edit pages and posts in Gutenberg to create a clear, consistent editing experience across different areas of your site.
Widgets
In widgets.php
widgets.php would become something more like this, which is an early sketch, but you can see that all of these widgets are represented as blocks.
In the Customizer
Menus
We’re currently still investigating a number of ways that we might improve the menu management experience.
In nav-menus.php
Inline
Editing blocks in-context
Once we have converted widgets and other elements like menus into blocks, what we can do in phase 3 (or 2+, depending on how things go) is to bring all of these elements together into a full site editor, where you no longer have to hunt for controls in the customizer menu, but can instead just edit blocks like menus and widgets in place on your site.
Instead you could add blocks wherever you need them to go and see them previewed in context. Once we bring this all together we start to realize a vision of WordPress making the web fully editable in a way that is powerful, flexible, and accessible to everyone from beginners to experts.
To recap, Gutenberg Phase 2 will:
Be outside of post_content.
Focus on customization.
Upgrading themes, widgets, & menus.
Early version of phase 2 will be in the pluginPluginA 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. Be sure to reactivate it!
You must be logged in to post a comment.