Imagen destacada del artículo sobre Gutenberg de WordPress

Haciéndome amigo del nuevo editor de WordPress: Gutenberg

Lo admito. Al principio, no sabía por dónde meterle mano al nuevo editor de WordPress, Gutenberg. Pensé que muchos estaríais en las mismas, así que me propuse crear este artículo explicando cómo podemos sacarle provecho.

Todo apunta a que este nuevo editor va a ser la única opción dentro de un tiempo, por lo que no nos queda otra que acostumbrarnos y comenzar a ser amigos de alguna forma.

A partir de la actualización de WordPress a su versión 5.0, tuvimos la oportunidad de instalarnos el plugin Gutenberg, que nos permitiría crear nuestros artículos de una forma que no era posible hasta ahora.

Ante la novedad, siempre hay varias posibles reacciones: que te guste, que no, que te sea indiferente, etc., y en mi caso, de momento, me gusta.

Creo que tiene mucho potencial y puede ser muy útil, pero hay que acostumbrarse, claro.

Y como el movimiento se demuestra andando, vamos a ir explicando cómo funciona este nuevo editor de WordPress.

Espera, ¿aún no tienes Gutenberg? Pues te cuento ahora mismo cómo instalarlo.

Si ya lo tienes y quieres saber cómo se usa, mejor que cliques aquí y te saltes esta sección.

Cómo instalar Gutenberg en tu WordPress

Si aún no tienes Gutenberg en tu CMS es posible que puedas descargarlo sin tener que hacer ningún esfuerzo en buscarlo desde la página principal de tu Admin de WordPress.

Ahí es donde lo encontré yo, pero es posible que debas buscarlo.

Imagen que muestra la posible descarga de Gutenberg desde WordPress

Gutenberg es un plugin, por lo que vamos a ir a buscarlo a plugins > añadir nuevo. En el buscador ponemos “gutenberg” y listo.

Clicamos en instalar ahora y lo activamos conforme lo hayamos instalado.

Ten en cuenta una cosa: cuando instales Gutenberg, a la hora de editar tu contenido, será el editor predeterminado. Si quieres usar el clásico, clica en editor clásico, como muestro en la imagen:

Elección del editor clásico a la hora de editar un artículo. Muestra listado de artículos en WordPress

En cuanto a esto, me ocurre algo raro, quiero suponer que debido a que el editor no está pulido del todo.

Si hoy quiero editar un artículo que creé hace unos meses con el editor clásico y lo abro con el nuevo, me aparece tal que así:

Muestra el editor Gutenberg descuadrado.

Si te ha pasado o sabes por qué puede ocurrir, escríbeme en comentarios, porque no le encuentro mucha lógica.

Qué es Gutenberg, el nuevo editor de WordPress

Gutenberg es un nuevo editor visual de WordPress cuyo objetivo y fin último es que la creación de páginas y entradas sea mucho más fácil para todos, de forma que crear diferentes layouts en una misma web sea coser y cantar.

Cuando creas o editas un artículo con el nuevo editor visual ya hay algo que te llama la atención, y es que es un editor por bloques, como lo son Visual Composer, Divi, etc. Maquetadores de páginas, vaya.

De hecho, con Gutenberg vas a poder crear páginas o entradas por bloques, al igual que con los constructores que acabo de comentar.

#Gutenberg quiere ser mi amigo, ¿le doy una oportunidad? Clic para tuitear

Ahí es donde reside la esencia de Gutenberg, en los bloques.

Supone un gran salto para WordPress, ya que es una evolución hacia lo que está dictando el mercado y, lo más importante, los usuarios.

Es posible echarle un vistazo al ejemplo oficial de Gutenberg.

Después de mucho toquetear me he dado cuenta de que sus opciones son muy interesantes, ya que nos pueden ahorrar mucho tiempo y esfuerzo a la hora de realizar según qué acciones, ya sea incrustar un vídeo, un fragmento de código, una cita, table, etc.

Y eso te lo voy a mostrar ahora mismo.

Bloques disponibles en Gutenberg

Estoy entusiasmado.

Muchas de las cosas que antes debía hacer con CSS, HTML o, simplemente, personalizando mi plantilla de WordPress, ahora se pueden realizar sin ninguna dificultad gracias a los bloques.

Lo esencial de los bloques es que los puedes modificar y mover hacia arriba o hacia abajo libremente.

Muestra las opciones particulares de cada bloque en el nuevo editor de WordPress.
Mover y otras opciones básicas

Es como el editor de Medium. Limpio y funcional, y por eso creo que me está gustando tanto.

De hecho, también LinkedIn ha adoptado un sistema similar para la publicación de artículos nativos desde tu perfil.

