josh Blocks

I’ve made my very first npm package. It’s a great way to package up something like a Gutenberg block because Gutenberg is developed using React, which means it uses node, which means it needs all kinds of dependencies and packages and a build process to develop a block. The neat thing about using an npm package for something like this is that you can just drop right into wp-content/plugins and run `npm install josh-blocks` and your setup and ready to go!

Josh Block 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 in this.

Josh Block 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.

Josh Block Picture Block – center

This one just keeps to itself. Nice and understated.

Josh Block 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.

Josh Blocks 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

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.

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?