This post was written in collaboration with Lauren Stein (@laurlittle) and Anne McCarthy @annezazu).

Twenty Twenty-Three is here, alongside WordPress 6.1! The new default theme offers a clean, blank canvas bundled with a collection of style variations.

Style variations are predefined design options that give you the opportunity to alter the appearance of your site without having to change your theme. This means that you can keep your template structure but change the visual details of your site with ease.

For a truly diverse collection, Twenty Twenty-Three’s featured style variations were submitted by members of the WordPress community, resulting in 38 submissions from 19 people in 8 different countries. From those submissions, a curated collection of ten was chosen and bundled with the new theme.

This approach to style variations ushers in the next generation of block themes, able to harness the potential of the platform’s latest design capabilities and tools directly in the Site Editor. Since style variations don’t require any code experience, you’re encouraged to tweak and/or create your own.

Thank you to everyone who contributed.

Useful links:
Download Twenty Twenty-Three
Twenty Twenty-Three Documentation
Twenty Twenty-Three Project Kick Off
Twenty Twenty-Three Selected Style Variations

The new homepage brings more attention to the benefits and experience of using WordPress, while also highlighting the community and resources to get started. 

The new download page greets visitors with a new layout that makes getting started with WordPress even easier by presenting both the download and hosting options right at the top.

This redesign was made possible through great collaboration between Design, Marketing, and Meta teams. Thank you to everyone involved throughout this update:

@abuzon @adamwood @adeebmalik @alexandreb3 @alipawp @angelasjin @aniash_29 @annezazu @beafialho @bjmcsherry @chanthaboune @colinchadwick @crevilaro @critterverse @dansoschin @dd32 @dufresnesteven @eboxnet @eidolonnight @elmastudio @fernandot @geoffgraham @iandunn @javiarce @joedolson @jpantani @kellychoffman @laurlittle @marybaum @matt @maurodf @melchoyce @mikachan @nikhilgandal @pablohoneyhoney @peakzebra @poliuk @priethor @psmits1567 @renyot @rmartinezduque @ryelle @santanainniss @sereedmedia @sippis @tellyworth @tobifjellner @webdados @willmot

Your comments, including some feedback from the 2016 redesign, were taken into consideration with this work. Expect more updates to come as efforts to jazz up WordPress.org continue.

In June 2021, @beafialho in collaboration with @pablohoney floated the idea of giving WordPress News a new look. Today, those ideas become a reality—we’re excited to share that redesign of WordPress News is live!

The new design leans on the aesthetics of jazz, intrinsically connected to WordPress and which ultimately translates its uniqueness, historic significance and future potential. Among other improvements, the new design leaves more space for content and includes new typefaces for better readability. It also uses a color palette intended to reflect the evolving Gutenberg language.

The revamp of the WordPress News page includes the header and footer of the page. We also shipped those two global elements to all pages of WordPress.org. However, there’s more work to do within the header to improve the information architecture. This new design is just the first, small step to modernize and improve the site iteratively. Any further discussion on future redesigns will occur in the #design channel on Slack.

Take a look around and subscribe to WordPress News if you haven’t already. If you see something in the design that doesn’t look right, please submit an issue on GitHub.

WordPress 5.9 is expected to be a ground-breaking release. It will introduce the next generation of themes with Twenty Twenty-Two joining the fun and over 30 theme blocks to build all parts of your site. In anticipation of the January 25th release, we hope you enjoy this sneak peek of 5.9.

New design tools will allow you to create exactly what you want, from adding filters to all your images to fine-tuning the border radius on all your buttons. With WordPress 5.9 providing more design control along with streamlined access to patterns, you can easily change the entire look and feel of your site without switching themes.

No matter what you’re editing, whether it’s crafting a new post or working on a header, improvements to List View make it simple to navigate content regardless of complexity. More improvements and features for everyone are to come in this release and we can’t wait to see what you create with WordPress 5.9! 

Stay Tuned

Stay tuned for more updates as the date draws near. If you want to help, the best thing you can do is test everything! For all the details, check out this Make Core post.

Video props: @annezazu (also co-wrote the post) @michaelpick @matveb @beafialho @javiarce @critterverse @joen.

An exciting update to the Gallery Block gives you more ways to show off images in your posts and pages. While this change won’t be available for most folks until WordPress 5.9’s launch in January 2022, we wanted to share some of what’s to come to get you excited about the future.

Style individual images

You can now use the same tools that are available for individual image blocks on each image in the Gallery Block! This added flexibility means you can do more customization – from adding links to each individual image, inline cropping to edit on the fly, apply unique styles for more visually compelling images, and apply an array of duotone filters.

Add custom styles

For more advanced folks who like to go a bit deeper in their customizations, you now have the option to add custom CSS styles per image. This is thanks to the ability to assign CSS classes to each image.

More accessible and intuitive 

With this change comes the benefit of improved keyboard navigation and the ability to add alt text right within the block sidebar. You can also drag and drop to rearrange images.

Next steps

This will be available in January with the release of WordPress 5.9. You can check it out now if you’re using the Gutenberg plugin on any of your sites. Read more about becoming an early adopter if you’d like to get ahead.

If you’re a plugin or theme author who has built upon the Gallery Block functionality, be sure to check out this Dev Note detailing what steps need to be taken for compatibility since this is a breaking change.

We’re excited to see the new galleries that these options open up and what ideas you have to make creating galleries even better.

A list for all seasons. Developers have the wp-hackers mailing list to discuss core and plugin code. Sometimes UI/UX stuff comes up and gets discussed there, but there is a whole universe of discussion around navigation labels, gradients, button styling, layouts, alignment, etc. that would be clutter on wp-hackers. Designers need a list to call their own, and now we have one. You can sign up for the wp-ui list to discuss ways to improve the interface or user experience of WordPress, and to discuss progress on design-related projects for the open source project, like the design challenges we’re going to have.

Design Challenges. We learned a lot from the icon design and header refresh contests, and we want to do these kind of open design challenges on a regular basis to give UI/UX designers who want to contribute to the WordPress open source project more opportunities to do so. If we could do one per month, that would be ideal, keeping the challenges relatively bite-sized to allow potential contributors an easy way to get involved at first. As each challenge is posted, people can use the list to bounce ideas off each other and work toward optimal solutions. I’m hoping the design challenges will evolve to be less contest and more collaboration. We’ll announce the first one before the end of January, so if you’re interested, please sign up for the list! (Hint: one will likely be a touch up to the Right Now dashboard module, to improve the information design, and there will be a couple of screen layout challenges coming up as well.)

Distributed Usability Testing. We started to try this out last year, and several dozen usability professionals volunteered to help get the program going, but a combination of scheduling and infrastructure issues combined to stall the progress. Having the “UI/UX contributor team” infrastructure in place, starting with the mailing list, will make it much easier to get this project going again.

Chit-chat. The weekly developer chats in IRC at #wordpress-dev have been very productive. We’ve created an IRC room at #wordpress-ui on irc.freenode.net so that we can have the same kind of “water cooler” for UI/UX contributors as for core code contributors. In addition to being a place where you can drop in and discuss core UI/UX (note: this room will not be a place to discuss the design of blog themes, it’s to discuss the design of the WordPress application itself), we’ll set up a weekly chat. Choosing a day and time for the chats will probably be the first discussion on the mailing list.

A blog of our own. Once again, taking a page from the code contributor infrastructure, we’ll set up a blog for UI/UX updates, announcements, progress reports, etc. This will be on WordPress.org in the nearish future, and will be announced to the mailing list when it is live.

So, if you want to become a contributor to core WordPress by using your design skills, join the wp-ui mailing list and get ready for a fun year!

For readers who aren’t familiar with the process behind usability testing, here’s an overview. First, determine the scope of your test and create a test protocol/script. Determine the audience segments to be included in the test group(s), and begin recruiting. Recruiting may mean hiring an agency to find participants, but for testing WordPress, it makes more sense to recruit from within this community, so that means making a screening survey, reading all the responses, segmenting the respondents into categories and contacting people until you’ve filled your desired quotas (for whatever segments you’re seeking, such as newbie, experienced user, developer, CMS user, photoblogger, mobile user, etc. ). Then come the test sessions.

Depending on what is being tested, these last anywhere from half an hour to an hour and half apiece. Sessions are generally recorded using screen capture and web cam, with a video camera for backup. The moderator(s) generally take notes during sessions and/or (depending on what software is being used for the session capture) set markers in the video to indicate task completion, comments of interest, etc.  In some cases, auxiliary test methods such as eye-tracking may be included. When the sessions are complete, the results are analyzed. All the notes and videos are reviewed, patterns are identified, and ultimately a report is written and the feedback informs the next round of revisions.

Some people think it shouldn’t take much time to do all this. I’ve lost count of the number of people who cite an old article by Jakob Nielsen that says you don’t need to test with more than 5 users because usability issues become clear right away. While I’ve found that to be generally true, when your user base is as diverse in experience level, usage, platform  configuration, language (right to left languages have a pretty different experience) and demography as the WordPress community is, 5 users really isn’t enough to get a clear picture. We try to test with at least a dozen people each round, but then we are limited to a geographic region (test in NY, test in SF, or test wherever we can schedule enough people back to back to make it worthwhile), while WordPress users are located all over the globe.

