Gutenberg para Wordpress, todo lo que necesitas saber sobre el nuevo editor

Si utilizas Wordpress como motor de la web de tu negocio, habrás podido darte cuenta de que el editor de entradas y páginas lleva muchísimo tiempo sin hacer ningún cambio, o con cambios mínimos. Pues esto va a cambiar con Gutenberg.

He de decir que bajo mi punto de vista el editor clásico ya se estaba quedando algo atrás, respecto a otras plataformas online como, por ejemplo, Medium. Y gracias a esto, muchas empresas han desarollado sus propios plugins para proporcionarnos editores más avanzados, más prácticos y más completos; por ejemplo, Thrive Architect, Elementor, Beaver o Divi, por mencionar algunos.

Ahora llega Gutenberg para Wordpress, pero…

¿Qué es Gutenberg?

Gutenberg no es solo un nuevo editor en Wordpress, es EL EDITOR de Wordpress.

¿Porqué? Pues porque Gutenberg sustituirá el tradicional y anticuado editor clásico de Wordpress.

Sí, efectivamente. Ahora mismo ya puedes comenzar a probar Gutenberg como un plugin más. El editor clásico se queda ahí, de momento no te preocupes.

Aunque con Wordpress 5.0 vendrá el cambio. Gutenberg pasará a ser el editor principal a partir de Wordpress 5.0 y el editor clásico pasará a ser el plugin.

Lógicamente, es de esperar que las novedades se vayan incorporando a Gutenberg y no al clásico editor. Veremos como el equipo de Wordpress maneja esto.

Pero… ¿Porqué el nombre de Gutenberg?

Bueno, el nombre viene de Johannes Gutenberg, inventor de la imprenta con teclas móviles alrededor del año 1450.

Bueno, yo creo que le viene como anillo al dedo, puesto que igual que el viejo Gutenberg (el inventor) revolucionó la imprenta con su invento, el nuevo Gutenberg (el editor de Wordpress) viene a revolucionar la forma en la que componemos nuestros contenidos dentro de Wordpress.

¿Qué hace especial a Gutenberg?

Lo que hace especial es este nuevo editor es que utiliza la metodología de bloques para maquetar la entrada o la página. Adaptándose de esta forma a la tendencia del mercado.

Los editores mencionados anteriormente comenzaron a utilizar esta forma de maquetar webs a base de bloques. Puesto que es más visual.

Esto de los bloques, puede resultarte algo abstracto si no has utilizado ningún editor que los use, pero es algo que no debes temer. Este tipo de editores visuales a base de bloques es muy sencillo de utilizar, y además es más practico (sobre todo si no tienes conocimientos técnicos).

Quizás el cambio pueda resultar algo difícil. Si ya estas acostumbrado a trabajar con el editor clásico, Gutenberg te parecerá extraño. 

Pero si ya has trabajado con algún editor de contenido que funciona con bloques no tendrás ningún problema para adaptarte a Gutenberg.

Ventajas de Gutenberg

Cabe destacar que el simple hecho de que Gutenberg exista, ya es una tremenda ventaja.

Y no solo porque te permita maquetar tus entradas de forma más cómoda, sino porque significa un paso adelante para Wordpress, una ruptura a un modelo que ya resultaba anticuado.

Pero empecemos con las ventajas:

• La edición de cualquier entrada o pagina se hace más visual, sin necesidad de plugins adicionales. Esto debería ahorrarte tiempo, de maquetar «a ciegas» una entrada para que quede a tu gusto.
• La modificación de las entradas es más fácil. Pudiendo de forma muy fácil reposicionar bloques según nos interese, haciendo clics de ratón. Sin necesidad de cortar / pegar.
• Duplicar contenido también es más fácil. Pudiendo hacerlo con un par de clics.
• Abre todo un abanico de posibilidades para que los creadores de plugins puedan crear sus propios bloques para Gutenberg. Por ejemplo, el plugin para comercio electrónico Woocommerce ya incluye su propio bloque que permite añadir artículos a cualquier entrada o pagina de forma sencilla y sin necesidad de usar ShortCodes. Solamente debes hacer clic en el bloque correspondiente y ¡Voila! tendrás un carrusel con los productos que quieras.
  

