How to create listings with SVG icons using block styles in WordPress

Learn in this tutorial how to create custom block styles for the WordPress editor list block and add them to a theme.

By now you may already know that I’m a big fan of taking advantage of block styles.

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

Another block that can give a lot of play is the listing block.

By default, it only offers a layout for the unordered list:

Adding variations that use different icons is a good way to avoid the use of other plugins.

This would be the final result:

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

Here’s how:

Steps to create listings with icons 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 image-block-styles.js inside the /js/ folder with the following code :

Each style consists of 4 elements:

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

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

• Checklist
• Cross
• Star
• Arrow

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 enqueue them to the theme. To do this add the following snippet to the end of functions.php:

4A. CSS styling (SVG inline)

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

• is-style-osom-check-list
• is-style-osom-cross-list
• is-style-osom-star-list
• is-style-osom-arrow-list

Now you have to use these classes to give them 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 to 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 noticed, instead of using color: you use filter: to asign color to the icons. You can use this tool to enter the color in hexadecimal and get the result to apply in the filter.

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

	filter: invert(82%) sepia(90%) saturate(1611%) hue-rotate(351deg) brightness(96%) contrast(95%);

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

4B. CSS styling (using SVG files)

If instead of using the SVG inline code, you prefer to add the icon files to the theme and then call them, you can do that too.

In that case, please skip step 2 and use this code instead of the one in step 4A:

In this case, the path is intended for the /images/ folder in Genesis Sample theme, but you can use it for any theme, just modify the path with the name of yours.

Conclusions

Thanks to block styles you can create lists with icons in a quite simple and eye-catching 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. 😉