access_time
hourglass_empty
person_outline

Revisión de Gutenberg: Pros y contras del nuevo editor de WordPress

El editor de publicaciones y páginas que viene con WordPress ha existido por mucho tiempo, entonces ya era hora de una actualización. Es así que nació Gutenberg.

Un conjunto de desarrolladores y una legión de colaboradores han comenzado a trabajar para actualizar la experiencia de redacción de posts de WordPress. Su ambicioso proyecto se llama proyecto Gutenberg y tiene por objetivo reemplazar completamente al editor predeterminado.

¿Qué es el editor Gutenberg de WordPress?

En resumen, Gutenberg es un nuevo editor de publicaciones y páginas para WordPress. El proyecto lleva el nombre de Johannes Gutenberg, quien introdujo la impresora mecánica en Europa, iniciando la revolución de la impresión. Su trabajo hizo que el conocimiento y la información fueran accesibles a las masas y pusieron en marcha una revolución social significativa. Del mismo modo, los desarrolladores quieren hacer diseños avanzados accesibles para el usuario promedio de WordPress.

El enfoque de Gutenberg es mostrar todo el contenido como bloques y definir diseños de post directamente en el editor. El editor de publicaciones de WordPress actual es fluido como cualquier software de procesador de textos, y el diseño de contenido se define en los archivos de plantilla con HTML y CSS.

Con Gutenberg ya no necesitas saber HTML o CSS para obtener dos bloques de contenido uno al lado del otro, lo que hace que los diseños complejos sean mucho más accesibles para el usuario común. Simplemente puedes hacer clic en Alinear a la izquierda en un bloque y Alinear a la derecha en el otro, o puedes insertar un bloque hecho previamente con hasta 4 columnas de lado a lado. También puedes mover fácilmente bloques arriba y abajo del documento.

editar 2 columnas en editor Gutenberg

Los desarrolladores también quieren reemplazar el uso de códigos cortos al agregar contenido enriquecido a publicaciones y páginas. Esto significa que incrustar contenido externo es más fácil, con opciones específicas para agregar vídeos de YouTube, publicaciones de Reddit, Tweets, enlaces de Spotify y mucho más. Esto simplifica el proceso que normalmente requeriría un plugin o la generación de código de inserción específico en el sitio web que estás insertando.

posibilidades de páginas de inserción

También quieren presentar algunas características que están ocultas para el usuario. Citan que WordPress realmente admite incrustación para más de 30 sitios web y, si observas el editor predeterminado, notarás que no hay botones para estos incrustados. La única forma de encontrar estas incrustaciones es experimentar. Pero Gutenberg ya es compatible con 34 incrustaciones, y todas ellos están fácilmente disponibles. Todo lo que tienes que hacer es ingresar la URL que deseas insertar y Gutenberg hace el resto.

El nuevo editor Gutenberg

Visualmente, el nuevo editor está muy limpio, aunque un poco confuso al principio, ya que todo está oculto hasta que lo llegas a necesitar. No hay una barra de herramientas de TinyMCE en Gutenberg y el contenido real de la publicación ocupa más de la pantalla. Esta vista más limpia ofrece una mejor vista previa de la publicación final que la que ofrece el editor predeterminado. Todo el contenido en la ventana del editor está centrado con un montón de espacios en blanco de cualquier lado. El contenido se ve casi idéntico a como se ve en el editor una vez publicado.

En la barra lateral derecha, hay una pestaña denominada Block en la que se listan todas las opciones posibles para el bloque seleccionado. Las opciones para un bloque de párrafo incluyen mayúsculas caídas, un campo de tamaño de fuente donde puedes escribir cualquier número (el editor actual solo tiene una opción desplegable), el color de fondo para el bloque de párrafo (que aplica el estilo HTML a las etiquetas p automáticamente), el color de fuente y bloquear la alineación.

Creación de párrafo en nuevo editor Gutenberg

Cuando usas el editor predeterminado de WordPress en una pantalla pequeña, todas las configuraciones del documento, como la visibilidad de la publicación y la selección de categorías, se empujan debajo del área de trabajo, lo que requiere mucho desplazamiento en algunos casos.

En el editor de Gutenberg, las configuraciones de meta y bloque (barra lateral a la derecha) se ocultan inicialmente y se pueden mostrar en la parte superior del área de trabajo haciendo clic en el botón de configuración. Después de usar el nuevo editor por un tiempo, las barras de herramientas basadas en contexto crecen en tu entrada.

