Gutenberg para WordPress, introducción al nuevo editor

Gutenberg para WordPress, introducción al 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. Esto va a cambiar con Gutenberg, 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.

Qué es Gutenberg

Gutenberg será el editor oficial de WordPress, Gutenberg sustituirá el tradicional y anticuado editor clásico de WordPress. Ahora mismo ya puedes comenzar a probar Gutenberg como un plugin más, el editor clásico seguirá funcionando como segundo editor.

Con la próxima versión de 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.

Novedades de Gutenberg

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, lo de los bloques, puede resultar 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).

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.

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.
woocommerce gutenberg
Bloque de Woocomerce
  • 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)
  • Al menos por un tiempo podrás seguir 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.
yoast gutenberg

 

Desventajas de Gutenberg

Muchos de estos inconvenientes de Gutenberg seguramente se vayan solucionando a medida que vaya evolucionando, pero de momento tiene algunos inconvenientes

  • Es un cambio obligado, la mayoría de la comunidad es reticente a los cambios, ya tienen su editor que funciona y no les gusta cambiar
  • Se pierde el modo “Sin distracciones”, al menos por ahora, 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.

Diferencia de vista entre el editor de Gutenberg y lo que se ve en realidad
  • 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.


Aviso de Gutenberg en WordPress 4.9.8

Si te ha aparecido este aviso y lo has descartado,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.

Entrada gutenberg
Entrada de prueba de 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 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
  • 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.
  • 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.
  • 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 >)
  • 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 >)
  • 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>)
  • 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.
  • 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.
  • 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).

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 la interfaz 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.


Información de Gutenberg

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.

Configuracion documento Gutenberg
Configuración del documento

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.

¿Se puede instalar Gutenberg ya?

Pues todo depende, si quieres ir adaptándote a Gutenberg 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 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.

Pero sí, en definitiva, 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 Wordpress, así 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.

 
 

tags: wordpress cms editor gutenberg


Utilizamos cookies propias y de terceros para mejorar nuestros servicios, mostrarle publicidad relacionada con sus preferencias, realizar análisis estadísticos sobre los hábitos de navegación de nuestros usuarios y facilitar la interacción con redes sociales. Si continúa navegando, consideraremos que acepta su uso. Puede cambiar la configuración u obtener más información aquí Política de cookies.