Cómo crear un bloque reutilizable en Gutenberg

Publicada en WordPress.

El editor de bloques Gutenberg, que nos llegó con la versión 5.0 de WordPress sustituyendo al editor clásico, nos cambió nuestro paradigma de creación de entradas y páginas. Cada una de ellas ha pasado a estar formada por conjuntos de contenido o bloques de cierto tipo: texto, título, cita, lista, fichero, tabla, imagen, fondo, galería de imágenes, medios con texto, botón, incrustados, etc., de los que puedes personalizar algunas propiedades creando rápidamente diseños muy impactantes.

Así, por ejemplo, para insertar la sección que te muestro a continuación es tan fácil como insertar un nuevo bloque de tipo fondo, en el que he superpuesto un filtro 100% opaco de color naranja y le he añadido los mensajes y botón que me han gustado.

Reutiliza tus mejores entradas sacándoles el máximo provecho

Prueba Nelio Content

¡No pierdas más tiempo y re-promociona tus entradas en redes sociales de forma automática!

Todo ello desde el editor de bloques Gutenberg, y sin tener que salir de la entrada ni necesidad de copiar y pegar o editar el código HTML. Esto era impensable con el editor clásico de WordPress. Y si quieres conocer más detalles sobre las distintas posibilidades que le puedes sacar al bloque de tipo fondo, seguramente te interesará leer la entrada: diferencias entre la imagen destacada y el bloque fondo.

Con el editor de bloques tienes muchas nuevas posibilidades de diseño a base de ir combinando todo tipo de elementos. Y te aseguro que te compensa dedicar un poco de tu tiempo a conocer las distintas posibilidades que te ofrecen cada uno de los bloques que tienes disponibles para ser mucho más creativo y productivo en el diseño de páginas y entradas.

¿Ya has realizado el curso de creación de contenidos con Gutenberg?

El editor de bloques explicado paso a paso

Una de las grandes ventajas del editor de bloques es que no sólo puedes ir creando la variedad de contenidos que te ofrecen todos los bloques disponibles, si no que además puedes reutilizar bloques. Es decir cualquier bloque que creas y que hayas personalizado para que se ajuste a un estilo determinado, puedes guardarlo como un bloque reutilizable para usarlo posteriormente en cualquier otra entrada o página.

Ya sabes que la reutilización de código, contenido y diseño es un principio básico de eficiencia para todo desarrollador de webs para aprovechar trabajo anterior, economizar tiempo, y reducir redundancia. Además te ayuda a mantener una imagen o estilo uniforme a lo largo de toda tu web. Sólo tienes que pasearte por nuestra web para ver un conjunto de secciones muy parecidas entre ellas, con el mismo estilo pero distintos contenidos, de distintas llamadas a la acción o testimonios de nuestros clientes.

Veamos a continuación cómo funciona la creación de un bloque reutilizable.

Crear un bloque reutilizable

Cualquier bloque que hayas creado en una entrada o página se puede convertir en un bloque reutilizable. Para ello sólo tienes que seleccionar el bloque en cuestión, hace clic al icono de los tres puntitos, y seleccionar Añadir a los bloques reutilizables.

Añadir un bloque reutilizable a la biblioteca de bloques de WordPress.
Añadir un bloque reutilizable a la biblioteca de bloques de WordPress.

Se te pide que introduzcas un nombre al bloque que quieres añadir y lo guardes.

Nombramos el bloque que queremos reutilizar y lo guardamos.

Reutiliza un bloque

Ahora, cada vez que quieras añadir un nuevo bloque a una entrada o página, ya lo tienes disponible en tu biblioteca de bloques en la pestaña Reutilizables.

Al posicionarte encima de un bloque reutilizable, a la derecha se visualiza una pre-visualización del mismo.

Tras seleccionarlo, se inserta el bloque en cuestión. El efecto es el mismo que si hubiera hecho duplicar dicho bloque en la misma entrada que lo había creado. Aquí vuelves a tener el bloque reutilizado:

