Mega guía Tutorial, para usar Editor Gutenberg WordPress: Qué es y cómo usarlo + VÍDEO

El editor Gutenberg es el nuevo editor por defecto de WordPress, incorporado al núcleo de WordPress a partir de la versión WordPress 5.0

Es el editor por defecto a utilizar en página y entradas del blog.

Vamos a analizar en este post muchos aspectos de Gutenberg como: qué es el editor Gutenberg, que ventajas e inconvenientes tiene, que puede aportar a quienes utilizan ya un page builder de calidad como es el Divi builder, cómo activar y desactivar Gutenberg, convivencia con el editor clásico, elementos de la interface de Gutenberg, cómo usar el editor de bloques Gutenberg para WordPress y más.

 

 

VER CURSOS

 

 

 

1.- Qué es el editor WordPress Gutenberg

 

El editor Gutenberg para WordPress es un page builder tipo backend, pero de tipo visual.

Es decir, el editor Gutenberg es un constructor tipo backend, ya que se trabaja desde la administración. Pero, es visual ya que podemos ver la construcción y cambios que vamos haciendo en tiempo real.

Utiliza el sistema de bloques, que es el sistema habitual de construcción de los pages builders o constructores de páginas. Estos bloques se gestionan a través del sistema: “drag and drop” (arrastra y suelta), sistema de uso habitual en la construcción de páginas con page builders o constructores.

 

 

 

2.- Lanzamiento del editor Gutenberg como editor por defecto de WordPress

 

El editor Gutenberg sustituye al editor clásico de WordPress a partir de la versión WordPress 5.0.

En cualquier caso, cómo veremos más adelante, también podremos utilizar el editor clásico siempre que queramos. Incluso, alternar entre ambos editores siempre que queramos.

 

 

3.- Ventajas e inconvenientes del editor Gutenberg frente al editor clásico de WordPress

 

La principal diferencia entre el editor clásico de WordPress y Gutenberg, es que Gutenberg incluye la construcción con bloques. Es decir, incluye un page builder por defecto en WordPress.

 

 

3.1.- Ventajas que añade el editor Gutenberg

 

i.- Construcción en columnas: a mi modo de ver, sin duda, la posibilidad de construir contenido compartimentado en diferente columnas, es la principal ventaja que incorpora el editor Gutenberg frente al editor clásico de WordPress.

ii.- Bloques básicos: El constructor Gutenberg incluye bloques básicos cómo el bloque botón, bloque separador, bloque espaciador y algún otro que antes era necesario añadir a través de un page builder o a través de shortcodes.

 

 

3.2.- Inconvenientes del editor Gutenberg.

 

i.- Dificultad con contenidos básicos: los contenidos básicos son más incomodos de crear con Gutenberg que con el antiguo editor de WordPress. Es decir, cuando vamos a crear un post compuesto solo por texto e imágenes en una sola columna, es mucho más práctico el editor clásico que el editor Gutenberg.

ii.- A años luz de un buen page builder: Seguramente Gutenberg no podrá sustituir al page builder de la plantilla que estemos utilizando, o el page builder que hayamos añadido a nuestro WordPress a través de un plugin. Ya sabéis que yo uso la plantilla Divi y el Divi builder. Gutenberg está a años luz del page builder de la plantilla Divi.

 

 

4.- ¿Qué aporta el editor Gutenberg si utilizamos una plantilla como Divi que ya tiene el mejor page builder?

 

Si utilizas la plantilla Divi y su potente page builder, como es mi caso, el editor Gutenberg te a aportar poco.

En el caso de crear una página siempre voy a utilizar el Divi Builder, pues sin entrar en detalles, está a años luz del editor Gutenberg.

En el caso de crear una entrada de blog, que de manera general no requiere apenas recursos, en la mayoría de ocasiones voy a preferir usar el editor clásico antes que Gutenberg, ya que, para añadir texto e imágenes en una sola columna el editor clásico es mucho más práctico.

Solo en el caso de querer crear un post con un contenido un poco más complejo que el habitual, en cuanto a maquetación, me podría ser interesante utilizar Gutenberg. Por ejemplo, querer implementar varias columnas en el post.

En definitiva, para los que usamos un constructor de calidad como el Divi Builder, Elementor u otros, Gutenberg nos va a aportar bastante poquito.

 

 

5.- Cómo desactivar el editor Gutenberg y volver al editor clásico

 

Si lo que quieres es desctivar Gutenberg y activar el editor clásico, te lo explico en este post + Vídeo: Desactivar editor Gutenberg de WordPress

 

6.- Convivencia del editor clásico de WordPress con Gutenberg

 

Cómo has visto en el apartado anterior, los dos editores de WordPress podrán convivir en nuestro sitio web.

De esta manera podremos utilizar el editor clásico de WordPress para los trabajos de maquetación más sencillos, como son los trabajos habituales de construcción de entradas de blog en WordPress, y utilizar el editor Gutenberg para tareas de diseño un poco más elaboradas.

Para trabajos de maquetación y diseño medianamente exigentes, Gutenberg se nos quedará pequeño y no tendremos más remedio que utilizar una page builder de calidad como el Divi Builder, Elementor u otro por el estilo

 

 

7.- Guía cómo usar el editor WordPress Gutenberg

 

 

Vamos a ver ahora, por fin, cómo se usa el editor Gutenberg. Para ello, vamos a separar el contenido de esta guía en dos partes. En la primera parte, analizaremos los elementos presentes en la interface o pantalla de gestión de editor Gutenberg. Posteriormente, en el segundo apartado, analizaremos el editor de bloques de Gutenberg.

 

 

7.1.- Guía elementos de la interface del editor Gutenberg

 

Vamos ahora a analizar los diferentes elementos que se muestran en la interface del editor Gutenberg.

 

 

7.1.1.- La barra superior de Gutenberg

 

En la barra superior del editor de Gutenberg encontraremos los siguientes elementos:

 

 

i.- Añadir bloque (icono signo + en un círculo): este icono sirve para añadir un nuevo bloque al contenido de la página. Al hacer clic, se abrirá un menú, con los diferentes bloques que podemos añadir, clasificados en grupos.

ii.- Deshacer (icono flecha izquierda): Este icono sirve para deshacer cambios

iii.- Rehacer (icono flecha derecha): Este icono sirve para rehacer cambios.

iv.- Estructura del contenido (icono con letra “i” en un círculo): este icono sirve para que el editor Gutenberg nos muestre la estructura del contenido que estamos creando: títulos H1…H6, número de palabras, número de bloques, párrafos, etc.

v.- Navegación por bloques (icono formado por tres puntos y tres líneas horizontales): al hacer clic en esta opción, se mostrarán los bloques que hay actualmente en la página. Si seleccionamos uno de ellos, iremos a la edición de dicho bloque seleccionado.

vi.- Opciones de edición de bloque: diferente iconos, que se corresponden con opciones de edición del bloque que estamos editando.

Es decir, son opciones contextuales de edición de los bloques de Gutenberg. Aquí se mostrarán unas opciones u otras, dependiendo del bloque que se esté editando. Estas opciones de edición de bloque solo se mostrarán cuando estemos editando un bloque.

También es posible que estas opciones de edición de bloque se muestren directamente sobre el bloque que está siendo editado y no en la barra superior. Esta opción configuración la tenemos en la barra superior, en el icono de 3 puntos situado a la derecha de la barra. Concretamente, es la opción: “Accede a todas las herramientas de bloques y documentos desde un solo lugar”.

vii.- Solo guardar: guardar como borrador

viii.- Vista previa: vista previa de la página o post

viii.- Publicar: publicar post o página de WordPress.

ix.- Ajustes (icono engranaje): sirve para mostrar u ocultar la barra de menú lateral de opciones de Gutenberg (pestañas Documento y bloque).

x.- Mostrar más herramientas y opciones (icono 3 puntos): sirve para mostrar más opciones generales del editor Gutenberg

 

 

7.1.2.- El menú lateral de Gutenberg

 

En el lateral derecho de la interface del editor Gutenberg verás una barra lateral con dos pestañas:

i.- Documento: en esta pestaña de la barra lateral aparecerán las opciones generales de página como: visibilidad, url, selección categoría del post, etiquetas, configurar comentarios, asociar imagen destacada, etc. Todo lo que en el editor clásico aparecería en el lateral derecho y bajo el editor.

ii.- Bloque: en esta pestaña del editor Gutenberg se mostrarán opciones contextuales de edición de bloque. Es decir, se mostrarán opciones sobre el bloque que estemos editando en ese momento.

 

 

 

7.2.- Guía construcción con bloques del editor Gutenberg.

 

Para comenzar con la utilización de bloques del editor Gutenberg haremos clic en el icono “añadir bloque” con forma de signo “+” en un círculo. Este icono se mostrará en la barra superior del editor y en la misma pantalla de construcción cuando pasamos el cursor por un bloque actual.

A continuación nos aparecerán los diferentes bloques que podemos utilizar clasificados según su funcionalidad en diferentes bloques.

 

 

7.2.1.- Los bloques más interesantes del editor Gutenberg

 

Vamos a ver ahora, los que en mi opinión, son los bloques más interesantes.

i.- Bloque Columnas: sirve para añadir contenido en varias columnas. El bloque permite añadir entre 2 y 6 columnas de igual anchura.

ii.- Bloque Encabezado: sirve para añadir títulos o encabezados, usando las etiquetas HTML tipo H1-H6 correspondientes.

iii.- Bloque Párrafo: sirve para añadir texto con unas opciones básicas de edición. Cómo alineación del texto, negrita, cursiva, tachado e insertado de enlaces.

iv.- Bloque Imagen: Sirve para añadir imágenes.

v.- Bloque botón: Sirve para añadir botones con unas opciones básicas de edición como: 3 tipos de botones, color de fondo y color de texto.

vi.- Bloque clásico: este bloque nos permite añadir un bloque de edición de textos con las mismas herramientas de edición que poseía el editor clásico de WordPress, a excepción del botón de añadir imágenes.

vii.- Bloque YouTube: este bloque sirve para incrustar un vídeos de YouTube

viii.- Bloque separador: este bloque sirve para añadir una línea separadora, pero sin apenas opciones de personalización.

ix.- Bloque espaciador: este bloque de Gutenberg sirve para añadir una separación específica definida en píxeles.

 

 

7.2.2.- Opciones interesantes de edición de bloques con Gutenberg

 

A parte, de las opciones de edición específicas de cada tipo de bloque de Gutenberg, disponemos de una serie de opciones comunes a todos los bloques.

Estas opciones, las podemos ver haciendo clic en el icono de 3 puntos que se mostrará junto a las opciones específicas del bloque. Ya te he comentado, que estas opciones pueden aparecer en la barra superior o encima del bloque, dependiendo de cómo lo tengamos configurado.

Al hacer clic en este icono se nos mostrarán las siguientes opciones:

i.- Duplicar: esta opción sirve para duplicar el bloque que estés editando

ii.- Insertar antes: esta opción sirve para añadir un bloque justo encima del que estás editando actualmente.

iii.- Insertar después: esta opción sirve para añadir un bloque justo debajo del bloque que estás editando actualmente.

iv.- Editar como HTML: con esta opción, podrás ver y editar el código HTML del bloque que tengas seleccionado. Para volver al modo normal, tendrás que seleccionar: “Editar visualmente”

v.- Añadir a los bloques reutilizables: esta opción sirve para convertir el bloque que estés editando en un bloque reutilizable. Quedará guardado y lo podrás reutilizar.

 

 

 

7.2.3.- Mover bloques de Gutenberg

 

Para mover cualquier bloque generado con el editor Gutenberg para WordPress, lleva el cursor del ratón al lateral izquierdo del bloque que quieras mover.

A continuación, verás 3 iconos:

 

i.- icono flecha arriba: sirve para subir una posición el bloque que estés editando

ii.- icono 6 puntos: con el ratón sobre este icono podremos hacer clic en el botón izquierdo del ratón y seleccionarlo. A continuación, podremos editarlo o desplazarlo. Si lo desplazamos, tendremos que mantener pulsado el botón izquierdo del ratón hasta que lo tengamos en el lugar donde lo queramos dejar.

iii.- icono flecha abajo: sirve para bajar una posición del bloque que estemos editando.

 

 

 

8.- Opiniones sobre el editor Gutenberg

 

En mi opinión, para los que usamos page builders de calidad como es el caso del Divi builder que incorpora la plantilla Divi, pocas aportaciones nos va a dar el editor Gutenberg

Para lo único que podría servir, sería para crear entradas de blog con un diseño más complejo del habitual. Pero realmente, es raro tener que hacer una entrada de blog con un diseño que no se pueda hacer con el editor clásico de WordPress. Además, si ese fuera el caso, siempre se podría utilizar el Divi builder.

En el caso de personas que no utilicen un page builder, bien porque no lo incluya la plantilla que utilizan o porque no tienen ningún plugin de este tipo, el editor Gutenberg si podría servirles para dar un pequeño salto en la estructuración y maquetación de su contenido. Aunque, como ya he comentado en varias ocasiones, Gutenberg está a años luz de constructores como el Divi Builder.