Create your own blocks easily with genesis custom blocks

Create your own block for the Gutenberg editor in minutes with hardly any code

I'm going to teach you how to create your own reusable blocks for the WordPress block editor, with just four clicks and a little bit of html and css. Without JS, PHP or REACT. In a few minutes, Pim pam. And with DEMO!

If you have not yet made the leap from using visual editors like Divi, Elementor and similar to completely switching to the native WordPress block editor (Gutenberg), you are taking a while. It's fast, agile and super flexible. Your beard will not grow while the post or page is loading or while the post or page is saved.

It may take a little getting used to at first, but once you get the hang of it, it's a blast. And now, with the "full site editing" themes (this blog is made with the twenty-twenty-three theme, which already allows you to edit absolutely the entire template, header, footer, post lists, category files, everything) this it's a game-changer total. I encourage you to try it.

Create your own blocks for the editor

Design and implement our own custom blocks, from the outset can go back a little: You need a local development environment to work with the files, and you have to write code php, js and react, which you also have to compile using front-end tools.

If your block is not going to be dynamic or complex (it is not going to have automations with post data, etc.), and it is simply going to use a few data entered by hand (photo, text, link, a couple of divs), the truth is that there is other easier methods.

Many developers use the plugin Advanced Custom Fields (ACF) to create blocks. Well, the truth is, we even use ACF to make gazpacho. ACF has a method of registering blocks using custom fields that is really versatile and powerful, and simpler than the original method with React.

But it is still a resource aimed at developers and advanced users. In addition to that in certain cases, where we only need to make a couple of small blocks, it is a very large piece of plugin.

So, while researching easy ways to make blocks, I came across Genesis Custom Blocks, a free plugin (it is FREEMIUM; there is a paid PRO version, which has more things) that allows you to create your own blocks with its fields and templates in a few minutes.

At first, I was a little put off by “Genesis” because this is the name of a framework/theme to develop WP templates from scratch with full control, which is what developers do, but not implementers or beginner or intermediate users. . And it seemed that the plugin was a Genesis Framework addon and that it was required to use Genesis. Fortunately not like that!

Create your first block with Genesis Custom Blocks

Once the plugin is installed and activated, you will have a new menu in the administration panel called Custom Blocks. When you enter, in your dashboard you will see that you have a first block created in a draft state, so that you can edit it and edit it. You'll soon see that it's a pain to make yours.

We have four tabs above: Builder (builder), template editor (template), Editor preview (preview of how it will appear in our edit) and Front-end Preview (a preview of the editor, then "in post" may vary a little depending on the styles of our theme)

microblocks nanoblocks construction games

#loNeed #buildingBlocks #buildCheaper

Using the builder

The builder has two sub-tabs in the center, which at first confused me, but as soon as I understood it, I really liked it. The two tabs are «Editor fields» and «Inspector fields». And we can create fields in whatever we want. The only difference is, when we use the block in editing mode, some fields will appear in the "in situ" block in the editor, and other fields, the "Inspector fields" will appear in the panel on the right.

For example, in your block you can put in the same block the fields for inserting content (text, photo, link), and in the right panel, the fields for choosing colors and styles, other options...

This seems SUPER to me, because I love making clean and tidy interfaces, you'll see with my example how cool it is.

The interface is like the normal block editor, as you press [ + ] to add fields for your block, the options for each field will appear in the right panel.

The first thing is to name the field, and choose what type it is. The free version of the plugin comes with a few essential and standard field types: Text line, text box, number, image, select/checkboxes, a great field to choose color… Here I put an image of the fields available in the free and pro versions:

Movie Cards!

I have created a new block called "movie card". I added a photo, four little text boxes to make a cool mini-sheet, and then a textarea to put cast actors like this in a normal way, separated by commas.

You can, of course, reorder your fields, establish different widths so that everything is more organized, etc.

Here you can see the fields that I have put so that they appear in the editing of the block within it:

And here I have put the styles so that they appear in the right panel, in the inspector, when we insert the block:

Once you have your fields, you make your template. You can use its template editor, where you simply add your html, and where you want the value of a field to be painted, you use the format {{field-name}}. All my fields return text, except for the image field, which returns the url of the image. In the image field options you can choose what size you want it to appear in. The color fields return a standard HEX color value (#a1b2c3).

For advanced users, you can also create the block template files in your theme or child theme, there is a cool and well-documented API to extract the fields in PHP quite easily, in addition to putting conditionals and "things".

Here I am going to show the "pim pam" way and make the template with the Template Editor. This is my template:

Here you will see better the html code used:

<article class="chrome" style="background-color:{{background-color}};color:{{text-color}}">
<img loading="lazy" src="{{frame}}" width="100%" height="car" alt="Frame from the movie {{title-spain}}">
<main class="chrome-interior"> <p class="smallcaps">{{genres}} - {{year}}

({{original title}})

Directs: {{director}}

Main cast: {{distribution}}

Notice that, although we can edit the styles in the "CSS" tab, in my html there are inline styles using style="". This is because here I can use and recover the value that we have entered in the color fields, while in the separate CSS it is not possible. I've tried but it doesn't work, hehehe.

And then, well, a little bit of CSS also for the view of the block on the page or post:

You can take my "chusquero" CSS from here with !important and everything, but it works perfectly for the demo:

.chrome {
    box-shadow:5px 5px 15px -5px rgba(0,0,0,0.5);
.chrome h3 {
.chrome * {
.chrome figures {
.chrome-interior {
    padding:0 20px 10px;
.smallcaps {

And now we can go to the "editor preview" to see how it would look:

Brutal right? And also here we have more options for our block, assigning it an icon, block category, keywords to find it easily, assigning post types where we want it to be used... SUPER PRO! Let's put on a movie, come on!

And finally, what the block looks like in the front end: Here we must keep in mind that the preview will not be 100% pinned to the result in our theme, but it serves to have a decent preview. I add a screenshot of the preview within the plugin (admin), and next to it the block as is inserted in this same post:

Still from the movie The Violent Kellys

Action, War, Comedy – 1970

Kelly's Violents
(Kelly's Heroes)

Directs: Brian G. Hutton

Main cast: Clint Eastwood, Donald Sutherland, Telly Savalas, Don Rickles, Carroll O'Connor, Harry Dean Stanton, Gavin MacLeod, Stuart Margolin and Karl-Otto Alberty

It should be said that it seems more like a bookmark than a trading card, but hey, you already know that you are going to do it your way and based on your needs.

The important thing is that, with very little work, we already have a block of ours with its very cool options.

I'm going to make another one to see how it turns out; The good thing is that I can use the block in columns, etc. to integrate it into our layout.

I'll put Carpenter's Dark Star here next door, which is a gem;

Still from the movie Dark Star

Comedy, Science Fiction – 1974

Dark star
(Dark Star)

Directs: John Carpenter

Main cast: Dan O'Bannon, Nick Castle, John Carpenter, Brian Narelle

And like this so you can see how I edited it in situ (Inception!).:

I hope you found this plugin and the tutorial easy and useful. I was going to say that you subscribe by hitting the bell, but this is not YouTube, so I would appreciate both the comments and the dissemination of this post. Enjoy!

Last bits

Decorative image title comments

Leave a Reply

Your email address will not be published. Required fields are marked *