Plugins para la mejora del editor

El ecosistema de plugins que se integran con el editor de WordPress ha crecido continuamente desde que se publicó la versión 5.0 de la aplicación, hasta el punto de que en ocasiones resulta difícil decidir cuál es el más apropiado para atender las necesidades concretas de los usuarios. En los artículos de esta sesión del curso intentaremos desbrozar esta frondosa selva de complementos, que no hace más que crecer y volverse cada día más intrincada.

La mayor parte de los plugins cuyo propósito es la mejora del editor de WordPress proporcionan uno o varios bloques de contenido adicionales, a menudo agrupados en colecciones. Una relación de estos plugins puede verse en este mismo sitio web, en el artículo Colecciones de bloques para mejorar el editor, que complementa al que publicamos en su día con el título Plugins para Gutenberg 1.

Las mejoras del editor de WordPress también se pueden lograr con otro tipo de plugins, como los dedicados a flexibilizar sus capacidades y afinar las técnicas de trabajo. También hemos tratado sobre ellos en nuestro curso del año pasado, y en concreto en el artículo Plugins para Gutenberg 2. En esta segunda sesión del curso nos centraremos precisamente en uno de los que resulta más útil por su funcionalidad y alcance: Gutenberg Page Building Toolkit – EditorsKit, conocido habitualmente por la segunda parte de su nombre.

Qué es EditorsKit

Como sugiere el nombre completo del, Gutenberg Page Building Toolkit – EditorsKit es algo así como una completísima caja de herramientas con la que podemos aplicar al editor de WordPress toda una extensa batería de mejoras. Señalamos a continuación algunas de las más significativas:

• Un interfaz que facilita la gestión de los bloques existentes, tanto los propios de WordPress como los que hayan sido instalados por otros plugins y temas.
• Opciones adicionales de formato del texto y de escritura.
• Funciones que aumentan la capacidad del editor para trabajar con los bloques, formatearlos, reutilizarlos, precisar sus condiciones de visibilidad y publicación, etc.

Funcionalidades de EditorsKit con las que vamos a trabajar

Un examen completo y detallado de las funcionalidades del plugin EditorsKit resulta imposible en el tiempo del que disponemos durante esta sesión. Por tanto, nos centraremos en las más destacadas, todas estrechamente relacionadas con el objetivo de este curso, que no es otro que mejorar las capacidades de sus alumnos y alumnas para elaborar diseños de páginas web:

1. Formatear y añadir color a fragmentos de texto.
2. Mostrar u ocultar bloques según el tipo de dispositivo en que se visualizan y la naturaleza de los usuarios que acceden a ellos.
3. Exportar e importar bloques, y añadir al editor bloques exportados, a modo de plantillas de diseño.

La mayor parte del trabajo la dedicaremos al punto 3, que es el que ofrece mayor rentabilidad didáctica de acuerdo con los objetivos y propósitos de este curso.

Un molesto fallo de EditorsKit

Como ocurre con muchos otros plugins que se integran con el editor de WordPress, por el momento no es posible traducir completamente EditorsKit (ya veremos que sí hay algunas partes de su interfaz de configuración que se muestran traducidas). De hecho, aunque se traduzcan completamente los ficheros .PO y .MO, y se generen los ficheros .JSON que son necesarios para traducir el plugin, y aunque se suban unos y otros a la ubicación correcta en la instalación de WordPress, no hay manera de que el plugin aparezca completamente traducido.

Más sobre EditorsKit

Los alumnos y alumnas interesados en disfrutar de una completa panorámica de las funcionalidades de este plugin harán bien en leer el siguiente artículo de esta sesión, en el que encontrarán una presentación en vídeo, demostraciones, documentación y otros recursos de utilidad. Les animamos, ademas, a que exploren en sus respectivos blogs de práctica las muchas opciones de configuración y manejo del plugin.

La entrada Mejoras del editor de WordPress con EditorsKit se publicó por primera vez en Curso de WordPress 2020.

EditorsKit en vídeo

Una pieza esencial del artículo de Fernando Tellado es el vídeo en el que su autor presenta las funciones más destacadas del plugin:

Otros recursos relacionados con EditorsKit

Para conocer a fondo todas sus posibilidades, recomendamos la consulta de los siguientes recursos sobre el plugin EditorsKit:

