Exploring Global Styles

Note: The code samples here are out of date. Please be sure to check out the block editor documentation for the latest on how to implement Global Styles.

Global Styles is an aspect of full site editing that will have a major impact on theme development. To further my understanding of this feature, I explored adding support for it to the block-based version of Twenty Twenty that Jeff Ong recently shared.

Some background: Global Styles aims to bring site-wide controls for things like colors, typography, and spacing into Gutenberg. The originating GitHub thread for the effort is a great primer on its goals and scope. From a technical perspective, Global Styles currently works by using CSS variables to define styles. A set of controls are being developed to allow users to edit those variables within the Gutenberg UI.

A lot of Global Styles work is still in flux, but early pieces are available for themes to experiment with. For example, while using the latest version of the Gutenberg Plugin, themes can define a base set of Global Style variables in an experimental-theme.json file. Here’s a simple example of what one might look like, courtesy of Andrés Manerio’s global styles demo theme:

{
    "color": {
        "background": "#fff",
        "primary": "#00f",
        "text": "#000"
    },
    "typography": {
        "font-scale": 1.2,
        "font-size": "16px",
        "font-weight": 400,
        "line-height": 1.5
    }
}

Each of these are automatically rendered out as CSS variables that the theme can hook into. On the front end, this equates to:

:root {
    --wp--color--background: #fff;
    --wp--color--primary: #00f;
    --wp--color--text: #000;
    --wp--typography--font-scale: 1.2;
    --wp--typography--font-size: 16px;
    --wp--typography--font-weight: 400;
    --wp--typography--line-height: 1.5;
}

Theme authors can pull those in like any other CSS variable. For example:

p {
    color: var(--wp--color--text);
    font-size: var(--wp--typography--font-size);
    line-height: var(--wp--typography--line-height);
}

To help wrap my head around this, I took Jeff Ong’s work on the Twenty Twenty Blocks theme, and adapted it to use CSS variables as defined in a brand new experimental-theme.json file. You can browse this here:

https://github.com/WordPress/theme-experiments/pull/26

This exercise was relatively straightforward. The concept really shines when thinking a little farther out though. Once I had those new variables in place, I tried them alongside an in-progress Gutenberg PR to add a Global Styles sidebar to the beta site editor. This provides a vision of how style editing might feel in the future:

This is still very early and very buggy, but the ability to modify these values globally in a single place is still very exciting. This is something my colleagues and I are looking forward to implementing into our themes when it’s ready.

In case anyone wants to dig in to the exploration, the full code and some instructions are available over in the WordPress/theme-experiments repository. Give it a test, and try adding an experimental-theme.json file to your block-based theme experiments as well.

For more information on Global Styles, follow the project board on GitHub, and consider joining the bi-weekly Block-based Themes meeting in the #theme-review channel of WordPress.org’s Slack.

Finally, if you’ve already given Global Styles a try, I’d love to hear about it! Please share your work in the theme-experiments repository, or drop a link into the comments.