Si esto es un desarrollo moderno de temas de WordPress, regístrame

He tenido una idea de tema de bloque dando vueltas en mi cerebro por un tiempo. Durante meses, he considerado crear un perfil/tema de tarjeta de una sola página, y finalmente me senté y me puse manos a la obra durante el fin de semana. En parte, solo quería hacer esto por diversión. Sin embargo, otra parte de mí quería ver cómo ha progresado la tematización de bloques desde la perspectiva del desarrollador.

La inspiración para este tema provino de algunas otras personas y proyectos. El experimento de la página de destino de dos columnas de Kjell Reigstad de octubre de 2020 lo desencadenó por primera vez. Una pregunta reciente a la columna Ask the Bartender sobre temas compactos y acogedores hizo que mis jugos creativos fluyeran nuevamente. Sin embargo, ver que el Equipo de Temas aprobó un tema de bloque similar, Miniblock OOAK, de Carolina Nymark significó que las reglas ahora eran lo suficientemente laxas como para posiblemente lanzar algo como esto al mundo.

Uno de los problemas es que la tematización basada en bloques me ha quemado antes. Pasé meses construyendo un nuevo proyecto el año pasado en mi precioso tiempo libre solo para que las actualizaciones del complemento de Gutenberg borraran mi progreso semanas después. Sabía que las cosas podían cambiar con la base inestable del software de nivel alfa, pero aún se estaba desinflando. No hace falta decir que nunca pude encontrar la motivación para retomarlo.

Con WordPress 5.9 y un sistema de tematización de bloques más estable a solo unos días, era hora de darle otra oportunidad.

Quería aprender temas de bloques en profundidad . La única forma en que podía hacer eso era volver al principio. Necesitaba volver a familiarizarme con esos elementos fundamentales de HTML, CSS y PHP simples. Y olvídate de todo lo que creía saber sobre la base de la web moderna. Necesitaba volver a ser un novato .

Técnicamente, es imposible olvidar todo lo que sé sin incurrir en algún tipo de amnesia. Sin embargo, tal vez, solo tal vez , podría volver a los componentes básicos de la web.

¿Podría crear un tema de WordPress sin una red compleja de dependencias que abarque más de 900 proyectos en mi carpeta /node_modules ?

¿Podría crear algo sin tener que ingresar debidamente mis scripts PHP básicos a través de Composer?

¿Podría, ya sabes , crear un tema de WordPress?

El primer paso fue comprobar mi ego en la puerta. Cuando dejé de lado años de herramientas modernas y un flujo de trabajo creado en torno a ellas, lo que encontré fue un sistema de temas hermosamente simple que rinde homenaje a las raíces de WordPress pero es lo suficientemente flexible como para extenderlo a compilaciones avanzadas.

Esto no quiere decir que no hubo contratiempos en el camino, pero escuchamos sobre eso lo suficiente. Además, considero que la programación/desarrollo es el arte de resolver problemas.

Tuve un fin de semana inquieto. Tuve cuatro, tal vez cinco, horas de sueño profundo entre el viernes y el sábado por la noche. Tal vez tenía tantos proyectos y cosas en marcha que mi mente no podía ignorarlos. Independientemente, volví a despertarme a las 3:30 a.m. del domingo por la mañana, cansado pero incapaz de recuperar esos Z's que tanto necesitaba. Entonces, abrí mi editor de código y creé un nuevo proyecto de tema.

En una hora, estaba funcionando. Estaba en condiciones lo suficientemente decentes para compartir con amigos a través de Twitter en dos.

La siguiente es una captura de pantalla de la página de inicio actual. Técnicamente, es la única página. He jugado un poco desde que impulsé mis primeras confirmaciones en vivo.

Este es un patrón de bloque llamado "Reflexiones". La foto de la montaña que se refleja en el lago es de WordPress Photos y fue tomada por Anne McCarthy. El degradado utilizado para el fondo también es un reflejo de los colores de la imagen, lo que me pareció un buen toque.

El tema incluye varios otros patrones. El objetivo es permitir a los usuarios elegir su favorito para su tarjeta de perfil, personalizar el contenido y guardar. Pan comido. Me encontré con un problema con esto, en el que me sumerjo al final de la publicación. En su mayor parte, todo salió bien.

Lo que aprendí de la experiencia

Crear temas de WordPress con bloques es fácil. La mayoría de las cosas están estructuradas y se rigen por un conjunto estándar de reglas. Las plantillas van aquí. Las piezas van ahí. Conecte su configuración más allá. Es probable que veamos aún más estructura en futuras versiones de WordPress.

Creé el tema desde cero usando solo mi editor de código y una instalación local de WordPress. Sin módulos de nodo. Sin bibliotecas PHP. Sin configuración de compilación en absoluto.

Probablemente usaré esas cosas antes de que este proyecto esté completo. Algunas herramientas simplemente facilitan el desarrollo. Sin embargo, no necesitarlos o sumergirse en API de PHP más complejas ha reducido la barrera de entrada.

Me sentí como si me hubieran transportado a mediados de la década de 2000, solo que con un mejor sistema implementado para encargarse de todas las partes complejas. Por una vez, pude concentrarme casi por completo en el diseño.

Hay muchos problemas con el sistema subyacente. Todavía existen en el editor rarezas como elementos envolventes adicionales alrededor de bloques alineados. Y, varios bloques necesitan actualizarse: estoy mirando su bloque de archivo por no reutilizar el bloque de botón existente .

Básicamente, hay peculiaridades. Como creador de temas, aprende a trabajar con ellos en mente, espera una solución en sentido ascendente o arriesga su cordura tratando de encontrar soluciones alternativas.

Dudo en compartir el trabajo inacabado, pero también debería mostrar pruebas. Los interesados ​​pueden consultar el repositorio de GitHub a la fecha de este artículo, al menos antes de que haga algo demasiado loco con él.

Algunos autores de temas pueden mirar mi proyecto y pensar que es un ejemplo demasiado simple. Sin embargo, podría aplicar fácilmente todo lo relacionado con un tema en toda regla. Los estándares son los mismos, independientemente del tamaño.

Tal vez deberíamos empezar a repensar qué es un tema . Dado que la tematización basada en bloques es tan joven, todos deberíamos experimentar un poco.

Una oportunidad perdida

Seré un poco técnico en esta parte porque es crucial para explicar una oportunidad perdida para una experiencia de usuario completa. El editor del sitio está en un lugar donde es fácil de construir para usuarios más avanzados. Los patrones ayudan a cerrar la brecha para aquellos menos técnicos, pero no son suficientes.

Piensa en las secciones principales de una página web. Piezas como el encabezado, el pie de página, la barra lateral, el contenido e incluso las subsecciones de estos. Como usuario, ¿cómo reemplaza todo el diseño del área de contenido que ya está en la pantalla con un patrón de contenido diferente?

Puede eliminar el que está allí e insertar un nuevo patrón. Sin embargo, eliminar e insertar secciones de una página es una acción de alto riesgo.

Si el área que desea cambiar es una parte de la plantilla, puede reemplazar una por otra. Eso suponiendo que el autor del tema haya registrado alguno para esa área. Esta es una acción de bajo riesgo y una de las mejores características del editor del sitio.

Por ejemplo, aquí hay plantillas de encabezado que Twenty Twenty-Two registra tal como aparecen en el elemento de menú "Reemplazar" de la barra de herramientas:

Sin embargo, ese no es el conjunto completo de patrones de encabezado del tema: tiene 18 en total. Me imagino que la mayoría de los usuarios finales nunca los descubrirán.

Una de las desventajas de crear patrones destinados a partes de plantillas específicas es que los usuarios finales no tienen forma de reemplazar o transformar una parte al por mayor con un nuevo patrón.

Los autores de temas pueden duplicar sus esfuerzos copiando el código del patrón en la parte de la plantilla, asumiendo que no tiene PHP mezclado. O pueden crear esas partes y extraer el patrón asociado a través del bloque Patrón:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

El problema con este enfoque es que el editor del sitio no muestra el contenido del patrón en el menú desplegable "Reemplazar" ( ¿acabo de descubrir un error? ):

La solución debería ser sencilla. Los patrones registrados para una parte de la plantilla deben ser intercambiables a través de la interfaz de usuario. O bien, las partes que usan el bloque Patrón deberían mostrarse correctamente en el menú desplegable "Reemplazar".