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.

Funcionamiento general del plugin Atomic Blocks

Los alumnos y alumnas del curso no deben sentirse abrumados ante la variedad y aparente complejidad de los bloques de este plugin; de hecho, para una persona habituada a trabajar con el editor actual de WordPress, el uso de los bloques de Atomic Blocks no es difícil, pero requiere práctica, paciencia y mucha atención a los detalles.

Lo primero que vamos a hacer es mostrar el funcionamiento general del plugin una vez activado, y para ello vamos a presentar sus bloques y la forma de acceder a ellos. El screencast que incluimos a continuación muestra cómo hacerlo.

Uso de las secciones y los diseños

La forma más sencilla y productiva de comenzar a trabajar con los bloques de Atomic Blocks es utilizar el botón de Layouts, que aparece en la parte superior del editor de WordPress. Una vez que se instala y activa el plugin Atomic Blocks, cuando pulsemos sobre este botón se abrirá una ventana modal que muestra una serie de diseños organizados en tres pestañas:

• Sections, que equivalen a secciones de página.
• Layouts, o diseños completos de varios tipos de páginas.
• Favorites, o favoritos. Esta pestaña aparece vacía hasta que marquemos un diseño o sección como favorito, para lo cual hay que hacer clic sobre el icono con forma de corazón que vemos bajo cada diseño.

Si hacemos clic sobre cualquiera de los diseños que acabamos de mencionar, ese diseño se incluirá en el editor de WordPress, y podremos comenzar a trabajar y experimentar con él, tal como nos muestra el siguiente vídeo:

Quienes se desenvuelvan con comodidad en inglés, también pueden consultar estos otros dos videotutoriales, que explican cómo utilizar los diseños (layouts):

Prácticas con diseños y bloques de Atomic Blocks

Con el fin de demostrar algunas de entre las muchas posibilidades que ofrece este plugin, vamos a realizar ejercicios con dos elementos prediseñados (la sección de cabecera, y la de miembros del equipo) y con uno de los bloques más distintivos del plugin, el de cuadrícula de entradas.

Sección de cabecera

La primera de las secciones con las que vamos a trabajar, denominada Cabecera héroe, está formada a su vez por un bloque contenedor de Atomic Blocks (AB Container), dentro del cual se insertan otros bloques que ya conocemos:

• Bloque de titular.
• Bloque de párrafo.
• Bloque de botón.

El bloque contenedor dispone de opciones que permiten determinar la imagen de fondo, el color de superposición y su opacidad, el margen exterior y el margen interior («relleno» o «padding»), etc. Haciendo un uso inteligente de estas opciones, es muy fácil crear bonitas y expresivas imágenes de cabecera, tal como muestra este screencast:

Sección de miembros del equipo

Podemos repetir el procedimiento con otro elemento prediseñado, que en este caso será el de la sección Miembros del equipo. Cuando lo insertemos, veremos que este es un diseño mucho más complejo, formado por una jerarquía de bloques anidados (columnas avanzadas, contenedor, cajas de perfil de autor, etc.), lo cual permite crear diseños muy sofisticados. Al principio puede parecer complicado manejar esta estructura, pero una vez que practiquemos con ella no resultará tan difícil.

Bloque de cuadrícula de entradas

El tercer elemento de Atomic Blocks con el que vamos a practicar no es un diseño predefinido, sino uno de los bloques más potentes de toda la colección, que se llama AB Post And Page Grid. Como,su nombre indica, este bloque permite generar cuadrículas de entradas muy elegantes y vistosas, que se pueden utilizar para crear listados de artículos, organizados por tipos de contenido, fechas, categorias, etc.

Utilizados en lugares estrategicos del sitio web, como por ejemplo la página principal, este bloque de cuadrículas es capaz de dar a cualquier sitio web un toque muy elegante y profesional.

Otros bloques de Atomic Blocks

Dado el escaso tiempo de que disponemos, es imposible mostrar cómo se utilizan todos los bloques de este plugin. No obstante, los vídeos que ofrecemos a continuación permitirán que los alumnos y alumnas del curso se hagan una idea cabal de todas sus posibilidades y afiancen sus habilidades en el uso de los bloques de Atomic Blocks.

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