Styles Overview

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 create a branded Button block, or adjust the Heading block to your preferred font size. 

How Styles work

The styles you set from within the Styles interface impact your entire site. For eg: if you change the background color here, it changes the background color of all your posts, pages, and templates.

In the Styles panel, you will find the styles and default settings provided by your theme and the ones that come with WordPress.

You can override these settings with your own choices from the Styles panel. For eg: you can add your own custom colors to the color palette, change the layout dimensions, and more. 

Image showing the Styles sidebar open with all options listed.
Styles sidebar

You can also customize the appearance of specific blocks for the entire site. For eg: you can choose a background color and set the font size and line height for all the Quote blocks on your site.

How to use the Styles panel

To access this feature, you will need to install and activate a block theme and be using 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 panel. The Styles icon is available in the Site Editor, and when editing the template or template parts

In the Styles panel, you will see sections for Typography, Colors, and Layout. Any changes made from here will affect the entire site.

You will also find a section for Blocks. Clicking on the Blocks section will show you a list of all the blocks. You can select any block type and customize the appearance of that particular block, across the whole site.

The Styles welcome guide

When you open the Styles panel for the first time, you will be taken to a Welcome Guide dialog. You can click through the guide using the Next and Previous links at the bottom or close the dialog by clicking the X icon at the top right corner of the dialog.

Welcome guide in the Styles interface
Welcome guide

If you want to access the Welcome Guide in the future, you can find it by clicking on the three vertical dots icon in the upper right-hand corner and selecting Welcome Guide.

How to access the Welcome guide from the Styles panel.

Style variations

How to use the style variations

Style variations are a new feature of block themes that were introduced in WordPress 6.0.

With these style variations, you are presented with alternate versions of your block theme with different combinations of colors, fonts, typography, spacing, block settings, and more. You can easily swap the style variations and change the look and feel of your site without changing your theme.

  1. In the Styles panel, you can find a screenshot of the Style variation that your site is currently using.
  2. Select Browse styles at the bottom of the screenshot to explore the different style variations available with your block theme. From the available choices, you can pick a different style combination and instantly see how your site looks with this style variation, in the Editor.
  3. Click the left arrow icon to go back to the Styles panel.
Video showing how to use the style variations

Typography 

This section allows you to manage the various typography settings for the different elements – text, links, headings, and buttons – for the entire site.

  • Click Typography to open the Typography panel. Select the element you want to customize and it will open up the Typography panel for that element.
Typography settings in the Styles panel.
  • You can change the typography settings including font type, font size, appearance, and line height. As you pick your choices you can see a preview of how it looks.
Typography settings for the Link element with a preview of your choices
  • You can set the font size from S, M, L, XL and XXL. You can also set custom values in px, em and rem.
Video showing how to change the font size
  • You can change the typography settings for heading elements from H1 through H6.
Video showing how to use the Typography settings in Styles

Colors 

This section allows you to manage the color palettes and the default color of different global elements on the site. This includes your site’s background color, and the colors for texts, links, headings, and buttons.

  • Click Colors to open the Color panel. At the top, you will find the color palette used by the style variation of your active block theme. You will also find the list of elements whose default global color can be customized through the Color settings panel.
Color settings in the Styles panel

NOTE: In case your theme doesn’t have any color palettes, you will see the Add custom colors button. Click on it to start creating your custom palette.

When no colors are in the theme palatte

Customize the colors in the theme palette

  1. From the Color settings panel, click Palette to open the Palettes panel. Here you can set the color options that are available by default for blocks across your website. The Theme colors under the Solid tab can be used throughout your theme’s settings. The Default colors can be used in the blocks you use on your pages and posts.
Palette panel under the Color settings in the Styles panel
  1. Click the three vertical dots icon in the top right corner of Theme or Default and select Edit colors to change the color of each circle.
Select Edit colors under Theme and Default to change the color of each circle.

The Default colors will not be shown if your theme specifically opts out of it.

  1. A list will appear that includes all the colors currently in that palette. Click on one to edit it.
A list will appear that includes all the colors currently in that palette
  1. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values based on your brand. Click the two rectangle boxes next to the color slider to copy the HEX, RGB, or HSL color values.
How to pick a different color from the color picker.
  1. Once you are done picking the colors, you can click Done in the upper right corner to save the color choices.
Click Done to save the changes
  1. To revert the changes you made, click the three vertical dots icon and select Reset colors. This will reset the color palette to the theme’s original style variation choices.
How to Reset the colors
Video showing how to customize the theme palette

Add custom color to the theme palette

You can also create a custom palette from the Custom section in the Palette panel.

  • Click the + icon in the upper right corner in the Custom section to add a color.
  • You can give a name for the new color.
  • You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values for the new color.
  • Click the icon to the right of a color to remove that color from the custom palette.
  • Click Done once you are done adding custom colors.
  • Click the three vertical dots icon on the upper right corner and select Remove all colors to remove the colors from the palette.
