¿Qué es el editor Gutenberg de WordPress? [TUTORIAL+REVIEW]

Fecha: 17/07/2018
Es probable que si eres usuario de WordPress o estás informándote para crear una nueva página web, hayas oído hablar de sus editores y, recientemente, del comentado proyecto Gutenberg: el nuevo editor de la plataforma WordPress.

Se dice que el editor de WordPress Gutenberg va a cambiar la forma de construir las páginas webs en WordPress, ya que es uno de los mayores cambios y novedades que ha lanzado recientemente el CMS, por lo que mejor no te quedes atrás para estar informado de ello.
Aprende de forma fácil cómo funciona Gutenberg, el nuevo editor de WordPress

Pero yo sé que por mucho que te cuente, lo que más te gustaría es ver en directo cómo funciona, así que sigue leyendo y no te pierdas este tutorial del editor de WordPress Gutenberg en español y con vídeo incluido.

Índice del artículo
  • Qué es Gutenberg
  • Cómo instalar Gutenberg, el nuevo editor de WordPress 5.0
  • Cómo utilizar el editor de WordPress Gutenberg 3.2.0
  • Barra de herramientas de Gutenberg
  • Bloques de Gutenberg: La nueva forma de maquetar
  • Bloque de párrafo
  • Bloque de encabezado
  • Bloque de imagen
  • Bloque de vídeo
  • Bloque de columnas
  • Rendimiento de Gutenberg
  • Ventajas y desventajas del editor de WordPress Gutenberg
  • ¿Vale la pena el nuevo editor de WordPress Gutenberg?

Qué es Gutenberg


El editor Gutenberg es un plugin que va a permitir la maquetación de páginas para que podamos construir nuevos proyectos web en la plataforma de WordPress 5.0.

Lo que permitirá Gutenberg es poder personalizar las páginas de nuestra web de forma muy sencilla a base de bloques que iremos añadiendo sin necesidad de tener conocimientos de código.

gutenberg wordpress

Básicamente es una adaptación del editor clásico a un editor backend más potente y adaptado a las necesidades de los usuarios.

Seguramente ahora te estén viniendo a la cabeza constructores como Elementor, Divi, Visual Composer o Thrive Architect (entre otros), y te preguntarás: ¿qué diferencia hay entre Gutenberg y otros maquetadores para WordPress?

Normalmente debemos comprar un tema o plantilla para crear una web en WordPress y luego construirlas con un maquetador, que si utilizas o has utilizado alguno como los ya nombrados, sabrás que son de arrastrar y soltar (drag&drop), y que te permiten ver el resultado al momento.
Quizás te pueda interesar: Cómo instalar WordPress

El problema viene cuando tenemos que modificar una página en el back-end de WordPress o a código, ya que si no tienes conocimientos avanzados es más complicado de hacer.

Lo que puedes hacer con el editor Gutenberg es construir las páginas mediante bloques desde el propio backend de WordPress de una forma muy similar a los ya conocidos constructores.

Puedes construir y ver el resultado de la página desde el propio back-end, lo que es una gran novedad para WordPress, y que podría llegar a sustituir en un futuro la mayoría de constructores que hoy en día usamos, siendo un problema para muchos y una ventaja para otros.

Pero bien, no me voy a posicionar aún sin haber visto el plugin Gutenberg de cerca, así que vamos a ver como se instala y un tutorial más a fondo.

Cómo instalar Gutenberg, el nuevo editor de WordPress 5.0


Primero de todo para poder utilizar Gutenberg en tu página web, es necesario tener el mejor hosting español (como el de Raiola) donde puedas alojar tu WordPress, y un dominio para tu página web.  

Una vez tengas todo esto, con la plantilla que nos proporciona el propio WordPress (o la que tú quieras tener en tu web) ya podemos instalar juntos el plugin de Gutenberg.

Esto es muy sencillo, lo primero que hay que tienes que hacer es ir a la biblioteca de plugins de WordPress y buscar “Gutenberg”:

instalar plugin gutenberg

