Creating a WordPress block — which you might currently or formerly have referred to as a “Gutenberg Block” — is something I struggled with for a while. I found it difficult to locate a tutorial or how-to-guide that was both comprehensive, started from the very beginning, didn’t get side-tracked with technical-babble, crossed the finish-line, and actually worked in the end. After wading through numerous blog posts and tutorial videos I eventually cobbled together the important parts and found a straight-forward simple-to-implement easy-to-do way that worked for me.
In this article, I’m going to detail and outline how to create a custom WordPress block the simple way that works (in 2022), so you can have an easy solution for creating your own Gutenberg-style WordPress block, too.
No plugins necessary.
The Answer’s All Here
You do not need to click any of the links in this article to learn what I’m sharing.
I have linked outward to my resources as a way of citing and acknowledging their contributions on my way to victory. There’s no need to jump between external definitions, explanations, or additional terms and concepts. No barriers preventing you from quickly garnering the solution to the query you likely landed on this page by searching for like:
- how to make a custom WordPress block
- how to create your own WordPress block
- custom WordPress block guide
- creating a WordPress block tutorial
- etc.
The full answers are all here. The solution is available to you in one easy to digest location.
I can’t say how long this information will be good for — I hope it’s evergreen content that works year after year, but I can tell you for certain this solution works right now; that it’s simple and straight forward; it worked for me; and that you can certainly do it for yourself, too.
Find the Solution Near the Bottom
Feel free to scroll down towards the bottom of this post to the section entitled “Solution: Create Your Own Custom WordPress Block“ if you just want the answer to creating your own custom WP Gutenberg block (the 2022 way that works).
The rest is the knowledge-journey I’ve traversed to get there, so you don’t need to spend as much time as I did trying to uncover a happy-path to creating custom blocks for WordPress.
Start from From Here Not the Beginning of Time
Since you’re interested in creating your own custom block for WordPress I feel like it’s safe to assume you already know what a block is, have heard of Gutenberg, and possess a basic understanding of WordPress development like the concept of WordPress themes, theme-files, and what a plugin is — so, I’m not going to get into any of that basic beginner stuff. Let’s skip the comprehensive “what is WordPress for people who have no idea what they’re doing” and get right into it…
Let’s get started.
Attempt #1 – Easy Video Tutorial
The visual proof of following along with a video and seeing something work before trying it yourself has always been an appealing approach to learning for me. Naturally, YouTube was where my quest for knowledge began.
I searched using keywords like “how to”, “tutorial”, and “guide”. I added qualifiers to my query like “2022” filtered to videos created within the past year, and sorted by date.
And I avoided anything claiming to be a “course” or “the most comprehensive guide ever!” because those are always 30-minutes to 3-hours+ long videos — no one has time for that without guaranteed results.
I was after a no-fluff stripped down guide that covered the basics and bare necessities — everything you want and nothing else to confuse you; the meat and not the potatoes or fancy dessert.
I thought I found what I was looking for in the form of this YouTube video tutorial entitled “How to create a WordPress Gutenberg Custom Block”.
In its cover photo, it claims to be an “easy step-by-step-guide”. And in all honesty, it was a good video — Joshua Herbison put together an easy-to-follow-along-with step-by-step video that you can do yourself — BUT DOING IT THIS WAY DOESN’T WORK.
I was thrilled to have found such a simple approach to creating the scaffolding for a custom WordPress block of my own, but by the time I got to the ‘test it out’ part of the video I was quickly disappointed.
WP Block Creation Attempt #1 Totally Failed
If you want a quick primer on WordPress block creation concepts then watch this video, but don’t waste your time following along because like I’ve already said — it doesn’t work.
This approach may have worked in the past — and it’s actually cool to see someone use Babel.io in real-time — but as of August 2022 what he’s doing in this video is no longer a successful endeavor.
Something Changed or Went Missing
After following along with Joshua and reproducing each step just as he does it in the video I couldn’t produce my own.
I was sure I had done everything correctly — I had created a WordPress plugin and was able to activate it, but when I went to add the block to a piece of content inside my WordPress installation nothing showed up in the WP block selection menu. It was a no-go. The block was not created.
Free Demo Files Aren’t Free
At that point, I recalled the video’s files were available as a download from the description. Awesome, at least whatever was missing from the video was definitely going to be in the files.
But wait! You have to pay $1.99 to get the files — ugh.
And I know, $1.99 is 100% affordable and worth it if they’re complete. But I’m frugal and knowing there are at least 100 other free resources just a few Google searches away I wasn’t about to pay this fella for a 2nd chance at misleading me, so I didn’t. Furthermore, I don’t want to discredit Joshua’s hard work or video tutorials (he’s a good explainer) — the files might be exactly what you want, but I couldn’t tell you because I haven’t seen them.
Okay, so on to the next attempt at learning how to create my own custom blocks for WordPress.
Attempt #2 – “The Easy Way” Using a WP Plugin
The next method I explored for creating your own custom WordPress blocks lead me down a path of using plugins.
I landed at a blog article entitled “How to Create a Custom WordPress Block (Easy Way)” published by a familiar and trusted source — WPBeginner. Awesome — I knew this one would work, but I also knew it probably wasn’t going to be exactly what I was looking for because well, it’s a WPBeginner article.
Simple WP Blocks via Plugin Method
WPBeginner is a reliable source that’s been around for a while and I’ve learned quite a bit from their articles over the years. It’s often an excellent resource for familiarizing yourself with new WordPress concepts and finding at least 1-way that works for doing whatever it is you’re doing.
Typically, they’ll share at least on way to do something with a plugin and another way to do the same something without a plugin. However, they often skew towards a novice audience — hence the name “WP Beginner” — and therefore often detail plugin-first approaches.
Since this article is tagged the “Easy Way” I assumed it would fall into that category and be explaining a plugin — which again is totally fine if you just need something that’s going to work and are happy to use a plugin — but that isn’t what I’m trying to learn or accomplish when I say I want to know how to create my own custom WordPress blocks.
I’m going to leave it here on this one. The plugin approach works. You can create simple custom WP blocks using the method shared in the WPBeginner article, but what I wanted was a more technical under-the-hood approach where I can know the complete ins-and-outs of whatever I decide to build — like a machinist who knows how to build an engine in comparison to a mechanic who simply knows how to place it in the car.
Alright, okay, alright. Back to Google for a new search.
Attempt #3 — The Definitive Guide to Building Custom Gutenberg Blocks
At this point, I’ve Google’d for “create a wordpress block tutorial 2022”. Can you believe it? My first search result is actually that freakin’ video that doesn’t work from Attempt #1.
Familiar Faces
After scrolling past the video results (because I’ve already been let down by those) I start to see some familiar sources again — Kinsta, WPBeginner, Astra, and a new one [to me] Code in WP.
I skipped WPBeginner’s result because it’s a duplicate from my previous Google search(es). We know where that leads and we’re on the hunt for something more hands-on, so onward we push.
A Definitive Rabbit Hole
Kinsta’s article is titled “Building Custom Gutenberg Blocks: The Definitive Block Development Tutorial”.
Just opening this page is intimidating. Judging by the scrollbar, I can see without reading that it’s a looooooooooooong long guide. Which might be great, but it also might be the kind of rabbit hole you can’t make it to the end of.
Scrolling down the page a bit, I can see it gets real nitty gritty into certain details. From my research and prior learning experiences, I know Kinsta does a great job with self-promotion through their own search engine optimization strategies — it’s one of the reasons they routinely show up on page 1 of Google’s search engine results pages when I’m looking for WordPress how-to-information. It’s also one of the reasons I rarely enjoy needing to use their resources — they’re great, but often too long and too detailed for my taste and average-person attention span.
That and I really look for tutorials and guides that have everything in one place. If you’re explaining something to me then you should be able to explain it to me without requiring that I go off and read a textbook’s amount of other web pages, guides, definitions, concepts, and backstory.
After making it down to the first section of the actual “tutorial” it started talking about installing Docker.
Docker is one of those rabbit holes I mentioned. And because I have experience using Docker as a website developer in the real-world I know it’s 100% not necessary for creating a WordPress custom block. Nope. Nope. No. No way. Not doing that. Not going there. Kinsta’s another dead end as far as I’m concerned…
Search Results Interlude
I should mention that by this time I have an entire other internet browser open full of more tabs and off-site resources I’ve been pointed to along the journey.
As I’ve mentioned, there are 100’s of guides and free resources available for anything web development related — and WordPress related content is no exception. WordPress claims to power over 90% of all the blogs on the internet, so lots of people are using WordPress, developing WordPress tools, and sharing WordPress knowledge.
One of those tabs is an article from deliciousbrains.com entitled “How to Create Custom WordPress Editor Blocks in 2021” by a dev named Peter Tasker (which I have to comment is a pretty great last name for a developer, right? Tasker. Anyway…).
I came across this article previously and it seemed really promising.
Peter has experience as a React developer and a WordPress developer, so he comes with a unique perspective.
In the article, he outlines wanting to know what it would take to create a custom Gutenberg block — which is what I wanted to know too — so we were kindred spirits along the same path.
He makes a point to mention WordPress’s Block Editor Handbook which is the ultimate source of origin for all things WordPress block development, but — as I can confirm — Peter states it’s a bit convoluted and at times difficult to follow.
He writes his article is going to cover some of the tripping points while documenting his experience along the way to creating a Gutenberg block.
That sounded good to me, so pretty cool, right?
Well, yeah… but by now I’m convinced anything from the past (like 2021, the past) is going to be out of date information. In an ironic twist similar to my experience with Kinsta’s article, I got about 1/4 of the way down the page and already opening external resources (more non-pertinent rabbit holes), going off on tangents about ReactJS, and looking at a bunch of code I don’t quite grasp yet.
Peter’s put together a lot of nice words on the page, but this is not the guide I was looking for.
Although, the reason I’m mentioning Peter’s article is because one of the links he shared linked to another resource that ended up being the person who wrote the article that provided the final pieces to the puzzling problem I’ve been working through solving — how to make a custom WordPress block.
Holy smokes, we’re almost there!
Almost There
Ironically — or unironically — Peter Tasker’s 2021 article from Delicious Brain linked to one of the resources mentioned in one of the articles in the Google search result from the screenshot I posted earlier. I didn’t know it at the time because it was out of context for where I was at, but the answer was within reach.
Well, sort of the answer.
At least, it was a solid connection to another developer who created the sort-of-answer and then re-published over his answer that he had created an even better solution — which ended up being the solution I felt good about. Finally. We made it.
Slowly but Surely
Look, maybe I would have arrived here sooner if I wasn’t bouncing around so many articles on the same topic, but that’s how I learn. Comparing a bunch of different sources and figuring out which pieces of information are shared and which are contextual helps me get to the bare-bones necessities — the actual necessary steps — of the task at hand.
Solution: Create Your Own Custom WordPress Block
Without having to read as much as I did or waste any time watching lengthy YouTube videos that may or may not come to fruition I’m goin to point you to one single link: a github repository with an extremely concise set of directions for a tool you can use to scaffold your own custom WordPress block with in a matter of minutes — no, seconds. For real, it’s actually really simple to setup your own custom block for WordPress.
Everything else in this post is back-story and not ‘how to’. This is the ‘how to’. And you are most certainly welcome for mapping out such a truly simple easy to implement solution.
Without further ado, here’s what you’ve been searching for:
Follow the link above and start building custom blocks for WordPress right now.
See? It worked for me, the first time, with zero issues.
Requirements
There’s really only 2 things I think you need to use the Create-Guten-Block tool.
- A WordPress installation.
- NPM (i.e. Node) installed on your computer.
WordPress Installation
You need a WordPress installation because that’s where you use a WordPress block — it’s literally in the name “WordPress block”. That one ought to be a no-brainer for you by this point.
Node / NPM
And you need NPM installed on your computer because that’s how the Create-Guten-Block tool scaffolds all the technical-mumbo-jumbo block-setup-code that most people faulter over — all the code you need to write before even getting to the point of doing the “custom” part of a custom block. As in, you need to have this stuff in place before you can create your own WP block that does the cool idea you’re trying to accomplish.
Although, if you’re this far into your search for how to create a custom Gutenberg block for WordPress I’m going to go out on a limb and assume you’ve already crossed paths with Node, know what npm is, and that it’s already on your machine, so… off you go.
0 Comments