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.

Por otro lado, las capacidades del editor de WordPress se pueden ampliar, casi hasta el infinito, con plugins que añaden colecciones de bloques de naturaleza y propósito muy distintos. En el Curso de WordPress 2019 ya dimos cuenta de muchos de estos complementos, por lo cual remitimos ahora a los artículos que entonces publicamos sobre este asunto: Plugins para Gutenberg 1 y Plugins para Gutenberg 2.

Más colecciones de bloques

Casi continuamente se publican en el repositorio oficial de WordPress nuevos plugins de colecciones de bloques. A los que ya incluimos en nuestros listados del año pasado, podemos añadir estos:

1. Advanced WordPress Backgrounds. Plugin especializado en bloques para fondos de página. Ofrece la posibilidad de crear fondos de color, imagen y vídeo, con opciones y efectos diversos.
2. Blocks Kit – Gutenberg Blocks for Freelancers. El plugin aporta 11 nuevos bloques, y promete ampliar su oferta.
3. Caxton – Create Pro page layouts in Gutenberg. Ocho bloques para el editor, con diseños muy elegantes.
4. Creative Blocks – Ultimate Blocks for Gutenberg. Diez bloques adicionales, más la promesa de nuevas incorporaciones. No obstante, a juzgar por la fecha de la última versión del plugin y la ausencia de intervenciones en los foros de soporté, no parece muy prometedor.
5. Elegant Blocks – Amazing Gutenberg Blocks. Una gran colección de nada menos que 25 bloques, aunque diseñada para una familia específica de temas.
6. Elfsight Blocks. Más de 50 bloques para el editor de WordPress hacen de este plugin uno de los más completos en su género. Ahora bien, para poder utilizar los bloques hace falta darse de alta en un servicio externo, que es el creador real de los elementos de contenido.
7. Enhanced Blocks – Page Builder Blocks for Gutenberg. Una colección de 14 bloques diferentes, aunque poco recomendable a tenor de los fallos señalados en el foro de soporte del plugin.
8. Generate Blocks. Aunque todavía en fase alfa, este plugin de bloques, creado por los autores del famoso tema GeneratePress, se muestra como una alternativa sumamente prometedora.
9. Getwid – Gutenberg Blocks. Es una de las colecciones más amplias de este catálogo de plugins, ya que cuenta con más de 40 bloques y más de 35 plantillas prediseñadas. Los creadores de este plugin también han publicado otro complemento muy interesante, Block Editor Colors, que permite modificar y personalizar los colores asignados por los temas al editor de WordPress.
10. Grids: Layout builder for WordPress. Este es un plugin especializado en la construcción de estructuras o disposiciones de filas y columnas, desde las muy simples a otras más complejas, en las que a su vez se pueden insertar otros bloques de contenido.
11. Gutenberg Blocks and Page Builder – Qubely. Uno de los plugins mejor valorados por los usuarios, con más de 25 bloques diferentes, y secciones y diseños predefinidos.
12. Gutenberg Blocks Collection – qodeblock. Colección con 14 bloques diferentes. A juzgar por el listado de bloques, su funcionalidad es muy parecida ala de Atomic Blocks.
13. Gutenberg Editor Blocks – Gutentor Page Builder – Unlimited Possibilities to Design. Este completísimo plugin presenta una gran colección de bloques organizada en tres tipos: elementos, módulos y widgets.
14. Gutenberg Post Blocks. Plugin especializado en la creación de listados y cuadrículas de entradas. Todos los bloques son muy elegantes y disponen de muchísimas opciones de configuración.
15. Guteblock – Ultimate Gutenberg Blocks Plugin. Colección de 16 bloques nuevos, más otros 12 de próxima aparición.
16. HayyaBuild – WordPress Builder Gutenberg Blocks. Casi 25 bloques son la carta de presentación de este plugin, especializado en las lenguas que se escriben de derecha a izquierda.
17. Nova Blocks by Pixelgrade. Aunque es una de las colecciones menos nutridas de este listado, sus bloques destacan por la elegancia de sus diseños.
18. Orbit Fox by ThemeIsle. Este plugin no solo incluye bloques para el editor de WordPress, sino también módulos para varios constructores de páginas, como Elementor y Beaver Builder.
19. Page Builder Gutenberg Blocks – Kioken Blocks. Este plugin destaca por la gran calidad y elegante diseño de sus 18 nuevos bloques.
20. Page-Building Gutenberg Blocks and Templates – Blockypage. Una colección que no solo ofrece 20 bloques adicionales, sino también plantillas prediseñadas.
21. Powerful Gutenberg Blocks and Templates – Ghost Kit. Los 22 bloques de este plugin y sus extensiones (de pago) hacen de el uno de los más completos de este listado.
22. Rise Blocks – A Complete Gutenberg Page Builder. Una colección con 9 bloques nuevos y otros más en camino.
23. Snow Monkey Blocks. Este plugin distingue entre bloques modulares, de sección y de formato, y en conjunto ofrece más de 30 nuevos bloques.
24. WordPress Post Grid Layouts with Pagination – Sogrid. Otro plugin especializado en listados y cuadrículas de entradas, con 10 bloques diferentes para otras tantas disposiciones, y numerosas opciones de personalización.

