[Resolved] Creating style variations in child themes.. Does GeneratePress have a theme.json

[Brad]

Hi

Quick question.
Before I go down this rabbit hole, do you know if the following is possible with GeneratePress currently? I’m new to theme.json and currently GP isn’t a full site editing theme.

Objective:
Building a Multisite project, I plan to have two child themes available for sub sites. I’d like to allow the user to choose a color palette from three options to give their chosen theme a head start as a pre designed site that looks good. If they want to change things from this “new default” they can do so in the customizer.

Rather than maintaining / designing colors, fonts, layouts for lets say 6 child themes, each styles.css somehow dictates GeneratePress’s customizer setting, I’d like to attempt this by creating a style variation. This will allow the sub site user, once they select a child theme, to choose from 3 different color palettes. (3 additional style-variations json choices loading different global styles for the child theme site.

Using GeneratePress as my parent theme, I’d like to just inquiry if GeneratePress currently will allow for this adding style variations via a theme.json file (I’m not asking how to do it; just if it’s possible.) Does GeneratePress have a theme.json file? I didn’t find one.

I came across this post from July 2021. Any changes in GP development code direction to date that you know of that would allow me to attempt this in a child theme?

https://generatepress.com/forums/topic/wordpress-5-8-and-beyond/#post-1859519

Sincere thanks for your time / suggestions.

_______________

Reference tutorial:

Css Tricks – How to Create Style Variations in WordPress 6.0 Block Themes
Nov 14 2022

https://css-tricks.com/creating-style-variations-in-wordpress-block-themes/

https://css-tricks.com/creating-style-variations-in-wordpress-block-themes/#aa-global-style-switcher

https://wpturbo.dev/generators/theme-json/

Excerpt

Global styles, a feature of the block themes, is one of my favorite parts of creating block themes. The concept of global style variations in WordPress were introduced in Gutenberg 12.5 which would allow theme authors to create alternate variations of a block theme with different combinations of colors, fonts, typography, spacing, etc. Different theme.json files stored under /styles folder “lets users quickly and easily switch between different looks in the same theme.”

The global styles panel UI is in active development iteration. More details on the development of this feature can be found and tracked here at this GitHub ticket (#35619).

In this article, I will walk through creating a proof-of-concept global style variation using alternate /styles/theme.json files and create child themes with different color modes by swapping color palettes only.

[Brad]

This is interesting. Think this will work with GeneratePress as the parent theme?

https://css-tricks.com/a-deep-introduction-to-wordpress-block-themes/#aa-building-block-child-themes

https://github.com/WordPress/create-block-theme

https://themeshaper.com/2021/11/17/create-a-blockbase-child-theme/

[Brad]

https://wptavern.com/designing-block-based-wordpress-child-themes-with-a-single-json-file

[Brad]

Ok. Just came across this. Sounds like this will work if GeneratePress meets requirements.

Global Styles & theme.json – Full Site Editing

https://fullsiteediting.com/lessons/global-styles/

> With style variations, the theme developer can add multiple styles that the user can choose from, for example, a dark, light, or purple version, making themes more versatile than ever before.

[Leo]

Hi Brad,

Sorry for the delay in reply – I had to check with Tom first.

He said that the reply you found is still valid: https://generatepress.com/forums/topic/wordpress-5-8-and-beyond/#post-1859519

And here are some additional information here: https://github.com/tomusborne/generatepress/issues/389#issuecomment-1151683660

Hope this helps 🙂

[Brad]

Well thanks for the reply.

For my use case (child theme complete styling options enabling a users to choose a custom design that l designed by a designer), this looks like it could of been an eloquent solution.

Honestly I can envision a whole marketplace created around this “design extension of themes” workflow. There’s a market opportunity potential not to mention it’s just a pretty cool feature. I guess using dark/light mode techniques could be applied. That’s probably not good for performance though.

Will have to try to come up with a plan b. Any suggestions greatly appreciated.

I’m just now learning about GeneratePress global styles and local pattern libraries.

———–

Really good workshop replay below

Builder Basics: Demystifying theme.json and Global Styles

Great video breakdown to theme styles editor and theme.json. Appearance – editor options added in 6.1. Gutenberg plugin extends options while in beta

___________

If interested, see my YouTube comment, @ bradfranklin for timecode links to topics in video

Scrub to these time codes if interested in discussion of child themes with style variations. Intro to topic of Curating the editor experience, documentation article online. Presentation search curating the editor experience on WordPress tv

49:40 child theme
50:22 style variations topic
50:50 styles/ folder holding json files; all the style variations
51:50 use json to create a quick child theme starting point
54:40 curating the editor experience – locking down design on block levels.
55:10 example locking down feature image with color parameters

https://www.dropbox.com/s/49g9rdr61ytwwsa/IMG_7764.JPG?dl=0

[Author]

Posts