Tutorial del editor Gutenberg para WordPress [Ebook + Video]

Guía tutorial de Gutenberg imagen de portada
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email
Tutorial del editor Gutenberg para WordPress [Ebook + Video]
5 (100%) 6 vote[s]

Hablar del editor Gutenberg para WordPress es hablar del presente y el futuro del gestor de contenidos más importante del mundo.

Ríos de tinta digital y miles de comentarios negativos (y positivos) inundaron en los últimos meses del año 2018 la comunidad de WordPress internacional.

Venía un nuevo editor que prometía poner patas arriba la manera que tenemos de incorporar contenido a nuestra página web.

Gutenberg estuvo a disposición de la comunidad en formato plugin durante mucho tiempo y el feedback fue realmente malo. Se reportaron muchos errores e incomodidades, pero en el ambiente también reposaba otra idea: el miedo al cambio.

Imagina la situación, millones de sitios web y miles de administradores cambiarán la manera que tienen de introducir la información en WordPress.

Cambian un editor clásico y con pocas posibilidades (pero al que ya estábamos perfectamente acostumbrados) a otro en formato bloques, unificado y con una capacidad de personalización mucho mayor (que es necesario aprender a utilizar).

Pero el nuevo editor de bloques de WordPress Gutenberg ya es una realidad y se incorpora por defecto desde la versión 5.0 de WordPress (6 de diciembre de 2018).

No hay posibilidad de oponerse a él por mucho tiempo.

Y sé que tú lo que quieres es saber cómo funciona, cuáles son sus posibilidades, opciones y capacidad de crecimiento.

Aquí te dejo mi pequeña aportación, un tutorial del editor de WordPress Gutenberg.

¡Adelante!

¿Qué es Gutenberg?

Gutenberg es el nombre que tiene el nuevo editor de contenidos de WordPress, que permite no solo la inserción de textos en las entradas del blog, si no la maquetación y la construcción de páginas sin necesitar nada a mayores.

Gutenberg permitirá a usuarios novatos o poco avanzados en el uso de WordPress y el diseño web construir páginas y blogs sin que esto suponga un gran esfuerzo, a base de añadir bloques sin la necesidad de programar.

Sí, a base de bloques. Porque Gutenberg no solo cambia la interfaz del editor y añade posibilidades y herramientas, también supone un cambio total en la manera de construir las páginas y las entradas.

Cada objeto será tratado como un bloque.

Cada título será un bloque, cada párrafo será un bloque, cada imagen será un bloque… son independientes, cada uno con sus opciones de configuración y muchos de ellos intercambiables.

Es la era del bloque.

Como escribe Fernando Tellado en ayudawp.com, WordPress en el futuro se podría llamar BlockPress.

Guía tutorial de Gutenberg pantalla general

¿Cómo es Gutenberg? ¿Qué partes tiene?

Como decía, Gutenberg viene a sustituir al actual antiguo editor clásico llamado TinyMCE. El cambio en la funcionalidad y la interfaz es total, por lo que voy a entrar en materia y revisar por completo todas las partes y funcionalidades para que no te pierdas nada.

Podemos distinguir 3 partes principales: la barra superior, la barra lateral y el área de contenido, que es el lienzo donde colocarás todos los bloques.

Barra superior

Se ubica en la parte superior y tiene los siguientes elementos.