Una vez lo tengas, deberás pulsar en “instalar ahora” y en “Activar”, ¡y ya estará instalado en tu WordPress este editor!

Cómo utilizar el editor de WordPress Gutenberg 3.2.0


Con el plugin de Gutenberg ya instalado podemos crear una nueva página o una nueva entrada de blog y comenzar a trastear con este nuevo editor.

Aquí tienes un vídeo para ver de forma más visual cómo funciona Gutenberg.

https://www.youtube.com/watch?v=GpUCO1FMwWo&feature=youtu.be

Barra de herramientas de Gutenberg


En este caso te voy a enseñar cómo está realizada la propia demo del plugin, que es una entrada de un blog, para poder ver en qué se compone la barra de herramientas y que veas cómo funciona.

editar gutenberg

gutenberg de wordpress

Como te comentaba antes, el constructor Guternberg funciona mediante bloques, por lo que tendrás que seleccionar el botón “+” de añadir bloque para añadir nuestras “secciones”.

nuevo editor wordpress

deshacer gutenbergEl editor permite deshacer los cambios realizados y rehacerlos de forma muy sencilla, ya que como si de un documento de Word se tratase, ha incluido dos botones para volver atrás y adelante.7

instalar gutenbergJusto al lado del botón “+” tenemos un botón de “información”, el cual te dirá la información general como el número de palabras de nuestra página, el número de encabezados, los párrafos y el número de bloques de la página que estés creando.

Además, mostrará la jerarquía de H que tiene de forma muy sencilla y visual.

maquetador wordpress gutenberg

usar gutenberg

A su derecha encontrarás las herramientas con la opción de “Vista Previa” con el que, como con otros constructores back-end, pulsandolo podrás ver los resultados de lo que vayas construyendo en la página.

utilizar gutenbergPero ojo, aunque pulses sobre vista previa, si no clicas en “Publicar” esta página no será visible para el resto de personas que entren en tu web, por lo que quedará en borradores y solo tendrán acceso a ella los administradores o usuarios con ese rol.

tutorial gutenberg

Si te fijas a la derecha, donde están las herramientas, tienes la opción de ocultar o mostrar más opciones para personalizar mejor la página.

como utilizar gutenberg

Como ves en la imagen, las opciones del documento que se muestran son las mismas que se mostraban en el editor clásico de WordPress por defecto, que en el caso de las entradas del blog serán las categorías, etiquetas, imagen destacadas, estado y visibilidad, etc.

Si abres una nueva página (que no sea una entrada del blog), las opciones cambiarán a: estado y visibilidad, imagen destacada, comentarios y atributos de página.

Pero ahora bien, si te fijas, al lado de donde pone “Documento”, encontrarás la sección del “Bloque”, que cambiará en función del bloque que tengamos seleccionado (ya sea un texto, imagen, vídeo, encabezado, etc.).

En este caso voy a pulsar sobre el bloque de la imagen para que veas que al seleccionarlo ofrece la posibilidad de modificar las personalizaciones de esta imagen principal del post, como es la opción de oscurecer o de hacerla fija, y además, una opción para añadirle su clase de CSS.

gutenberg

En el caso de que selecciones un bloque de texto, se abrirán otro tipo de opciones de bloque en el que aparecerá la opción de cambiar el tamaño de las letras, el color, etc.

wordpress gutemberg

videotutorial gutenberg

Por otro lado, si te fijas a la derecha del todo hay un botón con 3 puntos, y si lo seleccionas podrás cambiar y pasar del editor visual al editor de código en un clic, viendo así los códigos HTML de cada bloque generados.


<!-- wp:cover-image -->     <!-- /wp:cover-image -->


<!-- wp:paragraph -->       <!-- /wp:paragraph -->


<!-- wp:heading -->         <!-- /wp:heading -->


gutenberg

Además de esto, en estos tres puntos tienes la posibilidad de copiar todo el contenido por si luego quieres pegarlo en alguna otra página o entrada no tengamos que copiar el bloque de HTML completo como hacíamos en el editor clásico.

También encontrarás la opción de activar la opción de los consejos para que, cuando estés empezando a utilizar este editor de WordPress, puedas seguir las instrucciones del plugin Gutenberg.

