Cómo crear tus propias plantillas de bloques de Gutenberg.

Actualmente con la aparición de Gutenberg en nuestras vidas, están surgiendo multitud de cambios en la manera en la que construimos un tema para WordPress.

Una problemática frecuente cuando estamos trabajando con temas desarrollados a medida y estamos usando Gutenberg, es el hecho de que las tradicionales plantillas de página, que usabas rellenando ciertos campos personalizados para que se mostrara siempre el contenido con el mismo aspecto, de por ejemplo los servicios de tu empresa. Se están volviendo poco a poco cada vez más innecesarias.

Ya hable en otra entrada sobre los bloques reutilizables y el potencial que tenia esta funcionalidad. Pero las plantillas de bloques se encuentran en otro nivel.

Que es una plantilla de bloques.

Las plantillas de bloques o los blocks templates, son un conjunto de bloques de Gutenberg «maquetados» y listos para poder ser usados por el usuario que vaya a generar el contenido.

Estas plantillas ya cargarán directamente los bloques que necesitamos rellenar para tener nuestra entrada lista para salir.

Podemos usarlas para iniciar siempre el contenido con los mismos bloques o por otra parte «bloquear» el tipo de entrada para que no se puedan crear más bloques de Gutenberg.

Plantilla de página VS plantilla de bloques.

Personalmente creo que la tendencia dentro del desarrollo de temas y plugins va a inclinarse poco a poco por usar cada vez más las plantillas de bloques.

Hay que aprovechar que la curva de aprendizaje de Gutenberg tiene bastante poca pendiente. Y por si fuera poco usando las plantillas de bloques no tenemos que enseñar al usuario ni a colocar los bloques de Gutenberg, solo a rellenarlos con el texto o imagen que necesiten.

Como crear una plantilla de bloques para Gutenberg.

Voy a indicar a continuación como crear una plantilla de bloque para un custom post type (CPT) que tenemos creado en nuestro sitio ficticio. Esta entrada personalizada se llamará «Servicios» y siempre contará con un primer bloque de párrafo, posteriormente una imagen, tras esta imagen 3 columnas con icono, pequeño encabezado y parrafo; y por ultimo un formulario de contacto de Contact form 7.

En primer lugar vamos a crear una función que nos añadirá la plantilla al CPT que necesitemos, en nuestro caso Servicios (Que definimos en nuestra función como servicios)

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' );

En el código anterior nos encontramos los siguientes elementos:

$template= array();

Que es la variable donde vamos a cargar el template de bloques que vamos a asignar a servicios.

$CPT_obj = get_post_type_object( ‘servicios’ );

Aquí llamamos al CPT como objeto.

$CPT_obj->template = $template;

En esta linea le asignamos al CPT la template que hemos preparado anteriormente, actualmente vacia.

$CPT_obj->template_lock = ‘all’;

En esta ultima parte bloqueamos la plantilla de páginas bloques, para que no se puedan añadir ningún bloque más.

Ahora vamos a pasar a generar nuestra template, pero para ello antes, por comodidad vamos a crear una entrada en cualquier instalación de WordPress con la estructura de bloques que queremos tener en Servicios.

Una vez tengamos nuestra entrada de ejemplo montada, vamos a pulsar en ver el editor de código, en los tres puntos que tenemos arriba a la derecha en nuestro editor de WordPress favorito 😀

Ahora nuestros preciosos bloques de Gutenberg tienen que tener una pinta tal que así.

Perfecto, llegados a este punto solo nos hace falta fijarnos en los códigos que están escritos entre los comentarios de html, esa es la pinta de los bloques de Gutenberg en nuestro editor.

El código que añadiremos a continuación será idéntico al anterior pero con contenido dentro de la variable $template.

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' );

El nuevo contenido que hemos cargado dentro del array seria la forma de decirle al CPT que ahora mismo debe colocar un bloque de párrafo con el texto «Lorem ipsum» como placeholder.

Explicando que nos encontramos exactamente dentro del array podríamos decir que hay 2 partes claramente diferenciadas.

‘core/paragraph’

Que es el la ubicación del bloque que necesitamos usar. En el editor de código entre los comentarios podremos encontrar los nombres y ubicaciones de cada uno de los bloques que necesitemos.

array( ‘placeholder’ => ‘Lorem ipsum’, )

Este segundo array interno nos sirve para definirle los atributos que ya queremos completos por defecto, en mi caso voy a colocar un texto como placeholder que diga «Lorem ipsum».

Voy a colocar a continuación como sería el código resultante para la plantilla anterior.

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' );

Con todo el código al completo podréis comprobar que dependiendo del bloque que necesitemos fijar en la plantilla, tendremos que conocer cuales son sus atributos para poder darle los valores concretos que necesitemos.

Estos atributos podéis consultarlos en la documentación oficial, pero de todas maneras, pronto encontrareis por aquí una entrada resumiendo todos los atributos que nos podemos encontrar de base en cada uno de los bloques.

Conclusiones

En principio eso es todo lo que necesitamos para crear nuestra propia plantilla de bloques. A partir de aquí, lo que nos quedaría seria practicar y poner en practica estos conocimientos.

Casi se me olvida, esta función recomiendo añadirla en el archivo donde realicéis el registro del CPT al que le estáis creando la plantilla.

Un saludo 😀