¿Ya has realizado el curso de creación de contenidos con Gutenberg?

El editor de bloques explicado paso a paso

Modifica un bloque reutilizable

Pero ¡ojo!, fíjate que un bloque reutilizable no lo puedes modificar como cualquier otro bloque normal, sólo puedes modificarlo haciendo clic en el botón de Editar que encuentras encima del mismo.

Haz clic en el botón Editar para modificar el bloque reutilizable.

Al editar un bloque reutilizable, no estás modificando solo el bloque que acabas de insertar en tu entrada si no el bloque reutilizable que habías creado. Es decir, cualquier modificación que hagas en un bloque reutilizable, también se modificará en todos las entradas y páginas donde tengas añadido el bloque reutilizable.

Seguramente te preguntarás, ¿cómo lo hago para sólo hacer un cambio en el bloque que acabo de añadir, pero no en el resto de bloques creados?

Convertir a bloque normal

Sí sólo quieres cambiar el bloque reutilizado que acabas de añadir sin que se modifiquen todas las instancias del bloque que haya en el resto de tu web, siempre tienes la opción de volver a convertir el bloque que acabas de añadir en un bloque normal.

Convertir bloque reutilizable a bloque normal
Convierte el bloque reutilizado a bloque normal y realiza las modificación que quieras.

A partir de este momento, el bloque reutilizado vuelve a convertirse en un bloque del tipo original que hubieras creado. En este caso, el bloque se vuelve a convertir en un bloque de tipo fondo y ya puedo realizar los cambios que quiera sin que el bloque reutilizable sufra ninguna modificación.

¿Todavía no te has apuntado? ¿A qué esperas?

El editor de bloques explicado paso a paso

Gestiona los bloques reutilizables

Para cada bloque reutilizable que creas, se crea en tu base de datos un nuevo tipo de contenido personalizado de tipo bloque, con el nombre que hayas indicado. Pero en todo momento puedes ir directamente a modificar o borrar cualquiera de los bloques reutilizables creados como si de cualquier otro post type se tratara.

Para ello debes hacer clic a la opción Gestionar los bloques reutilizables que tienes disponible al final de la biblioteca de bloques en la pestaña de bloques reutilizable.

Gestionar todos los bloque reutlilizables
Haz clic en Gestionar todos los bloques reutilizables para ir al listado de bloques que has creado.

O también tienes la opción de acceder a la lista de bloques reutilizables desde la opción, Gestionar todos los bloques reutilizables, que en encuentras en el menú superior a la derecha en el icono de tres puntos, Mostrar más herramientas.

Gestión de bloques reutilizables.
Opción en la barra lateral para gestionar los bloques reutilizables.

En ambos casos, podrás visualizar la lista de bloques reutilizables que hayas creado y para cada uno de ellos, puedes modificarlo o borrarlo igual que harías con cualquier entrada o página.

Listado de bloque reutilizables
Listado de bloque reutilizables.

Eso sí, recuerda que cualquier modificación que hagas a un bloque reutilizable, automáticamente se modificará en todas las entradas y páginas donde lo hayas añadido.

Edición de bloque reutilizable.
Edición del bloque reutilizable que hemos creado.

E igualmente, si lo eliminas, el bloque reutilizable también se borrará automáticamente en todas aquellas páginas donde lo hubieras añadido (y no lo hubieras reconvertido a bloque normal otra vez).

Y hasta aquí lo imprescindible para que puedas ser mucho más productivo y eficiente reutilizando todas las secciones de tu web asegurándote que mantienes la misma imagen y estilo a lo largo de toda ella.

En una próxima entrada también te explicaré cómo puedes exportar e importar bloques con Gutenberg. Pero ya sabes que mi recomendación es que aprendas muchos más trucos sobre Gutenberg apuntándote al curso de Creación de contenidos con Gutenberg 😉

Photo by Nicola Fioravanti on Unsplash.

FlojaNo está malBienMuy bien¡Impecable! (Ninguna valoración todavía)
Cargando…

Deja un comentario

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

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

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.