Tutorial de WordPress Gutenberg

Que sepas que me dan exactamente igual el resto de editores visuales por 3 razones:

• Gutenberg es el editor visual nativo de WordPress (por lo que no tenemos que utilizar plugins extra para utilizarlo)

• Es totalmente gratis y muy sencillo de utilizar
• Si realizamos una instalación sencilla se pueden conseguir muy buenas métricas de rendimiento web

Que sepáis que solo nos ha llegado hate por los defensores acérrimos de Elementor, que no quieren cambiar su web entera porque es un drama y lleva muchas horas. Pero tu, personita que estás viendo esta entrada eres mi alumno o alumna y por eso estás aquí, para aprender a hacer las cosas fácil y bien.

¿Qué es WordPress Gutenberg?

Gutenberg es el editor de bloques nativo de WordPress. Nativo significa que viene con la instalación básica de este programa y que no tenemos que utilizar ningún plugin extra para utilizarlo. WordPress sacó este editor de bloques hace ya algunos años y no fue demasiado bien recibido por la comunidad. De hecho, el editor clásico tiene su propio plugin y es aún super popular. Si quieres probar Gutenberg sin necesidad de instalar WordPress puedes hacerlo desde esta URL tan guay.

Llevo utilizando WordPress desde 2007 aproximadamente y he visto cambios muy importantes en este CMS. Llegó un momento, sobre todo desde la llegada del responsive, que para diseñar una web un poco chula tenías que instalar si o si un editor visual. Esto era bastante engorroso, ya que los editores visuales no son compatibles con el sistema de maquetación de WordPress y, por lo tanto, cambiar de plantilla se hacía misión imposible. Pero espera, que esto me lleva al siguiente punto…

Ventajas y desventajas de utilizar Gutenberg

A lo mejor es tu primera vez haciendo una página web y ahora no te importa cambiar de plantilla porque estás empezando, pero créeme: dentro de 5 años te va a importar. Como bien dice Avinash Kaushik en su libro Analítica Web 2.0, Internet cambia en periodos de 6 meses. Eso significa que dentro de unos años la instalación de WordPress que hagas hoy se va a quedar obsoleta. Y, si quieres poder actualizar el sistema de forma sencilla, has de intentar que tu instalación sea lo más estándar posible. Y ahí es donde entra Gutenberg.

Si tenías tus entradas en el editor visual podías cambiar a Gutenberg con un click, pero si tienes tus entradas maquetadas con Elementor vas a tener que maquetar a mano. Por eso, que sea un editor visual nativo de WordPress es la primera y más importante ventaja de Gutenberg.

¿Qué otras ventajas tiene este sistema?

• Es gratis
• Es fácil de utilizar
• Puedes incluir cualquier elemento
• Carga más rápido que el resto de editores visuales

¿Qué desventajas tiene Gutenberg?

Tras haberlo utilizado durante 2 años con excelentes resultados SEO no se me ocurre ninguna desventaja. No obstante, si tu web está construida con cualquier otro editor visual vas a tener que remaquetarla a Gutenberg entera y eso si es un drama. Dependiendo del número y el diseño de las páginas puede llevarte muchas horas 😟.

Muchos profesionales son reacios a cambiar el editor visual por este mismo motivo. Si tu web es nueva ni te lo pienses, usa Gutenberg.

Tutorial para utilizar Gutenberg

Llegados a este punto entendemos que ya habéis instalado WordPress, os habéis encargado de la configuración inicial y tenéis un tema compatible con este editor visual. ¡Manos a la obra! Vamos a crear una nueva entrada y a ver como funciona el sistema de bloques, que seguro que os mola.

Configuración antes de empezar

Cuando añades una entrada o página te saldrá una pantalla similar a esta. Lo primero que haremos será activar la vista de lista. Esto nos permitirá ir viendo los bloques conforme los vayamos añadiendo.

A la derecha, veremos 3 puntos y si hacemos clic aparecerá un menú emergente. Este editor nos permitiría cambiar al editor visual o de código y, más abajo, abrir el panel de preferencias.

En el apartado Bloques comprobaremos que todos están activados y por lo tanto podemos utilizarlos desde el editor visual.

Lista de bloques por defecto

Cuando le damos al + a la derecha se nos abrirá la lista de bloques disponibles. Si le damos a Ver todos veremos todos los bloques de los que dispone el sistema.

Esta es una lista de algunos de los bloques de Gutenberg por defecto:

• Texto
  • Párrafo
  • Encabezado
  • Lista
  • Cita
  • Clásico
  • Código
  • …
• Medios
  • Imagen
  • Galería
  • Audio
  • Fondo
  • …
• Diseño
  • Botones
  • Columnas
  • Grupo
  • …
• Widgets
  • Archivos
  • Calendario
  • Lista de categorías
  • HTML
  • Últimos comentarios
  • Últimas entradas
  • Lista de páginas
  • Shortcode
  • Iconos sociales
  • …
• Tema
• Incrustados
  • YouTube
  • Twitter
  • Entre muchos otros

Configurar los bloques más utilizados

Como podéis observar, la lista de bloques es infinita y seguro que no los utilizáis todos. Lo más común es añadir:

• Párrafos
• Encabezados
• Listas
• Algún shortcode para añadir funcionalidades extra (aunque muchos plugins están incluyendo el bloque, ahora hablaremos de ello)
• Incrustados (en especial vídeos de YouTube)
• Imágenes
• Botones
• Iconos sociales

Al seleccionar cada uno de los bloques se nos abrirá un panel de configuración de opciones en la parte superior y en la parte derecha. Por ejemplo, si seleccionamos el bloque de párrafo podremos cambiar la alineación, si queremos añadir negritas, enlaces, el color y la tipografía:

Si seleccionamos el bloque de encabezado podremos seleccionar el tamaño del mismo así como si lo queremos en negrita, con enlaces y también el color y la tipografía:

En listas podremos seleccionar si es ordenada o no ordenada y las mismas opciones de los bloques anteriores.

En el bloque de imagen podremos elegirla desde la biblioteca de medios, desde una URL o subirla desde nuestro ordenador.

El bloque de Botones nos permite seleccionar la alineación de los mismos y realizar ajustes de anchura.

El bloque de Iconos sociales nos permite añadir las redes que queramos junto con su enlace correspondiente.

Como podéis observar, cada bloque tiene unas particularidades distintas que aparecen tanto en la parte superior como derecha de la pantalla y los podéis adaptar a vuestro antojo.

Plugins para expandir Gutenberg

Además de todos los bloques anteriores, cada vez que instalemos un plugin en WordPress es posible que se nos añadan uno o varios bloques nuevos. Por ejemplo, si instalamos el plugin para formularios de contacto Contact Form 7, se nos añadirá un bloque nuevo con el que podremos incrustar formularios.

Existen además otros plugins para expandir el editor de bloques como GenerateBlocks que funciona con el tema GeneratePress. No obstante, si podéis evitar utilizarlos y dejar la maquetación lo más limpia posible creemos que es mejor para evitar futuras remaquetaciones como las anteriormente mencionadas.