Agregar nuevos bloques en Gutenberg

Para agregar un nuevo bloque o insertar contenido, hay un ícono «+» debajo de todos los bloques existentes. También hay un botón de inserción en la parte superior de la página. La barra superior está pegada a la parte superior del editor, por lo que el botón insertar siempre está visible. Pasando el mouse sobre el símbolo + muestra las opciones de inserción rápida para el párrafo y la imagen, que serán los bloques más utilizados.

Opciones de inserción de contenidos en bloques de Gutenberg

El nuevo menú tiene navegación con pestañas que se divide en páginas para Recent, Blocks y Embeds. También hay un cuadro de búsqueda en este menú que siempre está visible. Los esfuerzos de los desarrolladores por mejorar el flujo de trabajo son claramente visibles en los menús contextuales.

  • Recent: cuando haces clic en el símbolo + o en el botón Insert, primero aparece una lista de los 8 bloques e incrustaciones usados ​​recientemente.
  • Blocks: una lista de bloques divididos en cuatro encabezados:
    • Common Blocks: encabezado, párrafo, imagen, etc.
    • Formatting: tabla, texto preformateado, código, etc.
    • Layout: separadores, botones, etc.
    • Widgets: últimas publicaciones, categorías, códigos cortos.
  • Embeds: puedes insertar contenido de una larga lista de sitios web populares como Reddit, YouTube, Instagram, y hay un botón genérico de Incrustación en el que simplemente ingresas una URL válida y el editor hace el resto. Parece que funciona como una función de detección automática.

Mover y alinear bloques en Gutenberg

Para mover los bloques hacia arriba y hacia abajo del documento, puedes hacer clic en las flechas que están a la izquierda de cada bloque. Aparecen cuando te mueves sobre el bloque.

Mover y alinear bloques en Gutenberg

Para alinear los bloques a la izquierda, centro y derecha, la opción está en la parte inferior de la barra lateral cuando  seleccionas la pestaña Block. Como puedes ver en la siguiente imagen, la alineación no funciona tan bien como la creación de tu propio HTML y CSS. Si el texto en un bloque es más largo que el otro, tiende a alinearse de formas extrañas.

Alineación de bloques con diferentes longitudes

Editor Visual vs Editor de Texto

Al igual que con el editor predeterminado, tienes la opción de elegir entre edición basada en texto y visual utilizando un enlace en la parte superior izquierda del editor. El editor visual hace uso de barras de herramientas optimizadas que muestran solo las características que son relevantes para el bloque actual. Cambiar al editor de texto revela el estilo de codificación utilizado para crear los efectos.

Editor de texto

Cada bloque creado por Gutenberg está compuesto por comentarios en HTML, típicamente usando etiquetas de apertura y cierre usando la sintaxis creada por los desarrolladores de Gutenberg. Esto es bastante sencillo y es fácil de aprender si aún prefieres usar el editor de texto y solo quieres los beneficios de las funciones de diseño de Gutenberg.

Características adicionales de Gutenberg

Gutenberg agrega una serie de funciones nuevas para tus publicaciones, que incluyen bloques completamente nuevos y opciones adicionales para funciones de WordPress existentes.

Tabla de contenido

Gutenberg detecta todos los bloques de encabezado (<h1> <h2> etc.) en tu publicación y muestra una tabla de contenido en la barra lateral que los lista todos. Esto actúa como un árbol de documento, ayudando a visualizar el flujo escrito de tus publicaciones.

Puedes hacer clic en cada encabezado para ir a esa sección del documento y comenzar a editarlos rápidamente. Esto es especialmente útil para usuarios móviles y artículos más grandes, ya que elimina la necesidad de un desplazamiento amplio.

Tabla de contenidos auto generada en gutenberg

Anclas

Las etiquetas de anclaje te permiten vincular a una parte específica de un documento. Al igual que la forma en que puedes usar la tabla de contenido en el editor, puedes crear una lista de tus encabezados, darle a cada encabezado un ancla y permitir que los usuarios se muevan a esa sección de la publicación.

Cuando seleccionas un bloque de encabezado, la página de opciones block tiene una sección de anclaje HTML con un cuadro de texto debajo. Al escribir un nombre para el enlace, aparece un botón de enlace de copia que puedes pegar en cualquier cuadro de enlace.

Este es el equivalente de dar un ID a cualquier elemento HTML y vincularlo agregando #name-of-id a la URL.

Opciones de anclas en gutenberg

Estilos de CSS adicionales