• Por fin tenemos columnas. Hasta ahora cualquier elemento (Que no fuese una imagen) aunque ocupara un 20% del ancho de la entrada dejaba un espacio en blanco a la derecha, por ejemplo un video, una ficha de producto, etc. Ahora podremos incorporar columnas para rellenar ese espacio en blanco.
• Un paso adelante para eliminar los shortcodes. Los que llevamos tiempo peleándonos con Wordpress, ya tenemos interiorizado esto de los shortcodes, pero para alguien que empieza puede ser difícil de asimilar que para meter el texto dentro de una cajita tengo que poner [cajita] Texto [/cajita]. A partir de ahora, los plugins deben adaptarse y en lugar de proporcionar shortcodes, o además, nos proporcionaran el bloque correspondiente.
• La experiencia de edición en móviles mejora enormemente. Ahora podrás modificar e incluso crear tus entradas directamente en tu teléfono (No es lo más cómodo pero si la inspiración te pilla sin otra cosa a mano…)
• Al menos por un tiempo, te dejarán trabajar con el editor clásico si no te aclaras con Gutenberg.
• Resulta mucho más cómodo copiar una pagina o una entrada, con la nueva función de «Copiar todo el contenido» de Gutenberg.
• Los plugins comienzan a adaptarse. Por ejemplo, ya se puede ver como Yoast SEO se ha adaptado en su ultima versión, haciéndose compatible con Gutenberg.

Ahora vamos con los inconvenientes de Gutenberg…

Desventajas de Gutenberg

Si, sé que muchos de estos inconvenientes de Gutenberg seguramente se vayan solucionando a medida que vaya evolucionando. Pero tengo que contártelo o reventaré.

• Es un cambio obligado, y me atrevo a decir que la mayoría de la comunidad es reticente a los cambios. Ya tienen su editor que funciona ¿Por qué cambiarlo?
• Se pierde el modo «Sin distracciones», al menos por ahora. Si, se que la interfaz de Gutenberg es más limpia pero, aun así, si estas acostumbrado a este modo, para que nada te distraiga de la redacción, lo vas a echar de menos.
• Aun faltan muchos plugins por actualizarse y adoptar Gutenberg, y esto puede mermar la funcionalidad de tu sitio web.
• Pasa lo mismo con algunos temas, en algunos casos al probar Gutenberg se ha descuadrado toda la web porque el tema utilizado no está adaptado. 
• Aunque el editor es mucho más visual, aún no muestra como quedará la pagina definitivamente, te dejo una imagen aquí abajo que ilustra lo que digo. Intenta buscar las diferencias.

• Algunos elementos están más ocultos. Te darás cuenta cuando quieras modificar el slug de una de tus entradas o páginas. [TIP: Solo tendrás que pulsar sobre el titulo de la entrada, no te vuelvas loco como me volví yo]
  
• Si no has trabajado nunca con este sistema de bloques, requerirá de una curva de aprendizaje más o menos severa.
• Algunos bloques aun no funcionan como debería, por ejemplo los incrustados o las columnas.
• La mayoría de temas no están adaptados todavía a Gutenberg, esto generalmente no es demasiado problema. Pero si hay algunos bloques que no se muestran como deberían porque el tema no proporciona el código CSS necesario.

Como instalar Gutenberg

Cabe destacar que Gutenberg vendrá preinstalado y como editor predeterminado en Wordpress 5. Ahora mismo puedes instalarlo como un plugin más y comenzar a familiarizarte con él.

