Expo Milano, de Marcello Gennari

¿Alguna vez has cotilleado las diferentes páginas que tenemos en nuestra web? Si echas un vistazo a, por ejemplo, los diferentes tipos de test que puedes realizar con Nelio A/B Testing, verás que todas las páginas donde explicamos cada test siguen el mismo patrón: hay una descripción inicial, una explicación de cómo crear un nuevo test, una sección con los resultados que ofrecemos del mismo…

Si ahora quisiéramos crear un nuevo tipo de test y explicarlo en nuestra web, ¿deberíamos recrear de cero esta página? ¿O podemos crear una plantilla o esqueleto y aprovecharla? En esta entrada te enseñamos cómo crear una plantilla de página fácilmente con Gutenberg, sin plugins y sin complicaciones.

Qué son los bloques reutilizables

Hace unos meses, Ruth compartía con nosotros una entrada en la que explicaba cómo crear un bloque reutilizable en Gutenberg. Un bloque reutilizable es, como su nombre indica, un bloque que se puede reaprovechar tal cual en múltiples entradas.

Normalmente, cuando añades un bloque normal a una entrada cualquiera, éste aparece vacío. Por ejemplo, si ahora insertara un bloque de Fondo, lo que vería en la interfaz de Gutenberg sería lo siguiente:

Insertando un bloque Fondo en Gutenberg
Insertando un bloque Fondo en Gutenberg.

Una vez asignara la imagen de fondo, podría empezar a tunear el bloque para añadirle, no sé, un texto y un botón y construir, así, la típica sección con una llamada a la acción donde promocionar alguno de nuestros productos:

Tuneando un bloque Fondo en Gutenberg
Tuneando un bloque Fondo en Gutenberg.

Si quiero hacer un banner único para una entrada específica, realizar los pasos anteriores no supone ningún problema. Pero si quisiera usar el mismo banner en múltiples entradas, la mejor opción es crear el «bloque banner» una única vez e insertarlo en tantas entradas como quiera.

Creación de un bloque reutilizable
Creación de un bloque reutilizable.

Esto es algo que, como te digo, ya vimos en una entrada anterior.

Cómo crear una plantilla de página con bloques reutilizables de Gutenberg

Supongamos ahora un escenario diferente: tenemos una web con múltiples páginas, todas ellas diferentes pero con una maquetación común. Si ahora quiero crear una nueva página con ese estilo deberé reproducir la estructura desde cero, ¿no? Tendré que ver qué bloques estaba usando en las demás páginas, crearlos y ordenarlos en mi nueva entrada y, finalmente, editarlos para que contengan el nuevo contenido.

¿Acaso no se puede hacer algo mejor?

Pues cotilleando por Internet encontré esta entrada de Jeff Chandler, en WP Tavern, donde comentaba la posibilidad de usar los bloques reutilizables de Gutenberg como la base para crear plantillas reutilizables. ¡Y me pareció una idea excelente!

El truco funciona tal que así: lo primero que hacemos es crear el esqueleto de página que queremos crear. Por ejemplo, si me interesa una página con un párrafo de introducción, una imagen de fondo y un par de secciones, pues añado todos esos bloques maquetados (incluso, ¿por qué no?, con «valores por defecto»):

Plantilla de página
Una plantilla de página es, básicamente, una página «en blanco» con los bloques que nos interesa que estén.

La gracia del truco está en que los «bloques reutilizables» de WordPress no tienen por qué ser un único bloque… Si queremos, ¡podemos crear un «bloque» reutilizable que en realidad sea un conjunto de bloques!

Para ello, bastará con seleccionar todos los bloques de nuestra plantilla con el ratón:

Selección de múltiples bloques
Selección de múltiples bloques.

y con darle a los puntos suspensivos para poder seleccionar la opción «Añadir a los bloques reutilizables»:

Creación de una plantilla reutilizable
Creación de una plantilla reutilizable. En realidad, no es más que un «bloque reutilizable» formado de «múltiples bloques».

A continuación le damos un nombre (yo recomiendo ponerle algo en plan «Plantilla de página – Lo que sea», para que así puedas identificar rápidamente tus plantillas de página de entre todos los bloques reutilizables que tengas):

Listado de bloques reutilizables
Listado de bloques reutilizables. Fíjate que hay uno con el prefijo «Plantilla de página», cosa que nos permite identificarla rápidamente como tal.

¡Y listo! Acabamos de crear un «bloque» reutilizable con el esqueleto de la página que queremos usar.

Nelio A/B Testing

Pruebas A/B nativas en WordPress

Usa tu editor de páginas favorito en WordPress para crear variaciones y lanza pruebas A/B con solo un par de clics. No se necesita saber nada de programación para que funcione.

Cómo usar una plantilla de página creada con bloques reutilizables

Para poder usar la nueva plantilla en una nueva página, simplemente debemos buscar en la sección Reutilizables el bloque reutilizable que hemos creado e insertarlo en nuestra página:

Inserción de un bloque reutilizable
Inserción de un bloque reutilizable.

Si lo haces, verás que, efectivamente, tu página estará usando el esqueleto que acabas de crear… pero con un problema importante: como la plantilla que hemos creado es, en realidad, un bloque reutilizable, no podrás editarlo:

Bloque reutilizable no editable
Por defecto, los bloques reutilizables no son editables, porque se supone que tienen que ser iguales en todas las páginas donde aparezcan.

Para solucionar este pequeño inconveniente, basta con pulsar en los puntos suspensivos de la plantilla y darle a la opción Convertir a bloque normal:

Conversión de un bloque reutilizable en un bloque normal
Si convertimos un bloque reutilizable en un bloque normal, el bloque (o bloques) resultante deja de estar vinculado al bloque reutilizable original y, por fin, lo podemos editar.

¡Y ya lo tienes! Los bloques que se han añadido a partir de la plantilla son ahora independientes de la misma y puedes editarlos como quieras en la página.

Resumiendo

Con Gutenberg es posible crear plantillas de página (o de entrada) fácilmente. Lo único que tienes que hacer es crear el esqueleto que quieras en una página en blanco, seleccionar todos los bloques que formen parte de dicho esqueleto y guardar la selección como un «bloque reutilizable». Luego, bastará con insertar este bloque reutilizable en una nueva página y convertirlo a «bloques normales» para poder editar su contenido.

¡Rápido, fácil y para todos los públicos!

Imagen destacada de Marcello Gennari en Unsplash.

2 respuestas a «Cómo usar los bloques reutilizables para crear plantillas de página»

  1. Avatar de joaquin
    joaquin

    Gracias por el post.
    Dices más arriba «…Para ello, bastará con seleccionar todos los bloques de nuestra plantilla con el ratón:…»
    ¿Puedes explicarme exactamente cómo puedo seleccionar más de un bloque al mismo tiempo?
    Saludos

    1. Avatar de David Aguilera

      Haces clic en el primero y luego SHIFT + clic en el último. ¡Saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de Nelio Software

Tus datos personales se almacenarán en SiteGround y serán usados por Nelio Software con el único objetivo de publicar tu comentario aquí. Con el envío de este comentario, nos das el consentimiento expreso para ello. Escríbenos para acceder, rectificar, limitar o eliminar tus datos personales.