Create custom block styles for the image block inside a WordPress gallery

Learn in this tutorial how to create custom styles for image blocks inside a WordPress gallery and add them to a theme.

One of the features of WordPress editor blocks is that they can have different styles.

For example, the image block shows two options:

• Default
• Rounded

In a previous tutorial I explained how you can easily create your own block styles.

But WordPress 5.9 introduces quite a few new features; among them, the gallery block has been redesigned and is now an image container.

This allows us to modify images individually and opens up new design possibilities. In fact, in the previous tutorial I explained how to create a custom style for the gallery block.

In this tutorial you will see how to create different styles for the image block and get a custom gallery layout.

Here’s how:

Steps to create custom styles for the image block inside a WordPress gallery

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

Each style consists of 4 elements:

• core/image -> the image 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 -> whether you want it to be the default style or not.

With the above example you register a new style for the image block:

• Rounded border top left
• Rounded border top right
• Rounded border bottom left
• Rounded border bottom right

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

3. CSS styling

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

• is-style-osom-top-left-rounded
• is-style-osom-top-right-rounded
• is-style-osom-osom-bottom-left-rounded
• is-style-osom-bottom-right-rounded

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

In the case of Genesis Sample you must add it at the end of the file:

• /lib/gutenberg/front-end.css
• /lib/gutenberg/style-editor.css

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

You can see that you get a very similar effect to the other tutorial, but you have a much more granular control, since you control the design of each image.

This is a simple example to inspire you to create your own block styles.

Conclusions

WordPress block editor allows for a lot of customization possibilities. With the arrival of WordPress 5.9 you can get more out of it by creating your own custom image styles that allow you to create different gallery layouts. And now you know how to do it.

Any questions? Let me know 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. 😉