Command Palette

Think of the Command Palette as the ultimate shortcut tool, letting you do more with less clicks and without needing to remember where each option might be. It’s available across the editing experience, whether you’re switching between templates in the Site Editor or toggling open settings in the Post Editor, with specific contextual options depending on where you are. You can use the keyboard shortcut Cmd+K on Mac or Ctrl+K on Windows to activate it and get started. 

If you think of a command that doesn’t exist yet that would help with your workflow, open a feature request issue so we can consider adding it.

Read more about everything you can do with the Command Palette, including a list of available commands. 

Style Book

The Style Book helps you see all the blocks on your site as you style them. It’s built into the Styles section and can be toggled on/off as you’d like. This is especially useful when you’re aiming for design consistency for a client, trying to see how a change might impact a block that might not be visible, or wanting to get a different look at how a style variation will switch things up.

Work is also underway for the next WordPress release to integrate the Style Book into Style revisions to allow for an at-a-glance view of changes made. 

Learn more about how best to use the Style Book.

Styling shortcuts

Sometimes you get a design just right—the color contrast, the perfect padding, the exact font size. Instead of needing to manually recreate the design or copy/paste the block to fill in with new content, you have two powerful options built into the editing experience: copy/paste styles and apply styles globally for all instances of the desired block. 

Copying and pasting styles is perfect for more nuanced and smaller changes, like headings on a landing page that you intentionally want to be distinct. Applying changes globally is best for blocks like buttons and for changes that are likely to work well across layouts, like setting a specific border radius and color. This helps keep the creativity flowing and makes achieving design consistency across your site much easier.

Read more about the various styling options available. 

Distraction free mode

Just like an artist might need to take a few steps back to view their in-progress artwork, sometimes we need to get a different view of our site before diving back in. Distraction free offers you that alternate perspective with a pared-down experience that lets you focus purely on creating, like:

• Hiding the top toolbar until one intentionally hovers over where it typically sits.
• Removing many of the top toolbar buttons.
• Automatically closing any open sidebars, like block settings and list view. 
• Hiding the insertion point indicator, reducing visual clutter. 
• Hiding the block toolbar for individual blocks.

It’s worth noting that this mode can be used when writing posts and pages too! For an added bonus and more views of your site, you can use the preview options to see how your site might look across different devices.

Learn more about making the most out of Distraction free mode. 

Patterns

Patterns are a collection of blocks that make it simple to add complex layouts and designs to any WordPress site without starting from scratch. They save time by reducing duplication and ensuring consistency. You can create your own, use theme-provided patterns, or lean on the Pattern Directory. 

You can also specify whether to sync your patterns so that one change applies to all parts of your site, or to keep them unsynced so you can customize each instance. For any patterns you create, you can assign categories to make them easy to find and organize. Use the Inserter with easy filtering options to add patterns to your content, and head to the dedicated Patterns section in the Site Editor to create or edit patterns to your liking. 

Learn more about creating patterns. 

List View

List View is the go-to tool for navigating between layers of your content, selecting exactly what you need, and getting a sense of how everything fits together. Similar to the Style Book and Distraction free mode, you can toggle it on/off as you’d like. It’s currently visible in the Top Toolbar and will remain open as you navigate through your site. Beyond providing a simple view of the layers of your site, there are more recent additions to List View that makes the tool even more powerful:

• See previews of your images for Image and Gallery blocks reflected in List View to make it easier to find what you need.
• The Escape key deselects blocks to make it easier to purely preview your content without any blocks selected. 
• Lean on a keyboard shortcut for duplicating blocks quickly: CMD+Shift+D for Mac or Control + Shift + D for Windows. 
• Drag and drop blocks at any level directly within List View.
• Rename Group blocks and have the custom name reflected in List View for improved organization.

Here’s how a few of these improvements come together:

Learn more about using List View. 