La mayoría de los bloques tienen la opción de agregar un estilo CSS adicional al bloque.

Esto te permite asignar clases definidas en el archivo stylesheet.css de tu tema.

Usando esto, puedes anular o mejorar cualquier estilo predeterminado de los bloques de Gutenberg, como los botones en los que la opción para cambiar el color de la fuente no está presente en el editor.

Estilos de CSS adicionales

Galería

Puedes agregar fácilmente grupos de imágenes como una galería receptiva en tus publicaciones y colocarlas alrededor de otros bloques. Agregar un bloque de Galería te ofrece enlaces para cargar imágenes o seleccionar imágenes de la Biblioteca de Medios de WordPress.

Las opciones para este bloque te permiten establecer cuántas columnas mostrar, según cuántas imágenes hayas agregado a la galería. Las imágenes cambian de tamaño automáticamente a medida que ajustas el recuento de columnas.

Un número impar de columnas hace que las últimas imágenes sean más grandes que el resto, dándoles prominencia.

También hay un interruptor de ‘recortar imágenes’ en las opciones de bloque para la Galería que intenta hacer que cada miniatura de imágenes tenga el mismo tamaño. Lo que ves en el editor no es exactamente lo que obtienes en una publicación real, por lo que tendrás que hacer que las imágenes tengan las mismas dimensiones antes de subirlas.

galería

Imagen de portada

Las imágenes de portada son encabezados grandes, a menudo con texto superpuesto en ellas.

Gutenberg agrega imágenes de portada con un cuadro de texto centrado horizontal y verticalmente, lo que simplifica una tarea difícil.

Las opciones de bloqueo te permiten ajustar la imagen haciendo que el texto sea más fácil de leer, y también forzar la imagen como fija, es decir, cuando un usuario desplaza la página, la imagen no se mueve.

Al igual que con la galería, la imagen que obtienes en una publicación se muestra ligeramente diferente a lo que ves en el editor. Esto se debe a la naturaleza receptiva de los bloques: a veces tienen diferentes anchos en el editor y en la página en vivo.

Opciones de imagen de portada en Gutenberg

Citas

Una cita de extracción es un extracto del texto del artículo. Se utiliza para resaltar pasajes importantes de texto o citas habladas y generalmente se muestra antes de que el texto aparezca en el artículo.

A menudo los ves en artículos de periódicos y revistas, con fragmentos abreviados de texto jugoso que inducen al lector a seguir leyendo.

Citas en Gutenberg

Las citas de bloques ahora tienen opciones adicionales para el estilo y la alineación de texto. Puedes cambiar rápidamente entre dos estilos visuales diferentes haciendo clic en los botones de la barra de herramientas.

Una vez que hayas elegido un estilo, también puedes elegir cómo se alinea el texto citado.

HTML personalizado

El bloque HTML personalizado te permite agregar cualquier HTML que normalmente escribirías en el editor de texto o en los archivos de plantilla, directamente en el editor visual.

La principal ventaja de este bloque es que el HTML está contenido dentro del bloque, lo que te permite mover fácilmente todo el código HTML como en cualquier otro bloque.

Este bloque también tiene una pestaña de vista previa que muestra los cambios que realizas sin tener que publicar o hacer clic en el botón de vista previa de WordPress.

Estos cambios mejoran significativamente el flujo de trabajo para usuarios avanzados y proporcionan casi el mismo nivel de control de diseño que tienes al editar plantillas.

Opciones de HTML personalizado

Texto clásico

El bloque de texto clásico imita al editor predeterminado y muestra la barra de herramientas completa de TinyMCE en lugar de los botones de Gutenberg. La única opción más allá de TinyMCE es ‘Clase de CSS adicional’ (Additional CSS Class) en el menú de opciones de bloque.

El texto clásico existe como un bloque genérico que se asigna cuando Gutenberg no puede descifrar un tipo de bloque automáticamente (al pegar texto en el editor) y para ayudar a cerrar la transición entre el editor anterior y el nuevo.

El bloque aún se puede mover y eliminar utilizando los controles de Gutenberg. Al cambiar al editor de texto, este bloque aparece como HTML puro y no está incluido en los comentarios HTML como cualquier otro bloque.

Opciones de texto

Verso

Los bloques de verso están destinados a poesías o pasajes literarios y principalmente se utilizan para definir estrictamente los saltos de línea y el espaciado de caracteres. También hay una pequeña sangría a la izquierda del texto.

