Creación y gestión de los bloques reutilizables

En el Curso de WordPress 2019 dedicamos todo un artículo a la creación y gestión de este tipo de bloques, razón por la cual remitimos a nuestros alumnos y alumnas a lo que allí explicamos. Si quieren profundizar en su manejo, también pueden consultar otros tres artículos muy completos: Cómo crear un bloque reutilizable en Gutenberg, Cómo importar y exportar bloques del editor Gutenberg de WordPress y Cómo usar los bloques reutilizables para crear plantillas de página. No obstante, si tenemos tiempo en esta segunda sesión del curso, haremos alguna demostración de cómo se crean y gestionan los bloques reutilizables.

Exportación de bloques

Tanto la exportación como la importación de bloques están explicadas en los artículos que acabamos de citar, por lo cual no volveremos a describir el procedimiento. Ahora bien, hay que admitir que la forma en que se gestionan los bloques reutilizables con WordPress es poco intuitiva, por lo que son muy de agradecer las mejoras que en este ámbito ha introducido el plugin EditorsKit.

En efecto, EditorsKit añade al editor de WordPress la posibilidad de exportar directamente cualquier bloque, para lo cual hay que hacer lo siguiente: pulsar sobre las opciones contextuales del bloque y seleccionar la opción Export as JSON. De esta manera se genera un fichero con extensión .json, que se puede descargar y guardar para usos posteriores. Dado que el formato JSON está en texto plano, se puede abrir y modificar con cualquier editor que sea compatible con dicho formato.

El siguiente screencast ilustra el procedimiento de exportación de un bloque del editor de WordPress. así como su descarga y lectura mediante el editor Notepad++.

Importación de bloques

Una vez que disponemos de un bloque exportado en formato JSON, podemos utilizarlo, a modo de plantilla, para generar nuevos bloques en otras páginas o incluso en otros sitios web. El procedimiento necesario para conseguirlo nos ocupará el próximo artículo de esta sesión.

La entrada Los bloques reutilizables y EditorsKit se publicó por primera vez en Curso de WordPress 2020.

Importación de bloques con EditorsKit para crear páginas web

Para poder mostrar esta técnica y realizar ejercicios con ella, hemos creado un modelo de página web, que consta de cuatro bloques; en realidad, el diseño es más complejo, pero los bloques que lo forman están organizados en cuatro bloques de grupo.

A continuación hemos exportado esos cuatro bloques, lo cual nos ha permitido generar otros tantos ficheros JSON:

Si queremos importar estos ficheros, necesitamos trabajar a la vez con dos aplicaciones: el navegador, en el que abriremos las ventanas o pestañas que nos hagan falta, y la aplicación de gestión de ficheros del ordenador que estemos utilizando. Una vez que hayamos abierto ambas aplicaciones, hay que hacer lo siguiente:

1. Descargar los cuatro bloques en su orden lógico: bloque 1, bloque 2, bloque 3, bloque 4. Para asegurarse de que los ficheros se descargan en la ubicación idónea, lo mejor es hacer clic con el botón derecho del ratón, seleccionar la opción «Guardar enlace como» y seleccionar el directorio de destino.
2. Abrir el gestor de ficheros y encontrar el directorio donde se han guardado los ficheros descargados. Si los ficheros no están correctamente ordenados, aconsejamos reordenarlos según la secuencia ya descrita, lo cual hará más fácil el último paso.
3. Sin cerrar ninguna de las ventanas y aplicaciones abiertas, hay que crear una nueva página en el blog de prácticas, y guardarla como borrador.
4. Desde la ventana del gestor de ficheros, arrastrar los cuatro bloques, uno a uno, hasta la ventana del editor de WordPress. El bloque se debe arrastrar sobre una zona en blanco del editor hasta que aparezca una raya horizontal de color azul, que marca el punto de inserción del bloque. Para evitar el riesgo de pérdida del trabajo, conviene guardar el borrador después de cada uno de los pasos, y volver a guardar el borrador una vez completada la tarea.

El siguiente screencast muestra con todo detalle el procedimiento que acabamos de explicar.

Problemas derivados de la importación de bloques con EditorsKit

La importación de bloques con EditorsKit, mediante la técnica que hemos descrito se enfrenta con al menos dos dificultades que conviene tener en cuenta. La primera es que los ficheros multimedia implicados en la construcción de los bloques se exportan e importan con sus URLs absolutas originales, tal como puede verse en el siguiente ejemplo de un bloque de imagen:

{
  "__file": "core_block",
  "content": "<!-- wp:image {\"id\":1640,\"sizeSlug\":\"large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"https://cursoswp.educacion.navarra.es/cursowp2020/wp-content/uploads/2020/02/medicamentos-1024x683.jpg\" alt=\"Mejoras del editor de WordPress\" class=\"wp-image-1640\"/><figcaption>Mejoras del editor de WordPress</figcaption></figure>\n<!-- /wp:image -->"
}

En efecto, la imagen incluida en este bloque mantiene su URL original, a saber:

https://cursoswp.educacion.navarra.es/cursowp2020/wp-content/uploads/2020/02/medicamentos-1024x683.jpg

Al importar el bloque, la URL de la imagen no se modifica, y tampoco se sube al nuevo sitio web el fichero multimedia (la función nativa de importación de contenido de WordPress, en cambio, sí realiza esa operación). Por tanto, si desaparecen los ficheros multimedia originales, el bloque importado no servirá de gran cosa, porque dichos ficheros también desaparecerán en el sitio adonde los hayamos importado.

Para evitar este problema, solo se nos ocurren dos medidas: o bien descargar las imágenes originales para subirlas al sitio web de destino, o bien sustituir las imágenes originales por otras nuevas. Esta segunda técnica es la que vamos a practicar en esta sesión.

La segunda dificultad tiene que ver con la compatibilidad de bloques entre diferentes instalaciones de WordPress. Por ejemplo, si en el sitio web de origen exportamos un bloque creado con el plugin Atomic Blocks, no podemos esperar que dicho bloque funcione correctamente en un sitio web de destino en el que Atomic Blocks no esté instalado.

Importación de bloques en la actividad de la segunda sesión del curso

Ahora que hemos aprendido a exportar e importar bloques, ya estamos en condiciones de afrontar las tareas que plantea la actividad correspondiente a esta segunda sesión del curso.

La entrada Importación de bloques con EditorsKit se publicó por primera vez en Curso de WordPress 2020.