Gutenberg, el nuevo editor visual de WordPress

Post actualizado en abril de 2021

La creación de una página o un post en WordPress siempre ha asustado al usuario que desconoce la maquetación web. Generalmente para paliar este déficit (y, sinceramente, facilitar el trabajo incluso a los que sí entienden) se suelen instalar plugins, como Elementor o SiteOrigin, que añaden la posibilidad de maquetar la página con interfaces visuales o de bloques, pero suelen ser pesados y no acaban dando una solución ideal. Para solucionar este problema ha llegado Gutenberg, y no, no hemos revivido al famoso creador de la imprenta, sino que, desde la versión 5.0, es el nuevo editor visual de WordPress.

Índice de contenido

Instalación

Si cuentas con una versión de WordPress superior a la 5.0 ya cuentas con Gutenberg nativo, en una versión estable, y puedes disfrutar de el para construir cualquier página de tu web. De todas formas, si quieres ir más allá y tener la ultima versión de este constructor, debes instalar el plugin de nombre homónimo.

Para instalarlo en nuestro WordPress es tan sencillo como con cualquier otro plugin, vamos al repositorio de plugins y lo instalamos (También debemos acordarnos de activarlo).

instalar gutenberg

 

Diseño

Su principal característica es la limpieza, ya que elimina la distribución en dos bloques del antiguo editor. Estos antes se situaban en primer plano y ahora los reorganiza en cómodas pestañas.  Permitirá una mayor facilidad de uso a aquellos que les guste trabajar desde su portátil o, simplemente, tengan una pantalla de dimensiones reducidas.  Además, como buen editor, nos facilita la creación de contenido gracias a la cómoda distribución de los elementos por filas y columnas, lo que ayuda mucho a la hora de maquetar.

Diseño de Gutenberg

De todas formas, si no te convence y quieres volver al editor cásico de WordPress puedes hacerlo. Es tan sencillo como ir al buscador de plugins e instalar «Classic editor» y todo el panel de edición volverá a como era antes de WordPress 5.0

Editor clásico WordPress

Editor clásico de WordPress activo

Uso

Pero esto todo no vale de nada si no lo sabemos usar, así que vamos al meollo del asunto, ¿Cómo se usa? Es muy sencillo, casi como un juego de niños, simplemente tenemos que dejarnos llevar por la intuición.

Como añadir un elemento:

Si queremos añadir un párrafo, solo tenemos que darle al icono de + y saltará un desplegable que nos mostrara las diferentes opciones:

Añadir bloque en Gutenberg

 

Como modificar la posición de un bloque:

Cuando tengamos varios bloques y queramos modificar su posición, tenemos dos opciones. Mediante unas flechas situadas en la parte izquierda del bloque que solo nos permiten moverlos de uno en uno. O arrastrando con el ratón como en casi todos los constructores que están disponibles en el repositorio actualmente.

 

Mover bloques en Gutenberg

 

 

En el caso del párrafo nos permite hacer todos los ajustes que queramos, desde el tamaño de letra hasta el color de fondo. Esto nos evita tener que editar los estilos de la web.

Modificar bloque Gutenberg

Uso desde el móvil:

Por supuesto que para aquellos que deseen trabajar desde su móvil, ya por necesidad puntual o por gusto, Gutenberg está perfectamente adaptado a ello.

movil gutenberg

Organización:

A la hora de organizar el contenido, este editor cuenta en su barra lateral que nos muestra que es cada apartado con su categoría a la izquierda. Como si del inspector de cualquier navegador se tratase.

tabla de contenidos

Los bloques:

Una de las mejores virtudes de Gutenberg es que al pertenecer al ecosistema WordPress dispone de una gran cantidad de desarrolladores detrás. Una de las ventajas de esto es que permite añadir plugins externos que mejoren sus características, por ejemplo más y diferentes bloques. Uno de estos «plugins de bloques» es GenerateBlocks que añade lo justo para trabajar bien y rapido en la mayoría de situaciones.

GenerateBlocks

Con el podremos añadir bloques con más posibilidades de personalización de una forma muy sencilla. Desde crear bloques en los que podremos modificar todos sus márgenes, bordes, fondos… hasta un bloque de texto que nos facilita mucho el trabajo a la hora de ajustar tipografías y estilos.

Añadir bloque de GenerateBlocks

Modificar contenido en GenerateBlocks

En definitiva, Gutenberg incorpora muchas características que ya estamos acostumbrados a ver en la mayoría de los editores de la comunidad WordPress. Sus mayores bazas son la integración en la plataforma, ya que suponemos dará menos problemas a la hora de actualizarse, y su facilidad de uso.

¿Aún no tienes del todo claro cómo construir tu nueva web en WordPress? En este post te explicamos qué pasos seguir para conseguir que funcione a la perfección.

6 comentarios en “Gutenberg, el nuevo editor visual de WordPress

  1. ¡Genial! Este post me ha resulto unas cuantas dudas, había ciertas partes de todo este asunto que no me estaban quedando nada claras 🙂 Algunas cosas del mundo WordPress se me hacen cuesta arriba y no siempre es fácil dar con un post que vaya al grano y que aporte una solución que realmente funcione, ¿verdad? Pero ahora creo que ya lo he entendido todo, ¡te explicas de maravilla!
    Muchas gracias por tu ayuda 😀

Deja una respuesta

Abrir WhatsApp
1
💬 ¿Te podemos ayudar? 🚀
Hola 👋
¿En qué podemos ayudarte? Pregúntanos lo que necesites sin compromiso (incluido el nuevo Kit Digital 😉) 🚀