WordPress

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

Introducción

El editor de publicaciones y páginas que viene con WordPress ha existido durante mucho tiempo, así que ¿tal vez es hora de una actualización?

Un conjunto de desarrolladores y una legión de colaboradores piensan y han comenzado a trabajar para actualizar la experiencia de redacción de posts de WordPress. Su ambicioso proyecto se llama proyecto Gutenberg. Su objetivo es reemplazar completamente el editor predeterminado en un futuro cercano y está siendo probado y probado como un complemento antes de ser incluido en WordPress.

¿Qué es Gutenberg?

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 expresar 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 necesita 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 promedio. Simplemente puede hacer clic en Alinear a la izquierda en un bloque y Alinear a la derecha en el otro, o puede insertar un bloque hecho previamente con hasta 4 columnas de lado a lado. También puede mover fácilmente bloques arriba y abajo del documento.

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 videos 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á insertando. Actualmente se admiten 34 sitios web.

También quieren exponer lo que llaman “carne misteriosa” en WordPress, lo que significa caracteristicas que están ocultas para el usuario. Citan que WordPress realmente admite incrustación para más de 30 sitios web, y si observa el editor predeterminado, notará que no hay botones para estos incrustados. La única forma de encontrar estoas incrustaciones es experimentar. Pero Gutenberg ya es compatible con 34 incustraciones. Y todos ellos están fácilmente disponibles. Todo lo que tiene que hacer es ingresar la URL que desea insertar y Gutenberg hace el resto.

Gutenberg todavía es un software beta y, como resultado, tiene numerosos problemas. Incluso viene con una advertencia de que no está listo para los sitios web en vivo. Sin embargo, se envía con 15 traducciones diferentes, lo que lo hace muy accesible si decide adoptarlo temprano y ayudar a cazar errores.

Instalar Gutenberg

A pesar de estar en Beta, Gutenberg ya está disponible a través del directorio de plugins de WordPress para la instalación manual. Al igual que con cualquier otro complemento, también se puede instalar a través del panel de control del administrador.

La versión actual es 1.1.0 y requiere WordPress 4.8+.

Prueba de Gutenberg

Después de instalar y activar Gutenberg, hice clic en Añadir nueva en la sección Entradas del panel de control del administrador. Te tomará un momento darse cuenta de que el nuevo editor tiene su propio enlace en el menú de administración. Esto se debe a que Gutenberg todavía está en desarrollo temprano, y los desarrolladores de WordPress no quieren reemplazar el editor actual hasta que Gutenberg esté listo, todos los errores han sido reparados y ha sido ampliamente probado por una gran cantidad de usuarios.

La próxima versión principal del plugin está programada para noviembre, coincidiendo con el lanzamiento de la actualización de WordPress 4.9. Antes de convertirse en parte del núcleo de WordPress, los desarrolladores publicarán una propuesta para la fusión en diciembre de 2017. Se espera que la transición final sea parte de la actualización de WordPress 5.0, posiblemente en 2018.

En la parte inferior de la navegación del panel de control del administrador, hay un nuevo menú de Gutenberg con tres sub-enlaces. El primer enlace es Nueva Entrada. El segundo enlace se denomina Demo que genera una publicación completa en el nuevo editor completo con todas las funciones disponibles para usted: texto, imágenes, tablas, varios ejemplos de alineación de bloques y también contenido incrustado.

Más tarde me di cuenta de que Gutenberg publicaba un nuevo botón debajo de cada publicación y página.

Una cosa a tener en cuenta es que si editas una publicación o página que se creó con el editor normal, todo tu contenido aparecerá en bloques, pero los bloques no parecen estar asignados a los roles correctos. Al hacer clic en mi texto, aparece el borde gris a su alrededor que indica que es un bloque, pero la barra lateral no me da ninguna de las opciones de párrafo, y en su lugar aparece el editor de estilo TinyMCE por encima del bloque.

Curiosamente, no hay un enlace para crear una nueva página, pero puede editar páginas existentes. Al mirar la página del proyecto Github del plugin, se ve que no están trabajando para agregar un enlace para crear una página en este momento, pero está previsto para futuras versiones.

No hay un panel de configuración ni una página de preferencias para configurar los valores predeterminados de las publicaciones nuevas. Si su comportamiento predeterminado para las nuevas publicaciones es enviarlas para su revisión antes de publicar, el usuario debe hacer clic en Pendiente de revisión antes de enviar cualquier publicación que pueda olvidarse fácilmente.

El nuevo editor

Visualmente, el nuevo editor está muy limpio y un poco confuso, ya que todo está oculto hasta que lo necesitas. 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 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 en el editor una vez publicado.