Video showing how to add custom colors to the palette

Customize the theme gradients

The Palette panel opens to the Solid tab by default. You can click the Gradient tab to add gradients to your theme. From the Palette panel, you can edit the Default gradients that came with the theme or add Custom gradients.

  • Click the three vertical dots icon in the upper right corner in the Default section and click Edit gradients to start customizing the gradients in the theme.
How to edit the gradients in the theme
  • A list of all the gradients will appear. Click on any one of them to edit it.
A list of gradients will appear when you click Edit gradients.

The Default gradients will not be shown if your theme specifically opts out of it.

  • A slider will appear that shows the two color points that make up the gradient.
The two color points in the gradient
  • You can click on any of the two color points to display the color picker for changing the color value. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values.
  • You can add additional color points if you like by clicking the + icon that appears when you hover over the gradient slider.
Adding additional color pickers in the gradient slider.
  • Under Type, choose from Linear (transitions in a straight line) or Radial (transitions in a circle). You can also edit the angle of your gradient.
  • Once you are happy with your color choices for the gradient, click Done in the upper right corner.
  • To revert back to the colors that came with the theme, click the three vertical dots icon in the upper right corner and click Reset gradient.
Video showing how to customize the theme gradients

Add custom gradient

You can add custom gradients from the Custom section in the Gradient tab.

  • Click the + icon in the upper right corner to add a new gradient.
  • Click on the gradient in the list to set the two color points, add additional color points, and set the Type and Angle for the custom gradient.
  • You can change the name of the gradient to make them more intuitive.
  • Click the icon next to the gradient in the list, to delete a custom gradient.
  • Click Done once you are happy with the custom gradients you created.
  • Click the three vertical dots icon in the upper right corner and select Remove all gradients to delete all the custom gradients with one click.
Video showing how to add a custom gradient

Customize the color of elements

From the Colors panel, under Elements, you can change the color of your site background, text, links, headings and buttons.

  • Click on the element you want to edit to open a new panel with the color options for that element.
  • As you make changes, you will see the design of your site update on the left. 
  • You can click the Clear link at the bottom right corner in the element’s panel to clear the color choices you made for that element.
  • For the Background, you can set a solid color or gradient.
Video showing how to change the site’s background color
  • For the Text, you can set a default color that will be used across the entire site. You can either choose a color from the color picker or enter the HEX, RGB, or HSL color values for the new color.
Video showing how to change the site’s text color
  • For the Links, you can set the default color for links across the site. You can also set the hover state for the links.
Video showing how to change the link color and hover state
  • For the Headings, select the heading level- H1, H2, H3, H4, H5 and H6 and then you can set the default color for that level across the site. You can also set the background color for the selected heading level to a solid or gradient color. Choosing All in the heading level tab will make the changes for all the heading levels at once.
Video showing how to change the text and background for heading levels
  • For the Buttons, you can set the default text and background color for buttons across the site.
Video showing how to change the text and background for buttons

Layout 

Setting the content widths in Layout Panel

This section allows you to set the width of the main content area of your website globally.

You can set the content width and wide width in PX, %, EM, REM, VW and VH units. The content width set here will be the default width of the blocks when they set Align to None in the Block Toolbar. The wide width set here will be the width of the blocks when they set Align to Wide width in the Block Toolbar.

To reset the values for Content and Wide, click the three vertical dots icon and select Content size or Wide size and the changes you made are reverted.

Reverting the Content and Wide size

You can also set the Padding or the blank space around your website from the Layout panel.

  • You can set the padding on the four sides: top, right, bottom, and left.
  • By default, Padding is locked which means that when you adjust the padding value it applies to all four sides. If you click the link icon, it unlinks the sides and you can set the Padding on each side individually. 
Padding linked in the Layout Panel
Padding linked
Padding unlinked in the Layout Panel
Padding unlinked

  • Padding can be set in PX, %, EM, REM, VW, and VH units.
  • You can add values to the text box or use the slider to adjust the values for Padding.

WordPress 6.1 introduced preset spacing values for padding. Your theme author can set baseline values for spacing and when you use the Styles’ padding preset slider, you can create consistent spacing across the elements within the site.

  • Clicking the black slider icon in the right corner (next to the link icon) will show the padding space preset slider.
Use the padding preset
  • To reset the values for Padding, click the three vertical dots icon and select Padding and the changes you made are reverted.
Video showing how to set Padding in Styles

In the Layout panel, you can also set the Block spacing which is the vertical spacing between the blocks.

  • Block spacing can be set in PX, %, EM, REM, VW, and VH units.
  • You can add values to the text box or use the slider to adjust the values for Block spacing.

