Twenty Twenty update

As beta 2 comes into focus, it’s time to give a little update on what has been happening in the frenetic creation of a new default theme.

First, a huge thank you to everyone that has been involved so far.Every single person has gone above and beyond to get the theme in the best possible shape.

Find the theme

Development of Twenty Twenty is happening on GitHub. The theme is of course included in every beta release of WordPress 5.3, but if you want to make sure that you’re running the latest version of the theme, you’ll find it on the GitHub repo. You can download a zip file with the latest version of the theme here.

The story so far

Twenty Twenty was revealed on the Make WordPress blog on September 6, and development has progressed rapidly since then. In less than a month, the community has created more than 300 issues and almost as many pull requests. Over 40 people have contributed code to the project, and many more have taken part in discussions on GitHub, the WordPress Slack channels (including but not limited to the core-themes channel), and in the comment forms on Make WordPress and elsewhere.

All of you have shaped Twenty Twenty into the theme it is now. Me, @ianbelanger and @poena (as well as @williampatton, who has been instrumental the past month) are counting on your help in bringing it across the finish line.

Focus now

The following are things the team are focusing on right now and need help with:

  • Template distilling: we’re exploring whether we can replace the current “Cover Template” page template with a block-only solution.
  • A demo site is being created in order to make it easier for more people to test the theme.
  • The work on non-latin fonts support is progressing nicely. That effort is spearheaded by @nielslange, and the plan is to have it merged before beta 3. When it’s merged, we’ll need lots of help with making sure the theme works great in non-latin languages.

Testing needed

As we get closer to release, we’ll need all the help we can get with testing the theme in different browsers, on different devices, and in different languages. Make sure you try out the color settings in the Customizer, which automatically adapt all colors in the theme to maintain a high color contrast. It will be a killer feature in Twenty Twenty, and all credit for it goes to @aristath.

If you discover a bug in the theme, or just something that has room for improvement, please create an issue on the Twenty Twenty GitHub repository.


Block Editor Theme-related updates in WordPress 5.3

WordPress 5.3 includes a lot of additions and refactoring to existing blocks in order to support new features. Some of this features require special care from theme authors in order to optimize the Block Editor theme integration.

The Group block

A Group block to act as an all-purpose container for other blocks has been introduce. If a theme does not support wide and full alignments, no CSS changes should be necessary. 

If a theme does support for wide and full alignments, some additional theme styles may be required to ensure child blocks appear as intended: depending on how your CSS is written, a theme’s usual alignwide and alignfull styles may not appear as intended when they’re applied inside of a Group block. 

The Group block contains an inner container (wp-block-group__inner-container) to help make styling easier. In many cases, that div can be used as a proxy for entry-content styles, allowing wide and full child blocks to appear as intended without modification. 

To illustrate this, here’s a simplified example of a common method for implementing wide and full block layout on the front end, using negative margins:

.entry-content {
	width: 60vw;
	margin: 0 auto;

.alignwide {
	margin-left: -10vw;
	width: 80vw;

.alignfull {
	margin-left: -20vw;
	width: 100vw;

In this scenario, only a few additional lines of code are necessary to implement Group block styles: 

// Apply entry-content styles to the group block’s inner container as well. 
.wp-block-group__inner-container {
	width: 60vw;
	margin: 0 auto;

// When a group block has a wide alignment, make sure that its full-width children do not extend beyond the width of the container. 
.wp-block-group.alignwide .alignfull {
	margin-left: -10vw;
	width: 80vw;

.alignfull {
	margin-left: -20vw;
	width: 100vw;

// Ensure wide and full-width children do not extend beyond the width of a standard-aligned Group block.
.wp-block-group:not(.alignwide):not(.alignfull) * {
	max-width: 100%;
	margin-left: 0;

Related PRs: 13964.

Reduced Block Styles specificity

In WordPress 5.3, the specificity of block editor CSS has been reduced. Specifically it changes how default block margins are applied, now targeting [data-block]. This should give more control to theme and plugin developers.

By default, all blocks will be born with a base margin. You can set that margin to zero in an editor-style:

[data-block] {
	margin-top: 0;
	margin-bottom: 0;

Related PRs: 14407.

Using class names for text alignment

In the previous versions of WordPress, inline styles were used to change the text alignment for the following core blocks:

  • Heading
  • Paragraph
  • Quote
  • Verse

This produced high CSS specificity making it very hard for theme authors to customize the look of those blocks. WordPress 5.3 uses classnames for text alignment to address these issues:

  • has-text-align-right – when block’s text is aligned to the right
  • has-text-align-center – when block’s text is aligned to the center
  • has-text-align-left – when block’s text is aligned to the left

All previously published posts should work as before. The affected blocks will automatically get converted to use the corresponding class names as soon as they are opened and saved in the block editor.

Related PRs: 16035, 16777, 16779, 16794.

Columns block classnames

The columns block have been updated to support custom widths per column. This led to the removal of the has-x-columns classname. Themes could have potentially relied on this classname to set the width of the columns.

Related PRs: 16129.

Color support for the separator block

The separator block now supports custom colors, this may impact themes that defines the separator color manually in their stylesheets. Themes should assign default colors to the separator only if the user didn’t apply a color explicitly. You can check the fix that was applied to the Twenty Nineteen theme to see how to achieve this.

Related PRs: 16784.

Table block markup update

The table block is now wrapped in a <figure> element, so that <table class="wp-block-table"> has been replaced by  <figure class="wp-block-table"><table>. This is to allow large tables to horizontally scroll within the figure container instead of forcing cell content to break and become unreadable on small screens.

Themes may be impacted by this change if they have used chained selectors like table.wp-block-table for styling. Themes should now instead use .wp-block-table to target the container, or .wp-block-table table to target the table element itself.

Related PRs: 16324.

Gallery block markup update

The gallery block is now wrapped in a <figure> element as well and may optionally contain a <figcaption> as a caption for the whole gallery.

Themes can style the caption using the classname .blocks-gallery-caption. The markup change will affect any themes using chained selectors such as ul.wp-block-gallery to style galleries. Themes should now instead use only .wp-block-gallery to style the container and the new .blocks-gallery-grid classname to style the ul element itself.

Related PRs: 17101.

Props to @kjellr, @joen, @gziolo, @assassinateur and @isabel_brison for helping with this dev note.

#5-3, #core-editor, #core-themes, #dev-notes

Introducing Twenty Twenty

The Block Editor will soon celebrate its first birthday in Core and with every update it grows more capable. The promise of the block editor is to give users the freedom to design and structure their sites as they see fit. The responsibility of a theme is to empower users to create their inspired vision by making the end result look as good, and work as well, as the user intended.

With that in mind, WordPress 5.3 will include a new default theme: Twenty Twenty. The Twenty Twenty team is @anlino as design lead, @ianbelanger taking charge of development, and @poena representing the Theme Review team.

The sub page view in Twenty Twenty.

A sub page in Twenty Twenty.

Twenty Twenty is designed with flexibility at its core. If you want to use it for an organization or a business, you can combine columns, groups, and media with wide and full alignments to create dynamic layouts to show off your services or products. If you want to use it for a traditional blog, the centered content column makes it perfect for that as well. 

As befits a theme called Twenty Twenty, clarity and readability is also a big focus. To that end, the theme will include the typeface Inter, designed by Rasmus Andersson. The tall x-height of Inter makes it highly legible in the smallest of font sizes, and provides a strong personality when used in big headings. 

Inter comes in a Variable Font version, a first for default themes, which contains all weights and styles of Inter in just two font files. In modern browsers, this will help keep the number of requests and the page size down. Older browsers will fall back to loading each weight as a separate file. Running text will be set in a stack of serif system fonts to keep load times short and data caps distant.

The single post view in Twenty Twenty.

A blog post in Twenty Twenty.

Twenty Twenty will include full support for the Block Editor, as well as editor styles that make sure the editing experience matches the end result. In order to speed up development, Twenty Twenty will be based on the WordPress theme Chaplin, which was released on the theme directory earlier this summer.

You can find full page mockups of Twenty Twenty here:


As mentioned in the release plan, WordPress 5.3 is targeted for release on November 12th, 2019. The first release candidate is targeted for October 15th.

Get Involved

If you are interested in contributing to Twenty Twenty, make sure you are following this blog. During the design and development process, there will be weekly meetings starting Monday at 19:00 UTC in #core-themes.

Theme development will happen on GitHub and in the interest of time, an in-progress version of the theme code has been uploaded here: Once the theme is stable, it will be merged into core 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:

Introducing Twenty Nineteen

Gutenberg grants users an unprecedented level of freedom to customize their site’s layout and design. In order to fully achieve their vision, users will need a new generation of flexible themes, built to take advantage of the creative freedom that Gutenberg offers.

With that in mind, WordPress 5.0 will launch with a brand new default theme: Twenty Nineteen. The theme will be led by @allancole, supported by @kjellr as a design coach.

Twenty Nineteen Theme, Blog Post Example
Twenty Nineteen Theme, Homepage Example

Full page mockups: Low-resHigh-res
InVision prototypes: Post Desktop, Post Mobile, Homepage Desktop, Homepage Mobile

At the core of Twenty Nineteen is its simple, sophisticated typography. The theme’s aesthetic is minimal and non-prescriptive, allowing the theme to work well in a variety of applications. For example: it is effective as an minimal, typography-driven blogging theme, but can also be adapted for use as a static business website.

Twenty Nineteen will ship with full Gutenberg support. It will include both front and back-end styles, so that users can be fully confident in their site’s appearance when they hit publish.

Twenty Nineteen Theme, Gutenberg Editor Styles Mockup


As mentioned in the release plan, WordPress 5.0 will be released on November 19th, 2018, so this is a faster-than-usual theme build. The first release candidate is estimated for the end of October, so we’ll want to have a working version of the theme ready by then. Because of time limitations we may remove Twenty Nineteen from 5.0 if it is not ready in time for launch.

Get Involved

If you are interested in contributing, please be sure to follow this blog. During the design and development process, there will be weekly half-hour meetings every Tuesday at 16:00 UTC in #core-themes, beginning today, October 16, 2018.

Theme development will happen on GitHub and in the interest of time, an in-progress version of the theme code has been uploaded here: Once the theme is stable, it will be merged into core and the GitHub repo will be depreciated.

Some notes:

  • The theme is based on both _s and the gutenberg-starter-theme.
  • SASS is used in some key areas which has been helpful for keeping styles in-sync between the Gutenberg editor, and the front-end experience. This is not usual for a default theme and open to debate.
  • There is plenty of work left to do too and issues will be created in the coming days to help guide the process.

Learn more

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

Dev Chat Summary: May 23rd (4.9.7 week 1)

This post summarizes the dev chat meeting from May 23rd (agenda, Slack archive).

4.9.6 feedback

  • 4.9.6 was released on Thursday, May 17th thanks to the leadership from @desrosj and @allendav, heavy assists from @sergeybiryukov, @azaozz, and everyone over in #gdpr-compliance 🎉
  • Important developer and site owner topics included in 4.9.6 (New PHP Polyfills and Changes that Affect Theme Authors) all included within the 4.9.6 Update Guide
  • Auto updates were initially left off for 4.9.6 for about one day to evaluate incoming support requests and make sure there were no issues with the more than “normal” amount of code introduced
  • Initially some reports of users seeing a white screen on their sites, tracked to a small handful of plugins that were hooking into one of the new Privacy features using `init` instead of `admin_init`, and this was causing a very edgy edge case on some installs (see #44142)
  • Thus, auto updates have remained off for 4.9.6 to avoid more potential issues, documentation in the Plugin Handbook was updated with a notice describing that using `init` would potentially introduce problems on sites, and @ipstenu reached out to each plugin that was using this hook to inform them of the issue
  • Currently no plugins in the .org directory that implement the new privacy features incorrectly
  • As of devchat, auto updates have not been enabled and we need to plan when 4.9.7 should be released, and what it should contain
  • @matt reiterated that we’re going to put enhancements, new features, notices, and anything else we need into 4.9.x while we work on Gutenberg
  • Discussion on enabling auto-updates lead to agreement to do so; note that @pento enabled auto-updates ~4 hours after devchat

4.9.7 planning

  • Potential focuses: GDPR fixes, TinyMCE update
  • Leads: @sergeybiryukov able to help as deputy (e.g., committing, backporting); @danieltj, @desrosj, and @tristangemus open to help contribute during 4.9.7
  • Please comment on this post, ping @jeffpaul, or comment during the next dev chat for nominations (self or otherwise) for release leads on 4.9.7

Updates from focus leads and component maintainers

  • The Gutenberg team continues to iterate and shipped v2.9 on Friday, May 18th; check the release post for more details
  • The PHP team posted a summary from their meeting last week and welcome everyone to join their next meeting on Monday at 15:00 UTC when they’ll discuss whether there’s updates on the “Upgrade PHP” design review and discuss “Requires PHP” enforcement details

General announcements

  • @clorith: When making changes to twenty-themes we should note somewhere that we made changes to them in a release. Not everyone was happy about a theme update in 4.9.6 as well that added output to their footers. (related #44202)
  • @danieltj has also begun a proposal draft for Dark Mode on GitHub and is open to help, so please review if you’re interested/available

Next meeting

The next meeting will take place on May 30, 2018 at 20:00 UTC / May 30, 2018 at 20:00 UTC in the #core Slack channel. Please feel free to drop in with any updates or questions. If you have items to discuss but cannot make the meeting, please leave a comment on this post so that we can take them into account.

#4-9-6, #4-9-7, #core, #core-php, #core-themes, #dev-chat, #gdpr-compliance, #gutenberg, #summary, #tinymce

Dev Chat Summary: September 21 (4.7 week 5)

This post summarizes the dev chat meeting from September 21st (agenda, Slack archive).


  • Schedule: As of this meeting, we are 4 weeks from the final chance to merge in major features. This includes Twenty Seventeen.

Bug Scrubs

Components & Features

  • Twenty Seventeen (@davidakennedy, @melchoyce)
  • REST API (@krogsgard, @kadamwhite )
    • Latest update
    • API discussion is at 7 am Pacific on Mondays
    • Settings endpoints and meta support both have first-passes on them, which need internal review and some more testing before we ship
    • We have a path forward for passworded posts (password in the query string, eww, but only viable option), there really isn’t a way we can see to avoid sending them as a query param
    • Meeting tomorrow in #core-restapi at 21:00 UTC to go through open issues around non-trivial, conceptual issues in WordPress. REST API team will prepare summary of issues for component maintainers and/or lead devs to review, question, and help guide discussion towards consensus.
  • Media (@mikeschroder, @joemcgill)
    • Latest update
    • Moving our weekly meetings up to Fridays at 17:00 UTC starting this week
    • Unexpected change to media title behavior in WP 4.6.1 (#37989) – The main issue here was resolved, but there seems to still be some odd behavior affecting words being chopped off filenames with international characters. Could use extra eyes from anyone (along with @sergey) more versed in i18n. Regression on the attachment titles that we generate on upload all became URL encoded instead of reading like a normal title.
    • Media search doesn’t include file name (#22744) – Committed earlier this week. Please report any issues that come as a result.
    • Next step in improving the organization of the media library is to assess both the infrastructure and UI improvements that need to be made here. Prefer to include #design early in this process, rather than asking for UI feedback on development driven decisions, hope to be part of the #design chat agenda tomorrow
  • Customize (@westonruter, @celloexpressions)
    • Latest update
    • In this week’s meeting we developed a schedule for publishing make/core feature proposals/dev notes for the remaining primary 4.7 customize projects, working backward from anticipated time to commit after the proposal and current readiness:
      • Week of 9/19: Improving sliding panels UI (34391, @delawski)
      • Week of 9/26: A new experience for themes in the customizer (37661, @celloexpressions). Please review soon for any requested changes in direction or design.
        • Summary: The existing themes section in the customizer is replaced with a full-screen theme browser and installer… The UI is nearly identical to wp-admin/theme-install.php… The .org-based theme-install previewer is not accessible here because it is likely to cause confusion with its customizer-like interface and the resulting need to switch contexts back and forth… An overarching goal is to avoid switching in and out of the admin/frontend/customize contexts during theme installation and previewing, instead staying in the hybrid customizer context that provides a combination of frontend plus controls… On the technical side, this heavily leverages JS-templated customizer controls and scales nicely to hundreds of themes.
        • Visual:
        • Please comment on the ticket with your feedback as soon as possible, preferably with specific concerns/ideas and reasons.
        • @celloexpressions to check in with @karmatosed on user testing ahead of posting final feature proposal
      • Week of 9/26: Customize transactions (30937, @westonruter evaluating this week and might punt again)
      • Week of 10/3: Code-editing gateways, via CSS (35395, @johnregan3/@celloexpressions). Awaiting approval/feedback on the acceptability/ability to bundle the two proposed libraries in core, with feedback particularly needed from committers and anyone familiar with the Jetpack fork of CSSTidy.
      • Week of 10/10: Customizer browser history (28536, @westonruter)
  • I18n (@swissspidy)
    • User Admin Language (#29783) – almost ready, another review this week and will commit if no blocker pops up
    • Introduce a locale-switching function (#26511) – @ocean90 to do some benchmarking
    • Introduce some JavaScript i18n functions (#20491) – GlotPress side has a solid plugin for exporting translations as JSON files (assistance on testing would be helpful). Still tinkering with the WordPress side and would love to get some additional feedback there.
  • Editor (@azaozz, @iseulde)
    • No updates, but would love to figure out a way to get more user feedback that helps us set direction for the editor. Will look to add some Core questions to annual survey on Otherwise will start with something in the beta tester plugin, biased audience but it’s one that exists, is more likely to opt-in, and will be more flexible.
  • HTTPS (@johnbillion)

Open Floor

  • @pbearne on Add filters to wp_new_user_notification and wp_password_change_notification (#38068) – added a set of filters to allow us to override email messages send by the wp_new_user_notification and wp_password_change_notification functions. @johnbillion to review as it relates to work on notifications.
  • @danieliser checking for interest for core in a set of reusable templates, models & functionality for forms, tabs & modals
  • @ericlewis on Bulk actions: Reactivate bulk actions hook + add hander hook for all admin screens (#16031) – could use a review of the latest patch, looking to commit sometime in the next week
  • @dshanske still working through the Pings and Trackbacks component

#4-7, #core, #dev-chat, #summary