• EditorsKit: el sitio web oficial del complemento, creado por Jeffrey Carandang. Permite descargar el plugin, probar una demo, y acceder a un complemento de pago.
• EditorsKit Tackles Typography With First Premium Add-On: análisis del complemento de pago de EditorsKit, que permite trabajar con las fuentes de Google.
• Gutenberg Page Building Toolkit – EditorsKit: página del plugin en el repositorio oficial de WordPress.
• Páginas del plugin en Facebook, Twitter y GitHub.
• Blocks Plugin Unit Test: una herramienta, basada en la función de importación de bloques del plugin EditorsKit, que sirve para verificar el funcionamiento de un tema cuando se insertan en él los bloques creados con varias colecciones de bloques muy populares, como Atomic Blocks, CoBlocks, Kadence Blocks, Kioken Blocks, Otter Blocks, Stackable y Ultimate Add-on for Gutenberg. El uso de esta herramienta aparece descrito en otro artículo de Ayuda WordPress, también ilustrado por su correspondiente vídeo:

EditorsKit y ShareABlock

No queremos finalizar esta nómina de recursos sobre el plugin EditorsKit sin mencionar un servicio online muy interesante: ShareABlock. Creado por Jeffrey Carandang, autor del plugin, este servicio alberga una colección de plantillas elaboradas por varios diseñadores mediante los bloques nativos del editor de WordPress. Las plantillas publicadas en ShareABlock se pueden descargar e importar desde cualquier otra instalación de WordPress en la que se haya activado el plugin EditorsKit, tal como puede verse en este breve tutorial.

Aunque no vamos a trabajar con las plantillas de ShareABlock (pues su descarga requiere registro previo), nos hemos inspirado en el concepto de plantillas en formato JSON para diseñar las actividades que pondremos en práctica al final de esta sesión. De esta manera, los alumnos y alumnas del curso aprenderán a reutilizar sus diseños y rentabilizar así el tiempo y el esfuerzo que hayan invertido en su creación.

La entrada Recursos sobre el plugin EditorsKit se publicó por primera vez en Curso de WordPress 2020.

Opciones de formato del texto

El plugin EditorsKit permite realizar algunas operaciones con los bloques de texto que por el momento no son factibles con el editor de WordPress. Una de las más llamativas es la de asignar un color de primer plano o de fondo a varios caracteres, palabras o conjuntos de palabras, tal como podemos ver en los siguientes ejemplos:

Esto Es Un Ejemplo De Texto

Otro Ejemplo de Texto

Además de jugar con los colores, EditorsKit hace posible añadir sangrías, abreviaturas, subíndices y superíndices, subrayados, tachados, caracteres en mayúscula, código e imágenes inline, etc, todo ello desde las propiedades contextuales de los bloques que contienen texto, como los de párrafo, titulares, cita, etc. El plugin también permite limpiar todo el formato de un texto y justificarlo.

Como este tipo de operaciones no son fáciles de describir con palabras, a continuación ofrecemos un screencast que demuestra su funcionamiento.

Resulta evidente que todas estas funcionalidades dotan al editor de WordPress de capacidades muy mejoradas; ahora bien, siempre debemos utilizarlas con proporción y mesura, para no afear o enmarañar en exceso la apariencia final de los textos.

Aplicación a los bloques de la lógica condicional de WordPress

Gracias a las funciones del plugin EditorsKit, los bloques creados con el editor de WordPress pueden mostrarse o no dependiendo de ciertas condiciones, como por ejemplo el tipo de dispositivo con el que se visualiza una página web (ordenador de escritorio, tableta o móvil), el tipo de usuario que la está viendo (el plugin distingue si el usuario ha iniciado sesión o no lo ha hecho), y las circunstancias concretas que caracterizan a la página web dentro del sitio al que pertenece.

La selección de estas condiciones se lleva a cabo haciendo clic en la barra de opciones contextuales del bloque y seleccionando la opción Visibility Settings. De esta manera se presenta al usuario un interfaz que permite seleccionar las condiciones de aparición y alineación del bloque según el tipo de dispositivo, e incluso definir sus condiciones de presentación de acuerdo con alguna de las muchas circunstancias que están contempladas en la lógica condicional de WordPress.

También hemos incluido un screencast de esta funcionalidad para demostrar cómo se trabaja con ella.

Exportación e importación de bloques

Otra de las funciones más útiles de EditorsKit es su capacidad para exportar e importar cualquier bloque creado con el editor, lo cual permite reutilizar dicho bloque tanto en la misma instalación de WordPress como en otra. De esta funcionalidad vamos a tratar en un próximo artículo; no obstante, para comprender bien su funcionamiento debemos repasar un concepto previo, que ya tratamos en el Curso de WordPress 2019: el de bloques reutilizables.

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

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.

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.