Desde sus inicios WordPress ha incluido un editor clásico de texto que aunque bastante limitado permitía dar formato a un texto con las típicas herramientas de estilo y formato, además de la creación de enlaces o añadir imágenes. Tendrían que pasar unos cuantos años para que este Editor Clásico se convirtiese en lo que hoy llamamos Gutenberg, un editor y al mismo tiempo constructor avanzado, que puede aportar muchas ventajas a tu web en WordPress. Para entender qué es Gutenber y el cambio que supone, es necesario comenzar haciendo un breve repaso a la historia de WordPress.
Del Editor Clásico a Gutenberg
Desde sus inicios WordPress ha tenido un editor de texto similar a un notepad o editor de texto pero mucho más limitado. Con el tiempo dentro de este editor se fueron añadiendo funcionalidades como insertar shortcodes (pequeños trozos de código que por ejemplo te permitían crear un botón, u otro elemento), saltos de línea, y otras herramientas de formato. Sin embargo a lo largo de los años realmente no ha cambiado mucho este Editor Clásico incorporado en el propio WordPress.
Los constructores o maquetadores visuales en el ecosistema de WordPress
Con el boom de WordPress, empezaron a surgir empresas que vendían themes o plantillas con webs totalmente prediseñadas y muchos de estos themes fueron sustituyendo ese editor clásico y nativo de WordPress por lo que se conoce como constructor visual o «builder». En todo momento el editor clásico seguía existiendo en WordPress pero los themes lo sustituian por defecto por su propio constructor.
Los constructores son editores avanzados en los que no solo puedes crear una cita, una negrita o cambiar el color del texto sino que además te ofren herramientas avanzadas de maquetación como creación de columnas, botones, banners, timelines, carruseles de imágenes y una larga lista de funcionalidades prediseñadas. Todas estas funciones se pueden crear sin necesidad de programar y a golpe de clic de ratón, de una forma muy visual.
Algunos de los constructores más populares son Divi o Bakery Page Builder . Ambos plugins de pago que puedes instalar en tu WordPress y usarlos en las páginas o entradas que desees. Estos constructores además son incluidos en los themes o templates premium o de pago.
¿Porqué la mayor parte de constructores visuales no son adecuados para la maquetación de tu web?
Podría parecer que estos constructores son realmente una buena solución para crear webs de forma rápida y precisa sin embargo muchos de ellos tienen lo que se conoce como efecto lock-in. Si creas por ejemplo una página con un constructor de este tipo, y después quieres cambiar de theme, plantilla, deseas cambiar a otro constructor mejor, o simplemente el constructor deja de actualizarse, entonces tienes un gran problema. Si dejas de usar ese plugin, verás como entre tus textos y contenidos aparecen gran cantidad de tags y elementos de código que ese constructor usaba para que se viese bien tu web. Es decir que estos constructores añaden tags y elementos que al cambiar de theme o dejar de usar el constructor se convierten en ruido o suciedad dentro de tus contenidos. Los sitios webs están en una continua evolución, adaptándose fundamentalmente a los usuarios, sus comportamientos y a las nuevas tecnologías. No es buena idea usar tecnologías propietarias que no permitan que tu sitio web evolucione y por eso este desagradable efecto lock-in hace que tu web solo se vea bien con ese constructor concreto, si dejas de usarlo, tu web se convierte en un auténtico desastre.
Existen algunos constructores visuales como Elementor que si bien no tienen ese efecto lock-in, el código resultante es bastante complejo y se trata de una herramienta de pago anual. Dentro de los constructores visuales comerciales, nos parece sin duda la mejor opción para construir tu web.
¿Puede Gutenberg sustituir a los constructores visuales comerciales?
Rotundamente si, ahora mismo puedes tener prácticamente las mismas funcionalidades con Gutenberg que con cualquier Constructor comercial.
El 6 de Diciembre de 2018 se lanzó Gutemberg, un proyecto que venía gestándose desde hacía tiempo dentro de la comunidad WordPress.
Las ventajas de Gutenberg son las siguientes
- Al igual que WordPress se trata de un constructor visual gratuito de código libre, viene con la instalación de WordPress.
- Es un constructor sin efecto lock-in que además se integra dentro de las buenas prácticas y estándares del desarrollo web.
- Un constructor que permite customizar el aspecto visual de una web creada con WordPress sin necesidad de programar, mediante un sistema de bloques y de forma visual se van creando los diferentes elementos.
- Un constructor que es accesible tanto en su uso como en el código que genera. Accesible para todo tipo de dispositivos de hardware y de software.
- Es constructor modular que funciona mediante bloques, por ello también se le denomina Editor de Bloques.
Si bien Gutenberg se instala junto con WordPress y no es necesario instalar nada más, existe también un plugin oficial de Gutenberg en el que se van lanzando nuevas funcionalidades, bloques y posibilidades de maquetación, con el objetivo de probarlas antes de incluirlas en las nuevas actualizaciones de WordPress.
¿Qué puedo hacer con Gutenberg a la hora de crear mi web?
A nivel de página o de área de contenido realmente podemos hacer cualquier cosa que se nos ocurra a nivel gráfico. La evolución de Gutenberg ha sido muy rápida y está en continuo desarrollo, con cada nueva instalaciónd e WordPress se van añadiendo mejoras y nuevos bloques.
Como te comentaba, es un constructor basado en bloques, de tal forma que existe un bloque para crear un párrafo, otro para una cita, una lista, un vídeo, un slider, y cualquier tipo de elemento. Solo tienes que buscar el bloque adecuado y añadirlo al lugar que desees de tu página web.
Actualmente existen todo tipo de bloques para Gutenberg, muchos de ellos vienen con la instalación de WordPress y son totalmente gratuitos. Otros son añadidos de forma gratuita por otros plugins que instalas y también existen bloques ofrecidos por empresas especializadas en la creación de bloques especiales para Gutenberg.
¿Qué bloques puedo utilizar con la instalación de WordPress?
- Bloques comunes: Párrafo, Subtítulo, Encabezado, Imagen, Imagen de portada (cover image), Galería, Lista y Cita.
- Bloques de formato: Código, Clásico, HTML personalizado, Texto preformateado, Citas «pullquote», Tablas y Versos.
- Bloques de elementos de diseño: Botones, Columnas de texto, Separador, Opción de leer más y Columnas de diseño
- Bloques para incrustar contenido: Vídeos, Imágenes, archivos descargables.
- Bloques compartidos: se trata de bloques reutilizables y personalizables.
- Bloques de widgets
¿Qué bloques existen creados por terceros?
A pesar de que todavía hay gente reacia a usar Gutenberg, lo cierto es que es el futuro de WordPress, por ello muchos desarrolladores y empresas se han lanzado al mercado global para vender colecciones de bloques para Gutenberg con los que construir todo tipo de webs. Estos bloques se instalan a modo de plugin, una vez instalado, estarían disponibles para su uso en nuestro editor.
Atomic Blocks
El plugin Atomic Blocks creado por Array Themes te proporciona 11 bloques adicionales.
Kadence Blocks
Kadence blocks teofrece 6 bloques de diseños que puedes usar para tu propia web.
Advanced Gutenberg Blocks
El plugin Advanced Gutenberg Blocks ha sido desarrollado por Maxime Bernard-Jacquet e incluye 15 bloques adicionales. Con el siguiente vídeo te harás una rápida idea de las capacidades de cada uno.
Block Gallery
El plugin Block Gallery ofrece nuevos bloques con los que puedes crear galerías de imégenes personalizadas.
Bokez
Bokez es un plugin desarrollado por Delabon que te proporcina 14 bloques nuevos con los que puedes crear fácilmente una tabla de precios, mostrar fácilmente tus últimas entradas, compartir en redes sociales, etc.
Advanced Gutenberg
El plugin Advanced Gutenberg, desarrollado por JoomUnited incluye más de 20 bloques adicionales a tu editor.
CoBlocks
El plugin CoBlocks incluye 10 nuevos bloques en Gutenberg para profesionales del marketing de contenidos.
Stackable
El plugin Stackable desarrollado por Gambit Technologies seguramente es el que más bloques extra te proporciona: 24 y siguen aumentándolo.
Nelio Maps
Si necesitas insertar un mapa totalmente personalizado de Google en tu página o entrada, con el plugin Nelio Maps tienes muy buenas opciones.
Ultimate Blocks
Ultimate Blocks ofrece una gran variedad de bloques, algunos básicos y otros avanzados.
Colecciones de bloques proporcionados por plugins ya existentes
Los bloques a veces son proporcionados por plugins conocidos y necesarios para determinados tipos de webs. Es el caso de Woocommerce, un plugin básico para crear tiendas on-line con WordPress y que nos proporciona todo tipo de bloques para mostrar listados de productos, carruseles, carrito de la compra, ect.
¿Que podemos esperar de Gutenberg en los próximos años?
El nuevo editor de WordPress ha llegado para quedarse y cambiar la forma de trabajar con WordPress. De hecho ahora se está centrando en el aspecto gráfico y la funcionalidad de las zonas de contenido, sin embargo está ya en proyecto extender el uso de Gutenberg a la creación de cabeceras o headers personalizados, menús y footers o pies de página. Con todo esto ya no necesitaríamos más para customizar totalmente nuestra web.
Los constructores de themes ya estan cambiando para ofrecer themes adaptados a WordPress al mismo tiempo que nuevos bloques.
¿Como puedo probar Gutenberg?
Si desas probar Gutenberg, existe una demo on-line en la que puedes trabajar con el editor como si fuese en una web real desde la página Frontenberg. Ten en cuenta que en esta demo solo aparecen los bloques que vienen de serie con la instalación de WordPress, existen cientos de bloques que podrás añadir y que te permitirán crear todo tipo de sitios web.
Conclusión
Comenzar a utilizar Gutenberg es sin duda la mejor opción de cara al futuro de la creación web ya que se plantea como la herramienta definitiva para el diseño de tu web, dentro del ecosistema de WordPress. De hecho ya se ha convertido en un servicio muy demandado, el paso de sitios web creados con constructores visuales anteriores, al nuevo editor Gutenberg.
En definitiva Gutenberg aportará estándares, webs sostenibles en el tiempo, más rápidas, accesibles y además ya está democratizando el diseño web permitiendo que sin necesidad de comprar temas o plantillas premium puedas crear sitios web únicos.