Si ya has actualizado a Wordpress 4.9.8, verás que te ha aparecido un mensaje en tu escritorio de Wordpress. En este mensaje puedes instalar tanto el plugin de Wordpress como el del editor clásico de Wordpress (Este de momento no es necesario, pero lo será cuando Wordpress se actualice a su versión 5.

Si te ha aparecido este aviso y lo has descartado, no te preocupes, puedes descargar Gutenberg desde el repositorio de plugins de wordpress. Y también puedes descargar el editor clásico (Classic Editor) desde el mismo repositorio.

Una vez instalado y activado el plugin del nuevo editor de Wordpress, ya estará operativo y podrás empezar a jugar con los bloques.

Tutorial de Gutenberg

El primer paso tras instalar el nuevo editor es revisar la pagina de prueba que crea para que entiendas mejor el concepto de bloques y todas las posibilidades que te ofrece Gutenberg.

Aquí, en primer lugar lo que llama la atención es la limpieza de la nueva interfaz.

Luego, si pasas el ratón por encima del titulo, de cualquier párrafo de texto, de una imagen o de cualquier otro elemento verás que cada uno de esos elementos es un bloque. 

Un bloque que tendrás la capacidad de modificar independientemente del resto, y de cambiar a otro tipo de bloque.

Por ejemplo, podemos cambiar de un párrafo a un titulo. O de un párrafo a un listado de puntos.

Además, el bloque por defecto es el párrafo. Esto te permitirá una gran soltura a la hora de redactar tu entrada puesto que puedes dedicarte a escribir y escribir y cuando hayas terminado podrás darle el formato adecuado cambiando a otro tipo de bloque si fuese necesario.

Cabe destacar que si estás escribiendo y pulsas la tecla intro, se generará un bloque de párrafo independiente. Lo cual no es un problema porque te permitirá destacar un párrafo concreto, por ejemplo.

Pero si esto puede resultar un inconveniente para ti, puedes pulsar la tecla Shift (la de poner el texto en mayúsculas) a la vez que pulsas la tecla intro, y esto generará un retorno de carro (irá a la linea siguiente) sin generar un nuevo bloque de párrafo. Aunque debes tener en cuenta que el espacio producido entre párrafos no será el mismo que si se genera un nuevo bloque.

Los bloques

He aquí la característica estrella de Gutenberg. Como ya te he mencionado antes, los bloques cambiaran tu forma de maquetar tus entradas y el resultado de las mismas.

Pero veamos que tipos de bloques nos encontramos y que puedes hacer con cada uno de ellos:

Bloques comunes

Empecemos por lo básico, estos son los bloques indispensables para maquetar tus entradas, o paginas:

• Párrafo, como ya te he dicho, este es el bloque de texto básico y también el bloque predeterminado. Es el bloque que usarás cuando no sepas que bloque usar jeje
• Encabezado. Este bloque te permitirá poner títulos, además de anidarlos. De cara al SEO sabrás que el titulo del post es un encabezado H1. Así que los encabezados que pongas con este bloque serán como mínimo H2, y podrás anidar hasta H4, es decir, te permitirá anidar hasta dos niveles.
  Para que entiendas esto algo mejor podemos ver el ejemplo del cuerpo humano. 
  El propio cuerpo sería el H1, en un nivel inferior estaría por ejemplo, la cabeza, el tronco superior y el tronco inferior. Todos estos serian H2.
  Además podemos anidar en un nivel inferior a la cabeza, los ojos, la nariz, la boca… Estos serían H3.
  Y por último, dentro de la boca anidaremos la lengua, los dientes, etc. Estos últimos serian el H4.
• Lista. Es precisamente este bloque que estás leyendo ahora mismo. Que bien puede ser una lista desordenada, como esta, con puntitos.
  O una lista ordenada con números en lugar de puntos. Y te permitirá ordenar ideas de forma clara y bien separada.
• Imagen. Está claro, este bloque te permitirá añadir una imagen entre tu texto.

• Imagen de fondo. Este tipo de imagen especial, te permitirá añadir a la imagen elegida un texto superpuesto, como un titular o incluso una cita que quieras destacar.

• Archivo. Te permitirá añadir un archivo, que subas o hayas subido ya a tu Wordpress para que el lector pueda descargarlo. Es efectivo para cualquier tipo de archivo, es decir, si añades una imagen en este bloque, el lector no podrá ver la imagen sino descargarla directamente.

• Galería. Si podíamos añadir una imagen suelta, con este bloque podremos añadir una galeria de imágenes. Dando un resultado bastante atractivo.

• Cita. Permitirá añadir citas, frases que alguien haya dicho indicando también al autor de dicha frase. Por lo tanto este bloque tendrá dos lineas, una para la propia frase y otra para describir quien ha dicho dicha frase.
  También podrás dejar vacía cualquiera de las frases pudiendo destacar esa frase principal. Avisarte que el formato en como se visualiza esta cita, dependerá en gran medida de tema que utilices, y de como trate a este tipo de elemento
  

Esto es un ejemplo de Cita

Y

• Audio. Este bloque añade un reproductor de audio en tu entrada, cargando un archivo subido a tu wordpress.

• Subtitulo. Con este bloque podrás añadir apuntes a los encabezados antes mencionados. Tendrá el aspecto que puedes ver a continuación. ´Tendrás que usarlo sábiamente pues solo podrás añadir este bloque una vez por entrada.

Ejemplo de subtitulo

• Vídeo. Este tipo de bloque te permitirá cargar un vídeo a tu Wordpress y mostrarlo. Para mostrar vídeos fuera de tu Wordpress tenemos otros bloques que veremos después. ¿El principal problema?
  Que de momento, cualquier vídeo que incluyas de esta forma, se podrá descargar.

Formatos

Este tipo de bloques te permitirán añadir, como su nombre indica, un formato a tu entrada. Es decir, harán que tu entrada se vea distinta.

Empecemos con este tipo de bloques:

• Clásico. Agrega un bloque con el editor clásico, por si acaso no eres capaz de hacer algo con Gutenberg y no quieres maquetar toda la entrada con el editor clásico. Tendrás la oportunidad de maquetar solo una parte de tu entrada con este editor clásico y el resto hacerlo con Gutenberg.
• Verso. Es algo parecido a la Cita que veíamos antes, simplemente añade un formato distinto a lo que pongas dentro de este bloque. Ten en cuenta que la visualización final dependerá de como tu tema de Wordpress trate a este elemento. (Usa la etiqueta HTML <pre>)

Ejemplo de verso

• Código. Deberás usar este bloque si insertas código de programación. De esta forma además de que adoptará un formato distinto para mostrar este código, se informará a los buscadores de que eso es un fragmento de código, permitiéndole indexarlo si fuese necesario. (Usa la etiqueta HTML <code>)

Ejemplo de código

• HTML Personalizado. Con este bloque podrás añadir un fragmento HTML y que este sea interpretado. Es decir, podrás pegar fragmentos de código externos y que se ejecuten de forma correcta en tu web.
  Por ejemplo, el fragmento para mostrar un botón de pago que te dé tu proveedor, o un botón de registro a un webinar. Solo copia y pega dentro de este bloque y simplemente aparecerá.
• Preformateado. Normalmente algunos carácteres pueden no ser mostrados por el navegador si los insertamos en alguna entrada. Por ejemplo, aquí abajo te muestro un ejemplo, ese texto no debe aparecer cuando se inserta en una entrada, puesto que se utiliza para indicar comentarios internos.
  Pero si se introduce en este bloque si se mostrarán normalmente. También añade un estilo que dependerá del tema utilizado. (También usa la etiqueta HTML <pre>)

<!--ejemplo de texto preformateado-->

• Tabla. Es un elemento que antes no teníamos y ahora puedes agregar en forma de bloque en cualquier lugar de tu entrada. Antes teníamos que utilizar plugins externos para poder insertar estas sencillas tablas. Todo un avance.

Elementos de diseño

• Salto de página, añade paginación a tu entrada. Si, colocando este elemento se añadirá una página adicional a tu entrada. Puedes añadir tantos bloques como quieras.
  Por ejemplo, si añades Texto 1 – Salto de pagina – Texto 2 – Salto de página – Texto 3. Resultará en la misma entrada, un articulo de 3 paginas cada una con su respectivo texto 1, 2 o 3, y con un menú de navegación por paginas al final de la entrada. Esto es extremadamente práctico si usas publicidad por impresión en tu web, porque en un único articulo imprimirás la publicidad tantas páginas como tengas.

• Botón, no hay mucho que decir de este bloque, simplemente añade un botón de forma muy sencilla. Igualmente, con el antiguo editor de Wordpress teníamos que recurrir a plugins o elementos CSS uno de estos botones. Actualmente no tiene demasiadas opciones, aun no permite abrir la pagina del botón en una nueva ventana, por ejemplo. Por eso, para no liarte, este botón de ejemplo no te llevará a ningún sitio.

• Columnas. Por fin, podemos usar columnas en el editor predeterminado de Wordpress. Sin necesidad de plugins, ni inventos extraños.
  Esto te abrirá un gran abanico de posibilidades, por ejemplo, podrás poner una imagen y al lado texto, o un botón, o lo que tu quieras. Lo que resultará en una entrada mucho más rica en contenido, sin esos espacios vacíos que quedaban antes. Aún está en fase beta, y tiene mucho que mejorar. Pero créeme que esto es un gran paso hacia adelante.

Ejemplo de columnas con texto

Puedes poner lo
que quieras 
como este botón

• Separador, simplemente añade una linea horizontal. Que puedes utilizar para separar conceptos de forma bastante clara.

• Espaciador, añade un espacio en blanco. Muy útil para airear un poco tu entrada y hacerla más atractiva. Aquí abajo puedes ver como quedaría un espaciador de 80 píxeles.

• Más, te permite seleccionar lo que se muestra en el resumen de tu entrada. Es decir, en la vista de entradas de tu blog, se mostrará el extracto de la entrada hasta que se encuentre este bloque Más.

Widgets

De momento tenemos unos widgets básicos en este apartado, pero es presumible que algunos plugins añadirán bloques en este apartado, añadiendo más capacidades a Gutenberg.

De momento, estos son los plugins que te encontrarás en esta sección:

• ShortCode, te permitirá añadir elementos a través de ShortCodes, proporcionados por tu tema, o por cualquier plugin. Personalmente creo que este bloque debería tender a desaparecer, pues lo ideal sería que esos plugins añadan bloques a Gutenberg para no tener que lidiar con los confusos ShortCodes.
• Archivo, añadirá en la propia entrada una serie de enlaces al archivo mensual de tus entradas de wordpress.
• Categorías, añadirá a la entrada los enlaces hacia las categorías de tu web.
• Últimos comentarios, añade a la entrada enlaces hacia las entradas que han sido recientemente comentadas.
• Últimas entradas, añade dentro del cuerpo de la entrada enlaces hacia las ultimas entradas publicadas en tu sitio.

Incrustados

En esta categoría de bloques encontrarás de forma clara todos los servicios que te permitirán incrustar un elemento dentro de tu entrada.

Además debes saber que no es necesario añadir el bloque, sino que puedes simplemente añadir la URL del servicio (Como en el editor clásico) y se añadirá automáticamente el bloque correspondiente.

Pero la verdad es que viene bastante bien tener un listado con todos los sitios con la capacidad de incrustarse en tu entrada.

Puedes por ejemplo, publicar un vídeo de Youtube o una lista de Spotify simplemente agregando su enlace correspondiente.

Puedes agregar incrustados de todos estos servicios:

Youtube, Instagram, Spotify, Kickstarter, Twitter, Facebook, Wordpress, SoundCloud, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNAtion, Screencast, Scribd, Slideshare, SmugMug, Speaker, TED, Tumblr, VideoPress y WordPress.tv.

Aunque parece que esta función de incrustar aún no funciona todo lo bien que debiera funcionar, pues algunos de estos servicios no se incrustan correctamente, añadiendo solo la URL (Sin enlace) que nosotros le proporcionemos.

Por ahora, los mas utilizados como Youtube, Instagram, etc. funcionan correctamente. Pero aquí es un punto donde Gutenberg debe mejorar.

Interfaz de Gutenberg

Aparte de los bloques, Gutenberg nos trae una nueva interfaz mucho más minimalista. Donde podemos ocultar casi todos los elementos quedando muy similar al modo sin distracciones del editor clásico. (Aunque a mi me gustaba más el antiguo modo sin distracciones). Además podremos arrastrar y soltar contenido con este editor de bloques.

Esto permitirá que te centres más en la creación / redacción del contenido.

De esta forma lo principal que será añadir bloques se hará de forma intuitiva encontrando botones ( ➕ ) para añadir contenido allá donde podamos hacerlo. Y además tendremos este botón presente también en la esquina superior izquierda de la interfaz (Que añadirá el bloque a continuación de donde se encuentre el cursor).

Además si mantenemos el ratón sobre un bloque, aparecerán unas flechas en la parte izquierda del bloque, que te permitirán subir o bajar la posición del bloque con respecto a los demás.

También, la parte superior izquierda de barra de herramientas verás un pequeño botoncito de información, que te permitirá saber de un vistazo un conteo relevante sobre la entrada como cuantas palabras has escrito, cuantos bloques llevas, cuantos encabezados, cuantos párrafos e incluso un esquema del documento.

En la parte opuesta de la interfaz, puedes encontrarte en primer lugar, de izquierda a derecha, el botón de Guardar borrador, que te permitirá guardar tu entrada (Aunque esto se hace de forma automática cada poco tiempo).

Después puedes encontrar el botón de Vista previa, que te permitirá obtener una vista preliminar de como está quedando tu entrada sin necesidad de publicarla.

Si seguimos, más destacado está el botón de Publicar…, con el que podrás publicar la entrada directamente o bien, programarla para que se publique más adelante.

A continuación, puedes encontrar la rueda dentada de configuración. Que desplegará el panel derecho. Donde por un lado tienes las opciones principales del documento. Como la visibilidad, categorías, etiquetas, imagen destacada, etc.

También podrás ver en este panel derecho, las opciones del bloque seleccionado, por lo que podrás cambiar por ejemplo el tamaño de letra de un párrafo o el color de un botón.

Además encontrarás, siguiendo el camino que llevábamos en la parte superior izquierda, y justo en la esquina tienes la típica opción, que vemos en muchos sitios y aplicaciones. Esto es el típico botón con los 3 puntitos que te darán más opciones.

Aquí, podrás cambiar el editor visual a un editor de código. También podrás fijar la barra de formato, que aparece al editar un párrafo (Para poner negrita, subrayar o alinear el texto) en la barra superior. [A mi no me gusta esta opcion pues me aleja la barra de lo que estoy escribiendo y me resulta menos práctico, pero si estas acostumbrado a escribir en Word por ejemplo, esta opcion será para ti.]

Además en esta ultima opción tendrás la posibilidad de copiar todo el contenido, para pegarlo en otra entrada por ejemplo. Ya no tendrás que usar plugins para clonar páginas.

Pueden aparecer también otros botones, como por ejemplo si tienes instalado el plugin de Yoast que ya se ha adaptado a Gutenberg, y mostrará su propio botón para que puedas desplegar su interfaz en el panel lateral.

¿Te recomiendo instalar Gutenberg ya?

Pues todo depende. Como la canción.

Si quieres ir adaptándote a Gutenberg creo que puedes instalarlo ya, e ir acostumbrándote a sus particularidades. Pero eso sí, de momento, instálatelo solo en una web secundaria, pues ahora mismo hay actualizaciones casi diarias de Gutenberg, y añaden cosas diariamente pero también cambian algunas de sitio. 

Lo que creo que no debes hacer es instalarlo aun en tu web principal, pues puede generarte algunos problemas, tanto en el diseño de tu web como de productividad porque no encuentres algo que ayer estaba ahí.

Pero sí, en definitiva, creo que es una buena idea que adoptes Gutenberg lo antes posible pues, aunque aun no hay fecha definitiva, Wordpress 5.0 está a puntito de llegar. Y con él, Gutenberg será el editor por defecto de Wordrpess, así que, creo que lo más razonable es que vayas acostumbrándote a este nuevo editor de Wordpress lo antes posible para que el trauma sea menor.

Conclusiones sobre Gutenberg

Si aún no te has dado cuenta, simplemente decirte que yo ya he empezado a usar Gutenberg. Y este articulo está íntegramente creado con Gutenberg.

Y decirte, que yo no voy a dejar de trabajar con Gutenberg. Sé que muchos compañeros y muchas personas dentro de la comunidad de Wordpress ha puesto el grito en el cielo por este cambio.

Pero personalmente creo que es un paso adelante. Creo que ya lo he dicho varias veces pero creo que este cambio abre todo un abanico de nuevas posibilidades. Incluso creo que muchos plugins que ahora mismo utilizamos terminarán integrandose en Gutenberg como otro bloque más.

Esto plantea un futuro mucho más fácil tanto para el usuario básico, como para el más avanzado. 

Dicho esto, todo el ecosistema alrededor de Gutenberg está aun demasiado verde. Aunque con lo verde que está creo que se pueden conseguir resultados más aceptables que con el editor clásico.

Y tu ¿Has comenzado a utilizar ya Gutenberg? ¿Qué te ha parecido? ¿Le ves posibilidades? ¿O no eres tan optimista como yo? 

Deja tu opinión en los comentarios.