Try a few Twenty Twenty-Two child themes

kjellr commented 2 years ago

ℹ️ https://github.com/WordPress/twentytwentytwo/issues/213

This PR tries out some alternate color + font combinations for Twenty Twenty-Two, as mocked up in the theme's announcement post. These were originally intended to be a set of alternate color palettes and/or theme.json files, but I'm building them as child themes for the moment since Gutenberg does not include support for those features yet.

I don't expect that these will end up being child themes in the long term, but it works well for testing today.

141514397-979bf534-fc57-4e9f-8dd2-88493c041bfe

A few implementation notes:

I ran into an issue with Twenty Twenty-Two's default header image, and opened a PR to address it. You'll probably run into this issue while you test.
Font implementation is still up in the air. Ideally these would be fully defined in theme.json, but that's not possible yet. For now I took a hacky shortcut because it was easy and could plug into an existing Twenty Twenty-Two function. If for some reason these continue to be child themes, we should bundle the actual font files instead of referencing Google fonts.
Some themes include a slightly modified header-large-dark.html template part. These are identical to the original except they have different text and background colors assigned (for example, primary instead of foreground). This is to make the color changes a bit more noticeable on the homepage. It would be totally ok to lose this if we switch to a non-child-theme approach.
A few of these themes use fewer colors than are actually present in Twenty Twenty-Two. This is totally fine, except I had to declare these colors twice in order to ensure existing patterns mapped to them correctly. As a result, some colors are also listed twice in the UI, which isn't great.

⚠️ Since these are child themes, you must separately install Twenty Twenty-Two in order to test them.

DJviolin commented 2 years ago

Maybe the problem with my install, but if I enable the "Swiss" child theme, after the second refresh, the bird image is gone in the News page. Strangely, it's not effecting the "Blue" child theme.

I use this tree: https://github.com/WordPress/theme-experiments/tree/add/tt2-child-themes

I'm using the latest cloned repo from here: https://github.com/WordPress/twentytwentytwo

kjellr commented 2 years ago

That's odd — I'm unable to reproduce:

DJviolin commented 2 years ago

I was able to reproduce only in Firefox. I tried in a private window also, without extensions. After refresh, the image is gone.

DJviolin commented 2 years ago

Something is definitely off, because my newly uploaded picture and the flying bird appeared in BW color until refresh. Then on the second refresh, it goes back to BW! Also in Chrome and Edge. At this point I can't verify, maybe my install causing it. The problem probably with the TT2 theme or WP 5.9 itself.

DJviolin commented 2 years ago

BTW this Black and white turning images probably a feature (it's also on your thumbnails and screenshot), but it should be documented how to turn off, because it can mess up child theme developers.

kjellr commented 1 year ago

Closing since versions of these launched in 6.0.

WordPress / theme-experiments

Try a few Twenty Twenty-Two child themes #292