Reusing classes you’ve designed around your site

One of the great additions to WordPress in Gutenberg, is the addition of blocks which you can assign your own custom classes, and not have it just be a feature of your template.

Here’s a simple project. The text below has a custom class called dotted_boxout (to give it a unique name, I can show you how I do this in the page editor.

Special boxout text area I’ve built

The Class Code

I decided I wanted a boxout design with a dashed border, slightly filled and a bit of extra padding, so checking online examples and experimenting, I found these values this can be copied and pasted into the additional CSS area, now any time you use this class, it will have these values

p.dotted_boxout {
border: 2px dashed #777;
background-color: #eee;
margin-right: 50%;
padding:10px
}

And just for fun I also made this area have the same class.