guntenberg

Bloques de Gutenberg: La nueva forma de maquetar


Una vez visto el funcionamiento de las herramientas que facilita el editor, vamos a ver cómo funcionan los bloques de Gutenberg y extraer conclusiones sobre este editor de WordPress.

Lo primero que vamos a hacer es crear una página nueva en “Páginas”, “Añadir Nueva”, “Gutenberg”.

novedad wordpress gutenberg

Y una vez tengamos la página creada ya añadimos nuestros nuevos bloques pulsando al botón de +, como te he explicado antes.

El plugin ofrece una gran variedad de elementos que podremos incluir en la página, distribuidos en: Los más utilizados, los comunes, formatos, elementos de diseño, widgets e incrustados.

Aquí tienes un esquema de todos los que vas a poder encontrar en el editor Gutenberg 3.2.0.

bloques gutenberg

Si alguna vez has utilizado algún otro constructor de WordPress como es Elementor, verás que tienen un aspecto muy similar, salvo que en Elementor tendremos que arrastrar y soltar, mientras que en Gutenberg tan solo deberás pulsar para que se añada cada uno de los bloques automáticamente al final de la página.

Una vez añades cada uno se nos abren las especificaciones, como es en el caso del texto: las negritas, alineación del texto, enlaces, etc.

Si pulsas sobre los 3 puntos de los ajustes, se abren unas opciones muy importantes como son la de duplicar, editar como HTML (ese único bloque) o eliminar.

gutenberg espanol wp

Y estas opciones facilitan mucho la maquetación tanto de páginas como de artículos, ya que puedes duplicar cada una de las secciones que ya tengas editadas y sobreescribir, cambiando los textos o imágenes para no tener que añadir nuevos bloques.

Pero bien, vamos a ver algunos de los bloques más importantes para cuando te lo instales y te pongas a la acción con el nuevo editor de WordPress, sepas utilizar cada uno de ellos.

Bloque de párrafo


El bloque de párrafo del plugin de WordPress Gutenberg permite añadir texto y modificar su tamaño, colores, etc.

editor de gutenberg

gutenber org espanol

Una vez construyes el bloque, e incluyes el texto y lo personalizas, al pulsar sobre el elemento de párrafo, te dará la opción de transformar el bloque en otro del mismo estilo como en cita, encabezado, lista o subtítulo.

constructor wordpress gutenberg

Si pasas de un bloque de texto a una cita, quedaría de la siguiente forma:

wp gutenberg

Bloque de encabezado


Si lo que quieres es añadir algún título (H2, H3, H4…), no utilizarás el bloque de párrafo, sino que añadirás un encabezado y seleccionarás de forma muy sencilla el que necesites para cada momento de la construcción de la página.

que es gutenberg wordpress

que es gutenberg

Bloque de imagen


Podrás incluir imágenes en las páginas y alinearlas como en un Word.

Además, podrás especificar si la quieres a full width, thumbnail (150x150), medium, medium large o large; o incluso redimensionar la imagen al tamaño que busques.

Eso sí, te recomiendo que no redimensiones con el propio WordPress sino que optimices las imágenes antes de subirlas.

Aquí tienes una guía para saber cómo optimizar las imágenes.

gutenberg espanol

Bloque de vídeo


En Gutenberg tienes varias vías para insertar vídeos, que será a través del propio bloque de vídeo, mediante código HTML o incrustado a través de la propia plataforma (YouTube, Vimeo o la que esté disponible en las opciones de “incrustados”).

videos gutenberg

Bloque de columnas


En las opciones de texto tienes los bloques de columnas y de columnas de texto para poder distribuir el diseño web.

que es wp gutenberg

project gutenberg wordpress

Ambas son una opción muy buena para distribuir los contenidos, pero una vez lo visualizas en móvil, no se adapta por defecto, por lo que no son responsive y deberías modificarlas a código para que aparezca una columna arriba de la otra, es un gran inconveniente a recalcar.

Rendimiento de Gutenberg


