Bloques, bloques que es lo que les jode

Este título de post tengo que decir que no se me ocurrió a mi, fue cosa de mi compañera en un programa de Señoras Que Rajan. Así que nada, hoy toca a hablar de bloques, pero de bloques de Gutenberg.

Como verás, tampoco soy de las que pone un título para SEO, pero esta vez he probado a poner un título un tanto gracioso a ver cuál es el impacto del artículo. Soy toda una estratega. 😎

¿Qué es eso de los bloques?

Como sabes, en Diciembre de 2018 salió WordPress 5.0 y con ello el editor nuevo de WordPress llamado «Editor de bloques». Antes de esta versión, WordPress tenía un editor llamado TinyMCE, que no es más que un editor WYSIWYG. Y sinceramente, llevaba mucho sin actualizarse.

Entendemos como bloques un grupo de elementos para crear contenido de todo tipo (texto, imagen, shortcodes, incrustados, etc). Digamos que cada componente es un bloque de Gutenberg.

Tipos de bloques

Hay varios tipos de bloques y así tienes la libertad de crear el contenido como tu quieras:

Nativos

Si me has leído alguna vez, siempre seré de la opinión de que «cuánto más nativo, mejor». Mi prioridad siempre es utilizar todos los bloques nativos que nos da el editor de bloques por defecto, y en estos nativos también hay muchos tipos. Lo explico en el post que hice hace un tiempo.

Bloques personalizados

Este tipo de bloque son también nativos, pero no los trae el core de WordPress, sino que son los que haces tu como desarrollador o desarrolladora. El editor de bloques se basa en React, pero no te asustes, de verdad que no necesitas tener 5000 masters en React para poder crear bloques nativos personalizados.

Los amigos de Nelio hicieron un buen artículo sobre lo que tienes que saber para desarrollar bloques nativos.

Bloques con ACF

Crear bloques con ACF es lo más sencillo del mundo. No hacer falta tampoco ser un desarrollador con 40 apellidos en inglés ni tener 30 teclados mecánicos ni 5 pantallas ultrawide. 😂😂

ACF es uno de los mejores plugins que existen para mi en WordPress y la documentación está genial. Para crear bloques con ACF solamente basta con pararse un poco a leer la documentación y saber un poco de front-end.

Plugins de bloques

También tenemos opción de instalar plugins de colecciones de bloques o bloques por separado. Lo bueno de estas colecciones, es que puedes desactivar los que no vayas a utilizar (igual que en el core de WordPress).

Te enseño algunos ejemplos que considero de calidad ya que he probado en varios proyectos de clientes o algunos propios mios:

OsomPress

OsomPress es un proyecto de dos colegas de la comunidad: Nahuai Badiola y Esther Solà. Tienen en su plugin unos cuantos bloques interesantes que te pueden salvar el culo. Lo bueno es que son bastante sencillos y hacen justo lo que necesitas, no se meten en 40 historias para poder configurar.

Osom Blocks
Osom Blocks

Ultimate Addons for Gutenberg

Ultimate Addons for Gutenberg es el plugin que usa actualmente mi web. Como esta web iba a ser temporal porque estoy trabajando en la web nueva, necesitaba una colección que tuviera algunos para «no perder mucho tiempo» y ya cuando empiece a trabajar con la web nueva, ya pensaré en mis necesidades en el futuro.

Esta colección es la que suele venir con el tema Astra y tiene bastantes bloques interesantes.

Ultimate Addons for Gutenberg
Ultimate Addons for Gutenberg

Kadence Blocks

Kadence Blocks se ha convertido en una de las colecciones más usadas. Empezó como colección de bloques y ahora mismo tienen su propio tema, y por lo que he oído tiene muy buena pinta.

Esta es una de las colección que más uso, tiene su versión premium y merece mucho la pena si trabajas de manera profesional y con clientes. Pero con la free vale de sobra para muchas cosas.

David Viña, un compañero de la comunidad de WordPress España, creó contenido sobre cómo diseñar con esta colección de bloques. Parece bastante interesante y nos puede salvar de alguna.

Kadence Blocks
Kadence Blocks

GenerateBlocks

GenerateBlocks es el que menos he probado de todos estas colecciones, pero sin duda se caracteriza por tener varios bloques interesantes y por la carga de ellos, es una de las mejores colecciones de bloques a nivel de rendimiento que conozco.

Generate Blocks
Generate Blocks

¿Y por qué seguimos usando Divi, Elementor o WPBAkery?

