Projetando temas filhos do WordPress baseados em blocos com um único arquivo JSON

Desde o momento em que abri minha primeira loja de temas em 2008 até os dias atuais como alguém que apenas brinca, meu plano sempre foi construir um único tema nos moldes do CSS Zen Garden. Este foi um projeto que Dave Shea lançou no início dos anos 2000 para mostrar como os designers podiam manipular um site apenas por meio de CSS. O HTML permaneceria o mesmo, mas o design poderia ser qualquer coisa.

Eu alcancei esse objetivo várias vezes com vários projetos. Tecnicamente, tudo o que eu precisava era de marcação arquitetônica em um tema WordPress e CSS personalizado em um tema filho.

O conceito era simples, mas com o tempo, minha visão mudou. Eu queria criar algo que tornasse ainda mais fácil projetar esses tipos de temas filhos. Portanto, criei sistemas personalizados para contornar a falta de ferramentas do WordPress no domínio do design de temas. Para não me gabar muito, mas senti como se tivesse criado alguns métodos úteis. Eles permitiram que os designers de temas infantis inserissem valores em arquivos de configuração, como nomes de famílias de fontes e códigos de cores. A maioria deles também pode ser substituída pelos usuários finais por meio do personalizador.

Em 2018, eu já estava trabalhando duro no que seria meu magnum opus, o melhor tema WordPress que já construí. Eu também tinha planejado que fosse o meu último. Eu estava pensando em sair do jogo por um tempo. Mas, este era um projeto que eu tinha que ver.

Então, o novo editor de blocos explodiu tudo. Eu trabalhei com ele por meses antes do lançamento, mas sabia que o desenvolvimento do tema nunca mais seria o mesmo. O projeto Gutenberg continuaria amadurecendo e remodelando o futuro do WordPress.

Eu finalmente lancei meu tema. Foi um dos primeiros produtos comerciais que suportavam o novo sistema de blocos. No entanto, eu também estava desanimado.

Esses foram os primeiros dias do editor de blocos. Ninguém sabia realmente o que estaríamos vendo em três ou mais anos, mas se você prestasse um mínimo de atenção, poderia ver que o tema evoluiria para algo muito diferente do que era na época. Passei mais de um ano construindo um sistema de temas que se tornaria irrelevante em pouco tempo – com certeza, pensei que teríamos chegado a esse destino muito mais cedo.

O WordPress 5.9 enviará os subcomponentes finais da Edição Completa do Site. Isso incluirá suporte para temas de bloco sob o capô. Os usuários que os instalam podem personalizá-los por meio do editor do site e da interface de estilos globais.

O que mais me excita ainda é o que me acordou todas as manhãs há 13 anos: temas infantis.

Os temas filhos do bloco funcionaram parcialmente no plug-in Gutenberg por meses. No entanto, o recurso que eu mais esperava não estava pronto até uma semana atrás. Um novo patch permite que um tema filho sobrescreva valores únicos do arquivo theme.json de seu pai. Essencialmente, os dois arquivos são mesclados, com o filho tendo precedência.

Por que eu estava tão animado com esse recurso? Porque era o mesmo sistema que eu construí nos anos anteriores – mas melhor.

Depois de ver essa terra na versão de desenvolvimento do Gutenberg, a primeira coisa que fiz foi carregar um tema personalizado com o qual tenho me envolvido. É um projeto que venho construindo por diversão e minha própria edificação.

Então, criei um novo projeto no meu editor de código. Eu adicionei o arquivo style.css necessário e conectei os campos de cabeçalho apropriados. Eu não precisaria disso além disso. O design do meu tema filho dependeria de outro recurso.

Adicionei um theme.json no nível raiz do tema filho e comecei a me divertir mais do que nunca com temas há muito tempo.

Eu escolhi algumas cores de outono e uma fonte de título divertida. Em poucos minutos, uma nova camada de tinta foi espalhada na minha instalação de teste. O design não era revolucionário nem nada do tipo. Fiquei impressionado com a facilidade de transformar meu design inserindo alguns valores.

Este é o tipo de tema infantil que eu sempre desejei. Eu quero o poder de mudar os elementos de design do meu tema para várias estações e feriados. E quero poder compartilhar esses temas infantis com outras pessoas.

Como eu disse, eu tinha construído esses métodos de temas filhos antes (usei PHP em vez de JSON). No entanto, isso é muito mais poderoso porque se baseia no sistema de blocos padrão e não em algo personalizado que apenas um punhado de pessoas usaria.

Alguns de vocês podem perguntar por que não fiz essas alterações por meio do editor do site em vez de criar um tema filho. Rich Tabor fez, essencialmente, a mesma pergunta no Twitter hoje cedo. “Se um tema consiste em JSON e modelos de bloco que podem ser modificados por meio de estilos globais, para que servem os temas filhos?”

Digamos que instalei um tema de bloco e fiz alguns ajustes de cores. Agora, finja que eu quero misturar isso quando o Natal chegar – jogue algumas cores e encontre uma fonte festiva. Quando eu fizer essas alterações, meu design antigo não estará mais lá quando a temporada terminar porque as personalizações do usuário são armazenadas com base no tema ativo. Eu poderia, é claro, anotar todas as minhas configurações antigas e alterá-las mais tarde. No entanto, fazer isso por meio de um tema filho significa que posso simplesmente trocar de tema a qualquer momento. Minhas configurações antigas permaneceriam intactas.

Talvez este seja muito mais um caso de borda. Quem está fazendo mudanças sazonais em seu design hoje em dia, certo?

A parte empolgante é que posso compartilhar temas filhos criados com um único arquivo JSON com outras pessoas.

O tema infantil tem sido uma paixão minha desde que o recurso chegou ao WordPress. Em alguns aspectos, não mudou muito. Themers ainda podem substituir modelos do pai. Eles podem continuar adicionando CSS personalizado se quiserem. Mas agora, eles podem configurar qualquer parte do projeto a partir de um único arquivo padronizado. Isso é algo que vale a pena colocar o limite do meu desenvolvedor de volta e construir mais um tema.

Também vejo um futuro sem tema filho que ainda tem os mesmos benefícios de compartilhar elementos de design.

O diretório de padrão de bloco já fornece layouts que devem funcionar com qualquer tema WordPress bem construído. No entanto, existem outros componentes de design que podemos separar no futuro.

Imagino um futuro em que o WordPress possa ter paletas de cores instaláveis ​​como as que a Color Lovers oferece. Basta navegar em um diretório, instalar e alterar seu esquema de cores sem encontrar um novo tema. Algo semelhante ao recente plugin Adrian pode servir ao mesmo propósito para fontes. Essas são coisas que a comunidade pode querer considerar no futuro. Nenhuma ideia deve estar fora da mesa neste momento.

Por enquanto, estou feliz por ter todo o poder do tema infantil à minha disposição. A mudança deve chegar ao Gutenberg 11.8 esta semana e ao WordPress 5.9 ainda este ano.