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 #

• Go to the “Blocks” link in the WordPress admin menu.
• Click “Block Styles”.
• This guide will introduce to the 8 default styles.

---

---

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.

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