How to create your own Gutenberg block templates.

Currently with the appearance of Gutenberg in our lives, a multitude of changes are emerging in the way in which we build a WordPress theme.

A frequent problem when we are working with custom-developed themes and we are using Gutenberg, is the fact that the traditional page templates, which you used by filling in certain custom fields so that the content was always displayed with the same appearance, for example the services of your company They are slowly becoming more and more unnecessary.

I already spoke in another post about the reusable blocks and the potential that this functionality had. But block templates are on another level.

What is a block template?

Block templates or block templates are a set of "layout" Gutenberg blocks and ready to be used by the user who is going to generate the content.

These templates will already directly load the blocks that we need to fill in to have our entry ready to go.

We can use them to always start the content with the same blocks or otherwise “block” the post type so that no more Gutenberg blocks can be created.

Page template VS block template.

Personally, I think that the trend within the development of themes and plugins is going to lean little by little towards using more and more block templates.

You have to take advantage of the fact that Gutenberg's learning curve has a fairly low slope. And as if that were not enough, using the block templates we do not have to teach the user how to place the Gutenberg blocks, only to fill them with the text or image they need.

How to create a block template for Gutenberg.

I will indicate below how to create a block template for a custom post type (CPT) that we have created on our fictitious site. This personalized entry will be called "Services" and will always have a first paragraph block, then an image, after this image 3 columns with an icon, a small header and a paragraph; and finally a contact form Contact form 7.

First of all we are going to create a function that will add the template to the CPT that we need, in our case Services (which we define in our function as services)

function asignar_plantilla_bloques_servicios() {
  $template= array();

    $CPT_obj = get_post_type_object( 'servicios' );
    $CPT_obj->template = $template;
    $CPT_obj->template_lock = 'all';
}
add_action( 'init', 'asignar_plantilla_bloques_servicios' );

In the previous code we find the following elements:

$template= array();

Which is the variable where we are going to load the block template that we are going to assign to services.

$CPT_obj = get_post_type_object( 'services' );

Here we call the CPT as object.

$CPT_obj->template = $template;

In this line we assign to the CPT the template that we have previously prepared, currently empty.

$CPT_obj->template_lock = 'all';

In this last part we block the blocks page template, so that no more blocks can be added.

Now we are going to generate our template, but to do this first, for convenience we are going to create an entry in any WordPress installation with the block structure that we want to have in Services.

Once we have our example entry mounted, we are going to click on see the code editor, in the three points that we have at the top right in our favorite WordPress editor 😀

Now our beautiful Gutenberg blocks have to look like this.

Perfect, at this point we just need to look at the codes that are written between the html comments, that's what the Gutenberg blocks look like in our editor.

The code that we will add next will be identical to the previous one but with content inside the $template variable.

function asignar_plantilla_bloques_servicios() {
  $template= array(                     
     array( 'core/paragraph', array(
              'placeholder' => 'Lorem ipsum',
     )),
  );

    $CPT_obj = get_post_type_object( 'servicios' );
    $CPT_obj->template = $template;
    $CPT_obj->template_lock = 'all';
}
add_action( 'init', 'asignar_plantilla_bloques_servicios' );

The new content that we have loaded into the array would be the way to tell the CPT that right now it must place a paragraph block with the text “Lorem ipsum” as placeholder.

Explaining that we are exactly inside the array, we could say that there are 2 clearly differentiated parts.

'core/paragraph'

Which is the block location we need to use. In the code editor, among the comments, we can find the names and locations of each of the blocks that we need.

array( 'placeholder' => 'Lorem ipsum', )

This second internal array helps us to define the attributes that we already want complete by default, in my case I am going to place a text as a placeholder that says "Lorem ipsum".

I will post below what the resulting code for the previous template would look like.

function asignar_plantilla_bloques_servicios() {
  $template= array(                     
    array( 'core/paragraph', array(
      'placeholder' => 'Lorem ipsum',
    )),
    array( 'core/image', array() ),
    array( 'core/columns', array(
      'columns' => '3',
      ), array(
          array( 'core/column', array(), array(
            array( 'core/image', array() ),
            array( 'core/heading', array(
                'placeholder' => 'Encabezado 1',
            )),
            array( 'core/paragraph', array(
              'placeholder'     => 'Lorem ipsum nio',
            )),
          )),
          array( 'core/column', array(), array(
            array( 'core/image', array() ),
            array( 'core/heading', array(
                'placeholder' => 'Encabezado 1',
            )),
            array( 'core/paragraph', array(
              'placeholder'     => 'Lorem ipsum nio',
            )),
          )),
          array( 'core/column', array(), array(
            array( 'core/image', array() ),
            array( 'core/heading', array(
                'placeholder' => 'Encabezado 1',
            )),
            array( 'core/paragraph', array(
              'placeholder'     => 'Lorem ipsum nio',
            )),
          ))
        )
      ),
      array( 'core/shortcode', array(
          'text' => '[SHORTCODE DE CONTACT FORM 7]',
      )),
  );

    $CPT_obj = get_post_type_object( 'servicios' );
    $CPT_obj->template = $template;
    $CPT_obj->template_lock = 'all';
}
add_action( 'init', 'asignar_plantilla_bloques_servicios' );

With all the code complete, you will be able to verify that depending on the block that we need to set in the template, we will have to know what its attributes are in order to give it the specific values ​​that we need.

You can consult these attributes in the official documentation, but in any case, you will soon find an entry here summarizing all the basic attributes that we can find in each of the blocks.

Conclusions

In principle that is all we need to create our own block template. From here, what we would have left would be to practice and put this knowledge into practice.

I almost forgot, I recommend adding this function to the file where you register the CPT for which you are creating the template.

Greetings 😀