Componentes G2, una reinvención desde cero de los componentes de WordPress

Actualizar algunas de las cosas.

Ese fue el objetivo que Jon Quach, diseñador principal de Automattic, estableció en la hoja de ruta para integrar el proyecto G2 Components en Gutenberg y, finalmente, en el núcleo de WordPress. El proyecto es una reinvención de las piezas que componen el editor de bloques, una revisión "desde cero" del sistema de componentes. Actualizar todas las cosas o incluso muchas de ellas a la vez corre el riesgo de romper todo.

“Idealmente, lo que debería suceder es actualizar solo algunas de las cosas de una manera muy controlada e intencional”, escribió Quach en la publicación. Comparó la transición de una ciudad, sección por sección, a la energía solar hasta que la fábrica de energía tradicional pudiera cerrarse. Convierte una pieza, prueba, encuentra problemas y los corrige antes de pasar a la siguiente sección.

Ese es el plan para integrar G2 Components en Gutenberg.

“G2 Components es un proyecto que encarna la idea de mejorar las interfaces de usuario y las experiencias de usuario para los demás”, dijo Quach. “Por el momento, se materializa como un sistema de componentes diseñado para funcionar dentro del contexto y los entornos de Gutenberg y WordPress”.

El objetivo es proporcionar los recursos para mejorar la interfaz de usuario del proyecto Gutenberg. Los componentes deberían facilitar la creación de interfaces de usuario más nuevas sin piratear el código. Quach dijo que la consistencia y las experiencias del Sistema de componentes deberían escalar y tener un efecto dominó en toda la plataforma de WordPress. Esto también se extenderá a los desarrolladores de bloques de terceros.

“Los componentes del código son solo el punto de partida”, dijo. “Mi objetivo final es que esto trascienda el código e influya y eleve el diseño también, creando un sistema de diseño unificado que permita y empodera a las personas para crear experiencias de interfaz de usuario cohesivas y ricas en funciones dentro del mundo de WordPress”.

Quach cree que las plataformas se han beneficiado de tener enfoques similares. Mencionó que Material Design de Google ha elevado la plataforma Android y ha aportado cohesión a los productos de la empresa.

El equipo de Gutenberg ya ha comenzado a integrar los componentes G2 en el proyecto. Esta integración reemplaza los componentes de WordPress (@wordpress/components) de una manera controlada que no debería romper las implementaciones existentes dentro del editor principal o proyectos de terceros. Los nuevos componentes se intercambiarán a medida que estén listos. “Como encender un interruptor”, dijo Quach.

El siguiente video es un recorrido de una hora de los componentes G2 que Quach publicó en YouTube:

Rutinariamente publica actualizaciones en el blog de G2 Components. Junto a eso, hay inmersiones más profundas en su pensamiento de diseño en el proyecto. También habla sobre el proyecto en su transmisión de Twitch casi a diario.

¿Qué son los componentes?

Los componentes son todo, desde botones hasta conmutadores y casillas de verificación. Son piezas estandarizadas que componen la interfaz de usuario del editor de bloques. Están disponibles para desarrolladores principales y de terceros para crear lo que los usuarios finales ven e interactúan. Sin embargo, hubo un problema con la forma en que se construyó el sistema de componentes original.

“Los componentes actuales no están construidos con un sistema en mente, sino para satisfacer una necesidad inmediata”, dijo Quach. “Este detalle de diseño en particular es crucial. ¡Un enfoque de sistemas primero admite más fácilmente la adición de nuevas funciones y, lo que es más importante, la personalización!

El nuevo enfoque se trata de construir un sistema de diseño nativo para WordPress. Tal sistema permitiría a cualquiera construir sobre él y crear experiencias nativas.

Quach dijo que una de las formas más fáciles de ver esto es desde una perspectiva de tematización de back-end: el sistema de componentes también tiene un subsistema de tematización. “En lugar del método tradicional de escribir CSS como una 'piel' para colocar una capa encima, la estética de la interfaz de usuario se puede ajustar a través de valores de configuración, similar a cómo se puede configurar WordPress con definiciones en el archivo wp-config.php ”, dijo. “Esta distinción es importante ya que estos valores se conectan directamente con el sistema Style, lo que permite que los estilos se carguen correctamente en el lugar correcto y en el momento correcto. Todo sin afectar los estilos del entorno actual y, lo que es más importante, sin verse afectado por los estilos del entorno actual”.

Estaba respondiendo a mi pregunta sobre por qué el sistema de componentes debería reconstruirse desde cero. La idea es tener componentes que "simplemente funcionen" en un entorno como el administrador de WordPress, como asegurarse de que la existencia de una hoja de estilo de tema de WordPress no rompa los componentes simplemente al cargarlos.

"¿Por qué repensar, reconstruir y mejorar Entradas, Botones, Modales, Menús desplegables y otros?" respondió Quach. "Para que usted, el desarrollador, no tenga que hacerlo".

¿Qué significa esto para los desarrolladores?

Respetar la compatibilidad con versiones anteriores es algo que Quach dijo que se tomó muy en serio al diseñar la arquitectura del proyecto G2 Components. También dijo que era parte de la estrategia de integración que propuso.

“Mencioné que este proyecto 'encarna la idea de hacer que las interfaces de usuario y las experiencias de usuario sean mejores para los demás'”, dijo. “Tener en cuenta la compatibilidad con versiones anteriores y admitir la migración de terceros se incluye absolutamente en la categoría de experiencia del usuario”.

A medida que el equipo de Gutenberg continúa integrando nuevos componentes, no debería cambiar lo que los desarrolladores ya han estado haciendo. Sin embargo, podría abrir algunas nuevas posibilidades.

“El nuevo sistema de componentes definitivamente ayudará en el departamento de interfaz de usuario”, dijo Quach. “Un área que me entusiasma particularmente es el espacio de creación de prototipos/desarrollo rápido. Debido a que estos Componentes son unidades autónomas, pueden incorporarse a plataformas como CodeSandbox y…simplemente…funcionan. Puede ponerse en marcha y construir y compartir rápidamente prototipos (que van desde pequeños pero poderosos hasta grandes y a cargo)”.

Dijo que ha tenido éxito probando diseños de componentes y demostrando ideas para una retroalimentación rápida. También ha trabajado en la dirección opuesta, creando componentes complejos en CodeSandbox y llevándolos de vuelta al Sistema de Componentes.

“Como diseñador y desarrollador front-end, no puedo enfatizar cuán eficiente, efectivo y creativamente liberador es este flujo de trabajo de 'microconstrucción'”, dijo. “Es algo que me emociona que otros también experimenten”.