Guía tutorial de Gutenberg barra superior
  1. Añadir bloque: como todo son bloques aquí puedes añadir el que sea necesario. Simplemente debes pulsar el botón “+” y seleccionar el que desees. Están ordenados por categorías.
  2. Deshacer y rehacer: funcionan igual que en un editor de texto. Puedes deshacer o rehacer los cambios.
  3. Estructura del contenido: en el botón de información puedes revisar información sobre el texto que estás insertando. Cuenta número de palabras, títulos, párrafos y bloques y muestra un esquema de encabezados H1 – H2 – H3…
  4. Navegación por bloques: lista de los bloques insertados que funciona como un ancla de menú. Al clicar encima de un bloque de esta lista automáticamente te lleva a él.
  5. Vista previa: esta opción sirve para ver en vivo los resultados que obtienes al ir construyendo la página. No es una opción nueva y ya estaba presente en el anterior editor.
  6. Publicar: otra opción también conocida. Si no pulsas en publicar, tu entrada o página será invisible para los usuarios que visiten tu web.
  7. Ajustes: permite mostrar u ocultar la barra lateral, de la que hablaré a continuación.
  8. Mostrar más herramientas y opciones: aquí podemos seleccionar diferentes maneras de ver el área de contenido, el editor, algunas herramientas u opciones extra.
    • Barra de herramientas superior: fija en la parte superior (al lado de la opción de navegación por bloques) las diferentes herramientas con las que podemos operar en un bloque. Si no activas esta opción, las herramientas se situarán arriba de cada bloque.
    • Modo enfoque: aplica una transparencia a todos los bloques excepto el activo, para que los puedas ver mejor.
    • Modo a pantalla completa: oculta la barra de administración de WordPress superior e izquierda para facilitar la visualización del área de contenido.
    • Editor visual y editor de código: según selecciones uno u otro podrás trabajar con los bloques o con el código HTML.
    • Gestionar bloques reutilizables: una herramienta muy potente de Gutenberg que permite cargar bloques previamente guardados. Si tienes un bloque o un grupo de ellos que utilizas mucho de una manera y con unas configuraciones determinadas, puedes guardarlos y utilizarlos posteriormente.
    • Atajos de teclado: una serie de combinaciones de teclas que hacen más rápidas algunas operaciones. Aquí puedes ver la lista de ellas.
    • Copiar todo el contenido.
    • Opciones extra.

Barra lateral

Otra de las partes fundamentales del nuevo editor de bloques Gutenberg de WordPress. En ella encontramos dos opciones perfectamente diferenciadas: Documento y Bloque.

Guía tutorial de Gutenberg barra lateral derecha

Documento

