Twenty Twenty-Three, the default WordPress theme sporting many styles that will launch with WordPress 6.1.

  • By WordPress
  • Last update: Jan 6, 2023
  • Comments: 12

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

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

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

Twenty Twenty-Three

Welcome to the development repository for the default theme that will launch with WordPress 6.1.

About

Twenty Twenty-Three is a stripped-back and minimal version of Twenty Twenty-Two, and will include a diverse collection of style variations designed by members of the community.

Just want to see a preview of what the theme currently looks like? Check out the demo site.

Please see the design specification for more information about the default typography and spacing settings.

Contributing

If you would like to contribute code, the list of open issues is a great place to start looking for tasks. Pull requests are preferred when linked to an existing issue.

Contributing is not just for developers! There are many opportunities to help with testing, triage, discussion, designing and building variations, and more. Please look through open issues, and join in wherever you feel most comfortable.

If you'd like to help with triage, let @mikachan and @beafialho know here or in WordPress.org's Slack instance. The #core-themes-projects channel is a good place to start. We'll help you get set up with the ability to add labels to issues and PRs.

Contributing Style Variations

A big part of Twenty Twenty-Three is to emphasize a diverse collection of style variations, so this is a great way to contribute to the theme! You can read more about this in the project kick-off post.

Design a style variation

This can be done a few different ways, including:

  • Create an alternate theme.json file to the one provided by the theme and change values directly in the code.
  • Make changes in the Global Styles panel in the Site Editor. You can save these changes as a new style variation using the Create Block Theme plugin.
  • Design static mockups in Figma or a similar program.

Submit your style variation

When you're ready to submit, please create a new issue and share your designs:

  • Theme.json files can be submitted as code or as zip files.
  • Add images that showcase the look & feel of the variation.
  • Include a style guide with design specifications — this should include details on typography, colors, spacing, etc. Here’s an example.

Getting Started

To get started with development:

  1. Set up a WordPress instance, we recommend wp-env or Local as an alternative to docker.
  2. Install the Gutenberg plugin
  3. Clone / download this repository into your /wp-content/themes/ directory

Tips for Contributors

  • Similar to Twenty Twenty-Two, a goal for the theme is to have as little CSS as possible. Much of the theme's visual treatments should be handled by the Block Editor and Global Styles. As a general rule, if multiple themes would benefit from the CSS you're considering adding, it might reasonably be provided by Gutenberg instead. Let's include clear code comments for any CSS we do include.
  • Similarly, let's refrain from building any custom-built PHP or JavaScript-based workarounds for functionality that might reasonably be provided by the Block Editor. Twenty Twenty-Three will be a block theme, so let's keep its code simple.
  • In accordance to those last two bullets, this theme has no required build process.
  • If you've helped contribute to the theme in any way, you deserve credit! Folks will be updating CONTRIBUTORS.md periodically with names of contributors, but feel free to open a PR or issue if we leave someone out.

Requirements

  • Gutenberg plugin (latest)
  • WordPress 6.1+
  • PHP 5.6+
  • License: GPLv2 or later

Some theme features / PRs may require Gutenberg trunk and will be described or tagged accordingly.

Resources

Timeline

The theme will be released with WordPress 6.1 and follow the key dates / milestones associated with its development schedule.

Github

https://github.com/WordPress/twentytwentythree

