Block Styles for Gutenberg Blocks

The PublishPress Blocks plugin allows you to define custom CSS snippets that can be applied to any block when you're creating a post.

This is a very useful that empowers your users to add pre-defined CSS styles to any block.

The default Block styles in PublishPress Blocks

How to create block styles

  • Click on the “Add new style” button at the bottom of the list of styles.
  • Edit the new style
  • Replace the default generated style title for a custom one:
  • Type a valid CSS “Class name”.
  • Choose an “Identification color” so your users can pick the style.
  • Edit your CSS right in the Custom CSS field.
  • All the changes you make will be displayed in the “Preview” area.
  • After editing your custom style, save it using the “Save styles” button.

How to duplicate block styles

You can duplicate block styles by placing the cursor over a style and click the “copy” icon.

The duplicated style is added at the very bottom of the list.

How to delete block styles

You can delete block styles by placing the cursor over a style and click the “delete” icon.

Confirm you want to delete the style.

How to edit block style title

To change the title of a block style:

  • Select the style from the list
  • Type the new style title
  • Click “Save styles”

How to use block styles with specific blocks

The easiest way to use custom styles is with the blocks below:

  • Paragraph
  • Heading
  • List
  • Code
  • Preformatted
  • Table
  • Columns
  • Group

To add a custom style:

  1. Select a block.
  2. In the right sidebar, choose a style from the dropdown list named “Custom styles”. 
  3. To revert to the default style, choose the “Paragraph” option.

How to use block styles with other blocks

You can also add your CSS styles to other blocks different to the listed in the previous section.

  • Use the “Advanced” area to enter the class name of your custom style in the “Additional CSS class(es)” box:

In the center of the screen, you should see that the block has your new CSS style. In the image below, the blue-message CSS is active.

Blue Message
Blue Message
  • Here is that same block on the frontend of WordPress:
Blue Message Front
Blue Message Front

Professional publishing plugins for WordPress! Get PublishPress