Advanced Gutenberg: Custom CSS

 

The Advanced Gutenberg configuration also allows you to define custom CSS snippets that can be used in your editor and HTML tag options. To use custom styles, navigate to the Custom Styles page from Advanced Gutenberg's left menu.

To create a new style, click on the “Add new class” button at the bottom of the list of styles. You can edit your CSS right in the Custom CSS field.

 

custom-styles-gutenberg

 

All the changes you make will be displayed in the left part of the page. They will be applied to the string with “Example text”. The text above and under the string displays how your styles will look among the rest of the elements. After editing your custom style, save it using the “Save styles” button.


To apply a style to the element in the editor you should select the element and choose a style from the dropdown list named “Custom styles”.  To revert to the default style and delete all custom styles, choose the “Paragraph” option.

 

custom-css-style-block