El problema de los plugins de colecciones de bloques

La proliferación de plugins de colecciones de bloques puede llegar a plantear ciertos problemas a los usuarios que desean mejorar las funcionalidades del editor de WordPress, debido a las siguientes circunstancias:

• Muchas colecciones son muy parecidas entre sí, hasta el punto de que en ocasiones resulta dificilísimo elegir la colección más adecuada o más adaptada a una necesidad concreta.
• Hay muchos bloques prácticamente idénticos que forman parte de colecciones diferentes, lo cual también complica la elección de la colección más apropiada.
• Algunos plugins son muy voluminosos y ofrecen gran cantidad de bloques y de opciones que tal vez no vayan a utilizarse nunca, lo cual puede tener un impacto negativo en el rendimiento de un sitio web. Algunos plugins permiten una activación selectiva de los bloques que son necesarios, pero otros carecen de esta opción. No obstante, este problema se puede paliar con las funciones de gestión de bloques que aporta el plugin EditorsKit, ya visto en la sesión anterior del curso.
• Son numerosos los plugins que ofrecen bloques con una funcionalidad reducida o con opciones limitadas. Si se quiere la funcionalidad completa, hay que adquirir la versión de pago.
• Muchas colecciones de bloques no están traducidas al castellano o no están preparadas para que se traduzca su interfaz de configuración, lo cual aumenta las dificultades de uso. Suponemos que esta situación se corregirá con el tiempo, aunque lo cierto es que a los autores de ciertos plugins no parece preocuparles mucho el problema.
• Para aprovechar totalmente los bloques de algunas colecciones es necesario utilizar temas diseñados ex profeso, lo cual limita su compatibilidad y puede provocar diseños fallidos o resultados inesperados.

Una posible solución: los plugins-bloques y el directorio de bloques

Los responsables de la arquitectura de WordPress han diseñado un sistema cuyo objetivo es que los usuarios puedan instalar lis bloques que necesiten, y solo dichos bloques. Es el denominado directorio de bloques, formado por un conjunto de mini-plugins, cada uno de ellos consistente en un bloque único, seleccionable e instalable como cualquier otro complemento. Por el momento, este sistema se halla aún en su fase embrionaria, pero es muy probable que ofrezca grandes posibilidades en un próximo futuro. Recomendamos la lectura del artículo Directorio de bloques, el siguiente reto de WordPress, en el que se presenta, de forma muy clara y precisa, el estado de la cuestión.

La entrada Colecciones de bloques para mejorar el editor se publicó por primera vez en Curso de WordPress 2020.

El porqué de la selección de Atomic Blocks

Entre las razones que nos han movido a seleccionar este plugin para utilizarlo en los sitios web de los centros dependientes del Departamento de Educación del Gobierno de Navarra, así como en las prácticas de este curso, se cuentan las siguientes:

• Tiene una excelente calidad, objetivamente mensurable de acuerdo con cualquiera de los criterios aplicados por el repositorio oficial de plugins de WordPress:
  • Es compatible con la última versión de WordPress.
  • Los usuarios le han otorgado una muy buena valoración, con 4,5 estrellas sobre 5; casi el 75% de valoraciones ha concedido al plugin la máxima puntuación.
  • El plugin registra más de 40.000 instalaciones.
  • Se actualiza frecuentemente.
  • Se ha traducido el español. Todavía no se ha traducido al euskera.
• Es compatible con la versión de PHP instalada en los servidores del Departamento de Educación.
• Presenta una excelente relación entre facilidad de uso y resultados obtenidos, así como una gran estabilidad y ausencia de conflictos o incompatibilidades graves.
• Ha sido programado por una empresa perteneciente al mismo grupo que se encuentra detrás del desarrollo del framework Genesis, lo cual asegura una integración sin fisuras con los temas de esta familia. De hecho, vatios de los temas más recientes permiten importar contenido basado en los bloques del plugin Atomic Blocks, a través del mecanismo de los denominados starter packs.
• Atomic Blocks dispone de una documentación muy bien elaborada (aunque para nuestro gusto demasiado escueta), que constituye un recurso formativo de gran calidad.