Una vez vistos algunos de los elementos más importantes y que más utilizamos en la construcción de nuestras páginas webs, vamos a ver el rendimiento de este plugin y si el hecho de editarlas con él perjudica a la velocidad de carga o al Page Speed de Google.

He construido una entrada de blog con Gutenberg y otro exactamente igual con el editor de WordPress clásico, en un mismo theme (Twenty Seventeen), un mismo dominio y el mismo servidor (Raiola Networks) para comparar el rendimiento de ambos.

Los artículos contenían:

  • El título de la página.

  • Bloques de texto.

  • Bloque de HTML con un vídeo.


Una vez analizados y medidos con la herramienta Pingdom Tools, los resultados de rendimiento son casi idénticos, por lo que no afecta a la carga ni al peso de la página el uso de este plugin.

rendimiento gutenberg

Lo mismo sucede a ojos de Google, ya que midiendo el Page Speed de ambas páginas con Google, da una nota de exactamente lo mismo.

pagespeed gutenberg

Ventajas y desventajas del editor de WordPress Gutenberg


Llega el momento de mojarme y decir mi opinión, pero no te olvides de luego dejarme la tuya en los comentarios.

Te voy a hacer un listado de los PROS y CONTRAS que he visto de este editor, empezando por las ventajas de utilizar Gutenberg en WordPress que considero más importantes.

PROS:

Es muy fácil de utilizar, por lo que la curva de aprendizaje es más corta que la del editor clásico de WordPress.

Gutenberg es muy visual, intuitivo y limpio.

La opción de editar HTML de Gutenberg permite editar por secciones el código, siendo mucho más claro y evitando errores debido a su claridad.

Tiene una gran variedad de bloques para hacer atractivo nuestro diseño.

Incluye una visualización rápida de encabezados (H2, H3, H4…), algo que el editor clásico y otros constructores no incorporan por defecto.

Con la implementación de Gutenberg en tu WordPress no necesitarás instalar otro constructor para maquetar tus contenidos.

Gran adaptación a dispositivos móviles y tabletas.

Permite introducir elementos de otras plataformas web como YouTube o Vimeo de forma fácil y rápida.

El rendimiento del plugin es bueno tanto en ordenadores como en móviles, por lo que no ralentizará la web ni afectará negativamente su uso.

Pero bien, en el plugin Gutenberg de WordPress también encontramos grandes desventajas, por lo que es una buena ocasión para sacarlas a la luz.

CONTRAS:

Está aún muy lejos de otros constructores como Elementor o Divi, los cuales permiten personalizar mucho más nuestras páginas sin necesidad de saber código.

Podría ser incompatible con algunos plugins o temas de WordPress.

Las columnas no se adaptan bien a los dispositivos móviles o tabletas.

Todavía no está suficientemente desarrollado y en fase beta.

¿Vale la pena el nuevo editor de WordPress Gutenberg?


Creo que Gutenberg es un buen editor, pero muy lejos de lo que encontramos con otros constructores debido a la gran personalización que se puede hacer con ellos en nuestras páginas webs.

Es cierto que para hacer entradas de blog como la que hemos construido para el ejemplo está muy bien, ya que es un maquetador que se adapta a móviles, mucho más visual que el editor clásico de WordPress, y además no afecta al rendimiento.

Para maquetar este tipo de posts o entradas podría dar mucho que hablar, ya que como has podido ver, lo hemos hecho de una forma muy rápida y limpia.

Un elemento que destacaría, y que puede crear enemigos en el mundo del diseño de páginas web, es su facilidad de uso, ya que probablemente una persona sin conocimientos al llegar al editor de WordPress acabaría perdiéndose sin saber cómo llegar a maquetar una página, al contrario que con Gutenberg, que es mucho más intuitivo, lo que podría perjudicar a profesionales del sector.

Bueno, ahora llega el momento de saber qué opinas tú, ya que ha sido un tema muy debatido los últimos meses y me encantaría conocer tu punto de vista.

¿Has probado Gutenberg?

¿Crees que el editor de Gutenberg llegará a sustituir a los actuales constructores de WordPress?
Bego Romero
Bego Romero

