WordPress Block Editor - Block Settings: Styles

WordPress Block Editor – Block Settings: Styles

WordPress Block Editor - Block Settings: StylesThis 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:

***

Block Settings – Styles

Some blocks allow you to choose different styles settings.

Block Settings: Styles
Block Settings: Styles

info

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.

Block Settings: Styles - Default
Default style

And a rounded style…

Block Settings: Styles - Rounded
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: Styles - Additional style options.
Themes and plugins can add additional styles to blocks.

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…

WordPress Dashboard Menu: Appearance - Editor
If your site uses a WordPress Block Theme, you will see the option to edit your theme using the Site Editor.

This brings you to the Design section.

Click on Design > Styles

Site Editor - Design - Styles
Click on Design > Styles.

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

WordPress Site Editor - Styles Icon and Styles settings panel.
Click on the Styles Icon to bring up the Styles settings panel.

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

WordPress site preview - Edit site
Click on Edit site when previewing your site to access the WordPress Site Editor.

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.

WordPress Site Editor - Styles Icon
Click on the Style icon to view 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

Styles settings - Typography
Let’s style this theme’s Typography…

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

Styles settings - Typography panel
Manage the typography settings for your site’s elements in the Typography panel.

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

Styles settings - Typography - Fonts
Add fonts and font variants to your site’s theme using the WordPress Font Library tool.

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

  • Body text
  • Links
  • Headings
  • Captions
  • Buttons
Styles settings - Typography - Elements
Style the typography settings of various elements of your site, like headings, links, and buttons.

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

Styles settings - Typography - Elements - Buttons.
Customize your site’s buttons using the Buttons typography settings panel.

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

WordPress Site Editor - Styles > Colors
Let’s customize the style of this theme’s color settings.

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.

Styles - Colors panel
Apply global color styles to different elements of your WordPress site.

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.

Styles - Colors - Button settings
Some elements like buttons allow you to change and customize the color of button text, backgrounds, and apply gradients.

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

WordPress Site Editor - Live preview
Preview your changes live in the WordPress Site Editor.

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

WordPress Site Editor - Styles > Layout
Click Layout to apply global layout settings to your theme.

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.

Styles - Layout - Dimension options
You can enable or disable dimension settings in the Layout panel.

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

WordPress Site Editor - Styles > Blocks
You can customize the appearance of specific blocks throughout your entire site.

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…

Styles - Blocks list panel.
Select the block you want to customize from the Blocks list.

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.

Styles - Blocks - Paragraph
Changes made to the Paragraph Block here will become the default settings for the block throughout your site.

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.

The Command Palette
Access your 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:

***

Updated: July 5th, 2024

Terms Of Use | Privacy Policy

Scroll to Top