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.

La segunda actividad del curso tiene unos objetivos muy semejantes a los de la primera: los alumnos y alumnas deberán elaborar, publicar y enviar al profesor una página web creada con bloques del editor de WordPress. En este caso deberán hacerlo importando varios bloques que se han exportado desde un modelo previo, de acuerdo con el procedimiento descrito en Importación de bloques con EditorsKit.

La página que debe utilizarse como modelo es esta, creada con los bloques nativos del editor de WordPress, que posteriormente se han exportado a cuatro ficheros JSON, gracias a las funciones del plugin EditorsKit. El contenido de la página propuesta como modelo no es relevante, pero la estructura de bloques no debe modificarse.

Descripción de la segunda actividad del curso

Los alumnos y alumnas del curso deberán elaborar y publicar una página web semejante a la del modelo propuesto, siguiendo estos pasos:

1. Crear una nueva página web y guardarla como borrador. La página no debe tener barra lateral, y hay que ocultar su título, tal como se explicó en la descripción de la actividad 1.
2. Con el botón derecho del ratón, hacer clic sobre cada uno de los enlaces que aparecen a continuación, y seleccionar la opción «Guardar enlace como…». Este es el método más seguro para descargar y guardar en el ordenador los cuatro ficheros de plantilla JSON necesarios para reproducir el modelo propuesto:
   • Fichero de plantilla 1.
   • Fichero de plantilla 2.
   • Fichero de plantilla 3.
   • Fichero de plantilla 4.
3. Importar los cuatro ficheros JSON, y disponerlos en el mismo orden en que figuran en el modelo. Para realizar correctamente esta operación recomendamos consultar el screencast incluido en Importación de bloques con EditorsKit.
4. Sustituir las imágenes de los bloques por otras nuevas, subidas a tal efecto.
5. Añadir los bloques de titulares y espaciadores necesarios para reproducir el modelo propuesto. El texto de los bloques de titulares debe combinar al menos dos colores diferentes; esto se puede conseguir gracias a las opciones disponibles en el plugin EditorsKit.
6. Uno de los bloques importados se tiene que configurar para que solo sea visible para los usuarios que han iniciado sesión; esto se puede conseguir gracias a las opciones disponibles en el plugin EditorsKit.
7. Modificar los textos del modelo propuesto. Esta tarea es optativa, y se deja a criterio de los alumnos:
8. Publicar la página web creada.

Recursos para realizar la actividad

La elaboración de la página web solicitada exige disponer de varios recursos gráficos. A continuación incluimos algunos que pueden ser de utilidad:

• Fotografías de uso libre: Unsplash. Si alguien quiere explorar otros recursos, puede echar un vistazo a los recopilados en los siguientes artículos: Estos son los mejores bancos de imágenes gratuitos, 10 Sites for Free Stock Photos (Updated for 2019) y 21 Amazing Sites With Breathtaking Free Stock Photos (2020 Update).
• Editores de imágenes. Si alguien necesita modificar una imagen y no tiene a su alcance un programa de edición y retoque fotográfico, siempre puede acudir a los editores online. Uno de los mejores es Pixlr.
• Generadores de paletas de colores. Estas herramientas online son muy útiles para crear combinaciones de colores que sean elegantes y ofrezcan buenas condiciones de visibilidad y legibilidad: 14 generadores de paletas de color online para diseño web y 15 Color pickers o generadores de color online.
• Colecciones de iconos e ilustraciones. Para crear las pequeñas imágenes del último bloque, pueden utilizarse fotografías con estilo de máscara circular, pero también iconos e ilustraciones. Aunque existen muchísimas colecciones de iconos, recomendamos el uso de Flaticon o icons8; debe tenerse en cuenta que los iconos alojados en ambos servicios se pueden descargar y utilizar siempre que se respeten las condiciones de atribución y cita. En cuanto a ilustraciones, un buen recurso es unDraw, cuyos diseños se pueden descargar libremente.

Envío de la actividad

Una vez publicada la página, hay que enviar su dirección al profesor, junto con una breve descripción del trabajo realizado, y sobre todo de las dificultades y problemas observados durante la realización de la segunda actividad del curso.

El envío de la tarea deberá realizarse mediante el formulario de contacto de este mismo sitio web.

La entrada Segunda actividad del curso se publicó por primera vez en Curso de WordPress 2020.