Jamie Marsland recrea la página de inicio de WordPress.org en 20 minutos usando el editor de bloques

En respuesta a la reciente controversia sobre cuánto tiempo debería llevar implementar la nueva página de inicio y los diseños de la página de descarga de WordPress.org, el YouTuber de Gutenberg, Jamie Marsland, decidió intentar recrearlo con el editor de bloques.

Matt Mullenweg había comentado sobre los planes para el desarrollo de los nuevos diseños, diciendo que debería haber tomado "horas, no semanas, para implementar". Sus comentarios más incendiarios, que desencadenaron conversaciones posteriores sobre las realidades de trabajar con el editor de bloques, hicieron referencia a los competidores de WordPress.

“Es un diseño tan básico que es difícil imaginar que una sola persona tarde más de un día en Squarespace, Wix, Webflow o uno de los creadores de páginas de WP”, dijo Mullenweg.

Marsland decidió aceptar el desafío utilizando a Gutenberg. Para este ejercicio utilizó el tema predeterminado más reciente de WordPress, Twenty Twenty-Two. Sus resultados no son idénticos a los nuevos diseños de WordPress, pero están muy cerca, y pudo crear la página de inicio en aproximadamente 20 minutos.

En el video (incrustado a continuación), Marsland explica la creación de cada sección de la página de inicio. Él es lo que uno podría describir como un usuario avanzado con el editor de bloques. Puede barajar rápidamente filas, columnas y grupos, ajustar el relleno y los márgenes según sea necesario, y asignar a cada sección el color correspondiente para el diseño. En este punto, esto no es algo que la mayoría de los usuarios promedio de WordPress puedan hacer, razón por la cual el video tuvo una respuesta tan fuerte por parte de los espectadores. El canal de YouTube de Marsland se centra en ayudar a los usuarios a dominar la creación de páginas con Gutenberg y tiendas con WooCommerce.

“Mi conclusión fue que es bastante fácil terminar rápidamente el 95 % del diseño, pero es el 5 % final el que siempre toma más tiempo en mi experiencia”, dijo Marsland. “Supongo que fue más un proceso interno lo que causó los retrasos, pero sin estar involucrado es difícil decirlo con certeza. Tenía muchas ganas de mostrar que no era un problema de Gutenberg con la construcción del diseño (como Matt Mullenweg mencionó Wix y Squarespace y otros creadores de páginas de WP)".

Alex Shiels, un colaborador patrocinado por Automattic en el proyecto, citó algunos elementos no relacionados con el editor de bloques que causaron los retrasos, incluido el trabajo hacia "estándares razonables para a11y, capacidad de respuesta, compatibilidad del navegador, SEO y rendimiento", así como colaborando con colaboradores en diferentes continentes.

En respuesta al intento de Marsland, el desarrollador de WordPress Patrick Boehner comentó que los pequeños detalles siguen siendo extremadamente importantes. “Definitivamente se puede saber qué fue lo primero impulsado por el diseño y qué se diseñó en el editor”, dijo Boehner.

Cinco años después del debut de Gutenberg en WordPress, los desarrolladores de temas todavía enfrentan el desafío de dar vida a los diseños que no se crearon con un enfoque de bloque primero en mente.

“Hoy en día sigue siendo fundamentalmente difícil o imposible tomar un diseño de página simulado tradicionalmente y ejecutar ese diseño usando bloques”, dijo el desarrollador de WordPress Jon Brown. "Esto es un problema.

“Claro, los bloques están bien para 'diseñar una página en el navegador' y aceptar lo que obtienes de los bloques, pero los bloques siguen careciendo de la flexibilidad y los controles necesarios para producir un diseño receptivo, accesible y perfecto en píxeles basado en una maqueta. .

"Lo que antes tomaba un día y una docena de líneas de php y una docena de líneas de css, ahora lleva semanas crear bloques personalizados porque los bloques centrales no se pueden modificar fácilmente a través de ganchos y carecen de los controles básicos necesarios".

Los colaboradores de Gutenberg están avanzando con la introducción de una tipografía fluida y están rastreando una serie de problemas relacionados con la mejora de la consistencia de las herramientas de diseño. Mientras tanto, los desarrolladores de temas están soportando los dolores de crecimiento necesarios a medida que el editor de bloques madura para adaptarse a aquellos que esperan que sus diseños respondan instantáneamente.

“He estado creando un tema FSE completo desde cero y me sorprendió la cantidad de mi diseño que pude replicar con éxito con el editor, theme.json y un CSS personalizado mínimo o nulo”, dijo el veterano desarrollador de temas Mike McAlister. . “Claro, tomó muchos retoques, pero de todos modos me impresionó.

“Sin embargo, como menciona Jon, en el momento en que necesitas ajustar algo para una pantalla más pequeña (o una pantalla más grande si te atreves a probar el diseño móvil primero en el editor), te topas con una pared. Es particularmente evidente con el margen, el relleno y el espacio entre bloques, que aún no tienen controles receptivos. Puede ver esto ajustado a través de CSS en el nuevo tema en .org”.

La capacidad de respuesta es uno de los problemas que mencionó Shiels sobre por qué implementar los diseños tomó más tiempo que simplemente recrear el diseño en el editor de bloques.

“Sin embargo, hay indicios de mejoras en la capacidad de respuesta”, comentó McAlister. “Fluid typography y clamp() sin duda han ayudado a controlar la tipografía, pero siempre habrá circunstancias en las que necesite un control aún más preciso. Todos los demás creadores de sitios han resuelto esto, no hay razón para pensar que WordPress no puede o no quiere. (Ciertamente eso espero, ya que ~50-60% del tráfico proviene de dispositivos móviles en estos días).

“Una de las mejores maneras de superar estos dolores de crecimiento es tener la mayor cantidad de comida para perros posible: usar el editor y FSE para crear tantos escenarios de la vida real como sea posible para descubrir estos puntos ciegos”.

El breve ejercicio de Marsland muestra lo cerca que puede estar de recrear el diseño de WordPress.org en un corto período de tiempo si conoce el editor de bloques. Tuvo éxito al demostrar que la interfaz de usuario de creación de páginas de Gutenberg no es el obstáculo para reproducir diseños creados en otras aplicaciones. Más bien, son todos los demás elementos de la lista de verificación relacionados que los desarrolladores generalmente tienen que resolver fuera del editor, incluidas las consideraciones de accesibilidad, capacidad de respuesta y SEO. Cuanto más se acerque Gutenberg a la reducción del trabajo adicional relacionado con la capacidad de respuesta y la accesibilidad, más accesible será para los usuarios habituales que intentan producir los diseños que sueñan por su cuenta.