Comments(12)

  • 1

    Use "background" and "foreground" color slugs instead of "base" and "contrast" for consistency and compatibility

    Currently, the theme.json declares base and contrast colors that match the background and text colors of the site. To be consistent with Twenty Twenty-Two, the Colors inside the Figma Styles page, and a majority of themes (Poe, Blockbase, Vivre, Pendant, Extendable, Lyna, Gutenify, eStory, Lawson...), we should consider using the background and foreground slugs along with the "Background" and "Foreground" names.

    Moreover, having the same color slugs as Twenty Twenty-Two would allow users to easily switch from Twenty Twenty-Two to Twenty Twenty-Three.

  • 2

    How to improve TT3 system font appearance?

    I realize this has been discussed before, and despite all previous arguments, the current font appearance looks far from ideal in retina screens: rough and, in my opinion, not helping in readability at all.

    Here's a screen recording of the difference in the font appearance with font smoothing.

    https://user-images.githubusercontent.com/65220155/194298999-d32e9766-bc5b-4a22-9e98-a00b26fe53af.mp4

    I'd like to reopen up this discussion in order to get to a good final result.

  • 3

    Use generic font family slugs

    We should consider using more generic font-family slugs (i.e. body, heading, etc) instead of slugs that are specific to the font family that is registered within settings.typography.fontFamilies.

    The fonts loaded within settings.typography.fontFamilies are only available on the active style, resulting in CSS variables

    Why:

    If a the parent theme.json file registers a font, like DM Sans, and uses a slug of dm-sans — whenever we switch styles we're left with an undefined CSS variable output wherever we used "fontFamily": "var(--wp--preset--font-family--system-font)".

    Also resulting in none of the parent theme.json's font family values will carry over to subsequent styles.

    Below is a screenshot of the CSS generated if you have a specific font-family slug from the parent theme.json that is not available (different font) from a style variation.

    Proposal:

    Instead if we used body and heading slugs, then those CSS variables will be meaningful within other style variations. A heading with "fontFamily": "var(--wp--preset--font-family--heading)", assigned to it, still maintains the style variant's fontFamily that has the slug of heading.

    Having a style that actually inherits the parent style seems the best foot forward in my opinion. And even if we end up not having fontFamilies within the parent theme.json, we should still have these consistent values across the theme — from variation to variation. Example: if I choose my theme's heading font (DM Sans) then switch styles, then that style variation's heading font should take over wherever I used the previous one.

    What do you think?

    Screenshot:

    CleanShot 2022-08-10 at 22 01 20@2x CleanShot 2022-08-10 at 21 45 55@2x
  • 4

    Undefined name for XX-Large font size setting

    I noticed a missing name value for the xx-large font size.

    The others have a value from core (i.e. "Small", "Medium", "Large", Extra Large") — but xx-large is custom to Twenty Twenty Three, so it does not have a name.

    CleanShot 2022-10-13 at 16 01 56@2x

  • 5

    Canary Variation: Headings element changes not sticking

    When using a fresh site using 6.1 Beta 3 and TT3, I noticed that when trying to change the heading element for Canary, the changes wouldn't register:

    https://user-images.githubusercontent.com/26996883/195118706-8a44d4c1-196f-4cb7-b88d-7d21ca5f7ac6.mov

    This seems to vary by style variation though as with other variations it works fine!

  • 6

    Add `accessibility-ready` tag

    It would be great if we could add the accessibility-ready tag to this theme.

    Based on the conversation around adding this tag to TT2 in the trac ticket here, I believe the tag could also be added to TT3.

    Opening this issue in case anything is blocking this (maybe https://github.com/WordPress/twentytwentythree/issues/182, but these should all be fixed soon), and to serve as a reminder to add the tag.

  • 7

    Add caption styles in theme.json

    I think it would be worthwhile to add caption styles in theme.json. In doing a bit of testing, there is a good amount of visual inconsistency between the Editor and Frontend. This is due to Editor specific styles that do not get loaded on the Frontend, which is a separate issue in my opinion. But until that is address/discussed in Gutenberg, simply adding theme-specific caption styles in theme.json would solve this.

    Editor:

    image

    Frontend:

    image

  • 8

    Consider adding variations in theme screenshot

    It could be nice to make the screenshot a little more elucidative so that when a user installs it, they understand they have all those options to choose from. I tried searching for screenshot requirements and found this.

    Even though it says to keep the graphics near the center, I thought these were a nice way to present them.

    TT3 Screenshot-1 TT3 Screenshot-2

    Here are some not so obvious versions:

    TT3 Screenshot-3 TT3 Screenshot-4

  • 9

    Variation "Pastel"

    Screenshot: Screenshot 2022-08-15 at 12 35 34

    Figma Link: https://www.figma.com/file/CHvE6JTndoOlNMN76JjRUT/TT3-Variation-%22Pastel%22?node-id=2%3A9

    JSON: variation-pastel.json.zip

    Not sure if we are able to change a bit header and footer backgrounds or do we need to stick to the default Figma file as it is and play just with the colors and fonts? Can we submit more than one variation :)?

  • 10

    Block Out variation: Reduce XXL font size

    This reduces the XXL font size preset in the Block Out variation by around 50%, as discussed here.

    These are before/afters of the maximum size on my screen, at the same browser resolution:

    Header:

    | Before | After | | ------ | ----- | | image | image |

    Footer:

    | Before | After | | ------ | ----- | | image | image |

    Closes https://github.com/WordPress/twentytwentythree/issues/251.

    cc. @kathrynwp

  • 11

    Use Cover block instead of Post Featured Image to enhance designs

    I've worked on a design in Figma with the provided template, before actually looking at the code. I noticed that for the queries and templates, the Post Featured Image block is used to display images. In my design, I thought of giving the images a gradient overlay like you can do with the Cover block. But with the current setup, this design is not possible.

    So I want to kick of a discussion of changing the Post Featured Images to Cover blocks, to enable a wider varierty of designs. Any thoughts?

    Here's a preview of my design: grafik

    I also saw that @critterverse has been working on a design using duotones but the images don't really display well there. I think with using a gradient, it would be much more pleasing to the eye: https://github.com/WordPress/twentytwentythree/issues/125

  • 12

    ⚠️ NEW ISSUES SHOULD BE CREATED ON TRAC

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

    Please prefix tickets with Twenty Twenty-Three: 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

    https://core.trac.wordpress.org/search?q=twenty+twenty-three%3A

Popular Tag

Related