Styles is a new feature that allows you to set the overall aesthetics and layout of your site at a global level, instead of editing individual blocks or pages. It is included in Block themes and requires WordPress 5.9 or higher.
You can set the colors, typography, layout, spacing, and more, for the entire site and give your website a cohesive look that shows off your brand.
You can also edit the default appearance of blocks to streamline the look and feel of your website — add your unique colors to a branded Button block, or adjust the Heading block to your preferred font size.
How to find Styles
To access this feature, you need to install and activate a Block theme and have WordPress 5.9 or higher.
Go to Appearance > Editor (beta). Select the half-shaded circle icon at the top right-hand corner of the screen, above the block settings sidebar, to access the Styles pane. The Styles icon is available to use regardless of what template or template part you are editing.
How Styles works
The Styles you set impact your entire site. This means that if you change the background color, it impacts the background color of all of your posts, pages, and templates. Your theme supplies various default settings along with WordPress itself. You’ll see both listed but, using Styles, you’re able to override these options with your own. This means you can add your own custom colors to the color palette, change the layout controls, and more.
Typography
This section allows you to manage the fonts used on the site and the default aspect of different global elements, like font weight and line height. After selecting it, you will see the option to edit both Text and Links. This can allow you to do things customize like the font family, line height, and appearance of either option.
Colors
This section allows you to manage color palettes and the default color of different global elements on the site. This includes your background color, text color, and link color.
Add a custom color or gradient
If you want to add a custom color to use across your site, you can do so here.
- Open the Styles interface.
- Select the Colors section.
- Select the Palettes section and choose either the Solid or Gradient tab.
- Under Custom, select the + button.
- From there, select and name your custom option. When naming the custom option, please try to avoid common color names (blue, green, etc) in order to prevent any overlap with other common color names.
- Once you have a color selected and a name, hit “Done” before hitting “Save”.
- You will then see this option available for use throughout your site.
Layout
This section allows you to add padding to your entire site’s structure. It’s likely you won’t need to use this section but it can be helpful for adjusting your site’s layout globally.
Blocks
Every block on your site can be adjusted here to your liking in a way that will impact. Each block has its own set of options to customize. For example, the Image block has options around Layout and the Button block has Typography, Colors, and Layout options.
Keep in mind that changes here will impact the default state of this block wherever it has been placed unless it has been customized individually. For example, if you set a custom color with an individual button block previously, the Styles set here won’t override those individually set colors.
Resources
Here’s an example showing quick changes with the Styles interface:
Changelog:
- Created 2022-01-05
Was this article helpful? How could it be improved?
You must be logged in to submit feedback.