Diseño de temas secundarios de WordPress basados ​​en bloques con un solo archivo JSON

Desde el momento en que abrí mi primera tienda de temas en 2008 hasta el día de hoy como alguien que simplemente juega, mi plan siempre ha sido construir un tema único en el molde de CSS Zen Garden. Este fue un proyecto que Dave Shea lanzó a principios de la década de 2000 para mostrar cómo los diseñadores podían manipular un sitio solo a través de CSS. El HTML permanecería igual, pero el diseño podría ser cualquier cosa.

He logrado ese objetivo varias veces con varios proyectos. Técnicamente, todo lo que necesitaba era un marcado arquitectónicamente sólido en un tema de WordPress y CSS personalizado en un tema secundario.

El concepto era simple, pero con el tiempo, mi visión cambió. Quería crear algo que facilitara aún más el diseño de este tipo de temas infantiles. Por lo tanto, construí sistemas personalizados para solucionar la falta de herramientas de WordPress en el ámbito del diseño de temas. No quiero presumir demasiado, pero sentí que había creado algunos métodos útiles. Permitieron a los diseñadores de temas secundarios insertar valores en los archivos de configuración, como nombres de familias de fuentes y códigos de color. La mayoría de estos también pueden ser sobrescritos por los usuarios finales a través del personalizador.

Para 2018, ya estaba trabajando arduamente en lo que sería mi obra magna, el mejor tema de WordPress que jamás había creado. También había planeado que fuera el último. Había estado considerando salir del juego por un tiempo. Pero, este era un proyecto que tenía que llevar a cabo.

Luego, el nuevo editor de bloques hizo explotar todo. Había trabajado con él durante meses antes de su lanzamiento, pero sabía que el desarrollo de temas nunca volvería a ser el mismo. El proyecto Gutenberg continuaría madurando y remodelando el futuro de WordPress.

Eventualmente lancé mi tema. Fue uno de los primeros productos comerciales que admitió el nuevo sistema de bloques. Sin embargo, yo también estaba desinflado.

Estos fueron los primeros días del editor de bloques. Nadie sabía realmente lo que estaríamos viendo en tres años o más, pero si prestabas un mínimo de atención, podías ver que la temática se convertiría en algo muy diferente de lo que era en ese momento. Pasé más de un año construyendo un sistema de temas que se volvería irrelevante en poco tiempo. De acuerdo, pensé que habríamos llegado a este destino mucho antes.

WordPress 5.9 enviará los subcomponentes finales de la edición completa del sitio. Esto incluirá soporte para temas de bloque debajo del capó. Los usuarios que los instalan pueden personalizarlos a través del editor del sitio y la interfaz de estilos globales.

Lo que más me emociona sigue siendo lo que me despertaba todas las mañanas hace 13 años: los temas infantiles.

Los temas secundarios de bloques han funcionado parcialmente en el complemento de Gutenberg durante meses. Sin embargo, la función que más esperaba no estuvo lista hasta hace una semana. Un nuevo parche permite que un tema secundario sobrescriba valores individuales del archivo theme.json de su padre. Esencialmente, los dos archivos se fusionan y el niño tiene prioridad.

¿Por qué estaba tan entusiasmado con esta característica? Porque era el mismo sistema que había construido en años anteriores, pero mejor.

Después de ver esta tierra en la versión de desarrollo de Gutenberg, lo primero que hice fue cargar un tema personalizado con el que había estado incursionando. Es un proyecto que he ido construyendo por diversión y para mi propia edificación.

Luego, creé un nuevo proyecto en mi editor de código. Agregué el archivo style.css requerido y conecté los campos de encabezado apropiados. No lo necesitaría más allá de eso. El diseño de mi tema hijo se basaría en otra característica por completo.

Agregué un theme.json en el nivel raíz del tema secundario y comencé a divertirme más de lo que me había divertido con la creación de temas en mucho tiempo.

Elegí un par de colores otoñales y una fuente de título divertida. En unos minutos, tenía una nueva capa de pintura salpicada en mi instalación de prueba. El diseño no era revolucionario ni nada por el estilo. Me sorprendió lo fácil que fue transformar mi diseño ingresando algunos valores.

Este es el tipo de tematización infantil que siempre he anhelado. Quiero el poder de cambiar los elementos de diseño de mi tema para varias temporadas y días festivos. Y quiero poder compartir estos temas infantiles con otros.

Como dije, había creado tales métodos de tematización infantil antes (utilicé PHP en lugar de JSON). Sin embargo, esto es mucho más poderoso porque se basa en el sistema de bloques estándar y no en algo personalizado que solo usaría un puñado de personas.

Algunos de ustedes pueden preguntar por qué no hice estos cambios a través del editor del sitio en lugar de crear un tema secundario. Rich Tabor planteó, esencialmente, la misma pregunta en Twitter el día de hoy. "Si un tema consta de JSON y plantillas de bloques que se pueden modificar a través de Estilos globales, ¿para qué sirven los temas secundarios?"

Digamos que instalé un tema de bloque y realicé algunos ajustes de color. Ahora, imagine que quiero mezclar esto cuando llegue la Navidad: agregue algunos colores y encuentre una fuente navideña festiva. Cuando realice estos cambios, mi diseño anterior ya no estará allí cuando finalice la temporada porque las personalizaciones del usuario se almacenan en función del tema activo. Por supuesto, podría tomar nota de todas mis configuraciones anteriores y volver a cambiarlas más tarde. Sin embargo, hacerlo a través de un tema secundario significa que simplemente puedo cambiar de tema en cualquier momento. Mi configuración anterior permanecería intacta.

Quizás este es un caso extremo. ¿Quién está haciendo cambios estacionales en su diseño en estos días, verdad?

La parte emocionante es que puedo compartir temas secundarios creados con un solo archivo JSON con otros.

La tematización infantil ha sido una de mis pasiones desde que la característica llegó a WordPress. En algunos aspectos, no ha cambiado mucho. Los temáticos aún pueden sobrescribir las plantillas del padre. Pueden continuar agregando CSS personalizado si lo desean. Pero ahora, pueden configurar cualquier parte del diseño desde un único archivo estandarizado. Eso es algo por lo que vale la pena volver a ponerme el límite de mi desarrollador y construir un tema más.

También veo un futuro sin tema infantil que todavía tiene los mismos beneficios de compartir elementos de diseño.

El directorio de patrones de bloques ya proporciona diseños que deberían funcionar con cualquier tema de WordPress bien construido. Sin embargo, hay otros componentes de diseño que podríamos romper en el futuro.

Me imagino un futuro en el que WordPress podría tener paletas de colores instalables como las que ofrece Color Lovers. Simplemente explore un directorio, instale y cambie su combinación de colores sin encontrar un nuevo tema. Algo similar al complemento reciente de Adrian podría tener el mismo propósito para las fuentes. Estas son cosas que la comunidad puede querer considerar en el futuro. Ninguna idea debe estar fuera de la mesa en este momento.

Por ahora, estoy feliz de tener todo el poder de la tematización infantil a mi disposición. El cambio debería aterrizar en Gutenberg 11.8 esta semana y WordPress 5.9 a finales de este año.