To address this, we’re introducing a set of new contribution opportunities to expand our usability testing program. As with development and graphic design, we’re going to create an infrastructure to allow community participation in usability testing on a regular basis and in a much broader capacity than existed before, when it was limited to announcements that we needed participants in x city on y date. We’ll be looking for volunteer moderators as well as participants, hopefully from all over the world.

Moderators. Observational usability testing isn’t rocket science, but neither is it a simple task to reduce bias. Because of this, at first we’ll choose only moderators who have professional experience conducting usability tests. People who conduct testing for design agencies, software companies, usability consulting firms and the like will be our first round draft picks. In the future, when we have a group of regular volunteers and have ironed out any kinks in the process, we’ll ideally match up experienced testers with aspiring ones, using a mentorship model to increase the number of people who can contribute in this fashion.

Participants. If you use WordPress, chances are you could participant in a usability test at some point. In some cases we’re looking for particular behaviors (people who upload large video files, people who blog from their iPhone, people who manage more than 5 blogs, etc.), while other times the behaviors we’re looking for are much more common (do you have widgets in your sidebar, have you changed themes in the last 6 months, is there more than one author on your blog, etc.).

So how will these opportunities come into play, and how will it make WordPress better?

We’ll start with the moderators, and try to get volunteers with a decent geographic spread. Then, we’ll start signing up potential test participants in those areas (though we’ll also allow at-large registrations, since traveling testing will still be happening). We’re working on a registration process for potential participants. You’ll enter your basic info (location, contact info) and answer some questions about your WordPress usage to be entered in the database, and when there’s a testing opportunity coming up that’s appropriate for you, a local moderator will get in touch to see if you’re interested. Further down the road we may experiment with remote testing and other methods, but for now, this approach will broaden the geographic scope of our testing.

All moderators will follow the same test protocols and script, and their results/reports/video will be reviewed and collated, with a composite report (including the protocol/script that was used) published to the community. This will provide designers and developers with broader feedback during the dev cycle, and will allow the wider community to both understand and participate in the testing program.

If you’re interested in being a moderator during this initial phase (meaning you do it professionally), send me an email and introduce yourself. If you’re interested in signing up as a potential test participant, watch this space. We’ll post a link to the registration survey once it’s ready.

As several people have rightly pointed out, the Fluency-style designs not only took the top spot, but in combination added up to a higher percentage than any other. We’re not focusing solely on that statistic, though, because had other designers submitted multiple versions, the numbers might have looked different. What was most interesting for me was checking in on the votes over the course of the two days the poll was open. The top three (Fluency-dark, Current 2.7, MT) kept beating each other out for the #1 spot as they cycled back and forth through the top three slots, and had the poll closed on time (left it open a little longer in case anyone translated the time zone incorrectly), the order would have been a bit different.

What’s more interesting to me is the overall style that seems to be preferred among voters, as Matt’s comp has some stylistic similarities to Dean’s (see image at left). It also would be interesting to know how many of the votes for the current 2.7 interface were based on thinking it looked the best vs. how many were votes against changing the interface at all so soon after the 2.7 redesign. If you want to comment on what you liked best and/or least about any of the designs, this thread is a good place.

So what happens now? However we look at it, the Fluency-style designs clearly have a lot of fans. Then again, so do the designs of Matt Thomas (he’s behind the current style of 2.7, remember, in addition to the comp labeled MT). To give the interface the attention it is due, and to take seriously some of the interface feedback around usability and accessibility, we’re going to leave the looks alone for 2.8. It’s our guess that a revised style will make into 2.9 early in the development cycle to allow us plenty of time for user testing and revision. How close it winds up being to the comps submitted in this design tweaks challenge will depend, but in the meantime:

Congratulations, Dean J. Robinson, on winning the vote!

Below are the links to the screenshots that were submitted. Please review each one (I’d open them all in tabs so I could look back and forth while they are all large size, because the voting poll just uses thumbnails), then choose the one you think looks the best/is the most usable.

This poll was supposed to close at 8pm NY time on Tuesday (today), but we’re going to leave it open for an extra day. The voting poll will now be closed at 8pm NY time on Wednesday (that’s 2am Thursday, UTC). If you want to discuss the entries’ pros/cons, this thread would be a good place.

Current: The existing interface, for reference

KM: Current nav, header elements moved

AN: Current nav, file folder style header

KD: Current nav, modified header style

JJ: Swap blog title and favorites menu

DR1: Fluency style, dark

DR2: Fluency style, medium