Me voy a meter en un berenjenal, pero lo voy a hacer porque me da la real gana, que para eso es mi blog. Aunque realmente piense que hay muchas herramientas para muchos tipos de usuarios y al final cada uno tiene que utilizar lo que le venga bien, también digo algo: Si vas a desarrollar para WordPress de forma profesional, hazlo bien. Otra cosa es que no lo uses profesionalmente, entonces utiliza un poco lo que te de la gana.

Llevamos 3 años con el editor de bloques y creo que ha demostrado con creces muchas cosas y que depositemos su confianza. También me gustaría decir algo: Si te dedicas al desarrollo de WordPress, marketing, diseño, etc, tu obligación es ponerte al día y no solo utilizar una herramienta por tu comodidad. En esta ponencia Nora Ferreirós habla de esto que te digo y creo que es importante ver su punto de vista.

Pero también, hay que tener en cuenta algunas cosas:

Nativo

Como he dicho antes, instalar «una cosa de estas» mientras tienes bloques nativos que pueden hacer lo mismo, no tiene mucho sentido. Siempre digo lo mismo y no me cansaré de repetir:» Primero, utiliza lo nativo, si no lo hay, ya pensarás en otras opciones».

Experiencia de usuario

Por tema de experiencia de usuario, sin duda Elementor gana. En este caso el editor de bloques escasea un poco pero hay que darle tiempo y ver que pasa con el FSE y los patrones de bloques.

Rendimiento

Esta característica es una de las más importantes. Estos maquetadores visuales, ralentizan todos mucho más que si usamos el editor de bloques. Simplemente porque ya viene instalado en WordPress, si tienes que meter un plugin, ya es más peso para tu sitio web. Pero si encima ese plugin tira de un montón de peticiones de JS y tiene un montón de archivos de CSS, una liada.

Curva de aprendizaje

No voy de sobrada y te digo que he probado todos. Elementor es el que más me costó y nunca logré aprender (tampoco tenía mucho interés vamos a ser realistas). No sé si es que le tengo mucha manía, pero me parece muy complicado. Creo que el más sencillo de utilizar según mi punto de vista es WPBakery, y ahora, el editor de bloques con todas las actualizaciones que ha habido, también es muy sencillo de utilizar, al principio estaba muy verde.

Escabilidad

Para mi, lo más importante para escoger una herramienta, es la escabilidad del proyecto. Muchas de estas herramientas, si el proyecto crece, no lo puedes migrar, ni el contenido ni nada. Lo bueno del editor de bloques en este caso es que al final pinta HTML, por lo que puedes migrarlo para cualquier tipo de contenido y se seguirá viendo igual. Los maquetadores visuales tienen esta parte en contra, que casi todos te crean una dependencia a ese plugin-maquetador por lo que si quieres cambiar de maquetador o cambiar al editor de bloques, pierdes todo el contenido.

Y pensemos una cosa, WordPress ha venido para democratizar la creación de contenido, si creas dependencias, mal asunto.

Estándares de desarrollo

Ni todos los plugins de WordPress ni todos los temas cumplen con los estándares de desarrollo. En WordPress tenemos el handbook donde tenemos documentado todo lo necesario para desarrollar con WordPress.

Muchos de estos maquetadores no cumplen con esos estándares y hacen cosas que no necesariamente cumplen con las buenas prácticas en desarrollo de software. Algo muy importante a la hora de desarrollar.

Futuro de los bloques

¡Ay cómo nos gusta hablar del futuro! El futuro de WordPress, el futuro de las tecnologías, el futuro de la vida… Nos ponemos muy filosóficos y filosóficas últimamente. 🤔

FSE y lo que está por venir

Si, todo el mundo habla del FSE y lo que está por venir. Si has echado un vistazo al roadmap del equipo de desarrolladores de WordPress, verás que el FSE está a la vuelta de la esquina.

Yo siempre recomiendo cuando salen tecnologías o actualizaciones nuevas y tan importantes, pero al final, es esperar, y probar, probar en proyectos propios para ver cómo está y si te convence, ya lo pruebas para clientes. Pero de momento, yo lo dejaría madurar un poco.

Si tienes cualquier duda del editor de bloques (Gutenberg) de WordPress o el FSE te puedes poner en contacto conmigo o dejarme un comentario en el blog, que se agradece mucho.

Atribución imagen destacada: Canva

Otros post que te podrían interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Responsable: Marta Torre Ajo.
Finalidad: Los datos que te pido son los mínimos necesarios para poder responder a las consultas que realices.
Legitimación: Aceptación expresa de la política de privacidad.
Destinatarios: No cederé nunca tus datos a terceros, salvo obligación legal.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Información adicional: Puedes consultar la información detallada en este enlace.