Table of Contents
The PublishPress Blocks plugin allows you to define custom CSS styles that can be applied to any block when you're creating a post. This feature is called “Block Styles”.
This is a very useful feature that empowers your users to add pre-defined CSS styles to any block.
Introducing Block Styles #
- Go to the “Blocks” link in the WordPress admin menu.
- Click “Block Styles”. You will now see a screen with eight block styles. Click here for an overview of the default styles.
- You will see a “Preview” area that shows what how this block will appear. In this screenshot below, we're using the “Blue message” style. The block will have a blue background.
You can add these styles to any block when you're editing a post with the block editor.
- Select a block.
- In the right sidebar, choose a style from the dropdown list named “Block Styles”.
- The style you choose will be immediately shown inside the post editor for the block you select. In the screenshot below, we're using the “Blue message” style again.
Use Block Styles With Unsupported Blocks #
The Block Styles feature supports almost all blocks. However, if you do run into a block that doesn't provide the “Block Styles” dropdown, there is a workaround. You can also add your CSS styles manually. Use the “Advanced” area to enter the class name of your custom style in the “Additional CSS class(es)” box. In this screenshot below, the Block Style is added to a Video block.
