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)

Nanoblock Constructions

pixel-perfect games

#loNeed #buildingBlocks #buildCheaper

Only 4,90€ !

see more

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}}

        
{{title-spain}} 
 ({{original title}})
        
Directs: {{director}}
        
Main cast: {{distribution}}