Saving Custom Style Variations

I’ve been thinking through some of the potential flows for saving custom style variations in GitHub issue #38333. The goal of this proposal is to bring more clarity around the style switching process and to help users avoid accidentally resetting their existing style customizations when trying out a variation.

Saving a style variation

The above video shows how one of the theme-provided style variation styles could appear to be active until the user has made customizations in the Global Styles panel. Once a user’s Custom Styles have been saved, those customizations could appear as a “Custom Styles” thumbnail in the style variations panel.

I didn’t mock up every step of the flow but imagine the user makes some changes in the color panel around :13 😁

Switching between and saving over a style variation


Even after making their own customizations, the user may still choose to reset their design to one of the default style variations provided by the theme. From a user perspective, this feels like it shouldn’t require the extra step of the saving panel (not sure about from a technical POV).

Starting at :18, the video shows how the previously saved “Custom Styles” thumbnail wouldn’t be replaced until the user chooses to overwrite it in the saving panel.

“Saving as” a new style variation

If the user doesn’t want to overwrite the existing “Custom Styles” style variation, another option could be to allow them to “save as” from the saving panel. This could open a modal (similar to the flow for creating Reusable blocks, etc) for entering a custom name.

Here’s the Figma file with these explorations so far.

Leave a Reply

Your email address will not be published.