Cuando presionas regresar en un bloque de párrafo común, el editor agrega un nuevo párrafo. En un bloque de verso, el cursor simplemente se mueve hacia abajo en una línea.

En el editor, el bloque aparece como blanco y, además de la sangría, se parece a un párrafo. Las opciones de edición para el texto están restringidas a negrita, cursiva y tachado.

En una publicación real, el texto en un bloque de verso aparece con un fondo gris y una fuente diferente a los párrafos. Con suerte, estos se reflejarán en el editor en una futura actualización.

Columnas de texto

Las columnas de texto te permiten agregar cualquier cantidad de bloques de texto en línea. De lo contrario, tendrías que escribir en HTML y CSS utilizando el editor de texto o el bloque HTML.

Puedes aumentar o reducir fácilmente el número de columnas visibles mediante un control deslizante en el menú de opciones del bloque. El control deslizante asciende a 4, pero puedes ingresar cualquier número en el cuadro de texto al lado.

Las opciones de formato están limitadas a negrita, cursiva, tachado y enlace.

Botones

Puedes agregar rápidamente botones con estilo que enlazan con otras páginas y tienen etiquetas de texto centradas. Puedes cambiar la etiqueta a texto en negrita, cursiva o tachado. También puedes alinear el botón a la izquierda, a la derecha o al centro.

Las opciones de bloque para botón te permiten definir un color de fondo usando una lista de colores comunes o usando un selector de color que también tiene entrada de texto para códigos HEX, RGB o HSL. El selector de color convierte automáticamente su valor en hexadecimal.

Widgets

La lista de bloques también contiene 3 widgets muy útiles para mostrar una lista de las publicaciones más recientes, todas tus categorías y códigos personalizados que, de lo contrario, no funcionan en los bloques de Gutenberg.

Últimas publicaciones

El widget de publicaciones más recientes tiene una serie de opciones para personalizar la visualización de la lista.

Puedes cambiar entre una lista estándar y un diseño de cuadrícula. Con el diseño de la cuadrícula, puedes establecer el número de columnas en las que se dividen las publicaciones.

También puedes establecer el número de publicaciones para mostrar y elegir si la fecha de publicación se muestra con cada título.

Categorías

Las categorías se pueden mostrar como una lista o como un menú desplegable.

También puedes elegir contabilizar recuentos de publicaciones para cada nombre de categoría y la jerarquía; las categorías que tienen padres se muestran bajo su categoría principal.

Este bloque admite alineación, por lo que puedes colocarlo hacia la izquierda, el centro o la derecha.

Código corto (shortcode)

Esto es muy útil para plugins que proporcionan códigos cortos. Simplemente debes ingresar el shortcode de manera normal, y al previsualizar o ver la publicación, mostrará el resultado. No hay opciones para este bloque.

Prueba del rendimiento de Gutenberg

Computadora de escritorio

Cuando usas el editor normalmente, es muy receptivo y ágil. No hay retrasos notables al escribir o agregar nuevos bloques, incluso complejos, como una galería de imágenes. Algunos bloques te permiten configurar el número de columnas para mostrar, esto también se refleja instantáneamente en el área de trabajo.

Aunque el nuevo editor no tiene un flujo de estilo de procesamiento de texto, aún puedes copiar y pegar texto de un documento de Word y Gutenberg realiza un trabajo decente al detectar dónde se debe dividir el contenido. Probamos el editor predeterminado y Gutenberg pegando texto de un documento de Microsoft Word 2016, y ambos detectaron las mismas secciones y aplicaron el formato de la misma manera. Hubo algunas diferencias en la forma en que se manejó el pegado del contenido:

  • En ambos editores, el texto marcado ‘Título 1’ en Word se colocó como un párrafo en su lugar, ‘Título 2’ se colocó correctamente como un bloque de título 2.
  • Con Gutenberg, el color de la fuente se aplicó correctamente en ambos encabezados y párrafos, mientras que el editor predeterminado no lo detectó en absoluto.
  • Una sección se marcó como una «cita intensa» en Word, y se le dio un bloque de párrafo en ambos editores. Los editores no realizaron la conversión a una cita.
  • El editor predeterminado agregó saltos de línea que no estaban en el documento original y Gutenberg no lo hizo.

Móvil

También probamos la usabilidad y el rendimiento en un teléfono con Android. Aunque los desarrolladores no tienen la intención de que Gutenberg se centre en dispositivos móviles, aquí es donde realmente brilla.

En primer lugar, el rendimiento es excelente y cada botón responde al instante. Seleccionamos la publicación de demostración que Gutenberg crea, ya que tiene un largo recuento de palabras (881 palabras), más numerosas imágenes, incrustaciones y bloques. El contenido se carga de forma instantánea, mientras que el editor predeterminado tiene una congelación notoria cuando se carga por primera vez la pantalla Editar publicación. Puedes desplazarte hacia arriba y hacia abajo sin demoras, pasando por los elementos incrustados, Tweets y vídeos de YouTube en el camino.

Vista del editor en dispositivos móviles

Como la pantalla es pequeña, la barra lateral se oculta automáticamente para ofrecerte una experiencia de edición a pantalla completa. Como las barras de herramientas también están basadas en el contexto, solo aparecen cuando seleccionas un bloque, lo que hace que sea fácil revisar publicaciones largas.

Para mover los bloques hacia arriba y hacia abajo del documento, primero toca el bloque, luego, al tocar el botón de ‘opciones adicionales’ de la barra de herramientas, se muestran las flechas hacia arriba y hacia abajo. Todos los bloques se movieron al instante. Esta es una mejora significativa sobre el editor predeterminado en el que debes resaltar tu contenido, cortarlo, desplazarte al lugar nuevo, tocar hasta que el cursor esté donde lo deseas y finalmente pegarlo.

Al cambiar al menú de opciones de bloque de un párrafo, puedes cambiar el color de la fuente y el color de fondo al instante, sin embargo, no hay una vista previa ya que el menú de opciones ocupa toda la pantalla. Esto es un poco más lento que el editor predeterminado si estás experimentando con reflejos y colores.

Cambiar el tamaño de fuente usando el control deslizante tuvo un retraso significativo y fue muy innecesario como resultado. La entrada para ingresar un número personalizado también tuvo este retraso al escribir mientras el control deslizante se movía a la posición que correspondía a la entrada. Nuevamente, no puedes obtener una vista previa del nuevo tamaño y debes cerrar el menú para averiguar si tu selección es apropiada.

Eliminar bloques fue instantáneo, al igual que moverlos hacia arriba y hacia abajo, y no causó problemas con el diseño en absoluto.

Conclusión, Pros y Contras

Pros

  • Agiliza el proceso de escritura.
  • Ayuda a visualizar el contenido como bloques.
  • Te permite crear diseños complejos con poco conocimiento.
  • El diseño limpio solo muestra herramientas relevantes cuando deseas usarlas.
  • Permite la incrustación rápida de muchos sitios web.

Contras

  • Revisiones deficientes.
  • Errores consistentes.

Gutenberg es una versión interesante para la redacción y edición en WordPress, y la decisión de adoptarla de manera temprana se reduce a qué tipo de contenido escribirás y dónde se realizará la mayor parte de tu trabajo. Como el enfoque del proyecto es rico en contenido, puede valer la pena echarle un vistazo cuando necesites incorporar gran cantidad de contenido o crear galerías dentro de las publicaciones.

El editor predeterminado tiene peculiaridades propias que se eliminan cuando el texto está contenido en un bloque. Por ejemplo, al escribir encabezados con párrafos en la línea directamente debajo de ellos, el editor predeterminado definirá incorrectamente dónde termina el encabezado y comienza el párrafo, lo que obliga a cambiar al editor basado en texto para corregir la ubicación de las etiquetas HTML. Tener el encabezado en un bloque y el párrafo en otro bloque elimina la confusión.

Si estás acostumbrado a usar desarrolladores de sitios web, también puedes disfrutar trabajar con Gutenberg sobre el editor predeterminado.

Si estás trabajando principalmente desde un teléfono o tableta, entonces te recomiendo usar Gutenberg o al menos probarlo. Los problemas mencionados deben ser resueltos eventualmente por los desarrolladores, quienes se están dando el tiempo suficiente para que este proyecto funcione.

El Autor

Author

Diana C. / @dianahostinger

Diana cuenta con más de 10 años de experience en el desarrollo y gestión de sitios en WordPress. Comenzó su aventura con un blog y hoy en día es: experta en online marketing, marketing de afiliados, hosting, profesora, diseñador web.

Tutoriales relacionados

Author

Isabel Responder

noviembre 24 2019

Muy completo y aclaratorio. A mí me incomoda principalmente que no te deje establecer saltos de línea para maquetar mejor el texto. Muchas gracias por tu ayuda.

Agrega un comentario

Comentario*

Nombre*

Correo electrónico*

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

¡Forma parte de Hostinger ahora!