Displaying Style Variations for Supporting Themes

WordPress 6.0 introduced the ability for theme authors to add multiple style variations to themes. These style variations, designed by theme authors and packaged in blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, help users have a diverse set of approaches to their site design allowing them to find one that aligns with their goals. This feature helps to highlight the flexibility of modern WordPress themes and it’s time to have it baked into the theme directory experience.

There are many themes in the Theme Directory that ship style variations but there is currently no way to preview them in the Theme Directory. Some community members have been iterating on a beta version and its now available on WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/.

Screenshots

Previewing style variations inline

Previewing full site

Navigating style variations

What do theme authors need to do?

Nothing. If you have included style variations in /styles/{variation_name}.json and they work in the Site Editor, they will show up for users on page load.

What happens if I don’t see style variations when viewing a theme?

Where can I add feedback or log a bug?

Create a trac ticket: https://meta.trac.wordpress.org/newticket.

What’s next?

  • Collect feedback on this initial launch, and iterate.
  • Add the ability to see whether a theme has style variations from the results list (Meta Ticket)

Thanks to everyone who helped so far! Any other questions, comments, conversations, or concerns can be added to this post or to a newly created metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. trac ticket.

Thanks all!

Props: @poena, @Joen, @bph, @ryelle, @adamwood, @annezazu, @bengreeley, @priethor, did I miss anyone?

#style-variations, #theme-directory