In this zoom session, we explore some interesting enhancements for the recently created experimental Gutenberg Theme.json creator.
For context, this tool was inspired by the new theme.json
support for Gutenberg. The idea was to provide a UI to tinker, customize, and share Gutenberg configurations.
This was an incredibly informal design/code session. I went into it with a couple of goals:
- Adding a simple Live Preview
- Theme switching? (e.g. TwentyTwenty, TwentyNineteen)
- Explore color tooling!
- Explore typography scaling
We were able to hack our way to accomplish most of those features. The most interesting and visually impressive feature was adding the ability to drag and drop an image to automatically generate a color palette. Because of the new Preview, we were able to see the color swap live in the browser! Neat.

P.S. If you’re curious about the updates from today’s session, you can find the source code here.