Editor Gutenberg en WordPress - Tutorial completo

Si estás aquí es porque ya conoces Gutenberg, el nuevo editor de textos que comenzará a usarse en WordPress de forma nativa a partir de su versión 5.0, pero.... ¿Sabes cómo utilizarlo?

En realidad es más sencillo de lo que parece, tanto que está destinado a simplificarnos la vida a la hora de escribir publicaciones (post) o páginas. Aquí te dejo una sencilla pero completa guía de uso y un vídeo explicativo.

¿Qué nos ofrece el editor Gutenberg?

Lo primero que podemos apreciar es la sensación de tener espacio, mucho más espacio que con el clásico editor de WordPress. Además, podemos ver un menú bastante más simplificado a nuestra derecha.

Dicho esto, todo parece indicar que en efecto, será un editor que nos facilite las cosas a pesar de que un principio nos pueda parecer confuso.

Utilización de Gutenberg paso a paso

Siempre digo que no hay mejor forma de aprender que viendo uno mismo cómo se hace, así que voy a crear un artículo sobre la marcha e iré comentando todo lo que hago y lo que podría hacer.

Vamos a dedicarle un par de minutos a esto, porque realmente merece la pena aprender a utilizar bien. Ya que es el editor que se usará siempre por defecto, de aquí en adelante.

Para empezar, haremos click en nuestro menú izquierdo de WordPress en la pestaña "Entradas" y luego en "Añadir nueva".

Cómo poner el título en Gutenberg

Nada mas intuitivo que escribir el título para nuestra entrada que hacerlo donde pone "Añadir título". Simplemente debemos hacer click con el ratón, escribir nuestro título y para finalizar hacer click fuera de ese área o darle a la tecla "Enter".

Introduciendo párrafos

Justo debajo del título podemos ver el texto "Escribe tu historia", haremos click sobre ese texto y comenzaremos a escribir algunos párrafos.

Una de las técnicas de posicionamiento en buscadores (SEO) consiste precisamente en que el primer o dos primeros párrafos, sean un breve resumen del contenido del artículo. Así que comenzaremos por eso.

Cada vez que pulses la tecla "Intro" se creará una nueva casilla de "Párrafos" donde podremos seguir insertando texto.

Fíjate que junto al párrafo salen unas flechas, con las que podemos subir o bajar de posición ese párrafo en concreto. Así podremos crear nuevos espacios entre párrafos para insertar imágenes, vídeos, etc...

En la parte superior de la pantalla y en el nuevo menú izquierdo, aparecerán más opciones de edición cómo el tamaño de la fuente, el color del texto, capitalizar o incluso añadir CSS personalizado.

Si hacemos click en los tres puntos verticales que aparecen a la derecha de cada bloque, se abrirán más opciones de edición que están ocultas en el resto de menús.

Insertando una imagen en Gutenberg

Haciendo uso precisamente de las flechas de los párrafos, he dejado un huevo entre el primer y el segundo párrafo. Donde ahora se puede leer "Añade texto o teclea...".

En vez de texto quiero añadir una foto, para aportar información visual al artículo y mejorar su estética. Para ello podemos hacer click en el "círculo redondo con el símbolo +" o en el icono de la imagen.

Este editor funciona mediante bloques, así que podemos insertar un bloque de texto (párrafos, contenido escrito) o podemos insertar un bloque de "Imágenes" o archivos multimedia.

Una vez insertada la imagen podremos centrarla con el menú superior, cambiar su tamaño con el ratón y la ayuda de esos "Puntos azules" o podremos añadir una leyenda bajo la foto (comentario).

¿Cómo añadir vídeos y otros medios?

La sencillez de este editor no deja de sorprenderme y más aun después de ver lo sencillo que es ahora insertar un vídeo de Youtube o Vimeo por ejemplo. Imaginemos que en vez de poder una foto quiero poner un vídeo.

Lo que haría es hacer click sobre el icono derecho de "Youtube" o sobre el el "Botón +" y luego seleccionar "Incrustados" y luego "Youtube".

Al seleccionar esta opción, desde cualquiera de sus atajos, aparecerá un recuadro donde solamente tendremos que poner la URL del vídeo de Youtube y darle al botón "Incrustar".

Añadir encabezados H2, H3, H4...

Al añadir un nuevo bloque, haremos click en el "Botón +" y la opción de "Más utilizados" haremos click en "Encabezado".

Al hacerlo, en el menú superior aparecerán las diferentes opciones de encabezado, para indicar si se trata de un H2, H3 o H4.

Podremos ver las mismas opciones en el menú derecho de Gutenberg.

Cómo establecer la imagen destacada

Otra de las muchas funciones que generalmente usamos al escribir un post y que ahora no están a simple vista, se encuentra oculta en el menú derecho del editor Gutenberg.

Simplemente debemos hacer click en "Establecer imagen destacada" y seleccionar o subir la imagen que queramos para nuestro artículo (esta es la imagen que se mostrará junto al artículo en la home o al compartir en redes sociales).

Cómo activar los comentarios

Nunca nada fue tan sencillo cómo activar o desactivar los comentarios de forma personalizada en nuestros artículos o páginas de WordPress.

Desde el menú de edición de Gutenberg, situado a la derecha de la pantalla accederemos a la pestaña "Comentarios" y desde ahí podremos elegir si activarlos o desactivarlos.

Por defecto estarán marcados cómo lo tengas configurado en las opciones generales de WordPress.

¿Cómo publicar con Gutenberg?

En la parte superior derecha de nuestra pantalla veremos el botón "Publicar", simplemente haremos click sobre el.

Cómo WordPress sabes que somos un poco zarpas, nos preguntará por segunda vez si queremos publicar. Confirmaremos pulsando nuevamente el botón "Publicar" y ya tendremos nuestro artículo online.

Es desde aquí desde donde podremos cambiar la fecha de publicación y el acceso (público o privado).

Click sobre la rueda

Al hacer click sobre la rueda de configuración situada sobre la parte superior derecha del editor, desaparecerá el menú derecho de opciones. Si hacemos click nuevamente, aparecerá.

Esto nos permite disponer de toda la pantalla para disfrutar de nuestro artículo, sin distracciones. Ya que cuando se redacta lo mejor es centrarse.

¿Cómo crear páginas con Gutenberg?

Exactamente de la misma manera que acabo de explicar para los artículos, la simplicidad es el objetivo de este nuevo editor de textos para WordPress.

No tendría sentido tener un editor diferente para publicaciones (post) y para páginas. Por eso se mantienen idénticos.

Alternativas a Gutenberg en WordPress

No te vuelvas loco si no te ha gustado el cambio al nuevo editor de textos, ya que podrás seguir usando el editor de textos antiguo sin ningún problema.

Simplemente debes instalar el plugin Clasic Editor desde el menú izquierdo de WordPress (Plugins-Añadir nuevo). Y al activarlo se activará el editor de siempre, con sus opciones de siempre.

También puedes descargar el plugin desde aquí y subirlo a tu web:

• Plugin WordPress Clasic Editor

Consejos

No dudes ni por un instante que merece la pena perder algunos días mientras nos acostumbramos a este nuevo editor. WordPress lo usará por defecto a partir de la versión 5.0 y tarde o temprano tendremos que aprender a usarlo.

En realidad es muy sencillo así que no te desanimes, en muy pocos días sabrás usarlo con los ojos cerrados.

[fusion_youtube id="https://www.youtube.com/watch?v=ss2dFnPomts" alignment="center" width="" height="" autoplay="false" api_params="" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" css_id=""][/fusion_youtube]

 

Si te ha quedado alguna duda, puedes dejar un comentario e intentaré ayudarte a resolverla.