Performación general de la presentación general de WordPress Block Editor (Gutenberg) para desarrolladores en 2022

No importa cómo lo llame, WordPress Block Editor (o Gutenberg, si lo ha estado viendo por algún tiempo) trae algo de equipaje para el viaje. Vi el ruido y #wpdrama alrededor del editor de bloques ya que lo hay. Al principio, el ruido era ensordecedor. Ahora, sin embargo, a medida que el editor ha madurado, las discusiones negativas se han convertido en optimismo. Inicialmente, tenía emociones negativas en todo el proyecto, así como muchas otras. A pesar de mi resistencia al cambio, lo probé y disfruté de la experiencia. La buena noticia es que hay muchos recursos para ayudarlo a convertirse en un experto en editor de bloques de WordPress.
En esta publicación, presentaré las desventajas del editor de bloques y buscaré darle algunos consejos sobre el uso del editor de una manera óptima. En primer lugar, esto es lo que trataré durante la publicación. Siéntase libre de saltar a cualquier tema que le interese.
¿Qué es el editor de bloques?
Cómo ha evolucionado el proyecto Gutenberg en el editor de bloques
Las ventajas del editor de bloques
Las desventajas del editor de bloques
Cómo usar el editor de bloques
El uso básico del editor de bloques
Cómo apagar el editor de bloques
Consejos y trucos para el editor de bloques
Cómo crear bloques
El futuro del editor de bloques
¿Qué es el editor de bloques? El proyecto Gutenberg ahora se conoce como editor de bloques de WordPress en la documentación oficial de WordPress. Es la nueva forma de editar contenido en WordPress y reemplazar el antiguo editor de contenido de TinyMce. El editor de bloques puede hacer aún más pensamientos sobre códigos cortos, widgets, menús e incluso campos personalizados.
El editor de bloques es una reacción obvia a los competidores de WordPress. Por ejemplo, puede ver la influencia de la experiencia de escritura media y los creadores de sitios rápidos y fáciles como WIX y Squarespace. Excavando en los detalles técnicos, es una interfaz JavaScript construida con react y WordPress REST API, que utiliza un sistema basado en bloques para construir contenido: cuando se lanzó por primera vez el editor de bloques, la hoja de ruta del producto y los objetivos del proyecto realmente lo entendieron solo por él solo lo entendieron solo. Los miembros del equipo básico de WordPress que trabajaron en ello. Ahora somos más conscientes de lo que nos espera para el futuro del nuevo editor y cómo cambiará WordPress como un sistema de gestión de contenido (CMS) en los próximos años.

Cómo el proyecto Gutenberg ha evolucionado en el editor de bloques El proyecto Gutenberg se desarrolló por primera vez como un complemento de características en GitHub y llegó al núcleo de WordPress 5.0 en diciembre de 2018. A pesar de cambiar el nombre en el editor de bloques, Gutenberg todavía existe como Un complemento de las características, que permite a los usuarios probar nuevas funciones propuestas para la inclusión futura en el núcleo de WordPress. Blog Haga de los documentos principales de WordPress el programa de lanzamiento habitual y los cambios en los cambios. También hay actualizaciones periódicas del “editor básico” para presentar lo que se desarrolla para el editor de bloques.
Ha habido más de cien lanzamientos para esta versión beta en los últimos 12 meses o algo así. Además, ha habido algunos momentos clave en su desarrollo:
La interfaz de bloque recibió un rediseño en torno a su primer aniversario.
Ha habido algunas mejoras simples en la experiencia del usuario (UX), como la función de deslizamiento y colocación. Aparecen nuevos bloques todo el tiempo y este es un ecosistema creciente que se representa en el director de complementos de WordPress.
Con el lanzamiento de WordPress 5.8, ahora hay un director de modelos de bloques dedicados, que permite a los usuarios elegir e instalar modelos de sitio prefabricados desde una colección de bloques relacionados.
Otros cambios en WordPress 5.8 abren la forma de completar el sitio en WordPress, utilizando el editor de bloques.
Los últimos dos puntos son desarrollos interesantes en la evolución del editor de bloques. Será excelente para los usuarios finales, porque podrán descargar modelos directamente desde el directorio de modelos y usarlos para construir y editar sus sitios web, desde menús hasta contenido en el sótano:
En cuanto al desarrollo, el editor de bloques ahora tiene la API de soporte de bloques. Esta API crea una forma consistente de registrar herramientas de personalización de bloques (por ejemplo, la capacidad de cambiar el fondo, la fuente o el tamaño de un bloque). Esta API también permite que un desarrollador de bloques acceda a las herramientas de personalización de bloques existentes, facilitando la introducción de estas opciones desde los bloques existentes en sus propios bloques durante el desarrollo. El mayor anotado cuando se trata de mejoras es en el área de rendimiento. Con la iteración de cada nuevo editor de bloque, el equipo de desarrollo se centró en mejorar la velocidad mediante la implementación de la prueba de rendimiento y significa que el editor de bloques ahora es más eficiente que en el lanzamiento.
Esto se espera, por supuesto, pero es encomiable que el equipo básico haya trabajado duro para que Block Editor sea una mejora importante para los usuarios de WordPress y los editores de contenido. En general, reduce las diferencias visuales que existían entre cómo se crea el contenido en el editor y cómo se reproduce en el front-end. Esto fue claro tan pronto como se lanzó el editor de bloques por primera vez. Las ventajas del editor de bloques a pesar de la lenta adopción del editor de bloques de WordPress, hay muchas ventajas que no parecían obvias en las primeras etapas del proyecto. Lo primero es algo que acabo de llegar: el proceso de desarrollo beta. Este ha sido (por supuesto) siempre el caso. La forma en que tiene lugar esta parte del desarrollo es una forma sólida de seguir para el proyecto en su conjunto. La construcción de nuevas funciones como parte de un complemento de características separado que los usuarios pueden elegir probar es mucho mejor que agregar cosas al núcleo de WordPress que alienará a la base de usuarios. Plugin Gutenberg es algo que puede instalar en su sitio además del editor básico de bloques de WordPress. Esto significa que puede probar las funciones máximas, pero puede deshabilitarlas rápidamente para permanecer con el conjunto básico más estable. La desventaja es que no es inmune a los problemas, como Wpnavern ha descubierto con Gutenberg 10.5. Por lo tanto, ¡es mejor no instalar esto en los sitios de producción!

Para los desarrolladores, el editor de bloques significa que todos comenzamos a tener algunas formas modernas de resolver problemas. Por ejemplo, WordPress Core agregó soporte TypeScript nativo al editor de bloques. Además, podemos alejarnos de una fuerte adicción al software de desarrollo anterior, como TRAC. El desarrollo básico agrega más soporte para un examen de trabajo para los desarrolladores de GitHub. El editor de bloques utiliza incluso el Administrador de paquetes NPM JavaScript. A este ritmo, podríamos ver el apoyo del compositor en el núcleo en un día, aunque el jurado todavía está en cuestión. El motivo para el cual el equipo básico ha estado en contra dos veces, por lo que recuerdo. 1. No querían construir pasos en el núcleo (ahora inválido con el paquete web) 2. Introducción del compositor (que ahora se usa). Creo que es hora. Creo que @schlessea también analizó una vez-jonny Harris (@ThespacedMonkey) 10 de abril de 2021 Otra ventaja ofrecida por Block Editor es la experiencia y el progreso. Apoyarme al respecto. Al igual que el dolor de corazón, el tiempo es un sanador. En el caso del editor de bloques de WordPress, hubo problemas iniciales relacionados con las motivaciones del proyecto, el impacto en el ecosistema en su conjunto, la deuda técnica y no solo. Muchas de estas preocupaciones han sido abordadas por la rapidez con que el editor de bloques mejora a través de una mejor comunicación entre los equipos y los usuarios mejorados.
Si bien algunos de estos problemas han sido atenuados, otros se han convertido en diferentes problemas.Es algo a tener en cuenta cuando miras negativos.Las desventajas del editor de bloques a pesar de las voces más poderosas que lloran contra el editor de WordPress Block que ahora llega a aceptarlo y cómo el proyecto ha progresado y ha mejorado con el tiempo, hay (por supuesto) aspectos negativos para tener en cuenta.La percepción del editor todavía es débil en áreas clave visibles, como el canal oficial de asistencia de complemento de Gutenberg:
Esto afectará la opinión del usuario final y, si lee el contexto de las primeras revisiones de una estrella, no hay una profundidad técnica real detrás de las preocupaciones. Si bien aquellos de nosotros que seguimos toda la historia podríamos ser fáciles de rechazar, para un usuario que quiere ir a WordPress, es un potencial que no es bueno. Para los desarrolladores de temas, su tarea deberá aceptar el editor de bloques, sin importar lo que use en el frente. Mientras trabaje con los diseños generados por HTML del editor de bloques, se necesita asistencia. Una de las primeras grandes divergencias en la comunidad de desarrollo de WordPress fue la opción de usar React vs Vue. React tuvo algunos problemas de licencia que no se combinaron bien con las filosofías básicas de WordPress. Afortunadamente, este problema se ha resuelto pronto, pero puede ser algunos que todavía están preocupados por ello. Los desarrolladores de complementos tuvieron que preparar los complementos en poco tiempo. Esto ha ayudado a muchos desarrolladores a aprender más sobre React y usarlo para desarrollarse para WordPress, pero otros aún están luchando por mantenerse al día. Todavía hay una curva de aprendizaje pesada asociada con React, especialmente si proviene de un entorno PHP. Hay una gran parte de la comunidad de desarrolladores que luchan con las herramientas de compilación React y JavaScript. Aunque no tengo cifras precisas, me pregunto si esto ha afectado a los desarrolladores de complementos existentes, especialmente aquellos que trabajan solos.
Como noté anteriormente, había varias otras preocupaciones iniciales alrededor del editor de bloques que cambiaron en el alcance y el tamaño: el almacenamiento de contenido. El almacenamiento de datos de bloque en la columna Post_Content, la forma de los datos en los comentarios HTML, fue sometido a críticos (válidos).
Motivación. Dado que WordPress sigue siendo el número uno y está aumentando constantemente, las motivaciones iniciales no son tan válidas como antes. Significa que se centra más en cómo puede evolucionar el editor de bloques, en lugar de ser una preocupación comercial.
Deuda técnica. El jurado establece si esto ha evolucionado más allá de las preocupaciones iniciales. Es seguro que la accesibilidad ha mejorado. Los veinte veintiún años también están certificados “AAA”, lo que ayuda.

El impacto en todo el ecosistema de WordPress. Tendré más que decir al respecto más tarde, pero hay consecuencias en el futuro del editor de bloques que podría dividir a la comunidad abierta.
Cómo afectará la “ruptura” de UX. Hasta ahora, no he tenido interrupción para cambiar el juego de las actualizaciones básicas al editor de bloques. Hemos pasado algunos años, y el editor clásico todavía tiene el apoyo de aquellos que lo necesitan.
En resumen, hay menos desventajas en el uso del editor de bloques ahora que el desarrollo se dibuja en una dirección más concentrada. WordPress Forks, como ClassicPress, todavía existen, pero hay un debate sobre si todavía es relevante. Siento que la ira inicial ha desaparecido, y ahora hemos tratado con consideraciones técnicas en el mundo real sobre cómo evolucionar esto que no desaparece. Ahora que hemos eliminado la teoría del camino, mantengamos al día con cómo funciona el editor de WordPress Block. Cómo usar el editor de bloques El editor de bloques ahora está completamente integrado en una instalación predeterminada de WordPress. Esto significa que hay menos curva de aprendizaje para que comience un nuevo usuario. Por ejemplo, si tiene una instalación limpia de WordPress y vaya a la pantalla de edición de una publicación o página por primera vez, recibirá un tutorial rápido sobre lo que el editor de bloques puede hacer: a la derecha del contenido, hay un barra lateral que contiene metacasas, campos personalizados y otros elementos que alguna vez estuvieron en la pantalla de edición principal. Aquí puede acceder a las opciones para personalizaciones posteriores a blancos y en bloque.
Sobre esta barra lateral hay un menú de semáforo que abre la configuración en el editor:
Notará que estas configuraciones también incluyen opciones específicas del complemento, para aquellos con bloques dedicados para usar. En mi opinión, la configuración se extiende ligeramente. Por ejemplo, algunas de las características clave del editor de bloques están ocultas en un elemento vestido con preferencias, justo en la parte inferior del menú Configuración:
Esta es una preocupación de UX obvia, que se replica en otros campos clave. Sin embargo, el uso del editor de bloques en sí es más simple. El uso básico del editor de bloques lo primero que querrá hacer es agregar un bloque a su publicación o página. Puede hacer esto en dos lugares: en la pantalla del editor o en la barra de herramientas de arriba: al hacer clic en el editor, hay una ventana pop -up modal con algunos bloques comunes o recientes para elegir:
Si hace clic en la opción Barra de herramientas o navega todo en la ventana emergente, encontrará la barra lateral de bloque más completa:
Al hacer clic en un bloque, colóquelo en apariencia y puede manejarlo a través de una barra de herramientas que está por encima del bloque y las opciones de bloque en la barra lateral:

Mover el bloque alrededor de su apariencia sigue siendo un poco engorroso. La opción de deslizar y colocación es una característica agradable, pero no está claro de inmediato cómo usarlo y no es una experiencia simple. Los intercambiadores manuales son un poco mejores. También encontrará más opciones para administrar bloques utilizando el menú de semáforo en la barra de herramientas contextual que pasa con el mouse:

Puede eliminar un bloque desde aquí, pero notará otros toques hermosos. Por ejemplo, puede agrupar bloques en colecciones, los considera como modelos localizados, llamados bloques reutilizables. Como dice el nombre, esto le permite reutilizar rápidamente cualquier colección de bloques en otro lugar. Si agrega un bloque a través de la barra de herramientas, las ve en su lista de bloques reutilizables.

También notará un enlace para administrar sus bloques reutilizables. Esta es una página de administración donde encontrará algunas opciones simples para editar y eliminar el bloque reutilizable. También puede exportar el bloque como JSON, para importarse a otros sitios de WordPress o importar bloques reutilizables desde otro lugar. A medida que usa el editor de bloques, encontrará todos estos hermosos toques de UX, como la opción de exportar bloques como JSON o Visual Visual Instrucciones sobre cómo usar cada bloque. Todos estos forman parte de la hoja de desarrollo del editor de bloques y mejora significativamente con el tiempo. También es bueno ver algunos de los otros elementos del editor clásico, como la incorporación de video. En realidad, si te gustan las encarnaciones, el editor de bloques te ofrece:


La interfaz de usuario (UI) para cada uno de ellos es consistente. Después de agregar el bloque, ingresará una URL y verá cómo está pasando la magia:

Si el editor de bloques aún no lo está convencido, le sugiero que haga un giro. Tiene sus rarezas, como la forma en que la barra de herramientas contextual a veces va más allá del área de pantalla incorrecta y la funcionalidad del deslizamiento y la colocación. Dejando todo esto a un lado, el editor de bloques no va a ninguna parte y está listo para una guerra contra una competencia peor que Wix o Squarespace, más al respecto más tarde. Consejos y trucos para el editor de bloques que mencioné anteriormente algunos hermosos toques de UI y UX, pero el editor de bloques incluye muchas funciones para ayudar a crear contenido. Algunos de estos se pueden encontrar en los menús de configuración y preferencias del editor. Por ejemplo, puede adaptar el editor de bloques a sus preferencias visuales, utilizando modos de Spotlight o Fullscreen y puede acceder a la configuración específica del complemento. Como noté, el panel de preferencias es un tesoro oculto de opciones para personalizar la experiencia. Por ejemplo, puede cambiar si ve los bloques más utilizados, deshabilite el estilo específico y el más estilo. Es más adaptable que el editor clásico y querrá hacer su propia experiencia a partir de las preferencias. Hablando del editor clásico, un elemento faltante que muchos usuarios han resuelto a través de complementos personalizados fue la capacidad de usar Markdown a lo largo de la escritura y convertirlo en HTML en el front-end. Aunque no es bien conocido, el editor de bloques puede hacerlo de forma predeterminada. Puede ingresar a Markdown en el área de contenido, y el editor de bloques hará las conversiones necesarias.

Esto es invaluable si adopta un enfoque “documentos como un código”. Otra característica sorprendente del editor de bloques es la capacidad de convertir un contenido de Google a WordPress. El editor clásico era famoso porque era horrible. El editor de bloques hace un trabajo casi perfecto. Es ayudado por una pequeña característica que pasa sin ser observada por muchos. Intente insertar un documento completo de Google, incluidas las imágenes, en el editor de bloques, luego seleccione una imagen. Notará una opción en la barra de herramientas contextual para cargar la imagen externa en WordPress: también verá pedidos de teclado cortos alrededor del editor de bloques. Puede encontrar una lista completa del menú de su instrumentos> Accesos directos de teclado o usar Control + Opción + H (Shift + Alt + H para Windows).

Algunos de estos no son muy usados, lo cual es pecado. Estoy pensando en atajos como los siguientes:

Usando el control + `o control + shift +` para navegar entre las secciones del editor.

Opción + F10 (Alt + F10 en Windows) para navegar en la barra de herramientas más cercana.

Orden + Shift + D (Control + Shift + D en Windows) para duplicar el bloque seleccionado.

Orden + Opción + Shift + T (Control + Alt + Shift + T en Windows) para mover todos los bloques seleccionados (e y para moverlos hacia abajo).

Barra oblicua inversa ( /) para cambiar el tipo de bloque al crear un nuevo párrafo.

Espero que se agregarán más a más atajos en el futuro para ayudar a mantener los dedos en el teclado y aumentar la eficiencia al crear contenido usando el editor de bloques. Cómo deshabilitar al editor de bloques para mencionar el elefante en la sala: sí, puede (de alguna manera) apagar el editor de bloques si no le gusta. La mejor manera de hacerlo es instalar el complemento del editor clásico. Después de hacerlo, vaya a la pantalla Configuración> WordPress Write y verifique las dos nuevas opciones:
Puede hacer que el editor clásico sea lo más permanente posible y actualmente se acepta al menos hasta 2022. También puede agregar add_filter (‘use_block_editor_for_post’, __return_false); En las funciones de su archivo.php. Si tiene un sitio con publicaciones personalizadas (CPT), o desarrolla un complemento con ellos registrado, puede desactivar el editor de bloques secuestrando la interfaz de usuario habitual para la publicación personalizada. Puede hacer esto, asegurándose de establecer explícitamente el argumento de registro show_in_rest en su llamada registrada_post_type. Si tiene que permitir la pantalla CPT en la API REST, puede usar el siguiente filtro para desactivar el editor de bloqueo para ese cpt: add_filter (‘gettenberg_can_edit_post_type’, ‘my_gutenberg_can_edit_post_types’); Función my_gutenberg_can_edit_post_types ($ can_edit, $ post_type) {if (in_array ($ post_type, array (‘my_post_type’, ‘my_other_post_type’)) {return false; } return $ can_edit;

} Nuevamente, esta no es una solución permanente, porque el editor de bloques ahora es el editor principal y parece que el editor clásico será retirado en algún momento.Sin embargo, reconocemos que el editor de bloques no es la interfaz de uso ideal para cada situación y tenemos la intención de continuar permitiendo que una interfaz clásica editor en término sea parte de ACF.Si está cansado de todo esto, estará en una buena compañía que pase en Craft CMS y muchos desarrolladores de WordPress ya lo han hecho.Cómo crear bloques si no está desanimado y tal vez incluso emocionado de desarrollarse para el editor de bloques, ¡tiene suerte!

Publiqué en el pasado una guía para crear bloques. Este es más un tutorial introductorio y será desalentador si no sabe React, porque se basa en tener al menos un principiante de la experiencia. En este caso, querrá consultar nuestra otra guía sobre el uso de campos personalizados avanzados y bloques ACF para crear bloques de WordPress usando PHP. Si lees esto y no eres un desarrollador experimentado, algo como los bloques perezosos es un buen complemento para experimentar el concepto de crear bloques. También hay complementos para el “usuario final” que ayuda a los no desarrolladores a crear un bloque personalizado. Las soluciones como los bloques de Gutenberg, GetWid – Gutenberg Blocks y Plugin Kadence Block son excelentes para agregar más características al editor de bloques. El futuro del editor de bloques como se usa cuando las cosas cambian, encontrará una serie de opiniones divergentes y de apoyo. “El final es casi” es un tema común y es comprensible. Muchas personas que se preocupan por WordPress piensan en su futuro (y el suyo). Cuando apareció por primera vez el editor de bloques, hubo algunos intentos de ramificarse por completo de WordPress, como ClassicPress. Algunos usuarios prominentes incluso han sugerido que WordPress se ve obligado a la versión cinco. No había gran cosa en estas ideas, y la mayoría de la comunidad de desarrollo decidió usar el editor de bloques. De hecho, la “nueva guerra” es entre el editor de bloques y los complementos de terceros para la generación de páginas.
La llamada edición completa del sitio (ESF) está aquí y promete llevar al editor de bloques en una nueva era. La discusión actual se centra en presionar el disparador. Es prominente porque soluciones como Elementor tienen una base sólida entre los usuarios finales y los desarrolladores de WordPress. De hecho, al mismo tiempo, Matt Mullenweg luchará por WordPress contra una campaña publicitaria WIX, Elementor necesita defender WordPress socavar en los anuncios de Google. Será interesante ver cómo está sucediendo esto. Lo amo o lo odio, el editor de bloques está aquí para quedarse. Sin embargo, compañías como Elementor y Beaver Builder han creado páginas Toppress que generan productos, que tienen un seguimiento dedicado, con funciones que desean los usuarios finales. El futuro de la plataforma será decidido por el que salga primero. El tiempo de conclusión dirá si el editor de bloques será un éxito. Es poderoso, evoluciona y podría cambiar el juego si la edición completa del sitio alcanza el objetivo. Al principio, el cambio del editor predeterminado frotó muchos erróneamente, porque no se inició por las razones correctas y no se adoptó de manera sensible. Ahora, todo el proyecto es más estable y estoy impresionado por lo que el equipo del editor de bloques ha hecho hasta ahora. Sin embargo, es interesante ver qué áreas de WordPress sufrirán más debido al desarrollo continuo del editor de bloques.