Como puedes comprobar las opciones son las mismas que se mostraban en el editor clásico de WordPress en el caso de que edites una entrada. Si estás editando una página las opciones serán menos y algo diferentes.

  1. Estado y visibilidad: una herramienta muy útil donde puedes indicar la visibilidad del post (público, privado o protegido con contraseña), día y hora de publicación (muy usado para programar la publicación. Por ejemplo, este artículo se programó para su publicación), pendiente de revisión por un editor o administrador, fijar en portada para que aparezca como post destacado y mover a la papelera.
  2. Revisiones: si la entrada se actualizó más de una vez aquí podrás ver los cambios.
  3. Enlace permanente: o slug. Es la parte que aparece a la derecha del dominio en la URL (por ejemplo https://www.anxosanchez.com/tutorial-editor-gutenberg-wordpress/). Puedes dejar que se establezca automáticamente o personalizarlo tu para que sea corto y legible.
  4. Categorías: como su nombre indica, aquí puedes seleccionar la categoría de tu post.
  5. Etiquetas: al igual que la anterior opción, puedes establecer las etiquetas de tu entrada.
  6. Imagen destacada: selecciona la imagen que se mostrará como destacada.
  7. Extracto: indica el texto que se utilizará como resumen y previsualización de la entrada.
  8. Comentarios: puedes permitir o no comentarios, pingbacks y trackbacks.

Bloque

Esta parte es dinámica y cambia según el bloque que hayas seleccionado y sobre lo que estés trabajando en el área de contenido. En él aparecerán diferentes opciones que tienes oportunidad de configurar para cada bloque.

Por ejemplo, si has seleccionado un bloque de párrafo, en esta barra aparecerá una explicación breve de lo que es el bloque de párrafo, ajustes del texto como tamaño de la fuente, la posibilidad de capitalizar la primera letra del bloque, color del texto y color del fondo del bloque y posibilidad de indicar una clase CSS adicional.

Área de contenido, jugando con los bloques de Gutenberg

Visto todo el nuevo interfaz, voy a hablar en este tutorial sobre el nuevo editor de bloques Gutenberg para WordPress de algunos de los elementos que puedes incluir en el diseño de tu entrada o página.

Ten en contra que algunos están más indicados para maquetar páginas “estáticas” cómo quien somos, la presentación de servicios o Landing Pages y otros están pensados para utilizar en las entradas del blog.

Pero en todo caso tendrás siempre todos a tu disposición.

Como añadir un nuevo bloque

Existen cuatro maneras de añadir un nuevo bloque.

En la barra superior puedes pulsar el botón “+”, como vimos anteriormente; situándote encima de un bloque podrás ver un botón “+”, pulsando INTRO (salto de línea) y haciendo clic en el botón “+” de la izquierda o escribiendo “/” aparecerá una lista donde puedes seleccionar lo que necesites.

Estos bloques estarán organizados en: más utilizados, bloques comunes, formatos, elementos de diseño, widgets e incrustados.

Guía tutorial de Gutenberg como añadir un bloque

Cada bloque tendrá unas opciones comunes y otras propias.

Entre las opciones comunes encontramos la posibilidad de ocultar ese bloque, duplicarlo, editarlo como HTML, moverlo arriba o abajo, guardarlo como bloque reutilizable, convertirlo a otro bloque compatible (esto es muy útil en el caso de convertir texto a títulos/encabezados o listas, pero debe haber compatibilidad entre ellos) y eliminar bloque.

Párrafo

El bloque de párrafo agrega texto a tu entrada o página.

Este será el bloque más utilizado en la mayor parte de tus proyectos web. Puedes configurar alineación, peso y tamaño, cursiva, tachado, insertar enlaces, color de texto y color de fondo.

Se puede transformar en un bloque encabezado, lista, cita, preformateado o verso.

Encabezado

Un bloque muy común. Coloca un titular donde desees.

Este bloque puede tener diferentes niveles (desde H1 hasta H6, aunque el H1 ya es el titular principal, por lo que no se recomienda utilizar más de uno). Puedes elegir su alineamiento, negrita, cursiva, enlace o tachado.

Puede contener un ancla de menú.

Se puede transformar en párrafo, cita o encabezado con imagen de fondo.

Imagen

Otro bloque muy utilizado que coloca una imagen subida desde tu PC, desde la biblioteca de WordPress o desde un enlace externo.

Esta imagen tiene varias colocaciones: derecha, izquierda, centro, amplio (se estira hasta tocar con las márgenes del contenedor de los elementos) y completo (se estira hasta los límites del monitor).

Se puede indicar el tamaño, predeterminado por WordPress o personalizado. Se puede indicar un texto alternativo (etiqueta ALT, recomendable), una descripción y un enlace al clicar en la imagen.

Este bloque se puede transformar en bloque de galería, fondo, archivo o medios y texto.

Galería

Este bloque permite incluir una galería con varias imágenes. Funciona de manera similar al bloque de foto.

Puedes ajustar el número de columnas que tendrá la galería, la posibilidad de recortar las imágenes al mostrarse y el enlazado que tendrán esas imágenes.

Según el número de columnas que se indiquen, las imágenes se adaptan automáticamente. Personalmente pienso que es un avance cualitativo respecto de cómo funcionaba la galería en el editor clásico.

Fondo

Este bloque está pensando para encabezados de páginas. Te permite poner una imagen o video de fondo (tanto alineada como a ancho completo) con un título por delante.

Puedes fijar el fondo para simular el efecto parallax y elegir un color de superposición (que se coloca entre la imagen y el texto para hacerlo más legible).

Lista

Un bloque de lista de elementos, numerados o sin orden, como las que utilizo en esta entrada varias veces.

Tiene opciones semejantes al bloque del párrafo y se puede transformar en él y en el bloque de cita.

Cita

Un bloque clásico que se utiliza para resaltar una frase célebre de alguna persona o una parte del texto que estamos escribiendo.

Puedes elegir entre dos tipos de estilos y las opciones típicas del bloque de párrafo.

Audio

Un bloque que te permite añadir un pequeño reproductor para escuchar un archivo de audio que subas al WordPress sin necesidad de shortcodes o de utilizar otras aplicaciones externas como Ivoox.

Esta opción creo que es un avance interesante a respeto del anterior editor.

Archivo

Otro bloque que puede mejorar mucho la presentación y capacidad de descarga de archivos, como por ejemplo PDF’s.

Automáticamente genera un botón que permite la descarga, al que le puedes configurar el texto, el enlace al que apunta y el alineamiento.

Otros bloques

Te hablé en esta entrada de los bloques más comunes, pero existen muchos más que añaden una lista amplia de funcionalidades y opciones.

Si quieres ampliar alguna información, pásate por el video que hay al final de este artículo.

Y como no podía ser de otro modo, se publicaron plugins que añaden aún más bloques con funcionalidades perfectamente integradas:

  • Atomic Blocks: un plugin con más de 10.000 instalaciones que incorpora diferentes bloques que extienden funcionalidades a Gutenberg. Por ejemplo, bloques de testimonios, acordeones, llamadas a la acción, botones personalizables, etc.
  • Gutenberg Block: un plugin con más de 40.000 instalaciones activas y puntuaciones muy positivas. Está optimizado para el tema de WordPress Astra.
  • Stakable: otro plugin a tener en cuenta, con más de 8.000 instalaciones y una lista de bloques bastante amplia.
  • CoBlocks: por último, otro plugin que aporta bloques algo diferentes que los anteriores como por ejemplo una tabla de precios.

Hay muchos más, solo tienes que visitar el repositorio de plugins de WordPress.

¡La cuestión será probarlos!

Gutenberg VS constructores visuales

De un tiempo a esta parte una gran parte de los sitios web WordPress están construidos con los llamados constructores visuales.

Un constructor visual es un plugin que sirve para diseñar páginas web con WordPress, que provee de herramientas adicionales para mejorar la presentación de los contenidos y ampliar funcionalidades al tema que utilizas.

Un constructor ahorra tiempo y facilita la maquetación del sitio web. Esto no impide, ni mucho menos, programar ni insertar código a mano (sobre todo estilos CSS o PHP) que son necesarios para los diseños más avanzados.

Aun así, no son obligatorios, y WordPress por defecto incorpora un apartado de personalización.

Algunos constructores conocidos son Visual Composer, Divi, Beaver Builder, Thrive Srchitect o Elementor (el que utilizo yo para mis diseños profesionales).

¿Son rivales Gutenberg y Elementor (u otros constructores visuales)?

En mi opinión, no.

Al contrario, son perfectamente complementarios.

Existen bastantes diferencias entre unos y otros.

La más notable y visible para el usuario es que los constructores visuales suelen ser del tipo drag&drop (arrastrar y soltar), lo que permite ver los resultados en vivo, y Gutenberg construye la página en el backend (es decir, en el editor, en la parte de atrás).

Esto en sí puede ser una ventaja, pues facilita la inserción o modificación de código.

Gutenberg tiene otro punto fuerte. Al ser el editor por defecto y el estándar de WordPress ahora y en el futuro, todos los plugins se adaptarán a él. Es más, incorporarán la posibilidad de ser insertados como bloques pudiendo abandonar en muchos casos los shortcodes.

Esto es una auténtica revolución.

Pero también pienso que en este momento Gutenberg está aún a años luz de las capacidades que demuestran editores visuales como Elementor, que además publicó su propio plugin para poder ser utilizado como un bloque más.

Bajo mi perspectiva el diseño de las páginas se seguirá haciendo con los constructores visuales, mientras que el de las entradas se hará íntegramente con Gutenberg.

Así es cómo yo trabajo y así pienso que será en el futuro.

Guia tutorial gutenberg pdf

¡Descarga esta guía gratis!

Conclusión

Como pudiste comprobar a lo largo de este tutorial del editor de bloques Gutenberg para WordPress yo soy muy favorable a este cambio.

A pesar de mis reticencias iniciales, pienso que es un gran avance en las capacidades del editor, y para maquetar entradas o posts va a dar mucho que hablar.

Es rápido, es limpio y es útil.

Incorpora una gran cantidad de funcionalidades, muchas más que el editor clásico, que pueden ser ampliadas mediante la instalación de los plugins correspondientes.

En contraposición, pienso que Gutenberg aún está muy lejos de otros constructores webs y creo que la mejor opción es buscar sinergias y no competencia entre ellos.

Llegamos al final.

Espero que este tutorial de Gutenberg sirva para disipar algunas dudas y a continuación te dejo un video donde podrás ver de manera resumida lo que hemos hablado en este artículo.

Y se te gustó, nos leemos en los comentarios 🙂

PD: Por cierto, se que no debería decirlo, pero si quieres desactivar Gutenberg y utilizar el editor clásico simplemente tienes que instalar este plugin.

Comparte :)

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on telegram
Share on email

1 comentario en “Tutorial del editor Gutenberg para WordPress [Ebook + Video]”

Deja un comentario

¡Esto es para ti!