¿Es Gutenberg el editor WordPress que sustituirá a los Page Builders?

5 min 10/05/2019

Gutenberg es el nuevo editor que trae WordPress por defecto (por si queda alguien en el mundo que no lo sepa). Es un editor muy criticado por la mayoría y amado por unos pocos. El motivo de tanta crítica, desde mi punto de vista, es el gran cambio tanto a nivel visual como a hora de trabajar con él.

Su funcionamiento se basa en bloques. Un bloque no deja de ser código ya formateado y empaquetado que se edita de manera visual. Otra ventaja de los bloques es que puedes organizarlos muy fácil con la función arrastre o pulsando en las flechas de subir y bajar que tiene cada bloque. La idea de estos bloques es poder hacer una página de manera visual sin programar.

De ahí mi pregunta, ¿es posible diseñar una página web atractiva con Gutenberg? ¿Es Gutenberg el editor WordPress que sustituirá a los Page Builders como Divi o Elementor?

Para responder a estas preguntas decidí diseñar mi propia página web con Gutenberg, que estaba hecha con Divi Builder, manteniendo exactamente el mismo diseño. Te cuento mi experiencia.

Te adelanto que al final del post hay una actualización con una visión muy distinta del 23/11/2019.

Kadence Blocks – Un kit de bloques para Gutenberg

La idea principal era usar solo los bloques que trae Gutenberg. Una vez que trae un bloque de columnas ya solucionaba muchas de las dificultades de maquetación que tenía el antiguo editor. Pero no fue posible. El motivo fundamental es que crear un una sección con una imagen de fondo con un color en transparencia (un overlay) era muy difícil. Habría que poner un div dentro de las columnas y maquetarlo para que creara el overlay y no acababa de conseguir los resultados esperados.

Buscando por Google encontré varias soluciones para crear columnas con un diseño atractivo. Yo me quede con Kadence Block que es un plugin que te añade varios bloques a Gutemberg muy interesantes para realizar un diseño profesional. Bloques tan atractivos como:

• Row Layout. Para crear filas con varias columnas. Le puedes dar estilo a cada columna desde los ajustes del bloque sin necesidad de CSS.
• Icon. Un bloque muy interesante que te permite elegir entre más de 1500 iconos.
• Advanced Button. Permite crear botones modificando el estilo fácilmente desde los ajustes.
• Spacer/Divider. Un interesante bloque para crear atractivos separadores.
• Advanced Heading. Permite crear cabeceras dándoles estilo desde los ajustes del propio bloque.
• Tabs. Permite crear las típicas pestañas tanto verticales como horizontales.
• Info Box. Crea una caja con un icono o imagen, título y texto. Es el típico módulo de anuncio en forma de resumen de ciertas características.
• Accordion. Crea una lista en formato acordeón. Idónea para la típica sección de FAQs.
• Icon List. Haz una increíble lista con iconos de manera fácil.
• Testimonials. Un bloque para testimonios. Clarito, no?

Recalcar, todos estos bloques los puedes personalizar desde los propios ajustes del bloque en cuestión que aparecen en el lado derecho. Con estos bloques y con un poco de imaginación puedes crear una página web profesional y creativa de manera visual (lo que venden los principales Page Builders).

Pero volviendo a mi caso particular, usé muchos de estos bloques, pero como quería hacer un diseño igual que el que tenía con Divi, tuve que recurrir a CSS, mucho CSS. Aunque esto ya me lo esperaba.

El tiempo de diseño de una página web con Gutenberg

Gracias a Kadence Blocks y a mucho CSS conseguí exactamente el mismo diseño, pero eso me llevó muchísimo más tiempo que con Divi. Un 30% o 40% por ponerle una cifra.

La principal razón, las facilidades que da Divi para duplicar contenido (ya sea copiar y pegar, duplicar, copiar estilos, etc). Y si, Elementor también tiene todas esas facilidades.

Otro motivo que ahorra mucho tiempo es la posibilidad de añadir código CSS en el propio módulo, cosa que en Gutenberg no se puede. Ni se puede dar mucho estilo en los bloques nativos, todo hay que decirlo.

Hablando de tiempos de ejecución, Divi o Elementor ganan por goleada.

Tiempos de carga de una página web con Gutenberg

Aquí si que tengo que decir que con Gutenberg bajaron los tiempos de carga de mi web bastante. Realmente ya la tenía muy optimizada. Midiendo en GTmetrix, desde Londres, me daba tiempos de entre 1 seg y 1,5 seg. Pero con Gutenberg esos tiempos bajaron al rango entre 0,5 seg y 0,8 seg. Aquí os dejo captura de los tiempos más bajos conseguidos con Divi y Gutenberg.

• 

• 

Pero más importante que los tiempos de carga, es la gran reducción del peso de la página y el número de consultas consiguiendo mejorar los resultados también en PageSpeed.

El mantenimiento de una página web con Gutenberg

Yo, como diseñador web, no tengo problema a la hora de modificar una web con Gutenberg. Pero de cara a que esas modificaciones las hagan mis clientes finales y sin conocimientos de programación, ya tengo más dudas. Tanto con Divi como con Elementor todo se realiza de manera visual. El resultado final después de aplicar los cambios es mínimo o ninguno. Con Gutenberg no pasa eso. Más aun si para maquetar hubo que meterle mucho CSS.

Mis conclusiones

Lo primero que tengo que decir es que pasé toda mi web a Gutenberg. Pero por una razón de ego personal!!! No por otra cosa.

Gutenberg tiene mucho potencial y puede llegar a mirar de tu a tu a grandes Page Builders. Pero tiene mucho camino por delante todavía. Y dudo que llegue a alcanzarlos siquiera por la simple lógica de que Gutenberg es código abierto desarrollado por una comunidad de voluntarios. No hay inversión en este proyecto. Divi y Elementor son de empresas privadas que de una manera u otra rentabilizan sus productos, pudiendo invertir mucho tiempo y dinero en mejorar sus productos.

Así que a la pregunta inicial ¿es Gutenberg el editor WordPress que sustituirá a los Page Builders?, mi respuesta es: a día de hoy NO.

Yo en mis diseños web seguiré usando Divi Builder, más aun si el presupuesto es bajo y la posterior administración la va realizar el cliente. Y si eres de los que haces tu propia web y no tienes conocimientos de programación, Gutemberg no es una solución, desde mi punto de vista. Creo que a los Page Builders aun les queda una larga y próspera vida!!!!

El desarrollo de Gutenberg y de plugins de bloques adicionales, ha avanzado tanto, que vengo aquí a contarte lo que pienso a día de hoy. Podría borrar lo anterior, pero prefiero dejarlo para que tú mismo compares.

A día de hoy creo todas mis webs con Gutenberg, o ya más conocido como el editor de bloques. Salvo petición expresa de los clientes, no me planteo usar en ningún momento ningún page builder. ¿El motivo? Gutenberg ha evolucionado mucho en estos últimos meses. Mover los bloques es mucho más fácil. Ahora tenemos el bloque Grupo, que te agrupa varios bloques para poder moverlos con facilidad o duplicar todo el conjunto.

Pero la mejora no viene solo de la mano de Gutenberg. Kadence Blocks, que es el plugin que uso para añadir nuevos bloques, ha mejorado considerablemente, añadiendo nuevos bloques y aumentado las facilidades para darle estilo a tu web desde el mismo editor sin necesidad de añadir CSS extra. Si hace unos meses te decía que podía crear el mismo diseño que tenía con Divi añadiendo mucho CSS, a día de hoy te digo que casi es posible crearla sin añadir ni una sola línea de CSS. De todos modos también te digo, raro es no tener que tirar de CSS para hacer un diseño profesional.

Retomando la pregunta ¿es Gutenberg el editor que sustituirá a los Page Builders como Divi o Elementor? A día de hoy, para mi ya los ha sustituido. Y si eres de los que no quieres tocar el código ni en pintura, te diré que también es posible. Es cierto que los Page Builders siguen siendo más fáciles de usar y dan un plus de funcionalidades, pero preguntate ¿vale la pena la inversión que tienes que hacer cuando Gutenberg viene en el core de WordPress? ¿Necesitas todas esas funcionalidades de los Page Builders para poder hacer tu web? ¿Necesitas una web eficiente, que cargue rápido y no dé problemas? Tu preguntate todo eso y muchos de los que estáis leyendo todo esto llegaréis a la misma conclusión que yo. I LOVE GUTENBERG ????.