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.
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.
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.
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.
¿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
Deja una respuesta