Las técnicas que acabamos de esbozar responden a un proceso creciente de complejidad conceptual y técnica. En todo caso, la organización y metodología del curso parten de un conocimiento que este curso da por supuesto: el manejo básico de los bloques del editor de WordPress. A partir de este punto, el curso se irá adentrando progresivamente en terrenos desconocidos para la mayoría de los asistentes, pero que al mismo tiempo ofrecen un gran potencial de crecimiento y mejora.

Uso de los bloques nativos del editor de WordPress

El nuevo editor incorporado a la versión 5 de WordPress, denominado Gutenberg, no es un maquetador o diseñador de páginas en sentido estricto, pero lleva camino de serlo. En el momento de publicar este artículo, con WordPress en su versión 5.3.2, el editor ya cuenta con un buen número de bloques que permiten crear diseños muy funcionales y atractivos.

La primera sesión del curso la dedicaremos precisamente a realizar prácticas con varios bloques de gran impacto visual:

• Fondo.
• Espaciador.
• Medios y texto.
• Grupo.
• Columnas.
• Galería de imágenes.
• Botón.

Uso de colecciones de bloques adicionales

El editor de WordPress no solo puede trabajar con los bloques proporcionados por la propia aplicación, sino también con bloques creados por diversos plugins y temas, e incluso con bloques diseñados por los propios usuarios.

La aparición de la versión 5 de WordPress y su nuevo editor ha traído consigo una auténtica proliferación de plugins de colecciones de bloques, que aumentan, casi indefinidamente, las capacidades de diseño isual del editor. En la segunda y tercera sesión del curso trabajaremos con una de las colecciones de bloques más potentes y mejor valoradas, Atomic Blocks.

Uso de sistemas de maquetación visual

Un sistema de maquetación o diseño visual propiamente dicho no solo permite diseñar a voluntad entradas y páginas (que es el ámbito para el que ha sido programado el editor de WordPress y en el que se mueven la mayoría de plugins de colecciones de bloques), sino también modificar radicalmente la apariencia de todo un sitio web.

Mediante el uso de un sistema de maquetación visual completo, el diseñador de un sitio web no está limitado por las características del tema, ya que puede modificar enteramente aspectos como su estructura, paletas de colores, tipografía, menús, áreas de widgets, plantillas de artículos, etc.

Las sesiones cuarta y quinta del curso estarán dedicadas a trabajar con uno de estos sistemas de maquetación visual, formado por Elementor y Elementor Pro. El primero es un plugin gratuito que se puede descargar e instalar libremente desde el repositorio de plugins de WordPress; el segundo, en cambio, es un plugin de pago cuya licencia ha sido adquirida por el Departamento de Educación del Gobierno de Navarra para su uso en los sitios web de los centros educativos.

La entrada Tres técnicas para el diseño visual 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.

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.