Create Custom Styles for Gutenberg Blocks
The Advanced Gutenberg 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 styles in Advanced Gutenberg
- Go to the “Adv. Gutenberg” link in the WordPress admin menu.
- Click “Custom Styles”.
- This guide will introduce to the 8 default styles.
How to create custom styles
- Click on the “Add new class” button at the bottom of the list of styles.
- Choose a name for your new class:
- Choose the “Style class”.
- 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. The text above and under the string displays how your default styles.
- After editing your custom style, save it using the “Save Styles: button.
How to use custom styles with Paragraph blocks
The easiest way to use custom styles is with the Paragraph block type.
- Select a “Paragraph” block.
- In the right sidebar, choose a style from the dropdown list named “Custom styles”. Please note that this won't show in the admin area, but will work on the frontend of your site.
- To revert to the default style, choose the “Paragraph” option.
How to use custom styles with other blocks
You can also add your CSS styles to other blocks, and not just paragraph blocks.
- Use the “Advanced” area to enter 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: