Aunque Gutenberg ya lleva con nosotros casi un año, todavía hay algo de confusión con respecto a qué puede o no hacer y si es mejor o peor elección que otros maquetadores visuales.
En este tutorial veremos qué es Gutenberg, cuales son sus principales características y cómo funciona. Está actualizado con los cambios añadidos en la versión 5.5 de WordPress.
También veremos sus ventajas y desventajas con respecto a otros maquetadores visuales y veremos cuál es su rendimiento a nivel de carga de la página.
Si quieres aprender más sobre este editor visual, solo tienes que seguir leyendo 😉
Qué es Gutenberg
Gutenberg es el nombre del nuevo editor visual que viene integrado por defecto con WordPress (no hace falta instalarlo, aunque hay un plugin del mismo nombre para probar funciones beta).
Hasta la llegada de la versión número 5 de WordPress, se usaba el ahora denominado editor clásico, que nos permitía añadir texto y medios en una columna pero era bastante limitado por defecto «sin añadidos».
Para suplir esta carencia, han ido apareciendo numerosos constructores visuales que permitían manejar más de una columna y maquetar las páginas de una forma más visual pudiendo mover elementos.
Aunque este tipo de constructores afectaban de forma negativa a la velocidad de carga, el hecho de ser más intuitivos y versátiles hizo que mucha gente optara por ellos y se vio la necesidad de dar un paso adelante en la edición por defecto de WordPress.
De esta forma nació Gutenberg, que nos permite usar secciones con más de una columna, añadir y mover bloques de una forma más intuitiva e incluso hacer algunos ajustes sobre estos bloques sin tener que tocar código.
Bloques por defecto de Gutenberg
Cuándo instalamos WordPress y vamos a crear una página o entrada, veremos que nos aparece una pantalla de edición en la que poner el título y debajo podemos empezar a escribir o elegir un bloque para añadir.
Este editor con bloques es Gutenberg y si hacemos click en el icono +, nos saldrán bloques que podemos añadir. Por defecto veremos los más usados:
Pero si le damos a Ver todos, nos aparecerá una barra lateral izquierda que muestra todos los bloques que tenemos disponibles y un buscador de bloques:
Bloques de texto
Dentro del apartado Texto tenemos los siguientes bloques:
- Párrafo: Nos permite añadir un párrafo de texto simple.
- Encabezado: Nos permite añadir un título, desde H2 a H6.
- Lista: Nos permite añadir una lista como esta y elegir si queremos que sea ordenada (con números) o no ordenada (con puntos como en este caso).
- Cita: Nos permite citar un texto entre comillas y con algo de margen. El estilo dependerá del theme que utilicemos.
- Código: Nos permite añadir un fragmento de código para enseñar a los lectores de nuestra web, no se ejecuta, solo aparece el código sin llegar a interpretarse.
- Clásico: Este bloque nos permite usar el editor clásico, que era el que había antes de Gutenberg y que suele ser más cómodo si no queremos que al hacer intro nos cree otro párrafo diferente.
- Preformateado: Mostrará el texto dentro de un recuadro gris y si no se ha hecho un intro para pasar a la siguiente línea, aparecerá la línea a lo largo hasta el final (respeta los estilos del theme y pone una barra de desplazamiento).
- Párrafo de cita: Para citar frases, nos permite poner el autor de la frase debajo.
- Tabla: Nos permite añadir una tabla con un número determinado de filas y columnas.
- Verso: Tiene un formato especial para poesía o letras de canciones.
Bloques de medios
Aquí encontraremos bloques relacionados con imágenes, vídeos y audios:
- Imagen: Nos permite añadir un bloque de imagen que podremos subir o elegir entre las que hayamos subido.
- Galería: Una galería de imágenes que podemos seleccionar.
- Audio: Nos permite añadir un reproductor de audio.
- Fondo: Una imagen de fondo con un texto superpuesto.
- Archivo: Enlace de descarga para un archivo.
- Medios y texto: Un bloque de dos columnas que nos permite añadir un medio (imagen o vídeo) en una columna y un texto en la otra.
- Vídeo: Nos permite añadir un vídeo que hayamos subido, subir uno o incrustarlo desde una url.
Bloques de diseño
Estos bloques nos ayudarán con la maquetación y diseño de nuestra página:
- Botones: Nos permite añadir botones y definir su texto y formato.
- Columnas: Nos permite añadir un bloque con más de una columna.
- Grupo: Una agrupación de bloques, podemos agrupar bloques en un grupo y después añadir este grupo. Se puede compartir el mismo grupo de forma global y que los cambios afecten a todas las páginas que lo añadan.
- Más: Un botón de leer más.
- Salto de página: Hace una separación vertical para simular varias páginas dentro de tu entrada.
- Separador: Añade una separación horizontal entre elementos.
- Espaciador: Para añadir un espacio en blanco entre bloques. Nos permite ajustar su altura.
Bloques de Widgets
Aquí aparecerán los widgets que se puedan añadir también como bloques, el funcionamiento es similar pero, en lugar de añadirlos en áreas de widgets, los podemos añadir a nuestra página también:
- Shortcode: Nos permite añadir un shortcode, que es un atajo que ejecuta el código de una función PHP, muy útil para plugins que se ejecutan a través de shortcodes.
- Archivos: Muestra un listado de las entradas del blog clasificadas por meses.
- Calendario: Añade un calendario en el que se muestran las entradas del blog según su día de publicación.
- Categorías: Muestra un listado de las categorías del blog.
- HTML personalizado: Nos permite añadir código HTML, que se ejecutará en el resultado final de la página.
- Últimos comentarios: Un listado de los últimos comentarios que se han hecho en el blog.
- Últimas entradas: Una lista de las últimas entrada publicadas en el blog.
- RSS: Nos permite añadir un feed de entradas RSS o Atom.
- Buscar: Añade un buscador.
- Iconos sociales: Para añadir iconos de redes sociales con su correspondiente enlace.
- Nube de etiquetas: Muestra todas las etiquetas creadas en el blog en formato nube, destacando las que más menciones tienen en un tamaño superior.
Bloques de incrustados
Aquí nos aparecerá una gran cantidad de bloques que nos permiten incrustar en nuestra página elementos de sitios externos como por ejemplo Twitter, Youtube, Facebook, Instagram, WordPress.com, SoundCloud, Spotify, Vimeo o TikTok entre otros.
En estas capturas podéis ver todos los que hay a día de hoy en la versión 5.5 de WordPress:
Existen colecciones de bloques que nos permiten añadir más bloques y funcionalidades a Gutenberg. Si quieres que hagamos un ciclo o un tutorial sobre estas colecciones, puedes dejarnos un comentario debajo de la entrada ^_^
Gutenberg vs Elementor y otros maquetadores visuales ¿Cuál es mejor?
Dependiendo de lo que queramos hacer, los conocimientos de distintos lenguajes que tengamos (o no) y las funcionalidades que necesitemos, nos encajará mejor un maquetador u otro, por eso a continuación compararemos Gutenberg con Elementor para que puedas tomar una decisión.
Si lo que estamos buscando es una web ligera, que cargue muy rápido y no necesitamos hacer algo muy visual o necesite amplios conocimientos de código, Gutenberg es la mejor elección.
Todo lo que podamos hacer con Gutenberg y algo de código CSS, mejor que mejor.
Sin embargo si lo que estamos buscando es hacer una landing page o página que destaque por ser más visual, no nos preocupa tanto la carga de la página y necesitamos un maquetador más intuitivo para nosotros o nuestros clientes, Elementor puede ser mejor opción.
Puedes ver nuestra comparativa entre Gutenberg, Elementor, Divi y Visual Composer para más información y para ver por qué recomendamos Elementor por encima de otros maquetadores como por ejemplo Divi o Visual Composer 😉
Cómo es el rendimiento de una web que usa Gutenberg en comparación con otros maquetadores
Si usamos de referencia una página en la que usamos Gutenberg y el theme Astra, los resultados en Page Speeds serían los siguientes:
Rendimiento de Gutenberg en comparación con Elementor
Al añadir Elementor y crear la misma página con Elementor, la puntuación baja 34 puntos en móvil y 17 en ordenador:
Ventajas y desventajas de Gutenberg frente a otros maquetadores visuales
Las ventajas de usar Gutenberg en comparación con otros maquetadores visuales como Elementor son:
- Es mucho más ligero, como hemos visto más arriba.
- Al estar integrado en el núcleo de WordPress es la opción que mejor se integra con el mismo.
- Ya viene por defecto con nuestra instalación, por lo que no tendremos que instalar nada.
- La mayoría de plugins y themes ya vienen preparados para trabajar con Gutenberg, mientras que algunos es posible que no terminen de encajar con Elementor sin hacer algunos cambios.
Las desventajas de usar Gutenberg en comparación con otros maquetadores visuales como por ejemplo Elementor son:
- Es menos intuitivo y suele ser más difícil de entender.
- No puedes ver cómo va a quedar la página mientras la editas, solo verás una idea, pero el resultado suele variar un poco. En otros maquetadores como Elementor puedes editar al mismo tiempo que ves el resultado.
- No se pueden hacer páginas tan visuales por defecto, ni se pueden añadir animaciones y efectos de movimiento, aunque el hecho de añadir este tipo de elementos suele cargar la página, por lo que solo se recomienda para casos muy concretos y en la mayoría de los casos no lo necesitaremos.
- Es más difícil maquetar páginas y en ocasiones puede ser algo confuso mover o añadir nuevos bloques.
Conclusiones
Como hemos visto, Gutenberg es la opción más ligera para maquetar nuestras páginas y entradas y tiene la ventaja de estar integrado de serie con WordPress, por lo que no hace falta instalar nada extra.
Si tenemos algunos conocimientos de código CSS podemos sacarle aún más provecho a Gutenberg, pero si no, es posible que se nos quede más limitado que otros maquetadores y sea menos intuitivo, aunque a nivel de carga merece la pena el esfuerzo.
Si necesitas ayuda con el diseño de tu página web y quieres dejarlo en manos de expertos, puedes echar un ojo a nuestros servicios de diseño web y también a nuestros servicios de mantenimiento WordPress para mantenerla a punto 😉
Muchas gracias por el análisis.
Usar constructores hoy en día es luchar contra el propio WordPress, no solo por la reducción de rendimiento que tan bien expones, sino porque se opone al enfoque del CMS.
Gracias a ti por compartir tu punto de vista y por leernos!!!