DR3: Fluency style, light

IK: Nav layered over dark background

GB: Modified nav/header intersection

MT: Modified nav and header

Results will be posted the day after the polls close.

ACT I

Jane: It is a thorn in my side that the blog name header is above the “dashboard” nav section in the admin, since in MU installations and with plugins (like stats), things in the Dashboard section span multiple blogs. Makes more sense for the header to head only the per-blog content area.

Mark: I agree about the header. “This is the menu, this is the content.”

All: Yep.

Five minutes later…

Mark: What do you guys this of this quick mockup I just did, playing with the admin header?

Jane: I like it that the nav is not under the header. Might need some styling help. I was also thinking maybe the favorites menu should drop down into the white h2 area by screen options/help tabs.

Ryan: Menu color to the top with blog title pushed over and favorites next to screen options sounds quite nice.

Jane: I’ll ask Matt Thomas if he could style it [ed. note: Matt Thomas created the visual style for 2.7], and we can see what people think, maybe post on wpdevel for feedback.

Ryan: If it’s quick, maybe we could even get it into 2.8.

ACT II

Matt T: Here are some comps based on what you told me.

Jane: Cool, but where are Screen Options and Help tabs?

Matt T: Still working on that.

Jane: Hm. Wonder if there’s time to open this up to community designers? I know we’re in freeze, and it’s no notice, but you didn’t get any notice either when we dropped this styling request on your lap a few hours ago. That’s the way open software development works: sometimes the best ideas come at the last minute!

Matt T: I’m all for letting the community take a stab at it. Especially if they come up with something brilliant to do with the Screen Options and Help tabs.

Jane: I’ll ask Ryan about release date and see if there’s time. I know they wanted your style recommendations today.

Act III

Ryan: Tuesday is probably doable, no later than that for final delivery of style and any gradient graphics, etc.

Jane: Awesome! People will hate me for the short notice after the has-patch marathon, but since it’s a small project and over the weekend, and wasn’t even something anyone was planning until a few hours ago, I’m *really hoping* people will take this for what it is, an attempt to give more people input into an upcoming visual change in the interface, even if it’s not a huge one.

Ryan: Would have the benefit of warning people that header and menu will be changed a bit.

Jane: And we can have a vote. If I can get all the materials together and post in the morning, that would give 2 days of design time for submissions on Monday, and if we do a day of voting Tuesday, that’s 3 days notice for the vote. I’ll make sure to post to all the lists, etc.

Ryan: Will we announce with comps from Matt T as examples of what we’re thinking?

Jane: I’ll write up the UX reasons for considering the change, and Matt T can provide some style guidelines and his original comps so no one will have to waste time mocking up the basic screen layout.

Ryan: That would help set the scope. We just want tweaks here and there, given the timing.

Jane: Woot!

On Your Mark, Get Set…
Okay, so here’s the deal. Modifying the nav/header to be a little nicer is was a last-minute design idea, and if it can’t be worked out in the time we have left before 2.8 (which is very little), we’ll just wait until 2.9 to work on it. But! If someone comes up with something the community really likes and it doesn’t break any of the design guidelines for the rest of WordPress, we could sneak it in.

UX and design guidelines for this mini-project are posted here (so as not to clog up anyone’s feed reader with big graphics). Read through the UX stuff, check out the comps Matt Thomas mocked up last night (with absolutely no notice, for the record). Use the .psd as your base, and when it’s time to submit your ideas, make a .jpg or .png and post a link to it in the comments on this post. (Note: Only comments containing a link to a design submission using this format will be approved. For general discussion about this design challenge or any of the submissions, please head into the #wordpress-dev IRC channel.)

Submit the link to your comps by 1am Tuesday, April 28 UTC (7pm Monday, April 27, New York time). If you have questions or want early feedback, we’ll be in and out of the #wordpress-dev IRC channel between now and then.

Once we’ve received the submissions, we’ll post a voting survey (much simpler than the icon survey; this one will be more of poll, just choose the one you like best) as soon as possible, and will post the link to it here as soon as it’s online. We’ll only keep voting open for one day because of the 2.8 deadline, so put it on your calendar if you think you’ll forget. Voting will close at 2am Wednesday, April 29 UTC (8pm Tuesday, April 28, New York time). Results will be announced the following day.

Go!

* Chats above are a conglomeration of actual chats.

Reminder: Only comments containing a link to a design submission will be published here. All other comments will be deleted.

If you want to leave a public comment about this contest, the design, etc., I’ve created a thread in the forums that you can use. Please discuss these things there. If you leave a regular comment here on this blog, no one will be able to reply to you, because only actual links to design submissions will be posted in the comments here.