As you explore these tools, remember that, except for the Style Book, you can use these features when writing posts and pages too. Expect the Site Editor and other tools to evolve with each release. To get a sneak peek at what’s planned for the next major WordPress release in March, check out the roadmap and stay tuned. 

Subscribe to WordPress News

Join other subscribers and receive WordPress news directly in your inbox.

Thank you to the contributors who collaborated on this post: Nicholas Garofalo, Lauren Stein, Joen Asmussen.

A theme for every style

Unlike past default themes, Twenty Twenty-Four breaks away from the tradition of focusing on a specific topic or style. Instead, this theme has been thoughtfully crafted to cater to any type of website, regardless of its focus. The theme explores three different use cases: one designed for entrepreneurs and small businesses, another for photographers and artists, and a third tailored for writers and bloggers. Thanks to its multi-faceted nature and adaptability, Twenty Twenty-Four emerges as the perfect fit for any of your projects.

As you dive into its templates and patterns, you will notice how the new Site Editor functionality opens up different pathways for building your site seamlessly.

Patterns at every step

Whether you’re looking to craft an About page, showcase your work, handle RSVPs, or design captivating landing pages, Twenty Twenty-Four has got you covered. Choose from an extensive collection of over 35 beautiful patterns to customize and suit your needs.

For the first time, this theme features full-page patterns for templates like homepage, archive, search, single pages, and posts. Some are exclusively available during the template-switching and creation process, ensuring you have the right options when you need them.

Moreover, you can take advantage of a variety of patterns for page sections, such as FAQs, testimonials, or pricing, to meet your site’s most specific requirements.

With this diverse pattern library, Twenty Twenty-Four offers a flexible canvas to quickly assemble pages without having to start from scratch—saving you time and energy in the creation process. Just let your creativity flow and explore the possibilities!

Site editing in its finest form

Twenty Twenty-Four ushers in a new era of block themes by bringing together the latest WordPress site editing capabilities. Discover newer design tools such as background image support in Group blocks and vertical text, providing an intuitive and efficient way to create compelling, interactive content.

Find image placeholders with predefined aspect ratio settings within patterns, allowing you to drop images that perfectly fill the space. To go one step further, make your visuals interactive by enabling lightboxes. Ideal for showcasing galleries or portfolio images, this feature allows your visitors to expand and engage with them in full-screen mode. Activate it globally for all images throughout your site or for specific ones.

For a smoother browsing experience on your site, you can disable the “Force page reload” setting in the Query Loop block. This allows the necessary content to be loaded dynamically when switching between different pages without needing a full-page refresh.

Elegance with purpose

Twenty Twenty-Four goes beyond versatility with a beautiful aesthetic inspired by contemporary design trends, giving your website a sleek and modern look. Key design elements include:

• Cardo font for headlines: The Cardo font adds a touch of elegance to your site, creating a sophisticated visual experience.
• Sans-serif system font for paragraphs: The sans-serif font ensures that your texts are cleaner and easier to read, enhancing overall readability.
• Eight style variations: Twenty Twenty-Four presents a light color palette for a fresh and inviting appearance out-of-the-box, but you can customize it with seven additional style variations. Each includes fonts and colors carefully curated to work beautifully alongside the patterns and templates.
• Sans-serif variations: Besides the default styles, the theme offers two additional sans-serif variations, providing more choices for your site’s typography.

Along with its design, Twenty Twenty-Four has been meticulously optimized for performance. This ensures that your website not only looks great but also delivers a fast and efficient user experience.

More information can be found in the following links:

• Download Twenty Twenty-Four
• Twenty Twenty-Four Documentation
• Twenty Twenty-Four Kick Off

The Twenty Twenty-Four theme was designed by Beatriz Fialho and made possible thanks to the passion and tireless work of more than 120 contributors.

This new design provides much-needed improvements to the aesthetics and user experience. It emphasizes bold visuals and a more dynamic browsing experience through tags and categories. Individual site pages now include desktop and mobile screenshots, while the site introduces an improved layout on mobile devices. 