WordPress 6.1 introduced preset spacing values for block spacing, as well. Your theme author can set baseline values for spacing and when you use the Styles’ block spacing preset slider, you can create consistent block spacing between the blocks.

  • Clicking the black slider icon in the right corner (next to the link icon) will show the block spacing preset slider.
  • To reset the values for Block spacing, click the three vertical dots icon and select Block spacing, and the changes you made are reverted.
Video showing how to use block spacing in Styles

Blocks

In the Blocks panel, you will see a list of all the blocks that can be customized for the whole site. You can also search for a block by its name in the search box. Click on a block from the list to see the available options for that block.

The changes you make to the blocks’ appearances in the Styles panel affect every block of that type on your site unless they are customized individually on your post or page. For example, if you set a custom color for a Button block on your Home page, the color set in the Styles panel for the Button block will be overwritten by the color you choose on the Home page.

Video showing the Blocks panel

Each block has its own set of options to customize. For example, you can customize the border and radius for the Image block or change the paddings, margins, colors, and fonts for the Heading block.

Margin settings for blocks

Padding is the space between a block’s content and its border whereas Margin is the space outside the border of a block.

The following blocks have a Margin control for Top, Right, Bottom, and Left, in the Blocks section under Layouts as of WordPress 6.1.

  • Paragraph
  • Heading
  • Gallery
  • List
  • Archives
  • Audio
  • Categories List
  • Media & Text
  • Social Icons
  • Table
  • Tag Cloud
  • Verse
  • Video
  • Site Logo
  • Site Title
  • Site Tagline
  • Avatar
  • Post Title
  • Post Excerpt
  • Post Featured image
  • Post Date
  • Post Author
  • Comment Author
  • Comment Date
  • Comment Edit Link
  • Comment Reply LInk
  • Comment Title
  • Term Description
  • Query Title
  • Post Author Biography

The following blocks have a Margin control for Top, and Bottom only in the Blocks section under Layouts as of WordPress 6.1.

  • Buttons
  • Code
  • Cover
  • Group
  • Columns
  • Separator
  • Spacer
  • Read More

By default, Margin is locked which means that when you adjust the margin value it applies to all sides. If you click the link icon, it unlinks the sides and you can set the Margin on each side individually. 

Margin linked in the Blocks Layout Panel
Margin unlinked in the Blocks Layout Panel

WordPress 6.1 introduced preset spacing values for margin. Your theme author can set baseline values for spacing and when you use the Styles’ margin preset slider, you can create consistent spacing across the elements within the site.

Clicking the slider icon in the right corner (next to the link icon) will switch the Margin controls from the preset slider to the text box view. You can add values to the text box or use the slider to adjust the values for Margin. Margin can be set in PX, %, EM, REM, VW, and VH units.

Use custom size for margin

To reset the values for Margin, click the three vertical dots icon and select Margin, and the changes you made are reverted.

Video showing how to use the Margin controls

Border and Radius settings for blocks

The following blocks have a Border and Radius control in the Blocks section under Layouts as of WordPress 6.1.

  • Image
  • Code
  • Columns
  • Group
  • Pullquote
  • Search
  • Avatar
  • Post Featured Image
  • Read More
  • Comment Title

Using the Border controls, you can set the border around a block. You can choose the border color from the color picker. You can set the border width in PX, %, EM, REM, VW or VH, by entering the width in the text box or the slider to adjust the values.

Border color and width using the slider and text box.

By default, border width is locked which means that when you adjust the value it applies to all sides. If you click the link icon, it unlinks the sides and you can set the Border on each side individually. 

Border width unlinked.

Using the Radius controls, you can round the corners of a block’s outer border. You can also set the border Radius in PX, %, EM, REM, VW, or VH, by entering the value in the text box or by adjusting the slider.

By default, border radius is locked which means that when you adjust the value it applies to all four corners. If you click the link icon, it unlinks the corners and you can set the radius on each corner individually – Top left, Top right, Bottom left, and Bottom right.

Border Radius and Border width controls
Video showing how to set the Border and Radius

Horizontal block spacing settings for blocks

The following blocks have Horizontal Block spacing control in the Blocks section under Layouts as of WordPress 6.1.

  • Columns
  • Social Icons

By default, the Block Spacing control is locked which means that when you adjust the value it applies to both the horizontal and vertical. If you click the link icon, it unlinks and you can set the Block Spacing for vertical and horizontal separately. 

Video showing how to set the horizontal spacing

Reset your changes

To revert back to the theme styles you had, before making changes, click on the three vertical dots icon in the upper right-hand corner of the Styles panel, and select Reset to defaults.

Reset to defaults in the Styles panel

Changelog:

  • Updated 2022-10-15
    • Added screenshots and videos for 6.1
    • Updated content for 6.1
  • Created 2022-01-05

Was this article helpful? How could it be improved?

First published

Last updated