Aunque vamos a ver algunos de ellos, los bloques se dividen en las siguientes categorías:

  • Elementos integrados. Esta categoría incluye la imagen integrada.
  • Bloques comunes. Aquí encontraremos los bloques de párrafo, encabezado, imagen, galería, lista, cita, imagen de fondo, archivo, subtítulo, audio y vídeo.
  • Formatos. Dentro de esta categoría encontraremos los bloques de HTML personalizado, tabla, verso, código, clásico y preformateado.
  • Elementos de diseño. Botón, columnas, leer más, salto de página, espaciador y separador.
  • Widgets. Aquí habrá una mezcla de los plugins que tengas instalados, como en mi caso Click to Tweet, y otros genéricos como Archivo, últimos comentarios, últimos artículos y categorías.
  • Incrustados. Aquí tendrás una amplia variedad de aplicaciones desde las que podrás incrustar vídeos, GIFs, listas –por Spotify-, etc.

No me he parado a explicar todos los elementos, ya que lo mejor es que cacharrees y los pruebes por ti mismo.

Bloque de párrafo

Clásico. Aunque copiemos y peguemos, se crearán tantos bloques como párrafos haya.

En este bloque, lo que me ha llamado muchísimo la atención ha sido su capacidad de modificación.

Muestra las opciones particulares de un bloque de párrafo.

Poder cambiar el tamaño de la fuente, capitalizar la letra inicialque actualmente hago por CSS-, cambiar el color del texto o el fondo del bloque son las características que ofrece este nuevo editor.

¡La de posibilidades que ofrece eso!

Bloque de tabla

Insertar una tabla en un contenido ya es otra cosa. Olvídate de plugins y de código. Simplemente con elegir un bloque de tabla podrás crear una en nanosegundos.

Y editarla es fácil también, ya que podrás crearla y añadirle tantas columnas como filas quieras a posteriori, sin problema alguno.

Opciones de un bloque de tabla, pudiendo añadir o quitar filas o columnas libremente.

Bloque de HTML personalizado

Ahora, en el momento en el que estás escribiendo código podrás ver en directo cómo está quedando.

Todo esto gracias a la pestañita que ves en el GIF de debajo:

GIF que muestra el bloque de HTML personalizado y su posible visualización en vivo.

En el editor clásico era posible también, pero no se centraba en un bloque, sino en el contenido completo.

Estos son solamente algunos de los bloques que me han llamado la atención mientras escribía el artículo y mientras toqueteaba en su demo, que es accesible desde el plugin instalado.

¿Alguien ha visto dónde están las palabras que llevo escritas?

Antes seguramente teníamos localizadas las palabras que llevábamos escritas en un artículo. Estaban justo debajo del editor, pero ahora ha cambiado su ubicación.

De verdad, no lo encontraba y estaba empezando a ponerme nervioso, pero lo he localizado. Mira:

Panel de información donde poder observar el número de palabras del artículo y su estructura.

En el iconito de información podrás encontrarlo. Interesante, ya que te ofrece tanto el número de palabras del documento y su estructura.

Ya he escrito mi artículo. ¿Ahora qué?

Una vez que hemos terminado nuestro artículo tenemos que asignarle una categoría, ponerle etiquetas, una imagen destacada, un extracto, etc.

Eso lo haremos en la columna derecha, donde veíamos las opciones para cada bloque. Si cambiamos la opción bloque por documento tendremos la configuración del artículo.

Configuración general del artículo en Gutenberg, donde podremos programarlo, ponerle categoría, etc.

Además, aquí podremos programar el artículo, por lo que lo dejo listo para que lo leas justo cuando lo estás haciendo 😛


¿Qué te parece?

Ya digo, hay que acostumbrarse, pero considero que es un salto cualitativo a mejor.

Ante todo, me gustaría que me dejases tu opinión por aquí, hayas o no probado el nuevo editor, comentándome tus pareceres.

🙂

Quise ser periodista y acabé sacándome la carrera de Marketing. Nativo de las redes sociales, me encanta escribir sobre Marketing Online, lugares del mundo, tecnología y tendencias. No siempre voy con corbata.

4 comments On Haciéndome amigo del nuevo editor de WordPress: Gutenberg

  • Aisss el gutenberg, veremos si nos da dolor de cabeza o que, saludos

    • Veremos a ver Francisco! De momento creo que estoy familiarizándome bien con el nuevo editor… pero no es más que una versión inicial y quiero ver sus próximas actualizaciones aún.

      Un abrazo!

  • Novedades y más novedades, habrá que irse preparando, gracias por el post

    • Hola Melissa! Muchas gracias a ti por leer el artículo y comentar 😀

      La verdad que sí, muchas novedades vienen y estoy expectante por saber qué traerán y, sobre todo, cómo nos van a beneficiar (espero que así sea!)

      Un abrazo!

Deja una respuesta:

No publicaré tu dirección de correo. ¡Está a salvo de malhechores!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.