josh Blocks

I’ve made my very first custom block boilerplate. It’s a great way to package up something like a Gutenberg block because custom Gutenberg blocks are just plugins! The nice thing about this is you can package all the development dependencies up in a nice neat JSON file and let node take care of installing the build process when you need it. Just drop the repo into your plugins directory, run npm install, then npm run dev and you’re setup and ready to go!

Picture Block – full width

This is the picture block I made viewed at full width. I was going to stop here, but turns out that when you activate the block layout options, you get left, center, right, wide and full. That’s a set. And as an antique dealer will tell you, you can not split up a set. So, I had to style them all.

WordPress has decided to make something neat. They call it Gutenburg. Sure, it has a great title, a pretty presumptuous title, but a good one. You don’t name your new feature after the guy who invented typesetting if you don’t think your thing is going to be pretty, well, neat. So, I thought I better get in on this.

Picture Block – left

This is the block as displayed left. One difficulty with these blocks I found is getting them to display in a similar way on the editor as they will in the front end. The editor structure varies just enough to make it kind of a pain.

Picture Block – center

This one just keeps to itself. Nice and understated.

So there are some examples of the one block I made. Overall I like the direction WordPress is going with this. I like it a lot more than how limiting the “one text box to rule them all” approach they’ve had since the beginning. I suspect they’ve been keeping a close eye on applications like square-space and watching and learning, which is great, but now they have a lot of catching up to do.

Picture Block – right

You might be able to tell where this is going by now. If not, well, okay, I’ll go just tell you. This is the right aligned block style. Again, I can’t emphasize enough, WordPress doesn’t actually GIVE you any of the styles, just the levers. Levers are hard to make too though.

From an editor or even designers standpoint, plugins like wpbakery are still clearly kicking Gutenberg’s butt.  I wonder if it’s WordPress’ intention to compete with them someday, or if it’s their intention for these companies to pick up Gutenberg technology and use that instead of the soup of shortcodes they currently have to resort to?

Picture Block – wide width

I kinda thought this size was unnecessary, but I guess more is better than less, and it is nice to have one extra flavor. So here it is, wide width, at least, what I thought wide width would look like in respects to the block I made. Oh, you can also have a link in here if you want a call to action.

Learn More About Gutenberg