En la barra lateral derecha, hay una pestaña denominada Block en la que enumeran 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 puede 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 bloquee la alineación.

Cuando se 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

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.

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 ​​más 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: puede insertar contenido en 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 ingresa 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

Para mover los bloques hacia arriba y hacia abajo del documento, las flechas se colocan a la izquierda de cada bloque cuando se mueven sobre ellas.

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

Editor Visual vs Editor de Texto

Al igual que con el editor predeterminado, tiene 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.

gutenberg

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 prefiere usar el editor de texto y simplemente quiere los beneficios de las funciones de diseño de Gutenberg.

Características adicionales de Gutenberg

Gutenberg agrega una serie de funciones nuevas para sus 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 su publicación y muestra una tabla de contenido en la barra lateral que los enumera a todos. Esto actúa como un árbol de documentos, ayudando a visualizar el flujo escrito de sus 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.

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 sus encabezados, darle a cada encabezado un ancla y permitir que los usuarios se muevan a esa sección de la publicación.

Cuando se selecciona 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 puede 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.

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.

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 permite 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 ajusta 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.

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 le 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 una página en vivo.

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.

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ísa 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 le permite mover fácilmente todo el código HTML como cualquier otro bloque.

Este bloque también tiene una pestaña de vista previa que muestra los cambios que realice sin tener que enviar la publicación 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 tiene al editar plantillas.

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.

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 presiona regresar en un bloque de párrafo, 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, aparte de la sangría, se parece a un párrafo. Las opciones de edición para el texto están restrin

gidas 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 tle 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 puede 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 y no admite opacidad.

Actualmente, no puedes cambiar el color del texto del blanco; sin embargo, existe el cuadro de texto ‘Clase de CSS adicional’ en las opciones del bloque para que pueda crear un estilo CSS simple que defina el color.

Widgets

La lista de bloqueo también contiene 3 widgets muy útiles para mostrar una lista de publicaciones más recientes, todas sus 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.

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

También puede 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 puedse 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 principal.

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

Código corto (shortcode)

Esto es muy útil para plugins que proporcionan códigos cortos. Simplemente ingresa 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. Probé 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 pagado 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. Cambiar esto a ‘Citar’ todavía no lo convirtió en una cita.
  • El editor predeterminado agregó saltos de línea que no estaban en el documento original y Gutenberg no lo hizo.

También probé el texto inverso y copiado de WordPress para pegar en Word. En Gutenberg, el resaltado se comporta mal. Al resaltar más de un bloque, también se resaltó la barra superior, aunque no se pegó a Word. La página se volvió menos receptiva y hubo demoras notables al hacer clic en las opciones o desplazar la página.

De vez en cuando, cambiar tipos de bloques duplicaría el bloque en el mismo lugar y tenía que eliminar uno de ellos.

Móvil

También probé 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. Seleccioné 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. Pude desplazarme hacia arriba y hacia abajo sin demoras, pasando por los embeds y Tweets de YouTube en el camino.

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 debe resaltar su contenido, cortarlo, desplazarse al lugar nuevo, tocar hasta que el cursor esté donde lo desee y finalmente pegarlo.

Al cambiar al menú de opciones de bloque de un párrafo, puede 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 su entrada. Nuevamente, no puede obtener una vista previa del nuevo tamaño y debe cerrar el menú para averiguar si su 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.

Opiniones

Hasta el momento, Gutenberg ha recibido críticas mixtas y se encuentra en un modesto 2,4 / 5 estrellas en WordPress.org. Hay 74 revisiones de una estrella por la escritura, y muchas de ellas expresan las mismas preocupaciones. La principal preocupación no es que todos quieran bloques. El editor de WordPress actual es extremadamente flexible y permite muchos estilos diferentes de sitio web, que se adapta perfectamente a la esencia de WordPress.

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 puede usarlas.Permite la incrustación rápida de muchos sitios web.

Contras

  • En fase Beta / no está listo para el sitio web en vivo
  • Revisiones deficientes.
  • Errores consistentes.

Gutenberg es una versión interesante de la redacción y edición de 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 tsu trabajo. Como el enfoque del proyecto es rico en contenido, puede valer la pena echarle un vistazo cuando necesitas 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ád acostumbrado a usar desarrolladores de sitios web, también puede disfrutar trabajar con Gutenberg sobre el editor predeterminado.

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

 

Agrega un Comentario

Dale clic aquí para dejar un comentario

Únete a cientos de suscriptores en todo el mundo

y consigue increíbles tutoriales y descuentos en tu email

Please wait...

¡Gracias por registrarte!

Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio po

0
65
/mes