Tutorial de Gutenberg para WordPress

Si has llegado hasta este artículo, es porque vas a utilizar WordPress para crear tu página web y seguramente hayas oído hablar del editor Gutenberg.

Este editor web es el oficial por parte de WordPress y ha ido teniendo varias actualizaciones y mejoras hasta llegar a ser una de las opciones más valoradas por los usuarios.

Allá por finales del año 2018 fue lanzado y a día de hoy cuenta con más de 300.000 instalaciones activas. ¿Por algo será, no?.

En este artículo tendrás a tu disposición un tutorial de Gutenberg WordPress completo y totalmente actualizado con los cambios y novedades de la nueva versión 5.0.

¿Qué es el editor de Gutenberg de WordPress?

El editor visual Gutenberg no deja de ser un plugin de maquetación de páginas para construir tu web con WordPress.
Nos encontramos ante el editor de WordPress que viene por defecto desde su nueva versión 5.0.

Se ha diseñado de tal manera que es accesible para cualquier usuario, desde el que abre por primera vez WordPress, hasta el profesional que lleva años con ello, ya que existe la posibilidad de editar con código.

La estructura es intuitiva, fácilmente se puede crear un blog o crear páginas sin necesidad de descargar más plugins, temas o añadidos.

En definitiva, si estás pensando en editar tu web y no quieres gastar dinero en un maquetador, el editor Gutenberg de WordPress es tu solución.

Cómo instalar el editor Gutenberg

Aunque actualmente para WordPress 5.0 sea el editor por defecto, puede que todavía no esté totalmente incorporado o no hayas actualizado tu WordPress. Por lo que si tienes alguna duda al respecto, lo más seguro y fácil es que descargues el plugin de Gutenberg siguiendo estos pasos:

• Abre el panel de administración de WordPress.
• En la columna izquierda dirígete a Plugins.
• Pulsa sobre Añadir nuevo plugin.
• Escribe: Gutenberg.
• Pincha en Instalar.
• Pincha en Activar.

Así de fácil, ya tendrías el editor Gutenberg funcionando.

Interfaz de Gutenberg

Antes de empezar, como con cualquier maquetador, hay que conocer unos principios básicos sobre su interfaz. Así evitarás confusiones y no perderás el tiempo posteriormente en aspectos fundamentales como editar las páginas o entradas.

Barra de herramientas

Cuando añades una nueva página o entrada, te aparecen muchas opciones a la izquierda, a la derecha, arriba o abajo.

En la parte de arriba encontrarás un icono con el símbolo de sumar, unas flechas, un icono de información, una nube, la vista previa, la opción de publicar y 3 puntitos. A esto se le llama barra de herramientas.

• Con la barra de herramientas puedes hacer lo siguiente:
• Añadir un nuevo bloque.
• Deshacer o rehacer los cambios que convengan.
• Ver un esquema o índice del contenido.
• La nube es para indicar el guardado automático.
• Ver la vista previa del contenido realizado.
• En publicación, puedes ajustar la fecha, hora o la visibilidad que le quieres dar.
• Cambiar de editor visual a código.
• Copiar todo el contenido.

Como ves, la barra de herramientas de Gutenberg es fácil e intuitiva.

Área de contenido

El área de contenido es principalmente donde vamos a crear el contenido. Aquí tenemos un sinfín de opciones.

Cuando se seleccione un bloque en el área de contenido, se desplegará una pequeña barra de herramientas donde podrás poner el texto en negrita, cursiva, incluir enlaces, etc.

Cada bloque tiene diferentes opciones de edición, ya que cada uno tiene unas funciones totalmente diferentes.

La Barra Lateral

La barra lateral se encuentra a la derecha del área de contenido. En ella podremos contar con los ajustes del documento o con los ajustes de un bloque específico seleccionado.

Bloques de Gutenberg para WordPress

En este tutorial de Gutenberg WordPress vamos a hacer hincapié en los bloques. Los bloques de Gutenberg te ofrecen todas las opciones necesarias para poder crear una web como un profesional.

Estos bloques son pequeñas cajas que se insertan en el contenido para editarlo visualmente y darle una funcionalidad a ese apartado concreto. Además, puedes duplicarlos, moverlos donde quieras o eliminarlos. Y por si todo esto te pareciese poco, si pinchas en los 3 puntitos dentro del bloque podrás ver aún más configuraciones que puedes aplicar.

Gutenberg tiene tantos bloques interesantes que te vamos a enseñar todos y cada uno de ellos, para que puedas explotar al máximo este editor visual.

Bloques Normales

Si nunca has hecho una web, puede parecerte un mundo. Pero estos bloques de Gutenberg al menos te sonarán, ya que son bloques de edición básica, como los que puedes encontrar en Microsoft Office Word.

Sirven principalmente para añadir o editar texto, imágenes o multimedia.

Bloque de Párrafo en Gutenberg

En este bloque podrás crear texto y posteriormente editarlo con la pequeña barra de herramientas, vinculando con enlaces, poniendo palabras en negrita, tachando o alineando el texto.

También cuentas con ajustes avanzados en la barra lateral, donde podrás seleccionar el tamaño de la fuente, el color del fondo o texto o incluso alinear los distintos bloques.

En el caso de ser un profesional o tener conocimientos de CSS, el editor Gutenberg cuenta con un apartado para añadir un CSS adicional a cada bloque.

Bloque de Encabezado

Los encabezados son los que marcan la jerarquía de etiquetas h1, h2, h3… para poder estructurar el contenido correctamente.

El bloque de encabezado contiene las etiquetas “h” y pueden ser personalizadas al igual que un texto o párrafo.

Bloque de Imagen y Vídeo

En este apartado podrás insertar cualquier imagen y editarla a tu gusto, alineándola a la derecha, izquierda o al centro, así como insertar un enlace en la imagen para que lleve a una página de destino. Además también puedes ajustar el tamaño de la imagen o vídeo.

Bloque de Columnas

Con estos bloques se te abrirán multitud de opciones, tanto de diseño como de organización. Podrás añadir diferentes bloques dentro del bloque de columnas e ir jugando con imágenes, texto o cualquier otro bloque.

No es recomendable añadir demasiadas columnas. Entre 3 y 4 como máximo sería óptimo, puesto que, a nivel de diseño no sería correcto.

Bloque Listas

Controlar este bloque es muy importante, porque siempre que queremos explicar algo y que se entienda claramente, hacemos uso de listas con guiones, puntos o enumerando por partes.

En Gutenberg tienes diferentes opciones para realizar una lista:

• Lista numerada.
• Lista normal.
• Ampliar o reducir sangría.
• Aplicar formato negrita, cursiva…
• CSS personalizado.

Bloque Cita en Gutenberg

Sirve principalmente para añadir y destacar una frase y poner el autor de dicha frase. O para hacer algún apunte concreto que quieras que tu lector vea con facilidad.

Bloque Cubrir

Con este bloque puedes poner texto encima de una imagen. Te parecerá mentira, pero este bloque no existía y era muy complicado poner texto encima de la imagen si no tenías conocimientos de HTML.

Ahora tendrás la opción de poner un titular grande en pantalla completa con una imagen de fondo.

Bloque de Archivo

Muy útil cuando quieres que el usuario descargue un archivo como un .pdf o cualquier otro. Su funcionamiento es parecido al de las imágenes o vídeos, tan sólo tendrás que subir el archivo y listo, tu usuario podrá descargarlo.

Bloques de Formato en Gutenberg

Los bloques de formato que vamos a ver en este tutorial de Gutenberg para WordPress son especialmente interesantes, ya que te permiten dar la forma que quieras al contenido, que normalmente se edita con código.

Es verdad que son bloques para personas con más experiencia en WordPress o con conocimientos de HTML o CSS. No obstante, puedes aprender las nociones básicas sobre ello y crear pequeños bloques de formato.

Bloque de Código

Sirve para poder mostrar snippets, es decir, pequeños fragmentos de código. Se utiliza sobre todo para añadir el fragmento de código que desees y que el usuario lo vea tal cual para poder copiarlo directamente en su web.

Este bloque puede usarse con cualquier lenguaje de código, ya sea HTML, JavaScript, PHP, CSS, etc.

Bloque de HTML Personalizado

Si eres de los que le encanta editar el contenido con HTML, este bloque de Gutenberg se convertirá en tu preferido.

A veces, editar toda la entrada con HTML puede llegar a ser cansado o no parecerte óptimo. El nuevo bloque de HTML personalizado de Gutenberg te permite editar bloque por bloque sin necesidad de editarlo todo del tirón y estar buscando por un mar de código.

Además, puedes ir viendo cómo va quedando visualmente el contenido redactado con HTML.

Bloque de Preformateado

El bloque preformateado es muy parecido al bloque de HTML, con la diferencia de poder añadir negritas, cursivas, enlaces, etc.

También es importante saber que no se utiliza la etiqueta.

Bloque de Tabla

No podía faltar este bloque, que al igual que el bloque de listas o columnas, sirve para organizar el contenido de manera visual y explicar al usuario de manera fácil un asunto importante.

No tiene mucho misterio, seleccionas cuántas columnas y filas deseas y ya puedes mostrar los datos que necesitas.

De momento no es posible sacarle el máximo partido, ni mucho menos es como un Excel, pero para mostrar algunas comparaciones sencillas o exponer ciertos datos básicos es idóneo.

Bloques de Diseño

Llegados a este punto del tutorial de Gutenberg para WordPress, vamos a ver los nuevos avances en el bloque de diseño desde el nuevo editor. Efectivamente, han incluido ciertas novedades que pueden ahorrarte verdaderos quebraderos de cabeza o al menos, mucho tiempo.

Bloque Salto de página

¿Alguna vez has entrado en alguna tienda online o blog y has tenido que ir a la segunda página?

