What are Global Styles
Global style is a system and a Styles interface created to help users change the overall style of their site without having to edit individual blocks or pages.
Users can select a body background color or change the line-height of all their headings from one place.
Why Use WordPress Global Styles
Global Styles simplifies theme development to a great degree. As a result, it can help developers avoid damaging design mistakes.
Besides the users who will have more possibilities to change the look of their sites, Global Styles also benefit new theme developers.
The new controls will drastically reduce the need for custom solutions for styling, for example, a theme options panel or customizer settings.
It lowers the entry barrier for new theme developers while allowing control of the styles.
Creating JSON file to Global Styles
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.
The theme.json file contains two important parts: settings and styles.
Settings refer to a list of global or contextual configuration values that determine how the editor and blocks behave. For example,
it influences which controls are enabled by default, which controls are hidden from the User Interface (UI), the available color palette, typography settings, etc.
Create theme.json
You place the new theme.json configuration file inside the main folder of the theme.
You start the file with two curly brackets, { } and you will place all the content inside these brackets.
Then you will use a format with property names and values, encased in double quotes and separated with a colon:
{
"property-name": "value"
}
The property name can be a block name or a setting:
"core/heading": {
"typography": {
...
}
}
Settings Presets
Presets refers to the default controls as well as any custom CSS properties and are generated by the values in theme.json. Some of the main preset categories include:
- Color
- Typography
- Layout
- Spacing
Styles Presets
Styles presets to control the styles of objects within blocks. In the example, I use a color hex value for the background and a global styles preset for the text. I have defined the preset in the settings but truncated it for readability.
{
"version": 2,
"settings": { ... },
"styles": {
"color": {
"background": "#FFF",
"text": "var(--wp--preset--color--purple)"
}
}
}
And the CSS output is:
body {
background-color: #FFF;
color: var(--wp--preset--color--purple);
}
How to Style Your WordPress Site Using Global Styles
If you are using WordPress 5.9 or higher, you can use the Global Styles interface with a WordPress block theme.
Choosing and active a Block-Based Theme
Appearance > Themes > Add New. Next, you can click on the Feature Filter and select Full Site Editing, followed by Apply:
Integrating the Styles Interface
Next, head over to your Theme Editor (Appearance > Editor). In the top right-hand corner of the screen, you’ll see a half-shaded circle, which represents the Styles panel.
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.
When you’re done, you can click on Save. If you ever want to revert back to the theme styles you had before making changes, you can navigate to the Styles panel, click on the three vertical dots, and then select Reset to defaults.