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 WordPress.org theme directory earlier this summer.

You can find full page mockups of Twenty Twenty here:

  • Sub page (Desktop)
  • Sub page (Mobile)
  • Blog post (Desktop)
  • Blog post (Mobile)

Timeline

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: https://github.com/WordPress/twentytwenty. 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:

  • Why Default Themes Change Each Year
  • Introducing Twenty Nineteen
  • Introducing Twenty Seventeen
  • Introducing Twenty Sixteen
  • Takashi Irie on Twenty Fifteen
  • Takashi Irie on Twenty Fourteen
  • Joen on Twenty Thirteen
  1. Really looking forward to this. Beautiful work so far!

  2. +make.wordpress.org/themes

  3. +make.wordpress.org/design

  4. Beautiful! 👏

  5. STOKED.

  6. Awesome.

  7. Looking good! 👏🏻

  8. Very much excited about this one. I love Anders’ work, especially the Chaplin theme, and think this has an opportunity to be even better. Great work, team 🙌.

  9. This is super awesome. Looking forward to contributing, again this year. Welcome, Andres as the team lead, very well deserved. I love your work.

  10. Thanks @anlino this looks beautiful.

    One privacy concern here is the use of a CDN hosted font (Inter) as this exposes the user IP to GitHub servers and Cloudflare CDN. It was my understanding that bundled themes would move away from Google Fonts and other hosted font services for privacy and performance reasons. As discussed in the core#46170 ticket;
    https://core.trac.wordpress.org/ticket/46170#comment:2
    *Would Inter support bundling it with the theme to remove these concerns?

    Another concern with the use of Inter is the known readability issues on Chrome (specifically on Windows) for variable fonts as mentioned on their FAQ;

    The variable font renders poorly in Chrome
    There are some known issues with variable fonts in Chrome, in particular on Microsoft Windows. You may see an effect similar to “ink bleed” where shapes overlap, for instance where the vertical and horizontal stems meet in “+” or “t”. On Windows you may in addition see incorrectly placed glyphs that looks like poor kerning (spacing between characters) and even some glyphs being lower or taller than other glyphs. It is recommended to avoid using variable fonts on Chrome. See the Chromium bug tracker for a list of variable-font related issues.

    Reference – https://rsms.me/inter/
    Reference (Chromium bug tracker) – https://bugs.chromium.org/p/chromium/issues/list?can=2&q=variable+component%3ABlink%3EFonts

    Sorry to be the first to raise a flag I just wanted to have these concerns voiced early so they can be accounted for before work has commenced.

    • Hey Garrett, thanks for bringing this to our attention. Could you please add your concern as an issue in the GitHub repo so we can track and discuss.

      • Good call @ianbelanger I’ve opened a ticket here;
        https://github.com/WordPress/twentytwenty/issues/4

    • Good catch Garrett!

      Reminds me of an article that once wrote on this topic using a similar vector…

      Lucky for me, we live in an age where people install npm packages like they’re popping pain killers.

      So, npm was to be my distribution method. I would need to come up with some borderline-useful package that people would install without thinking — my Trojan horse.

      – David Gilbertson

  11. This is looking great! Looking forward to it.

  12. Looking good!

  13. I love it!
    I heard it was inspired from the Chaplin theme, will it offer a similar fly out menu like Chaplin too?

    • I see the Git is already up, gonna check it out.

  14. I still think that Twenty-fifteen was the “Best Theme” of all time!
    Just felt right. But can’t wait to see if 20/20 is better.

  15. awsome👌

  16. I was loving Chaplin, now I’m in love with this one, looking forward to your excellent work as usual Anders!

    • It looks very beautiful, thanks! It will be easy to create diverse websites using the theme and the new editor.
      I can’t wait to start! 🙂

  17. Looks beautiful, @anlino! 🙌

  18. So glad Andres was chose as design lead and his theme as a base for Twenty Twenty. Well deserved and very good decision on WordPress part 🙂 Looks awesome!

  19. Ehmm. We still need to find suitable typefaces for Cyrillic, Persian, Arabic, Japanese, Georgian, etc.

    • What about using the same fonts as defined in /* Fallback for non-latin fonts */ on twentynineteen/sass/mixins/_mixins-master.scss, @tobifjellner?

      • Probably ok, but if I saw correctly, the headings seem to be a non-serif while body text is a serif font.
        Let’s say I’ve got a multilingual site with English and Russian, then I’d like to have a similar graphical feeling when a visitor jumps forth and back between the languages.
        Perhaps even an easy way for the users to select font themselves? (Still, of course, with good default values and fall-backs!)

  20. Looking good 🙂

  21. I am so excited to see this! What an awesome theme and team!

  22. Looks great! Exciting!!

  23. Exactly the theme we need and developer we deserve.

  24. It’s looking great.

    As I commented elsewhere, I really hope Anders and this team can refocus the default WordPress theme on what matters the most: be useful to the average user.

    It is the common user who should be privileged in the default theme, to get a usable, customisable theme where you can experience the potential of the block editor for the “average” site, not blogs.

    • ^ ^ This.

  25. This looks incredibly promising. Nice choice. Kudos 🙂

  26. This looks awesome!

  27. if changing the background color of the site itself, the same color is used when editing a post (any post type).

    On the frontend, the text automatically changes to white if choosing a dark background, but the same change do not apply when editing.

  28. This seems like a modern theme, so well done. I just have a few points:

    1. Looks like when viewed on a shorter device, the top is just black on white, which is very plain, i.e. above the fold, sites will looks the same.

    2. It’s not clear from the mockups which parts are done by the theme and which are done by the block editor. Can you please elaborate?

    3. Is the paragraph under the post heading taken from the post excerpt?

    4. Many logos do not conform to the dimensions of the words “Twenty Twenty”, which means that when inserting a logo, things are likely to move. Can you please style the header to accommodate image logos at varying aspect ratios?

  29. What I am looking for…

    • Fixed menu on top
    • Sidebar area for posts and archives
    • Sidebar area for pages

    Anyone with the same requests?
    grtz

    • Yes! I would love to see an option for sidebar in the default theme.

  30. Hey, in the social menu, is there a way to request an icon be added (Telegram)?

    Thanks for this article, I’m really enjoying setting up this theme. Love how well it takes advantage of Gutenberg.

  31. does the thema use the field excerpt?

  32. I am very excited to try it on my website.

  33. How to setup a ‘sub page’ like mentioned in this post? Is there a manual for this?

  34. Just wondering how can I delete the “title” block from a page? I don’t have huge headlines, and having the block there moves my center image and content is shoved down.
    Thank you

  35. I would love to have option to show full text of the post on the homepage or excerpts. I don’t know how to edit CSS to show full posts, and only excerpts by default are disappointing =(

    • Oops. That was just a matter of settings in theme customization. Somehow I missed that initially.

  36. In Firefox (both developer and standard edition) the letters in the headline under Mac OS is mushed together.

  37. One of the examples shows a subtitle under the title. Is this still possible in TwentyTwenty? If so, how? Or was it deprecated?

  38. Is this theme, compatible with ContactForm and VisualComposer?

Comments are closed.