WordPress Block Editor – Block Settings: Styles

This tutorial is part of our series on using common block settings in the WordPress Block Editor Settings Section.

In this tutorial, you will learn how to customize a block’s styles settings and properties.

For a complete understanding of how to use the WordPress Block Editor, see the other tutorials in this series:

• WordPress Block Editor: Block Settings
• How To Use The WordPress Block Settings Section
• How To Use WordPress Blocks

***

Block Settings – Styles

Some blocks allow you to choose different styles settings.

Note: Block types that support style properties must be selected in the content editor area to display the Styles settings in the Block Settings panel.

If you need help using block settings, see this tutorial: WordPress Block Editor: Block Settings

Styles Properties

There are no properties to edit in blocks that support styles. Simply select a style option to apply the style.

Styles Settings

In this section, we’ll look at how to use the default settings in blocks that support styles.

To access the Styles settings for a block that supports styles:

1. Select the block.
2. Select the Block settings panel to view the Styles settings option.
3. Select the style.

Most style-supported blocks include a default style.

And a rounded style…

Note: A block’s styles settings may include additional options depending on which blocks you select and what plugins and themes are installed on your site.

Block Settings – Global Styles

Features like the WordPress Site Editor and WordPress Block Themes allow you apply global style settings to your theme’s templates that can unify style elements across your entire website.

If your site currently uses an active block theme, you can edit styles globally for your theme by going to Appearance > Editor in your WordPress dashboard…

This brings you to the Design section.

Click on Design > Styles…

And click on the Styles icon to bring up the Styles settings panel of your theme templates…

Note: You can also access this section by clicking on Edit site in the WordPress toolbar while previewing your site…

This will load the Site Editor in your browser. Click anywhere in the template and then click on the Styles icon to bring up the Styles settings panel.

In the Styles settings panel, you apply global styles to areas of your site like:

• Typography
• Colors
• Layout
• Blocks

Global Styles – Typography

To style typography elements globally on your WordPress site, click on Styles > Typography…

Here you can manage typography settings for styling fonts and elements like links, headings, buttons, etc.

To learn how to add new font styles or change the fonts used on your site, see this tutorial: Using The WordPress Font Library.

As mentioned, you can style all kinds of elements on your site, like:

• Body text
• Links
• Headings
• Captions
• Buttons

Selecting any of these elements opens up a screen with further styling options…

For more details on styling the typography settings of your site elements, see this tutorial: Block Editor: Typography Settings

Global Styles – Colors

You can also apply global style settings to your site’s color schemes and palettes.

Click on Styles > Colors…

This brings up the Colors settings section, allowing you to manage your theme’s color palettes and the default color of different global elements on your site, such as:

• Body text
• Backgrounds
• Links
• Captions
• Buttons
• Headings

For example, select Text and use the color selector to change the default color of your theme’s body text.

Depending on the element you select, you can change the default color of the text or background, or apply a gradient to your selected element.

The site editor allows you to instantly preview how any changes you make will look before you save.

For more information on applying color settings in WordPress to style your site, see this tutorial: WordPress Block Settings: Color Settings

Global Styles – Layout

Another global setting you can style is your site’s Layout settings.

Click on Styles > Layout…

This brings up the Dimensions panel. Click on the Dimensions options icon (i.e. the vertical ellipsis) to enable or disable settings like:

• Content size: Determines the width of the content area on your webpage. Adjusting this option changes how much space your content occupies within the layout.
• Wide size: Sets the width of wider content elements, such as images or embedded media. It allows for variation in layout by defining how much space these elements can take up.
• Padding: Adds space between the content and its surrounding elements, such as borders or adjacent blocks. Adjusting padding affects the visual spacing within your layout, and provides breathing room for your content.
• Block spacing: Determines the distance between individual blocks or sections of content on your webpage. It helps organize the layout and improves readability by creating visual separation between different parts of your content.

You can also Reset all settings to their default.

Make any necessary adjustments here and these will be applied globally to your entire site’s layout settings.

To learn more about styling layout elements on your site’s theme, see this tutorial: WordPress Block Settings: Dimensions

Global Styles – Blocks

You can also customize styles to change the global appearance of specific WordPress blocks on your site.

Click on Styles > Blocks…

This brings up a list of blocks. If you can’t see the block you want to edit on the list, use the search tool to bring up additional blocks.

Click on the block you would like to style…

In this example, we’ve selected the Paragraph Block. This brings up a panel displaying all the settings you can customize to create a global style for your site’s paragraph blocks.

Note: Changes made to blocks here become the default settings for the block throughout your site, but can be individually overridden at the content editing level when using the WordPress Block Editor (e.g. when editing posts or pages).

To learn more about using blocks in WordPress, see this tutorial: How To Use WordPress Blocks

The Command Palette

You can also access your site editor’s global styles settings quickly using the Command Palette.

To learn how to use this feature, see this tutorial: The Command Palette

WordPress Block Editor Style Settings – FAQs

Here are frequently asked questions about WordPress Block Editor Style settings:

What are WordPress Block Editor Style Settings?

WordPress Block Editor Style Settings allow users to customize the appearance of blocks within the Block Editor. Users can adjust typography, colors, spacing, and other design elements to match their website’s branding or personal preferences.

How do I access Style Settings for blocks in the WordPress Block Editor?

To access Style Settings for blocks, select the desired block within the Block Editor. Then, navigate to the block’s settings panel on the right-hand side of the editor interface. Look for the “Styles” or “Block Styles” tab, where users can find options to customize the block’s appearance.

Can I apply global styles to multiple blocks at once in the Block Editor?

Yes, users can apply global styles to multiple blocks at once using the WordPress Block Editor’s theme.json file. By defining global styles in the theme.json file, users can ensure consistency in design across various blocks throughout their website.

What customization options are available in the Block Editor Style Settings?

The Block Editor Style Settings offer a range of customization options, including font styles, font sizes, text colors, background colors, border styles, padding, and margins. Users can adjust these settings to create visually appealing and cohesive layouts.

Can I use custom CSS to further customize block styles in the Block Editor?

Yes, users with knowledge of CSS can apply custom styles to blocks by adding CSS code to their WordPress theme’s stylesheet or using plugins that support custom CSS. This enables users to achieve more intricate design modifications beyond the built-in Style Settings.

Are there any plugins or themes that provide additional Style Settings for the Block Editor?

Yes, several WordPress plugins and themes offer extended Style Settings for the Block Editor, providing users with additional design options and flexibility. Users can explore these options to enhance the visual appeal of their content.

***

Congratulations! Now you know how to use your block’s style settings.

Additional Block Settings

Click on a tutorial from the list below to learn about using other common block settings in the WordPress block editor.

***

For more tutorials in this series, go here:

• The WordPress Block Editor (Gutenberg)
• How To Use WordPress Blocks
• How To Use The WordPress Block Editing Toolbar
• How To Use The WordPress Block Editor Content Area
• How To Use The WordPress Block Editor Settings Section
• WordPress Block Editor: Block Settings

***

Updated: July 5th, 2024