Styles tab for themes

FSE theme style variations comes to wp-a2z.org.

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

eg https://blocks.wp-a2z.org/oik-themes/twenty-twenty-three/?oik-tab=styles

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 wordpress.org 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 https://wp-themes.com/twentytwentytwo/?style_variation=pink

On themes.gutenberghub.com you can see the default styles for the theme, but not the style variations. eg https://themes.gutenberghub.com/twentytwentytwo

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