How to Create Gutenberg Blocks with AI

Getting started

Basics of block development

Advanced block development

Before we dive into the actual process of creating a Gutenberg block with AI, I would like to give you some context on how I create projects and how I use AI as a helper hand.

First of all, let me tell you that I really enjoy writing code, so I can really relate to the “Code is poetry” WordPress slogan. Plus, I usually make the projects for myself (WordPress plugins). Plus, I am a perfectionist, so hiring a junior developer or something was always out of the question for me; I even do plugin support myself. In other words, using AI to write big chunks of code doesn’t make any sense to me. Why outsource what you love doing anyway?

However, AI has been a great help to me with the following tasks:

When I needed to create an SQL request from scratch.
When I needed a specific Regex expression for my task.
I also confess that I don’t consider myself super-good in JavaScript, at least as good as in PHP (as almost every WordPress developer, I guess), so sometimes I ask AI about it.

But today we will try to use it to create a fully functional Gutenberg block and see how it goes.

Our step-by-step is going to be the following:

Configure Cursor AI and set up the proper language model (I decided to use Cursor AI because you can start with the free version, plus all of my friends are using it specifically).
Configure the project for our Gutenberg block properly.
Set up Cursor rules,
Write an actual prompt and review the final code.

And I will uncover all these steps in the video above.

What Actually Can Go Wrong When You Create Gutenberg Blocks with AI?

Probably, those of you who are working with AI for a while will say something like “You just don’t know how to write prompts”. I can not say that you are completely wrong, but my point here is that many people get the wrong idea of what AI can and can not do.

Basically, it has no idea how to write code, but it is very good at analyzing all the documentation you provide to it and creating a working version of the code from it.

Below are just some basic mistakes it can make, and in the video above, I am going to show you how to deal with them.

Issue 1. AI uses the same code inside /src and /build folders

Of course, I mean the JSX code.

Basically, it created two copies of the index.js file of our Gutenberg block and put it in /src and /build folders, why not?

As a result, no block in the block editor, and this error in the browser console:

Can not use import statement console error.

Issue 2. AI loves dynamic Gutenberg blocks, no matter what

It is actually a very interesting moment. If you don’t ask AI specifically to put the save() function inside the JS code, it will create dynamic blocks for you, with the render.php file, even when it is not needed.

It also doesn’t have an idea what “a dynamic block” is; even if you ask it not to create dynamic blocks, you will still find the render.php file in your brand new Gutenberg block files.

Issue 3. AI includes all scripts from /src in block.json

There was a moment when I asked AI to put the edit() function inside the edit.js file and save() function inside the save.js, and guess what I found in my block.json file?

"editorScript": [
	"file:./edit.js",
	"file:./save.js",
	"file:./my-subscription-form.js"
],

As you can see from the code above, the mistakes are not only that we included edit.js and save.js files separately, but also the main JS entry point file does have an incorrect name (it should be index.js).

It is quite easy to understand from the example above that AI doesn’t have a clue what it is doing, unless you provide all the necessary context to it, and that’s what we are going to do in the video above.

Gutenberg Block Development