Algunos defectos del plugin Atomic Blocks

No todos los aspectos del plugin Atomic Blocks pueden considerarse positivos. De hecho, podemos anotar unos cuantos defectos:

• La documentación disponible es un tanto espartana, aunque de calidad indiscutible.
• El Interfaz de configuración de los bloques no es traducible al español. Véase, a este respecto, el hilo de los foros de WordPress dedicado a la traducción al español del plugin Atomic Blocks.
• El soporte en los foros de WordPress no parece todo lo sólido que cabría esperar.

Recursos sobre el plugin Atomic Blocks

Aunque a lo largo de esta tercera sesión del curso realizaremos varias prácticas de construcción de páginas con Atomic Blocks, aconsejamos a los asistentes que tengan a su alcance los siguientes recursos, con los que podrán afianzar los conocimientos y habilidades adquiridos:

• El sitio oficial del plugin, con documentación, un blog con noticias y tutoriales, demostraciones de los bloques, etc.
• Foro de soporte del plugin, en el repositorio oficial de WordPress.
• Sitio de desarrollo en GitHub. Lo más interesante para la mayoría de los usuarios es la documentación sobre uso y desarrollo del plugin.
• Y los demás materiales y recursos que mencionamos en el siguiente artículo de esta sección.

La entrada El plugin Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Los bloques del plugin Atomic Blocks

A continuación enumeramos los quince bloques de la colección, con enlaces a sus correspondientes demostraciones, todas ellas publicadas en la página oficial del plugin:

1. Bloque de secciones y diseños (demostración).
2. Bloque de columnas avanzadas (demostración).
3. Bloque de boletín de noticias (demostración).
4. Bloque de precios (demostración).
5. Bloque de cuadrícula de entradas (demostración).
6. Bloque de contenedor (demostración).
7. Bloque de testimonios (demostración).
8. Bloque de aviso inline (demostración).
9. Bloque de acordeón (demostración).
10. Bloque de iconos de compartir (demostración).
11. Bloque de llamada a la acción (demostración).
12. Bloque de botón personalizable (demostración).
13. Bloque de espaciador y divisor (demostración).
14. Bloque de perfil de autor (demostración).
15. Bloque de letra capitular (demostración).

Las demostraciones de estos bloques son más elocuentes con respecto a su propósito y funcionalidades que ninguna explicación. No obstante, aprenderemos más sobre estos bloques, así como sobre sus opciones de configuración y procedimientos de uso, cuando practiquemos con ellos.

Prácticas con los bloques de Atomic Blocks

A lo largo de esta tercera sesión del curso realizaremos diversas prácticas con los bloques de Atomic Blocks. Estas demostraciones y tareas están detalladas en dos artículos de esta misma sesión: Creación de sitios nuevos con Genesis y Atomic Blocks, y Uso de los bloques de Atomic Blocks.

La entrada Funcionalidades de Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.

Los temas de la familia Genesis y Atomic Blocks

En todos los temas de la familia Genesis (y en prácticamente cualquier otro tema para WordPress que sea compatible con el nuevo editor) se puede crear contenido con los bloques del plugin Atomic Blocks. Ahora bien, hay algunos temas-hijo de Genesis que cuentan, además, con la capacidad de generar contenido, de forma automática, con los bloques aportados por este plugin. Esto se logra mediante un sistema denominado One-Click Theme Setup, o “configuración del tema con un clic” que hace posible completar la configuración de un tema mediante un mecanismo tan simple como el de hacer clic sobre un botón.

Algunos temas, además, disponen de los llamados starter packs, que son paquetes constituidos por un conjunto de plugins y de ficheros que funcionan a modo de plantillas. Durante el proceso de “configuración del tema con un clic”, el usuario puede seleccionar uno de estos paquetes de inicio y determinar así el tipo de contenido que desea crear para su sitio web.

Cuando se activa uno de estos “paquetes de inicio” o “paquetes de arranque”, el tema descarga los plugins necesarios (Atomic Blocks entre ellos), y se configura a sí mismo a partir de las plantillas prediseñadas con tal propósito. De este modo, se puede crear un sitio completo, totalmente diseñado y configurado, en unos pocos minutos. A lo largo de la tercera sesión del curso, haremos una demostración de este procedimiento sobre un sitio de nueva creación que no tiene ningún contenido previo.

