Editor de bloques Gutenberg: De odiarlo a no poder vivir sin él

Antes de Diciembre de 2018 todos estabamos muy contentos con nuestro editor cásico. Este editor, no ha cambiado mucho durante todos estos años, en las versiones de WordPress anteriores a la 5.0 practicamente no cambió nada. Pero ese terrible Diciembre del 2008 apareció algo que todos teníamos un poco de miedo: Gutenberg.

¿Qué es Gutenberg?

Aunque hasta ese momento todos pensabamos que era un señor que escribia Biblias, empezamos a ver un poco de luz a lo que era el proyecto Gutenberg.

¿Y en WordPress?

Gutenberg es el nombre del editor de bloques, aunque Gutenberg es el plugin, a los que tenemos el editor en el core de WordPress, se le llama «editor de bloques». Espero que lo tengaís todos en el core, ya que sino quiere decir que no habeís actualizado desde la versión 4.9

Hubo un poco de #wpdrama por todo lo que se venía, se dijeron muchas cosas, que no se actualizara, que si los ecommerce iban a petar, que si iba a explosionar medio país…. Bueno, al final no fué para tanto.

Empezando con Gutenberg

Si quereis un tutorial paso a paso de cómo trabajar con Gutenberg, no lo vaís a conseguir. Pero os prometo uno en vídeo dentro de no mucho.

Para empezar lo mejor que podeís hacer es echar un vistazo a la crack de Celi Garoe que explica súper bien en la Meetup de Terrasa como empezar con ello:

Y aquí en su post: https://celigaroe.com/guia-gutenberg-para-dummies/

Mi experiencia

Empecé bastante reacia al cambio, la idea me parecía acertada pero no cómo se hizo, obligando a todo al mundo a usarlo si o si y muy rápido. No dejaron tiempo suficiente a los usuarios para convivir con ello, y es mucho cambio, tenían que haber dejado bastante más tiempo a los usuarios y no meterlo «con calzador».

Al final, todo el ecosistema de temas, plugins, y editores visuales iban a cambiar.

Hay un par de opiniones que me marcaron mucho desde el principio:

• Tenían que haberlo dejado como plugin y el que lo quiera usar, que lo active.
• Evolución. Si Gutenberg esta en el core, la evolución será mayor.
• Mezclar la parte visual con el contenido (entradas) nunca me parece buena idea. Lo «bueno» de los constructores visuales es que tu podías elegir que solo se usaran para páginas estaticas que era el cometido real de esto y mezclar el tema visual entre páginas y entradas no me gustó (ni ahora tampoco).

En verdad son tres, pero hay dos que se contradicen. Pero en mi opinión, tendrían que haberlo dejado mucho más tiempo como Plugin y ver la experiencia de usuarios y escucharlos, y ya luego meterlo en el Core. La evolución de Gutenberg dentro del core iba a ser mucho mayor, eso lo tengo claro.

Conociendo el editor de bloques

Con este nuevo editor de bloques tenemos varios tipos:

• Bloques comunes
• Bloques de formato
• Bloques de diseño
• Bloques de widgets
• Bloques de incrustado
• Bloques reutilizables
• Bloques personalizados

Bloques comunes

Este tipo de bloques son los que más utilizaremos para crear contenido, ya si lo queremos usar en entradas como la que estoy escribiendo ahora o para construir páginas:

• Párrafo
• Imagen
• Encabezado
• Galería
• Lista
• Cita
• Audio
• Fondo
• Archivo
• Vídeo

Bloques de formato

Esto con los tipos de bloques para dar formato al tipo de contenido que necesitamos:

• Código
• Clásico
• HTML personalizado
• Preformateado
• Párrafo de cita
• Tabla
• Verso

Bloques de diseño

Estos son esos bloques que se utilizan sobretodo para implementar, ese tipo de bloques los necesitaremos en muchas ocasiones, te lo digo yo:

• Salto de página
• Botones
• Columnas
• Grupo
• Medio y texto
• Más
• Separador
• Espaciador

Bloques de widgets

Estos son muy identificables, con esos bloques para añadir widgets o shortcodes. En este caso, los shortcodes creo que irán desapareciendo poco a poco.

• Shortcode
• Archivos
• Calendario
• Categorías
• Últimos comentarios
• Últimtas entradas
• RSS
• Buscar
• Iconos sociales
• Nube de etiquetas

Bloques de incrustado

En estos no voy a decir todos los que hay, porque es una lista bastante larga. Son para poder incrustar elementos que dependen de un servicio externo como pueden ser Youtube, Vimeo, Spotify, WordPress.tv, Instagram, etc…

Reutilizables

No son bloques que vengan por defecto, son bloques que te puedes quedar tu para utilizar más tarde. Es algo MUY MUY útil. Una de las funcionalidades que más enamorada me tiene.

Personalizados

Esto es lo que estuve probando durante todo este tiempo por mi cuenta y es lo que realmente me enamoró de Gutenberg.

¡¡QUE PUEDO HACER LO QUE YO QUIERA!!

La verdad que la primera vez que leí que había que ponerse con React, me acojoné bastante.

La curva de aprendizaje de React según mi punto de vista, es grande, pero si controlas algún Framework, no te es demasiado complicado.

Como yo tengo un día a la semana para formación, no me he ha sido demasiado complicado ponerme al día para poder realizar bloques personalizados de forma nativa, pero todavía estoy aprendiendo, así que no lo doy por hecho. Sigo aprendiendo. Lo bueno de hacer los bloques de forma nativa, es que el rendimiento del sitio web es mucho mayor, el código limpio, esas cosas que nos encantan a los desarrolladores.

Pero no siempre se puede. Esto es así. ACF se puso las pilas también desde que salió Gutenberg y creo que es uno de los plugins más necesarios para cualquier desarrollador en WordPress.

Con ACF se pueden realizar muy fácilmente bloques personalizados sin tener que saber nada de React. Para más info: https://www.advancedcustomfields.com/resources/blocks/

Mi razón real para amar Gutenberg

La verdad, que esto es complicado. Para mi esto es mi idea de negocio y de querer poder hacer las cosas lo mejor posible.

Por presupuesto y necesidades, muchas veces hago desarrollo con tema prediseñado, ya que a mi me va a salir menos horas de trabajo, y al cliente, por consiguiente, más económico.

Muchos de estos temas prediseñados, tienen su propio constructor visual, (que odio a muerte) pero al final ahorran muchas horas de desarrollo, y un desarrollo a medida no se lo puedo ofrecer a todos los clientes, ni por necesidades ni por tema ecónomico.

Y como todos sabéis, prefiero trabajar con constructor visual que sin diseñador, ya que para mi es necesario, es como si un carpintero entregase a un cliente una mesa sin dos patas.

Con Gutenberg en escena, tengo todas las partes para que salga un proyecto redondo, la parte de diseño, que me la da la diseñadora o diseñador con el que trabaje en ese momento, el editor de bloques, que puedo hacer practicamente todo, y maquetar en CSS, o crear bloques personalizados cuando el proyecto lo requiera.

Y a vosotros, ¿Os gusta Gutenberg?

Espero que os guste.

Imagen destacada: Canva.