Soy Bego Romero, diseñadora web especializada en WordPress. Ayudo a emprendedores y empresas a llevar su proyecto al mundo online para conseguir sus objetivos.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 17 comentarios en ¿Qué es el editor Gutenberg de WordPress? [TUTORIAL+REVIEW]

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Avatar del autor del comentario

Adela Ruiz ✉

18/07/2018 a las 20:30

Me parece un buen comienzo para la maquetación de entradas/post me animo a probarlo. Creo que está en fase beta pero con muchas posibilidades. ¡Gracias Bego y Raiola!

Responder
Avatar del autor del comentario

Bego Romero

19/07/2018 a las 10:04

Gracias a ti por comentar Adela. La verdad es que es un gran paso para WordPress, veremos como evoluciona con el paso del tiempo, ya que aún le queda bastante para alinearse con otros editores. ¡Un saludo!

Responder
Avatar del autor del comentario

Maria del Carmen González Beta

15/08/2018 a las 08:15

Además, por lo que veo no sólo te permitiría ofrecer un look diferente a las entradas también opciones para maquetar landing sencillas para aquellos que lo necesiten o no cuenten con un tema o herramienta más avanzada. Es un valioso avance en cuanto a depender cada día menos de recursos externos ...

Responder
Avatar del autor del comentario

Bego Romero

06/09/2018 a las 12:58

Gracias por la información Maria del Carmen. ¡Saludos!

Responder
Avatar del autor del comentario

Tino

18/08/2018 a las 10:08

Hola, preguntas; podemos seguir trabajando con el medidor que teníamos ? ¿Que les pasara si instalamos el nuevo editor a la entradas antiguas ya diseñadas ?

Gracias Bego

Responder
Avatar del autor del comentario

Héctor Luaces

20/08/2018 a las 09:19

Hola, Tino:

De momento puedes seguir trabajando con el viejo, pero en el futuro no vas a poder hacerlo de forma nativa, acorde a declaraciones de WordPress. Lo más probable es que cuando salga Guttenberg también salga algún plugin para "dejarlo como estaba" y que no pase esto, por lo que no me preocuparía.

No obstante, aclararte que en el futuro "todo" será Guttenberg. Incluso si haces una página con el editor normal, lo que va a pasar "por detrás" es que se va a crear un único bloque de HTML de Guttenberg y toda tu entrada irá ahí.

Lo mismo va a pasar si activas Guttenberg en un sitio en el que haya entradas antiguas. Al entrar a editar cualquiera de ellas lo harás con el nuevo editor y todo su contenido será un único "bloque HTML", por lo que no deberías tener ningún problema. Ten en cuenta que si usas otros editores visuales la cosa sí puede complicarse.

Cualquier cosa nos dices.

¡Un saludo!

Responder
Avatar del autor del comentario

Edú Calambur

28/08/2018 a las 03:33

Hola Bego:

Buen post para empezar a conocer Gutenberg.

Tengo una preocupación. Si uno empieza a armar un blog ahora, ¿ya no sería recomendable empezar a construirlo a base de Divi, Thrive Architect o Elementor?, ¿será mejor empezar a usar, en cambio, Gutenberg desde el inicio? Según lo que dices, si luego ya todo cambia a Gutenberg, el armar un blog desde 0 ahora con Divi u otro maquetador sería un posible problema para el futuro. ¿Qué piensas?

Responder
Avatar del autor del comentario

Bego Romero

06/09/2018 a las 12:56

Hola Edú,

Muchas gracias, de aquí a que Gutenberg esté a la altura de estos maqueradores que nombras falta muuuucho. Por lo tanto, yo seguiría con tu idea de constructor que más te guste. No creo que llegue a ser ningún problema, puesto que las otras empresas se pondrán más competitivas y a destacar sobre el de WordPress.

Espero haberte ayudado,
¡Saludos!

Responder
Avatar del autor del comentario

Edú Calambur

08/09/2018 a las 02:49

Sí, Bego. Seguiré tu consejo. Muchas gracias.

Responder
Avatar del autor del comentario

El viaje me hizo a mí

09/01/2019 a las 18:01

Hola Bego.

Yo solo tengo una página (la home) hecha con un constructor. ¿Cuando crees que llegará el momento de cambiar? ¿Funcionará ya si no es una página muy complicada? Tengo claro que más tarde o más temprano y para el uso que le doy quitarme de en medio el consumo de Trive Architect merece la pena.

Otra pregunta. ¿Sabes cual sería el proceso para migrar la página? ¿Se puede cambiar o habría que hacerla de nuevo?

Responder
Avatar del autor del comentario

Bego Romero

10/01/2019 a las 13:06

Hola!

Si ya tienes tu página hecha y te gusta, por ahora lo dejaría como está. Gutenberg aún no llega ni a la suela del zapato a otros constructores que estamos acostumbrados a ver (Divi, Elementor, Thrive...).

Si tienes un constructor ya instalado y tu página construida con este, una vez lo desactives se te va a borrar la configuración si trabaja con shortcodes y tendrás que volverla a hacer. Depende del caso.

Un abrazo!

Responder
Avatar del autor del comentario

Alex Estrada

15/01/2019 a las 01:10

Yo tengo un problema, tenia un plugin de shortcodes, para los post y ahora con la nueva actualizacion de wordpress no puedo hacer que me salgan de nuevo.... en el editor de entradas... como le hago? no le entiendo a esta nueva version

Responder
Avatar del autor del comentario

Bego Romero

15/04/2019 a las 12:07

Hola Alex, prueba a instalar el plugin de "Editor clásico" de WordPress y vuelve a probar los shortcodes en el HTML a ver si así te vuelven a funcionar. ¡Un saludo!

Responder
Avatar del autor del comentario

Vale

09/04/2019 a las 01:49

Sinceramente a casi nadie le gusta gutenberg, basta ver las opiniones negativas que tiene en el mismísimo sitio de wp.org, algunos usamos el plugin "disable gutenberg" yo de verdad hasta que no llegue a un nivel superior no lo usaré, se que para el 2022 será ya el editor definitivo, pero hasta plugins de seo tienen problemas en adaptarse y no se diga muchos themes
De todas formas Felicidades por tu post que es muy completo

Responder
Avatar del autor del comentario

Bego Romero

10/04/2019 a las 16:29

Solo hay que ver el número de descargas del editor clásico jajaja. Muchas gracias ;)

Responder
Avatar del autor del comentario

María José Díaz Ruiz

12/04/2019 a las 19:21

Hola, he actualizado a Wordpress 5.1.1 con el tema Avada y las páginas que tenía creadas anteriormente con el fusion builder ya no se pueden modificar porque me da el siguiente error: "Forbidden. You do not have permission to access this document."
Si deshabilito el fusion builder la página deja de verse correctamente en bloques, pero para poder editar tengo que desactivar los tres pluggins Fusion Builder, Disable Gutenberg y Editos clásico, es la única manera de que no me de el error; si habilito alguno de ellos me vuelve a suceder.pero si desactivo fusion builder la página no se ve correcamente.
He probado a crear una página nueva, en ese caso el fusion builder no da ningún tipo de problema para publicar o modificar, además me da la opción de publicar con cualquiera de los tres editores.
Todo este fallo se ha originado desde que he actualizado a la versión WP 5.1.1, en mi opinión el tema Avada no está haciendo la actualización correcta de las páginas existentes a esa nueva versión, sin embargo si funciona perfectamente cuando se trata de páginas nuevas.
¿Alguna idea de cómo solucionarlo?

Responder
Avatar del autor del comentario

Héctor Luaces

15/04/2019 a las 12:48

Hola, María José:

¿Qué versión de Avada usas?

Así como actualizas WordPress, necesitarás también actualizar el tema y el Fusion Builder.

En el peor de los casos contacta con su departamento de soporte para que te indiquen, puesto que las actualizaciones de WordPress suelen traer problemas (y requerir que pases a la última de Avada o apliques alguno de sus parches).

Un saludo.

Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *