Revisión del editor de bloques de Gutenberg (por un usuario avanzado de WordPress)

En esta publicación, revisaré el editor de bloques de WordPress, que ha llegado a la plataforma como parte del proyecto Gutenberg. Ha existido durante cuatro años y fue uno de los cambios más controvertidos que le hayan ocurrido a WordPress.

Ahora que ha tenido tiempo de madurar y debido a que es un tema cargado de emociones, pensé que sería una buena idea para mí opinar. Como blogger profesional de WordPress, paso todo el día todos los días no solo escribiendo en WordPress. pero también probando cada aspecto de la plataforma una y otra vez para diferentes artículos. Naturalmente, eso incluye el editor de bloques y sus crecientes capacidades.

Entonces, lo que sigue es mi revisión personal del editor de bloques de Gutenberg desde la perspectiva de un usuario avanzado de WordPress. Hablaré sobre lo que me gusta, lo que no me gusta y lo que creo que se podría mejorar.

El editor de bloques de WordPress: una definición

Antes de saltar a los pros y los contras, primero establezcamos rápidamente de qué estamos hablando exactamente. Porque, cuando salió por primera vez, Gutenberg solo reemplazó el editor de publicaciones y páginas de WordPress. Sin embargo, ahora se ha ramificado a otras partes de la interfaz de usuario. Entonces, para asegurarnos de que estamos en la misma página, esto es parte de Gutenberg.

Editor de publicaciones/páginas

Ya mencioné esto. Esto es lo que encuentras cuando vas a Publicaciones/Páginas > Agregar nuevo o editas tu contenido existente. La implementación original de Gutenberg en WordPress 5.0 solo intercambió esta parte de la experiencia de edición al reemplazar a TinyMCE, que es lo que usaba WordPress antes. Naturalmente, aquí es donde editas el contenido de tus publicaciones y páginas, pero nada relacionado con la plantilla.

Redactor del sitio

Introducida por primera vez como Edición de sitio completo (FSE), esta parte de Gutenberg ahora ha sido rebautizada como Editor de sitio. Se puede acceder a través de Apariencia > Editor , cuando se utiliza un tema de bloque como Veinte Veintidós o Veinte Veinte Tres. Aquí, WordPress le permite editar toda la arquitectura de su sitio, incluidos encabezados, pies de página, menús, plantillas de página, widgets y la página de inicio.

Editor de plantillas

Algo que mucha gente podría no saber es que Gutenberg también incluye un editor independiente para plantillas de páginas o publicaciones. Nuevamente, esto solo está disponible para temas de bloque. Puede acceder a él desde el Editor de página/publicación cuando hace clic en el nombre de la plantilla utilizada.

A partir de ahí, tiene la posibilidad de modificar su plantilla actual o crear plantillas de página personalizadas. Tiene una interfaz ligeramente diferente a la del Editor del sitio, pero en general es muy similar.

Editor de widgets

Esta parte está un poco fuera del resto del editor de bloques, pero es oficialmente parte del proyecto Gutenberg, así que tengo que mencionarlo aquí. Por ahora, la interfaz de usuario del editor de bloques también se extiende a la gestión de widgets. Puede encontrarlo en Apariencia > Widgets en temas clásicos. En los temas de bloques, como se mencionó, el manejo de widgets ocurre dentro del Editor del sitio.

Para ser honesto, realmente no tengo mucho que decir sobre esto. No creo que sea necesariamente mejor o peor que el menú anterior y hace su trabajo. Por lo tanto, no voy a discutir el Editor de widgets en detalle a continuación. Si alguien más tiene fuertes sentimientos u opiniones sobre esto, ¡me encantaría escucharlo en los comentarios!

Revisión del editor de publicaciones/páginas de Gutenberg

Ahora que tenemos una idea de lo que abarca el editor de bloques de Gutenberg, revisemos cómo se están desempeñando sus diversas entregas. Estamos comenzando con el Editor de publicaciones/páginas.

Lo que me gusta de eso

En primer lugar, debo decir que, en general, me gusta mucho crear contenido con el editor de bloques. No me gustaría volver a Classic Editor, ya que simplemente estoy demasiado acostumbrado a los beneficios de la nueva experiencia. Aquí están mis razones por las cuales.

Elegante y moderno

Todos los honores para TinyMCE, que es un verdadero caballo de batalla que ha servido bien a WordPress durante mucho tiempo. Sin embargo, seamos realistas, no es la pieza de software más moderna.

La experiencia del editor clásico es un poco torpe y constantemente parecía estancada a principios de la década de 2000. En contraste con eso, Gutenberg o el editor de bloques simplemente se ven más actualizados.

Es espacioso, mínimamente diseñado y limpio. También me resulta fácil descubrir todos los ajustes e información importantes. Por mi parte, no me sorprende que se esté adoptando en otros sistemas de administración de contenido.

Lo que ves, es lo que tienes

En segundo lugar, me gusta que la experiencia de edición esté mucho más alineada con el resultado final en la página. En TinyMCE, si bien tenía la capacidad de agregar estilos de editor, constantemente tenía que obtener una vista previa de la página para ver cómo se ve el contenido en su sitio.

Esto se aplica especialmente a elementos atípicos como botones o formularios. En TinyMCE, a menudo era necesario agregarlos a través de códigos cortos. En consecuencia, a veces terminaba con un documento lleno de corchetes cuyo significado necesitaba saber para decodificar lo que estaba pasando.

En contraste con eso, en el editor de bloques de Gutenberg, excepto cuando se usa explícitamente el bloque de shortcode, por lo general ves los elementos terminados en el editor. Incluso si no lo tiene, al menos tiene un marcador de posición válido.

Encuentro esto muy útil para agregar imágenes al contenido. En el pasado, tenía que publicar muchas cosas como "[captura de pantalla]" en mis artículos para marcar y encontrar los lugares donde quería incluir imágenes. En Gutenberg, simplemente puedo agregar bloques de imágenes mientras escribo y llenarlos cuando sea el momento de agregar capturas de pantalla.

Esta es una excelente manera de construir contenido de publicación sin tener que cambiar de un lado a otro. Por supuesto, no es una experiencia perfectamente paralela. Por ejemplo, a menudo debe verificar si las imágenes necesitan una alineación diferente. Pero es mucho mejor que antes.

Fácil de navegar

Una cosa que recuerdo sobre el Editor clásico es: Entonces. Mucho. Desplazamiento.

Si quería volver a leer un pasaje anterior o hacer cambios en otra parte de la publicación, no tenía otra opción que usar la rueda del mouse. Esto hizo que fuera fácil perder de vista el contenido general y, a veces, dificultar la búsqueda de ubicaciones específicas.

Eso es algo que es completamente diferente en el editor de bloques. El menú que se abre cuando haces clic en el ícono de la pequeña i en la parte superior izquierda es en realidad una de las opciones que uso con más frecuencia.

Le permite revisar un desglose de toda la publicación a través de sus encabezados y Gutenberg le permite saltar a diferentes secciones con un clic. Esto es increíblemente útil, especialmente si, como yo, tiendes a escribir piezas muy largas.

Que podría ser mejor

Por supuesto, usar el Editor de publicaciones/páginas no es todo rosas y mariposas. También tiene deficiencias, algunas de las cuales yo llamaría serias.

Actuación

Mi problema principal es el desempeño a veces irregular del editor. Todo ese JavaScript necesario para ejecutarlo realmente puede afectar su navegador.

Por ejemplo, como mencioné, tiendo a escribir artículos más largos. En mi propio blog, las publicaciones suelen tener al menos 3000-4000 palabras, algo más.

Recientemente me actualicé a una nueva computadora portátil y, no bromeo, una de las razones principales fue que el editor de bloques simplemente se volvió inutilizable en mi máquina de cinco años después de una cierta cantidad de palabras. Se ralentizó a paso de tortuga y tardó tanto en realizar tareas normales que a veces me veía obligado a copiar secciones de una publicación en un nuevo artículo, editarlas allí y luego volver a copiarlas. No recuerdo haber tenido que hacer eso en el Editor clásico.

Por lo tanto, esta es un área seria de mejora, incluso si las cosas ya han mejorado. También hay algo que decir sobre la estabilidad, pero lo abordaré más adelante.

Atajos de teclado que faltan

Una de las cosas que más me gustó del Editor clásico fue su sólido conjunto de atajos de teclado. Le permite convertir fácilmente el texto en encabezados, cambiar los encabezados a un orden diferente o cambiar entre una lista ordenada y desordenada. Todo sin tocar el ratón.

Esta es una parte que simplemente falta en el editor de bloques. Si bien existen atajos de teclado sensibles (encuéntralos en el menú en la esquina superior derecha o presionando Shift+Alt+H ), simplemente no cubren tanto como lo hace TinyMCE.

Sí, hay comandos de barra para ingresar cualquier bloque de tu agrado (lo cual es genial). Sin embargo, si quiero cambiar el texto existente a un encabezado o cambiar de h2 a h3, generalmente tengo que usar el mouse.

Tal vez sea un motivo de preocupación personal, pero definitivamente es algo que podría ser mejor en mi opinión.

Profundizando en el editor del sitio

A continuación en esta revisión de Gutenberg, hablemos sobre el Editor del sitio. Aquí, también, hay mucho que es bueno y algunas cosas que podrían ser mejores. Sin embargo, tenga en cuenta que este es un proyecto aún en desarrollo (como lo muestra la etiqueta beta junto a su elemento de menú).

Por lo tanto, debe tomar algo de lo que menciono a continuación con pinzas.

Qué hace bien el editor del sitio

Estoy comenzando con las cosas en las que creo que el Editor del sitio ya sobresale.

Muy poderoso

No se puede negar que el Editor del sitio puede hacer mucho y brinda una cantidad increíble de poder en manos de usuarios no técnicos.

Personalización de plantillas de página, creación y cambio de encabezados, pies de página y otros elementos del sitio: hace solo unos años, tendría que saber PHP, contratar a alguien o instalar un complemento de creación de páginas para eso. Ahora, con el tema correcto, es una función nativa de WordPress y eso es simplemente genial. Además, la capacidad de cambiar todo el estilo de su sitio web con un solo clic es alucinante.

Ambos permiten a los no desarrolladores realizar modificaciones muy fundamentales en sus sitios y, básicamente, crear temas personalizados por sí mismos. Especialmente porque también pueden exportar sus cambios para usarlos en otros sitios web. Esto es definitivamente un progreso y está totalmente en consonancia con el motivo por el cual tanta gente ama WordPress.

Patrones de bloques y piezas de plantilla

Las dos herramientas que más ayudan a modificar el contenido de la página de manera decisiva son los patrones de bloque y las partes de la plantilla. Poder cambiar completamente el diseño de un bucle de consulta o cambiar el encabezado y el pie de página con solo unos pocos clics no tiene precio.

Además, algo que los desarrolladores realmente lograron es la facilidad con la que puede agregar patrones de bloques, incluso desde el directorio de patrones. Simplemente copie y pegue y estarán disponibles de inmediato donde los necesite. Le permite crear diseños completamente desarrollados en muy poco tiempo.

Margen de mejora

Al mismo tiempo, hay una buena cantidad de críticas que puede formular contra esta parte del editor de bloques.

No es el más fácil de usar

Si bien admiro la potencia bruta que ofrece Site Editor, no siempre hace que sea fácil de manejar desde la perspectiva del usuario. Si bien la interfaz de usuario está lo suficientemente condensada para servir bien para editar páginas y publicaciones, la mayor complejidad de personalizar todo su sitio significa que a menudo se encontrará buscando configuraciones. La cantidad de menús es limitada, lo que significa que a menudo necesita hacer muchos clics para lograr su objetivo.

Aparte de eso, a menudo son las cosas pequeñas:

• Mover bloques en la vista de lista con el mouse es muy difícil. A menudo terminan donde no los quieres.
• En general, posicionar los elementos de la página puede ser un poco complicado (juego de palabras).
• Averiguar dónde hacer lo que puede llevar un tiempo, incluso para alguien que está acostumbrado a crear sitios web.

Con mucho, la tarea más confusa es la creación de menús. Para ser honesto, ni siquiera estoy seguro de haberlo entendido completamente a estas alturas. Lo haces en la página, pero también está el enlace Administrar menús en las opciones de bloque que te lleva a la interfaz de usuario anterior donde realmente no puedes hacer nada.

Puedo ver que esto causa mucha frustración entre los usuarios y considero que algunas de las críticas son absolutamente válidas.

Falta de documentación

Esto va de la mano con lo anterior. Mientras trabajaba con Site Editor, noté que es muy difícil encontrar buena ayuda para problemas específicos, al menos en Google. Sé que existe la página de soporte oficial y no quiero restarle importancia al equipo de soporte, que está haciendo un trabajo tremendo.

Sin embargo, el hecho es que, la mayoría de las veces, tuve que averiguar por ensayo y error cómo realizar ciertas tareas, porque realmente no podía encontrar un buen recurso al que recurrir. Especialmente cuando busca ayuda con funciones de bloque específicas.

Tal vez también se deba al hecho de que todo esto es bastante nuevo, pero encontré una clara falta de buenos artículos sobre el Editor del sitio.

Funcionalidad faltante

Otra cosa que me molesta es que hay algunas cosas que simplemente no puedes hacer con el Editor del sitio (todavía). Los ejemplos incluyen establecer márgenes negativos o crear sombras de cuadro (aunque está en la hoja de ruta).

Si quiero aprovechar algo de eso, todavía necesito usar CSS personalizado. Eso es a) algo que los usuarios principiantes no saben yb) de alguna manera anula el propósito del editor. Como mínimo, lo obliga a adoptar un enfoque híbrido en el que construye la estructura básica de la página y los trazos amplios de diseño con el Editor del sitio, pero aún tiene que volver a la hoja de estilo para los toques finales.

Por supuesto, no puede esperar que el editor proporcione todas las opciones posibles que ofrece CSS. Sin embargo, a veces el conjunto de funciones todavía parece un poco escaso.

Por otro lado, esa es simplemente la posición difícil en la que se encuentra el Editor del sitio. No es un creador de páginas porque le faltan ciertas capacidades, pero también va mucho más allá de una opción básica como el Personalizador de WordPress. Como consecuencia, termina en algún lugar de esa zona gris media que no siempre le favorece.

Estabilidad

Finalmente, uno de los mayores inconvenientes de la edición de sitio completo y un tema que debe ser parte de cualquier revisión de Gutenberg es la estabilidad. El Editor del sitio es, con mucho, en el que he visto más bloqueos.

En su defensa, hasta ahora eso nunca ha llevado a una gran pérdida de datos, lo que significa que siempre fue bastante fácil y rápido rehacer lo que hice antes de que fallara, lo que se debe principalmente a la excelente función de guardado automático.

Sin embargo, junto con los problemas de rendimiento antes mencionados, la estabilidad es definitivamente un área que merece la mayor atención porque puede volverse molesto muy rápido.

Editor de plantillas

Como se mencionó, este es el editor etiquetado en el Editor de página/publicación. Es una versión un poco reducida de la experiencia de edición de sitio completo.

Supongo que su propósito es realizar cambios en las plantillas de página sobre la marcha, sin tener que volver al Editor del sitio. En general, es una buena idea, aunque debo decir que esta es la parte del editor de bloques que menos he usado. Por lo tanto, mi opinión al respecto es relativamente neutral. Sin embargo, eso no significa que no tenga uno.

Esto es lo que me gusta

Veamos qué tiene el Editor de plantillas.

Bueno para su uso previsto

Si el propósito de este editor realmente es cambiar las plantillas sobre la marcha, creo que está haciendo un buen trabajo. Puede modificar el orden de la imagen destacada y el título de la página, cambiar las fuentes y los colores, o incluso cambiar los encabezados o pies de página.

Por lo tanto, cuando esté trabajando en una página o publicación y observe que es necesario cambiar algo en la plantilla, puede hacerlo rápida y fácilmente. Alternativamente, también es posible crear plantillas de página personalizadas allí mismo. De esa manera, puede aplicar cambios solo a esa página o asignarlos a otro contenido elegido. Nuevamente, no se requiere código para algo que definitivamente solía necesitar un editor de código antes.

Lo que no pude subir a bordo con

Por otro lado, esto es lo que no me gustó mucho.

Posiblemente confuso para principiantes

El principal problema que puedo imaginar para el Editor de plantillas es que es difícil para los principiantes, que no saben mucho sobre la creación de sitios web, entender dónde se supone que deben hacer qué. Por ejemplo, que se supone que no debe llenar la página con contenido en el Editor de plantillas, sino que solo debe realizar cambios estructurales en la plantilla y luego agregar contenido en el Editor de páginas/publicaciones.

Aquí, también, es una cuestión de cómo poner tanto poder en las manos de los usuarios sin enseñarles adecuadamente cómo aplicarlo.

Reflexiones finales: revisión de Gutenberg

Ahí lo tiene, una revisión del editor de bloques de WordPress y las implementaciones del proyecto Gutenberg de alguien que trabaja con la plataforma profesionalmente a diario.

Incluso si recibí muchas críticas, generalmente soy un gran admirador de la nueva experiencia de edición. Especialmente el editor de bloques para publicaciones y páginas no es algo que me gustaría perderme. Claro, hay espacio para mejorar, pero definitivamente ya está en un buen nivel.

Además, la lista anterior no es de ninguna manera exhaustiva. Me concentré en los puntos más importantes que se me ocurrieron en mi trabajo. Hay más de lo que podría hablar tanto positiva como negativamente. Sin embargo, estos son los trazos generales. ¿Cual es tu opinion?

¿Estás de acuerdo con mi reseña de Gutenberg? ¿Cuál es su opinión sobre el editor de bloques y cómo se ha implementado? ¡Por favor comparte en los comentarios a continuación!