Categories
Experiments

Experimenting with Theme.json Creator

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.

GIF demonstrating the drag/drop of a photo of strawberries into the Theme.json creator. This generated a series of colours which can be seen in the live preview.

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