Styles tab for themes

FSE theme style variations comes to

When viewing a specific theme, choose the Styles tab to view a summary of each of the different style variations offered by the theme.


The new default theme for WordPress 6.1, Twenty Twenty-Three, comes with 10 style variations to choose from.

Style variations of the Twenty Twenty- Three theme.
theme.json and 3 style variations from Twenty Twenty-Three

Information displayed per variation

The initial solution for the Styles tab displays each variation as follows:

  • the style variation name, width and wide width are displayed using the color specified for the h1 ( styles.elements.h1.color.text )
  • the background is set from the background color ( styles.color.background )
  • the gradient is set from the gradient ( styles.color.gradient )
  • the max-width for each style is taken from settings.layout.contentSize

More work is planned. See bobbingwide/oik-themes#14

Other options to view styles

On you can preview the style variations by clicking on a style variation displayed below the theme’s screenshot. Then you can preview the theme with that style. eg

On you can see the default styles for the theme, but not the style variations. eg

And in the Site Editor you can see the styles for the currently active theme. Select the style you prefer then further customise it.