This redesign also brings new block-based functionality and several components that will be used elsewhere on WordPress.org. All of this was made possible through collaboration between Design, Marketing, and Meta teams. Thank you to everyone.

@adamwood @alexstine @annezazu @bengreeley @cbringmann @chanthaboune @dufresnesteven @eidolonnight @fcoveram @joen @jonoaldersonwp @jpantani @laurlittle @matt @markoserb @ndiego @pablohoneyhoney @paulkevan @renyot @ryelle @sereedmedia @_dorsvenabili

If you would like to propose a change or report an issue, please do so in the wporg-showcase-2022  GitHub repository. Also, make sure to join the #website-redesign Slack channel if you are interested in additional updates coming to WordPress.org and want to contribute.

Create your own patterns

The ability to create your own patterns, on top of using the ones bundled into each WordPress release, opens up a world of possibilities. Need to repeat the same contact information across your site and keep it up to date? Create a synced pattern with all the details, and say goodbye to repeating yourself, with the ability to quickly insert the synced pattern wherever you need it. If you find yourself creating various banners for your site and want them to have the same layout with unique content, creating an unsynced pattern speeds up your workflow and ensures a level of consistency in approach. While themes and plugins have been able to offer patterns to users and curate the experience, this update allows agencies and site builders to do the same for their clients, directly in the site building process.

Dig into the details

Any previously made Reusable blocks will continue to function as they do now, just under the new Synced pattern name. To help adjust to these changes, a few contextual notices will be placed throughout the interface. Specifically, the menu item in the creation flow will show as “Create pattern/reusable block” until the prompt describing the switch is dismissed in one of the various locations, including the naming and syncing modal: 

For folks using block themes, all patterns will be listed alongside template parts in the Site Editor > Patterns section, where you can enter a focused editing mode to make changes. For Classic themes, the prior reusable block management page will now house patterns in a list, similar to the Posts > All Posts view.

For a complete overview of patterns on your site, all patterns provided by themes and plugins will be shown in this section but without the option to edit directly.

Go further

With the ability to create your own patterns baked into the creation experience, remember that you can copy the patterns available in the Pattern Directory and contribute back, an excellent way to democratize design for every WordPress user and the web.

For more exciting features coming to patterns in WordPress 6.3, read on in the Advancing the Power of Patterns post. Thank you to the contributors who collaborated on this post: Chloé Bringmann, Jonathan Pantani, Josepha, Krista Stevens, Nicholas Garofalo, Peter Rubin.

The Gutenberg project has aimed to revolutionize how we manage web content as much as Johannes Gutenberg did the printed word. The project’s roadmap is comprised of four unique phases:

1. Easier Editing — Already available in WordPress, with ongoing improvements
2. Customization — Full site editing, block patterns, block directory, block themes
3. Collaboration — A more intuitive way to co-author content
4. Multilingual — Core implementation for Multilingual sites

With the upcoming release of WordPress 6.3, Phase 2 of the Gutenberg project is coming to a close; a journey worth celebrating.

This video is an ode to Gutenberg’s editing and customization phases, celebrating the new design tools and the possibilities they create. The piece encapsulates the exciting steps made in the past that propel the vibrant future of WordPress.

Everything showcased in the video is built entirely with the WordPress Editor, using currently available blocks, patterns, and themes. This new era has opened the ability for the design community to contribute to the project directly without depending on developers to translate their ideas into designs. Consider this an invitation for designers to join a new generation that embraces the diverse and expressive capabilities of WordPress.

The work that goes into Gutenberg is a powerful testament to the collaboration of coders, developers, and designers in our community. United, we strive to build WordPress into a realm of significance and lasting impact.

Video credits

Video credits: Tino Barreiro, Beatriz Fialho, Takashi Irie, Henrique Lamarino, Rich Tabor, Pablo Honey, Matías Ventura, and Holographik.

Thank you to the post authors Tino Barreiro, Nicholas Garofalo, Dan Soschin, Rich Tabor, and Chloé Bringmann.

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.