Global styles

Global styles extends the efforts of Full Site Editing in bringing a higher level of customization to Gutenberg and WordPress. Together, these features enable users to have improved control over aesthetics and layouts beyond the context of single Pages and Posts.

This initiative adds an interface to apply styling when in site editing mode. The styling will initially be global but also be able to apply just to the document (e.g. a Page or a Post) or to a component itself. For example, styling an individual button, all buttons within a page, and/or all buttons across an entire site.

Details Details

Focus maintainers: @itsjonq, @karmatosed

Timeline: estimated v1 for 5.5 (at least in the experimental flag)

Tags: #global-styles

Tickets, Issues, and PRs:

Top ↑

Framing Framing

Creating a style and applying across your site is hard right now.

Supplemental to this is the work for block style system that creates a clear stack and foundation.

The idea is to provide a unified system for Gutenberg blocks (core + 3rd party) and themes to work well with each other. They also have to understand and respect user overrides. These defined styles can be applied globally throughout the user’s site (e.g. Declaring font scale, or colors, or how all Buttons look).

https://github.com/WordPress/gutenberg/issues/19611

To start the specification for this interface in v1 will be:

  • Typography: set base size, increase/decrease scale, set alignment.
  • Colors: set background, typography and primary.

Top ↑

Plan Plan

Design tasks Design tasks

There are of course development tasks but as this is on make/design focusing on what design to expect.

TaskStatusLink
Global style defaultsIn Progress
Color picker iterationDonehttps://github.com/WordPress/gutenberg/issues/19785
Range controlDonehttps://github.com/WordPress/gutenberg/issues/19845
Flow diagrams for v1Donehttps://github.com/WordPress/gutenberg/issues/19255#issuecomment-582393358
Explore beyond a sidebarDonehttps://github.com/WordPress/gutenberg/issues/20212
Explore switching from global to local stylesDonehttps://github.com/WordPress/gutenberg/issues/19255#issuecomment-587572951
Block reviewIn progress
Sidebar v2Donehttps://github.com/WordPress/gutenberg/issues/19255#issuecomment-585729528
Explore recommended stylesIn progress
Explore how to apply global stylingIn progress

Top ↑

Visuals Visuals

Flows Flows

Top ↑

Editing typescale Editing typescale

Updates

  • 19/02: all design tasks updated into table to show current work.