Temas que permiten la configuración con un clic

En el momento de escribir este artículo, los temas que disponen de la capacidad de configuración con un clic y, en ciertos casos, también de la capacidad de seleccionar el “paquete de arranque”, son los siguientes:

1. Agent Foused Pro.
2. Authority Pro.
3. Course Maker Pro.
4. Essence Pro.
5. Hello Pro.
6. Magazine Pro. Este es el tema que estamos utilizando en este curso, en los blogs de práctica de los alumnos.
7. Monochrome Pro.
8. Navigation Pro. Y este es tema que vamos a utilizar en la demostración de creación de sitios nuevos con Genesis y Atomic Blocks.
9. Recipe Blogger.
10. Sample Child.
11. Revolution Pro.

Demostración de la configuración de temas en un clic

La configuración de temas en un clic y el uso de los paquetes de inicio están descritos con todo detalle en el artículo How you can set up your next web design project in <30 seconds with Genesis child themes… Really!. , en el que se incluye un screencast de demostración. Por otro lado, el profesor del curso llevará a cabo una demostración de esta funcionalidad en un sitio nuevo, con el objetivo de presentar las potencialidades de esta técnica.

Algunas desventajas de la configuración de temas en un clic

La configuración de los temas en un clic y los starter packs son funcionalidades diseñadas para que se apliquen a sitios nuevos, recién creados, que no tienen contenido previo. Aplicarlas a sitios web que ya tienen contenido puede ser causa de diversos problemas y conflictos:

• La estructura y apariencia del sitio se modifican, porque se publican nuevos menús y nuevas disposiciones de páginas.
• El sitio recibe nuevos plugins, que pueden resultar poco adecuados o incluso inconvenientes.
• La disposición y apariencia de los nuevos contenidos pueden ser poco coherentes con los artículos ya existentes.
• El idioma de los nuevos contenidos (inglés) obliga a un esfuerzo añadido de modificación del sitio.

A nuestro modo de ver, el uso de la configuración en un clic y los paquetes de inicio no solo resulta demasiado invasivo si se utiliza en sitios con contenido previo, sino también poco controlable. No negamos su utilidad y pertinencia en determinados casos, pero nos parece que un usuario acostumbrado a trabajar con bloques y que conozca el funcionamiento de los temas de la familia Genesis puede utilizar otras técnicas que le garanticen un control más preciso del contenido. En este sentido, creemos que una alternativa perfectamente viable podría ser la de exportar e importar bloques en formato JSON, que tratamos en detalle durante la segunda sesión del curso.

La entrada Integración entre Atomic Blocks y Genesis se publicó por primera vez en Curso de WordPress 2020.

Sitios web de demostración

La demostración se realizará con un sitio nuevo y recién instalado, creado ex profeso para tal propósito, en el que se activará el tema Navigation Pro. El sitio presenta las siguientes características:

• Se encuentra dentro de la misma plataforma de blogs de formación en la que se han dado de alta los sitios de práctica de los alumnos. Es, por tanto, un sitio funcionalmente idéntico a los demás.
• No tiene ningún contenido: ni entradas, ni comentarios, ni páginas.
• Carece de menús y de widgets.
• Solo tiene la configuración básica necesaria para que pueda funcionar correctamente.

En qué consiste la demostración

La demostración de creación de un sitio nuevo basado en las funcionalidades de la configuración de temas en un clic y los paquetes de inicio comprende las siguientes fases o etapas

• Presentación del sitio nuevo, sin ningún tipo de contenido.
• Activación del tema Navigation Pro.
• Descripción de la funcionalidad de configuración de tema en un clic y de los paquetes de inicio.
• Selección de uno de los paquetes de inicio.
• Presentación y análisis crítico de los resultados del proceso.

Tal como ya hemos indicado en el artículo precedente, esta tarea de creación de sitios nuevos no la llevarán a cabo los alumnos y alumnas del curso, pues presenta ciertas dificultades técnicas que hacen poco aconsejable su aplicación masiva en los blogs de práctica.

No obstante, hemos creado y publicado un videotutorial en YouTube que explica, paso a paso, la técnica utilizada, así como sus ventajas e inconvenientes. Aunque los alumnos del curso no deban practica este procedimiento en sus propios sitios, siempre pueden ver el tutorial y comprender así en qué consiste la técnica utilizada.

La entrada Creación de sitios nuevos con Genesis y Atomic Blocks se publicó por primera vez en Curso de WordPress 2020.