• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Creating custom block styles for WordPress

Learn in this tutorial how to create custom block styles for WordPress editor 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 shows two options:

  • Default
  • Rounded
defautl-block-styles-WordPress

But do you know what’s most interesting?

You can easily create your own block styles.

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

Block-Styles-image-WordPress
Example of different custom styles for the image block.

Here’s how:

Steps to create custom block styles in WordPress

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 :

To see this and another 847 code snippets of this website, login or subscribe here.

Each style consists of 4 elements:

  • core/image -> the image block to which the new styles will be added
  • 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 3 new styles for the image block:

  • Circular
  • Star-shaped
  • Triangular

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:

To see this and another 847 code snippets of this website, login or subscribe here.

3. CSS styling

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

  • is-style-circular-image
  • is-style-star-shape
  • is-style-triangle-shape

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

To see this and another 847 code snippets of this website, login or subscribe here.

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! If you only include it at the front you will not be able to preview the styles in the editor.

add-block-styles-wordpress
Extra block styles for the image block.

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

Conclusions

The WordPress block editor allows many customization possibilities. If you want to start taking advantage of it by creating your own block styles now you know how to do it.

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


Block Editor Block Styles HTML PHP WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?