Twenty Twenty-Two: Implement alternate json files

[kjellr]

When Twenty Twenty-Two was announced last year, the announcement post included some alternate json file mockups:

​https://make.wordpress.org/core/2021/10/06/introducing-twenty-twenty-two/

These were not able to be bundled in with the theme, since the alternate theme.json styles functionality was not yet present in Gutenberg. Instead, they were temporarily built as a set of experimental child themes:

​https://github.com/WordPress/theme-experiments/pull/292

Recently, support for alternate theme.json files has been added to Gutenberg, along with support for the fonts API. Together, these should unblock the original vision for these alternate styles.

​https://github.com/WordPress/gutenberg/pull/35619
​https://github.com/WordPress/gutenberg/pull/37140

@beafialho and myself have recently made some minor color/font revisions to the original set of alternate styles, and we'd like to start building this in, with the goal of eventually merging this into the 6.0 release.

I've got a patch begun, and will continue with it this week. I'm also marking this needs design feedback — I imagine we'll continue iterating on those colors and styles once we see them working in action.

Trac ticket: https://core.trac.wordpress.org/ticket/55433

[kjellr]

A quick update on this effort:

The theme.json files have been built in the linked PR. Technically, we are blocked by two issues:

• Webfonts declared in styles variants are not loaded: ​https://github.com/WordPress/gutenberg/issues/39702
• Duotone does not render in the site editor: ​https://github.com/WordPress/gutenberg/issues/35331

From a design perspective, there's some followup work needed as well:

In order to fully showcase the possibilities here, I'd like to work on pushing each of the style variations apart just a bit more. Maybe adjusting some of the colors that are similar to each other, adjusting some font sizes and spacing, etc. I think this update (and feature) will be showcased in the best light if we can make each option feel totally transformative — almost like a theme switch. That'll show off the possibilities of the feature really nicely.

I'll keep exploring next week along those lines, but in the meantime, here's a quick GIF of the current state, running against Gutenberg trunk:

[kjellr]

Hi everyone! Here's an update on these style directions:

I've gone in and made some color adjustments in order to pull these apart from each other just a bit more. The red one now has red text throughout, and the pink one has been made more distinct from the cyan one. In addition, each one has been revised to include some spacing and block style modifications in addition to the color and font changes. As a result, these each feel just a tiny bit more unique.

The differences between each of these feel pretty noticeable when switching in the editor, so here's a video of that state:

​https://cloudup.com/cAqPsRiP7jZ

Here are some example screenshots as well:

---

The major hurdles for the moment remain the same as I mentioned above:

• Webfonts declared in styles variants are not loaded: ​https://github.com/WordPress/gutenberg/issues/39702
• Duotone does not render in the site editor: ​https://github.com/WordPress/gutenberg/issues/35331

The Duotone issues appear to be fixed in ​the associated PR. The fonts issues are also fixed ​in their PR, but they seem to be a little flaky in my testing — sometimes they load and other times they don't. The screenshots above were all taken while running both of those PRs together, but the fonts are falling back to my local copies instead of the theme versions.

I could use help from a few angles:

1. Testing and code reviews. Are there any mistakes in the JSON? Can you spot any additional settings from the original that I need to be overriding in the variations?
2. Testing against those PRs. Specifically the fonts one. I'm not sure if the issues I'm seeing are specifically related to my test environment or not.
3. Design suggestions: Do these directions feel distinct enough? Is each one strong individually? What we can we do to pull them apart even more?

Thanks for taking a look!

[chaion07]

Thanks @kjellr for reporting this. We reviewed this ticket during a ​recent design triage. We received mixed reactions during the discussion for this ticket with questions and comments such as:

1. It seems like a single theme should be one look. Why would the alternate jsons be so different?
2. The ticket shouldn't even exist
3. The feature isn't mature yet and the theme doesn't need that

Props to @joyously for the discussion on this ticket.

Cheers!

[Joen]

Love the style variants! The fact that I can click either of these and instantly see an effect in the canvas really shows the power of the Global Styles system, and this will only expand as more design tools become available.

Should we reduce from 6 styles to 4, though, so the bundled styles are all substantially different than the default? For example, the blue, green, pink and dark from ​https://cldup.com/IpUFugLvJe.png?

[kjellr]

We reviewed this ticket during a recent design triage.

Thanks for the feedback, though I don't expect we'll change the course of this feature at this point. These alternate colors have been planned since ​the theme's announcement, and the Styles feature was identified as a key feature for 6.0 during ​yesterday's walkthrough. Having a solid set of diverse styles in These Twenty Twenty-Two is necessary to to demonstrate the range of possibilities that are unlocked by this feature.

Should we reduce from 6 styles to 4, though, so the bundled styles are all substantially different than the default?

I like the idea of curating it down just a little more — I think that'll help folks differentiate them even more strongly. I updated the PR to include just four total: Default, Blue, Pink, and Swiss. Here's how that feels:

While trimming the list down, I also adjusted a few details (spacing and site title styles) to pull them apart even more too. I'm tempted to swap a serif into the blue direction so there's more difference between the Swiss direction and the Blue one. But I think in practice the serifs tend to make things feel a lot like the original direction. So maybe what we have here is fine?

[kjellr]

In general, this PR is coming along nicely! There's ​a new PR that should fix the font loading in the editor, and ​the Duotone effect is still not loading in the editor.

But aside from that I think this actual PR should be ready for a review. @jffng or @scruffian would you mind giving it a look?

I don't know that this will land in the Beta 1 today, since the font issue is still a pretty major upstream issue. But I think if this theme PR is solid we should aim to merge in before the next Beta for sure.

With the inclusion of ​https://github.com/WordPress/wordpress-develop/pull/2622 in time for Beta 3, would it make sense and be possible to include this PR, since it leverages the feature?

I'm happy to prep the commit to trunk, but would need help on the backport to 6.0 branch I think because I don't have those privileges.

With the inclusion of ​https://github.com/WordPress/wordpress-develop/pull/2622 in time for Beta 3, would it make sense and be possible to include this PR, since it leverages the feature?

Yes, I think so. Why? The decision to include the webfonts stopgate during the beta cycle was to include TT2's new styles variations in 6.0 and for themers too.

I'm happy to prep the commit to trunk, but would need help on the backport to 6.0 branch I think because I don't have those privileges.

The 6.0-branch doesn't exist yet, i.e. not until RC1. I'll ping you once the webfonts stopgap PR is committed. Then this PR can be committed too.

@jffng https://core.trac.wordpress.org/changeset/53282 committed ​https://github.com/WordPress/wordpress-develop/pull/2622 into trunk. It's now available for this TT2 PR.

[jffng]

In 53286:

Twenty Twenty-Two: Add three style variations.

This commit adds three style variations to Twenty Twenty-Two, allowing users to quickly swap between different visual styles — "Blue", "Pink", and "Swiss" — for the default theme. The variations are previewed and selected from the Site Editor's global styles panel.

For the implementation, each variation is defined by its own theme.json file within the "/styles" directory of the theme. All variations leverage the internal-only theme.json handler of the Webfonts API [53282] to load locally hosted fonts.

Props kjellr, hellofromtonya.
See #55433.

Committed in https://core.trac.wordpress.org/changeset/53286/, thanks for all the work and consideration to make this happen.

[costdev]

After speaking with @jffng, this can now be closed and additional variations can be added in follow-up tickets.