Create custom styles to display warnings in WordPress

Learn in this tutorial how to create custom block styles for the quote block of the WordPress editor to display notices and warnings.

By now you know that I am a big fan of taking advantage of custom block styles.

In fact, I already explained how you can create them and how to get very interesting designs with the native gallery block or create lists with icons.

Another block that can give you a lot to play with is the block of quotes. Not only can you add variations that show the warnings in a different way, but also use it as a basis for creating a system of alerts.

This would be the final result:

In this tutorial you are going to see how to create a custom block style for the quotes block and have it available in your child theme.

Here’s how:

Steps to create custom ads in WordPress block editor

1. Register new styles

The first thing you need to do is to register the new styles.

To do this create a file called block-styles.js inside the /js/ folder with the following code:

Each style consists of 4 elements:

• core/quote -> the block to which we are going to add the new styles.
• name -> internal name that will also be given by the CSS class.
• label -> label used for the name displayed in the editor.
• isDefault (optional) -> whether you want it to be the default style or not. In this example it is undefined indicating that they are not default styles.

With the above example you register 3 new styles for the quotes block:

• Update
• Warning
• Error

2. Choose SVG icons

If you do not have a library of svg icons, there are several free to use, such as:

• Material
• Iconsvg
• Tablericons

Once you have chosen the ones you will need, use this online tool to convert the SVG to a format that allows you to use it in CSS. In this case, as background-image.

3. Enqueue the new styles

Once you have the file where you have registered the styles, you must paste them to the theme. To do this add the following snippet to the end of functions.php:

4. CSS styling (SVG inline)

When registering new block styles you have used nomenclatures that translate into CSS classes. Specifically

• is-style-osom-update
• is-style-osom-warning
• is-style-osom-error

Now you have to use these classes to give the layout you want and add them to both the frontend and editor stylesheet.

To do this on the frontend add the following to the style.css file:

And to add it in the editor, depending on each theme it may vary a little. In the case of Genesis Sample you must add it at the end of the file:

• /lib/gutenberg/style-editor.css

Watch out! Because if you only include it at the front you won’t be able to preview the styles in the editor.

If you notice, instead of using color: you use filter: to color the icons. You can use this tool to enter the color in hexadecimal and get the result to apply the filter.

In case you want to show the icons in black, just delete that line, for example:

	filter: invert(100%) sepia(2%) saturate(648%) hue-rotate(29deg) brightness(114%) contrast(100%);

This is a simple example from which you can draw inspiration to create your own block styles.

Conclusions

Thanks to the block styles you can modify the quote block to create notices or warnings in a very simple and attractive way.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