Creating custom listing styles with UTF-8 icons in WordPress

Learn in this tutorial how to create custom styles for WordPress editor list block using UTF-8 icons.

By now you know that I’m 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 SVG icons.

In this case, I’m going to show you how to achieve the same but using UTF-8 icons.

I imagine that UTF-8 sounds familiar, but if not, here is the description from Wikipedia

UTF-8 (8-bit Unicode Transformation Format) is a Unicode and ISO 10646 character encoding format that uses variable length symbols.

It is the most common character encoding online and is supported by all major web browsers.

Therefore, it can be a good option if you only need to use simple icons.

This would be the final result:

In this tutorial you are going to see how to create a custom block style with UTF-8 icons for the listing block and have it available in your child theme.

Here’s how:

Steps to create listings with UTF-8 icons in WordPress block editor

1. Register the 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/list -> the list 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 4 new styles for the list block:

• Check
• Cross
• Star
• Arrow

2. Choose UTF-8 icons

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

• W3 Schools
• UTF 8 Icons

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

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 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:

As you can see, the amount of code is less in this case than when we use an SVG icon. Also, in this case we use the list-style-type property instead of a pseudo-element to add the icon.

And to add it to the editor, depending on each theme 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.

This is a simple example from which you can draw inspiration to create your own block styles. For example, other possible variations are:

Let your imagination fly! 😉

Conclusions

Thanks to block styles you can create lists with UTF-8 icons quite easily and attractively.

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. 😉