It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don’t know how things are supposed to be, yet they should still be able to always get it right.
In the past, I have created custom elements for the TinyMCE-WordPress Editor. One of the plugins I used here was the Visual Editor Custom Buttons. I could create elements that the writers would find in the toolbar with just a click on a button. Each button got its own icon and usually the content looked accordingly.
I say usually, because it was also not too hard to mess up the HTML when copying content in, when deleting elements, etc. That then ended in a mess in the frontend. So it was a solution to offer the needed elements, but I still had to teach the html view and how the elements markup was supposed to look.
But now Gutenberg is coming. My custom buttons wouldn’t work anymore anyways – so I had a good reason to get to know blocks.
Building my first Gutenberg block
First be ready
To get started with building blocks, one does need a bit of a setup. It’s nothing too bad. You should definitely work on a local installation or you have to write everything in JS5, which is a lot more of a hassle. I mainly use local for that. That also means you need to be able to build your ESNext-written blocks, so you need npm/yarn setup. But if you develop, you probably think that’s standard computer equipment.
And last but not least, if you don’t already, you need to understand React. If you’re mainly developing for WordPress, you may not have needed it so far. But it’s a good time to learn it anyways.
Now finally, we can get started.
Figuring out how to build a custom block
So we all get started with googling. There already are a lot of articles on how to build your blocks. Some of them were already outdated, as Gutenberg did a lot of development since it first got introduced. But there’s still enough. And luckily the team behind Gutenberg actually published Gutenberg examples. Them combined with their tutorial are great learning resource.
I personally only wanted to build simple blocks which mainly have 1-3 fields to fill out, sometimes an image to upload and a set design around them. So I decided against using a developer toolkit.
Other then that I had a steep learning curve. You can really just follow any of the tutorials, run your build and activate your blocks as a plugin.
Where I ran into problems
So yes, it was simple, but not without these aweful moments where it just won’t work. And that was when I noticed how little questions were asked about Gutenberg yet. When usually you can always find an answer on Stackoverflow, it’s not the case a month before Gutenberg is integrated into WordPress Core. But I bet this changes really fast from now on.
So what I had to google forever where things like:
- How can I use a specific media image size – if available? This for example is a really simple question. With a really simple answer:
const image = media.sizes.thumbnail
? media.sizes.thumbnail.url
: media.url; - How to make you block styles appear on the left hand corner of the block? (In the toolbar) This can go underneath the attributes:
styles: [
{ name: 'default', label: __( 'Standard' ), isDefault: true },
{ name: 'round', label: __( 'Round‘ ) },
{ name: 'oval’, label: __( 'Oval‘ ) }],
Funny enough, I found a couple of good tutorials on how to add your own selections in the inspector on the right. It’s so often the simple things that no-one mentions. - How can I change classnames according to the selected style? (I still haven’t figured it out actually.) And yes, the block will get
is-style-xxxas class name, and I do have CSS. But I still wanted to give an image a different class. So, I’ll add this once I know. - Why do I keep getting the „invalid block“ in my backend? So here googling didn’t help much either. But I noticed that I had given my RichText tags a
tagname=„div“and then used p as child elements. Gutenberg only expected the div. As I only have short content in the blocks. I now just use p as tagname.
What I love
So building these blocks actually turned me into a Gutenberg fan. Yes, my blocks were simple, but that’s what customers need so often.
- Customers can’t break them!
- They are really simple to use and as you really see what you get chances of making a mistake are even smaller.
- It’s much easier to customize the possibilities for editors.
- It’s really not hard to understand the science behind simple blocks.
- As your blocks definitely have custom class names, you usually won’t break other design elements when styling the block.
- The preview view
- And well – I showed my customers how to edit posts, and they were so happy about it. I don’t want to introduce something else anymore.
Will I use Gutenberg?
Well, as you probably read “between the bold lines”, I definitely will use it and will get further into building blocks.
But will I always use it? Honestly? Probably not. There are so many different kinds of projects one builds with WordPress. And each project has different needs. I won’t close the door on other page builders. Gutenberg is not a replacement for me. I like pagebuilders, when creating static pages. It’s a fast process, immediately looks good and is usually responsive. And they will get me much further (so far?) then the Gutenberg editor.
But for every project a customer will publish their own content, I will introduce them to the Gutenberg editor, I will create them their own blogs if needed and I will shut off my laptop easier knowing that it’s much harder for them to break them.
I’m really curious and what is to come and I can’t wait to have a huge library of blocks to use. The Gutenberg team definitely covered what most bloggers need. And they opened a huge door to add custom functionality with new technology instead of always running back to old plugins that may or may not use current programming languages.
