Global styles

Global styles extends the efforts of Full Site Editing in bringing a higher level of customization to GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/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

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

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

Supplemental to this is the work for blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. style system that creates a clear stack and foundation.

The idea is to provide a unified system for Gutenberg blocks (coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. + 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

Top ↑

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 sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.Donehttps://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

Top ↑

Flows

Top ↑

Editing typescale

Top ↑

Updates

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

Last updated: