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.

 

 

suscripción 10€/mes cursos joaquin barberá horizonweb

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.

 

¿Aún no conoces la mejor plantilla para WordPress? Mega guía Divi

 

 

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:

 

elementos de la pantalla del editor gutenberg de wordpress

Elementos de la interface del editor Gutenberg para WordPress

 

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 la