In collaboration with @pablohoneyhoney. Not finalized.

Previously #27473.

This issue covers the broad design aspects of global styles, the upcoming user interface for theme.json. For the broader implementation roadmap check #20331. The global styles interface aims to allow managing design aspects of a site globally and across blocks. The current interface merged in the plugin is merely a tentative placeholder.

Iconography

Global styles will be a crucial component for the set of design tools and deserves a more iconic representation. In the future, there will be flows built into the system allowing you to move from local styles to global — like making customizations to a button block and opting to apply them globally changes across all buttons of that type. To support these flows from within the local scope a recognizable symbol can help guide the different flows as the functionality spreads across more places.

• Closes: Consider the icon for global styles #20873

The initial placement of the tool continues to be in the editor header for the site editing or template editing contexts. As part of the broader explorations on information architecture for the site editing features, direct access is also a possibility.

Structure

Currently the target are four main components to the interface plus a preview:

• Colors.
• Typography.
• Layout.
• Blocks.

Together they represent the formal structure of theme.json. This is designed to allow growing in the future as needs arise, either in core or through extensions. Navigating through sections currently is intended to work as a drill-down pattern to provide more breathing room for the tools and additional focus.

Small previews. One challenge the design aims to solve is the problem of not necessarily seeing what you are affecting because changes are applied far and wide on the site and those elements may not be visible at all times in the larger canvas preview. For example, if you are customizing duotone filters globally but don't have an image in the current view, the user may not be seeing the entirety of what they are affecting. To address this, each panel is structured around a top level abstracted preview. This is meant to capture the spirit of customizations while also providing instant feedback and hierarchy.

Down the road, the capabilities of global styles could expand to provide a more in depth styleguide that can expand across blocks and patterns. While not an immediate priority, it is considered in various issues, including #32682.

• Consider all meta-functions of global styles. This footer menu is not an immediate priority but it would provide access to a variety of functions that are not formally spec'd yet.

• Styleguide.
• Revisions.
• Reset all.
• Export / import.
• Theme / Pattern browsing.
• etc.

Colors

Palettes

The color section encapsulates the ability to visualize and manage color palettes as well as customizing color elements across the site. Currently, there's a single set of color palettes that can be provided at one time, but this is meant to change with the overview at #29568.

• Closes Allow showing default palettes in addition to theme ones #28416.

Following up, multiple sets of palettes would be a possibility, including light / dark splits. The access point for managing color palettes is the following one:

It lists some initial colors for recognizability and the overall number of colors available. Palettes are split between theme (more semantic), default (spectrum based), and custom (colors registered by the user).

There are a bunch of granular combinations that need to be supported, since the default palette ought to be replaceable or disabled entirely. Custom colors could also be disabled globally, which means this panel could look like this depending on configuration:

If available, editing a color palette would work as follows:

Palettes include both solid colors as well as gradients. The gradient tools still need to be finalized:

Elements & Filters

More general descriptions of elements is to be included in the main tracking issues, but this gives a good overview of what aspects are represented. Most importantly, background, text, links, etc, are represented here as elements. (Elements can resolve to CSS variables sometimes.)

• A category of "filters" is split and would allow configuring things like duotone across a site when it should apply beyond individual blocks (like Image, Media & Text, and Featured Image, for example, but not a Gallery). This is a good example of an in-depth feature that needs to connect a block-agnostic context with block specific settings, hence the navigation.
• Filters, such as duotone, need configurable defaults. They are equivalent to a new color palette.

Right now core only supports duotone, and infrastructure work is being done to connect it with theme.json.

• Duotone filter: Allow theme.json to set default filters for blocks #33642.
• Allow for Global Block-level configuration of duotone #34122.

One major challenge also comes in how multiple color states can be represented and accessed as is the case of links. This needs further research to narrow down a UX flow that makes sense while not being overbearing.

Tool

Accessing an element brings into focus the main color tools with an emphasis towards selecting a color from existing palettes. The preview element is used as an anchor point and to provide immediate feedback on interactions. The color picker is a fundamental component of this interface.

• Tracking: Updated ColorPicker #34284.

In the global styles context, the picker opens as a flyout menu:

Typography

Fonts

Managing fonts as site assets still needs a more formal proposal but broadly speaking the design would incorporate a recognizable small preview. This is the corollary to the palette management interface. These sets would be extensible and configurable, ranging from a single default set (current state) to multiple choices.

With support for additional pairings and browsing the UI would evolve to accommodate it. There's a larger surface of issues to work through and figure out when it comes to themes switching and the ability to combine sets from different themes or styles.

An interface for selecting font families is still upcoming as there are quite a few details to get right, including communicating potential performance impact of multiple fonts.

• Finalize UI for selecting and managing fonts.

Elements

Elements naturally operate in the same way as the colors panel does.

• The main difference if the GroupItem contains a small preview of the specific typography attributes applied.

This is updated live to reflect current choices.

Tool

The concrete tools for typography are the same to the one used in blocks and reflect the settings of theme.json. A breakdown of that in more detail:

• Tracking: Typography Tools: Tracking #34345
• The extra addition is a preview area that draws from the preview elements used throughout global styles.

Layout

The last group gathers tools around layout and spacing. In the context of global styles this is reduced to site container attributes. There are several issues tracking progress and improvements on the various layout related tools.

• Alignments Overview #29506.
• Flex Layout Iterations #33687.
• Dimension Tools and Controls #28356 and Improving the Group block Layout panel #34558.

Blocks

The "by block" section is an interface to the more granular theme.json that affects individual blocks across a site. This allows controlling the default settings and style attributes of blocks and renders in a similar way to the block inspector toolbar.

• Include design of inner panel.

It needs to be clear what blocks might have customizations.