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.

By Q

I specialize in Design Systems, Interaction, and UI.
I'm a Principal Designer at Automattic.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s