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:
What WordPress Global Styles Offers
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.
- Go to the Site Editor in the WordPress admin menu.
- Open the Global Styles sidebar by clicking the Aa icon.
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.
