Importación de bloques con EditorsKit

Tal como hemos explicado en el artículo precedente, el plugin EditorsKit permite exportar cualquier bloque creado con el editor de WordPress a un fichero JSON. Este fichero, a su vez, se puede importar desde la misma u otra instalación de WordPress, tantas veces como sea necesario, lo cual brinda grandes posibilidades a cualquier usuario que quiera realizar un diseño modelo y reaprovecharlo posteriormente.

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.