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:
- Select a block.
- In the right sidebar, choose a style from the dropdown list named “Custom styles”.
- 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:
