How to Use Block Styles

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