Pues a eso se le llama salto de página y tú también puedes hacerlo gracias a este bloque de Gutenberg. Puedes seleccionar desde qué parte del contenido quieres que se cree una nueva página, a la que el usuario debe pasar para seguir leyendo.

Bloque Separador

En el WordPress 5.0 de Gutenberg, este bloque – como su propio nombre indica – sirve para separar a través de una línea una parte del contenido con la otra.

Bloque Espaciador

Si eres de aquellos que le parece feo usar el tabulador demasiado, este es tu bloque. Con él podrás crear un espacio entre un bloque y otro para mejorar exponencialmente el diseño de tu contenido.

¡Nunca más tendrás el contenido apelotonado!.

Bloque Botón

Este genial bloque es lo más parecido a un Call to Action (CTA) o llamada a la acción.

Puedes insertar un botón en cualquier parte del contenido y hacer que el usuario viaje a otra página gracias a un enlace.

El diseño de este botón dependerá mayormente del tema de WordPress que estés usando o de si sabes jugar con el lenguaje CSS.

Bloque leer más

¿Te has dado cuenta que has escrito demasiado?

Si te parece que es muy denso lo escrito, no te preocupes. Gutenberg te ha escuchado y ha puesto en marcha este bloque para ti.

Con el bloque Leer más, podrás marcar un límite en la parte del texto que desees y ponerlo visualmente como un extracto corto con la posibilidad de pinchar al botón de leer más.

Cuando el usuario pinche en leer más, se desplegará el texto restante.

Bloque de Medios y texto

Nos encontramos con el último, pero no menos importante, bloque de diseño del editor Gutenberg.

Si ahora mismo entras a cualquier web, seguro que encuentras bloques de medios y texto. Se trata de una genial manera de explicar visualmente algo con el apoyo de un texto.

Sólo tienes que añadir una imagen y, a la izquierda, derecha o debajo de la imagen, podrás poner un pequeño texto explicativo.

Cómo añadir más bloques en WordPress

¿Te han parecido pocos bloques?

La verdad es que en este tutorial de Gutenberg para WordPress hemos visto muchos bloques. No obstante, siempre queremos más y ver qué posibilidad hay de tener aún más opciones.

El editor de Gutenberg también pensó en ello, que a lo mejor necesitabas nuevas funcionalidades, así que aquí tienes algunos plugins disponibles para contar con más bloques:

• Gutenberg Blocks – Ultimate Addons for Gutenberg
• Advanced Gutenberg
• Stackable – Gutenberg Blocks

¡No te preocupes! Estos plugins son totalmente gratuitos y pueden ofrecerte nuevas funcionalidades, como por ejemplo, poner un mapa de Google en tu contenido o añadir un listado de precios.

Reutilizar bloques

¿Qué es esto de los bloques reutilizables? Pues si has llegado hasta aquí, acabas de descubrir una función especialmente única que ha incorporado Gutenberg en su editor.

Seguro que alguna vez has dedicado mucho tiempo en personalizar un bloque, colores, tamaño de texto, interlineado… y has querido duplicarlo. Con Gutenberg puedes utilizar la función de reutilizar el bloque.

Es como un portapapeles gigante donde puedes guardar todos los bloques personalizados, ponerles un nombre para tenerlos organizados, y reutilizarlos o duplicarlos en otras páginas o donde quieras.

¿A que es genial?.

Ventajas y desventajas del editor de WordPress Gutenberg

Si tras leer este tutorial de Gutenberg para WordPress todavía te ha quedado alguna duda sobre si usar o no este editor, voy a resumirte las ventajas y desventajas.

Ventajas de Gutenberg para WordPress

• Multitud de bloques editables.
• Puedes utilizar el editor clásico.
• Puedes hacer uso de Gutenberg aunque la web ya esté creada con otro editor sin que se rompa nada.
• Cada bloque tiene su propia configuración personalizada.
• Tienes un apartado donde Gutenberg te informará sobre los bloques utilizados, palabras escritas, total de párrafos caracteres y un esquema de encabezados.
• Es fácil e intuitivo de utilizar, no se requieren grandes conocimientos.

Desventajas de Gutenberg para WordPress

• Todavía falta mucho desarrollo para igualar a un maquetador profesional.
• No es compatible con algunos otros plugins de edición de contenido.

Conclusiones

El editor Gutenberg para WordPress ha desarrollado una actualización increíble desde sus inicios, ahora sí podemos decir que el editor por defecto de WordPress es útil y efectivo.

A pesar de ver tantos bloques y tantas opciones, cuando empiezas a utilizarlo, rápidamente tomas el control y te haces perfectamente con todas las funcionalidades.

En definitiva, Gutenberg ha llegado para quedarse y no cabe duda de que es una gran opción para llevar a cabo tu contenido y triunfar en las SERP de Google.

Te invito a probarlo y a jugar con todos y cada uno de los bloques que nos ofrece Gutenberg. ¡Te leo en los comentarios!

Puedes ver el video aquí: