Cómo importar y exportar bloques de Gutenberg

Gutenberg, el nuevo editor de WordPress que hizo su debut en la versión 5.0 del CMS, es la nueva comidilla de la comunidad. Unos lo odian, otros no tanto e incluso hay gente quien dice que le está cogiendo el tranquillo. Pero bueno, este artículo no es para generar un debate, si no para explicarte una característica de este nuevo editor que seguramente desconozcas. En este tutorial os enseñaré a importar y exportar bloques del editor Gunterberg. ¿Te gusta la idea? ¡Pues vamos allá!

Como bien sabes, Gutenberg es un editor por bloques. Al igual que otros page-builders, este editor cuenta con la opción de importar y exportar bloques a otros sitios web desarrollados con WordPress. Esto te permitirá ser más productivo si te dedicas a crear sitios webs para clientes con el CMS.

En este nuevo editor, cada pieza de contenido es un bloque, y cada bloque es 100% personalizable. Como he dicho antes, una vez creado y personalizado el bloque, mediante esta característica, puedes importarlo en el WordPress que desees. Tal vez para texto no le encuentres mucha utilidad, pero, ¿y si te hablo de clonar botones de acción, formularios, banners…? Ahí es donde reside el verdadero potencial de la función de importar y exportar bloques.

Para ello, lo primero que tienes que hacer es crear un bloque reutilizable. ¿Cómo? Muy sencillo. Ve al editor Gutenberg y crea un bloque como tu quieras. Con el contenido y estilo que te apetezca. Una vez construido, pulsa sobre los tres puntitos del menú de bloque y selecciona la opción «Añadir a los bloques reutilizables».

Ahora Gutenberg te indicará que, para referenciarlo en posteriores usos, debes darle un nombre. Ponle un nombre descriptivo y pulsa en el botón «Guardar».

Bien, ahora imaginemos que queremos importar nuestro bloque reutilizable en otro sitio web desarrollado con WordPress. Lo que tendríamos que hacer es pulsar sobre el botón + de la parte superior izquierda del editor, y abrir la pestaña «Reutilizable».

Dentro de dicha pestaña verás un enlace que dice «Gestionar todos los bloques reutilizables». Pulsa en dicho hipervinculo.

El enlace te conducirá hacia un listado de todos tus bloques reutilizables. Si posas el ratón sobre alguno de ellos, verás una acción llamada «Exportar como JSON».

Al clicar en dicha opción, se te descargará un fichero formato JSON. Guarda ese fichero porque lo necesitaremos más adelante.

Ahora tienes que ir al otro WordPress donde quieres importar el bloque, y volver al menú de «Gestionar todos los bloques reutilizables». Verás que en dicho listado, arriba del todo hay un botón que dice «Importar de JSON». Si pulsas en ese botón, podrás subir el fichero que has descargado antes. Al hacerlo, se te creará el bloque que hemos exportado.

Ahora podrás utilizar ese bloque reutilizable como un bloque más en tu nuevo WordPress. ¿Cómo? Pues al agregar un nuevo bloque a través del menú Nuevo Bloque de Gutenberg, en la pestaña Reutilzables te aparecerá el nuevo bloque con el nombre que le hayas dado previamente. Así de sencillo.

Como he dicho antes, esto es muy útil para poder utilizar de un sitio a otro elementos tan reutilizables como botones, banners, mensajes comunes y demás elementos. Esto te ahorrará muchísimo tiempo, haciendo que seas mucho más productivo en tu trabajo.

Y hasta aquí el artículo sobre cómo importar y exportar bloques de Gutenberg. Espero que os haya gustado y sepáis aplicarlo a vuestros propios proyectos. ¡Nos leemos!