A Look Into WordPress Global Styles

Since WordPress 5.0, WordPress has been moving towards Full Site Editing (FSE). So users can use Gutenberg blocks to post content and design whole websites. 

To achieve FSE, WordPress is developing a block editor that uses block directories, block patterns, and block themes. 

These block themes need two components to work – templates and Global Styles. 

Templates sound familiar, but what is Global Styles? 

Read on to learn: 

WordPress Global Styles 101

What WordPress Global Styles Offers

How Global Styles Work

How Do I Test Global Styles?

New Improvements to Global Styles

Final Thoughts: What Is WordPress Global Styles?

WordPress Global Styles 101 

Global Styles helps users change the overall style of their website. It lets you avoid the hassle of editing individual blocks or pages. It extends Full Site Editing functionality by bringing a higher level of customization to Gutenberg and WordPress. 

With Global Styles, users have improved control over the layout and design of the website. Theme developers can design and style blocks with more freedom and functionality. 

Before this, web designers editing websites running on WordPress’s Classic Editor used PHP to add color choices and font sizes. Using PHP, they would add style sheets (CSS) to both the frontend and admin end of the theme.  

What WordPress Global Styles Offers 

Global Styles saves you from the extra hassle. With Global Styles, WordPress automatically adds the styles. You don’t need to write additional CSS. 

You can use Global Styles to modify a theme’s style or enable or disable settings and features (such as the drop cap). 

For example, with Global Styles, users can select a background color or change the text size for the whole theme from one place.  

But it doesn’t limit individual customization. You can still edit individual blocks styles and override the global styles. 

How Global Styles Work 

Global Styles let developers use a new theme settings file called theme.json to define website and block defaults. The data from JSON objects are reformatted as CSS and CSS custom properties to define styles. 

There are two important parts to the theme.json file: settings and styles

Settings 

The Settings lists global or contextual values that describe how the editor and blocks behave. Specifically, it defines:  

  • Which controls are disabled or hidden 
  • Preset values such as color palettes 
  • Default typography settings 

Styles 

Styles define the theme’s design language. It enables theme editors or authors to decide things such as the: 

  • Font size 
  • Line height 
  • Link colors 
  • Heading sizes 
  • Default color 

When rendered, the Styles translate into style sheets (CSS) that are injected into the frontend and admin end of the theme. 

How Do I Test Global Styles? 

To start using Global Styles, you need a Full Site Editing theme (such as Twenty Twenty-Two) and the activated Gutenberg plugin right now. This might change when WordPress releases Version 5.9 in January 2022

  1. Go to the Site Editor in the WordPress admin menu. 
To access Global Styles, go to the WordPress Site Editor
  1. Open the Global Styles sidebar by clicking the Aa icon. 
An early version of the Global Styles interface

Under Global Styles, you’ll see two tabs: 

  • Global — These settings affect the website. For example, the background color you select here will be the website body’s background. 
  • By Block Type — These settings affect all copies of a block type. For example, changing the color on a group block will change the color for all grouped blocks. 

New Improvements to Global Styles 

Global Styles is constantly evolving. 

In Gutenberg 12.1 release, the WordPress team added the following features to Global Styles: 

  • Defining custom gradients via the color palette section 
  • Showing duotone colors under the same gradient section 
  • Splitting typography options between text and link elements 

Final Thoughts: What Is WordPress Global Styles? 

WordPress Global Styles empowers users to modify their website’s look without editing individual blocks or pages.  

With Global Styles, WordPress automatically adds styles to the themes or blocks through theme.json files. These files bypass PHP and CSS, which the Classic Editor required. 

We expect Global Styles to ship in with WordPress 5.9, which drops on January 2022. 

Follow @Bluehost on Twitter for the latest technology news. 

Build the Website of Your Dreams with Bluehost

Get Started
Devin Sears
Devin Sears | Field Marketing Manager

Leave a comment

Your email address will not be published. Required fields are marked*