This is a new feature in WordPress 5.9 that comes included in Block themes that allows you to customize your site as much as you’d like with different colors, typography, layouts, and more. You can also adjust your blocks to ensure a cohesive experience across your site — add your unique colors to a branded Button block, or adjust the Heading block to your preferred size.
How to find Styles
In order to have access to this feature, you need to be using a Block theme. From there, Navigate to Appearance > Editor (beta). From there, you’ll see the Styles icon available next to the block settings sidebar. This will be 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.