Se este é o desenvolvimento moderno do tema WordPress, inscreva-me

Eu tive uma ideia de tema de bloco chacoalhando em meu cérebro por um tempo. Durante meses, considerei construir um tema de perfil/cartão de página única e finalmente me sentei e trabalhei no fim de semana. Em parte, eu só queria fazer isso por diversão. No entanto, outra parte de mim queria ver como o tema do bloco progrediu da perspectiva do desenvolvedor.

A inspiração para este tema veio de algumas outras pessoas e projetos. O experimento de página de destino de duas colunas de Kjell Reigstad de outubro de 2020 o acionou pela primeira vez. Uma pergunta recente à coluna Ask the Bartender sobre temas compactos e aconchegantes fez minha criatividade fluir novamente. No entanto, ver a equipe de temas aprovar um tema de bloco semelhante, Miniblock OOAK, de Carolina Nymark, significava que as regras agora eram frouxas o suficiente para possivelmente colocar algo assim no mundo.

Um dos problemas é que o tema baseado em blocos já me queimou antes. Passei meses construindo um novo projeto no ano passado em meu precioso tempo livre apenas para que as atualizações do plugin Gutenberg acabassem com meu progresso semanas depois. Eu sabia que as coisas poderiam mudar com a base instável do software de nível alfa, mas ainda estava diminuindo. Escusado será dizer que eu nunca poderia encontrar a motivação para pegá-lo de volta.

Com o WordPress 5.9 e um sistema de tema de bloco mais estável apenas alguns dias à frente, era hora de dar outra chance.

Eu queria aprender temas de bloco profundamente . A única maneira que eu poderia fazer isso era voltar ao início. Eu precisava me familiarizar com esses elementos fundamentais de HTML, CSS e PHP simples. E esqueça tudo o que eu achava que sabia construindo em cima da web moderna. Eu precisava me tornar um noob novamente.

Tecnicamente, é impossível esquecer tudo o que sei sem incorrer em algum tipo de amnésia. No entanto, talvez – apenas talvez – eu pudesse voltar aos blocos de construção da web.

Eu poderia criar um tema WordPress sem uma complexa rede de dependências abrangendo mais de 900 projetos na minha pasta /node_modules ?

Eu poderia criar algo sem puxar meus scripts PHP básicos via Composer?

Eu poderia, você sabe , apenas construir um tema WordPress?

O primeiro passo foi checar meu ego na porta. Quando deixei de lado anos de ferramentas modernas e um fluxo de trabalho construído em torno delas, o que encontrei foi um sistema de temas lindamente simples que homenageia as raízes do WordPress, mas é flexível o suficiente para se estender a compilações avançadas.

Isso não quer dizer que não houve soluços ao longo do caminho, mas ouvimos sobre eles o suficiente. Além disso, considero programação/desenvolvimento a arte de resolver problemas.

Tive um fim de semana agitado. Tive quatro, talvez cinco horas de sono sólido entre sexta e sábado à noite. Talvez eu tivesse tantos projetos e coisas acontecendo que minha mente não conseguia bloqueá-los. Independentemente disso, eu estava de volta acordado às 3h30 da manhã de domingo, cansado, mas incapaz de pegar aqueles Zs tão necessários. Então, abri meu editor de código e criei um novo projeto de tema.

Em uma hora estava funcionando. Estava em forma decente o suficiente para compartilhar com os amigos pelo Twitter em dois.

A seguir, uma captura de tela da página inicial atual. Tecnicamente, é a única página. Eu mexi um pouco desde que coloquei meus primeiros commits ao vivo.

Este é um padrão de bloco chamado “Reflexões”. A montanha refletida na foto do lago é do WordPress Photos e fotografada por Anne McCarthy. O gradiente usado para o fundo também é um reflexo das cores da imagem, o que achei legal.

O tema inclui vários outros padrões. O objetivo é permitir que os usuários escolham seu favorito para o cartão de perfil, personalizem o conteúdo e salvem. Mole-mole. Eu bati um obstáculo com isso, que eu mergulho no final do post. Na maior parte, tudo correu bem.

O que aprendi com a experiência

Criar temas WordPress com blocos é fácil. A maioria das coisas é estruturada e jogada por um conjunto padrão de regras. Modelos vão aqui. As peças vão para lá. Conecte suas configurações lá. Provavelmente veremos ainda mais estrutura em futuras versões do WordPress.

Eu construí o tema do zero usando apenas meu editor de código e uma instalação local do WordPress. Nenhum módulo Node. Sem bibliotecas PHP. Nenhuma configuração de compilação.

Provavelmente usarei essas coisas antes que este projeto seja concluído. Algumas ferramentas simplesmente facilitam o desenvolvimento. No entanto, não precisar deles ou mergulhar em APIs PHP mais complexas diminuiu a barreira de entrada.

Parecia que eu tinha sido transportado de volta para meados dos anos 2000, apenas com um sistema melhor para cuidar de todos os bits complexos. Pela primeira vez, pude me concentrar quase inteiramente no design.

Existem muitos problemas com o sistema subjacente. Estranhezas como elementos de wrapper extras em torno de blocos alinhados ainda existem no editor. E vários blocos precisam ser atualizados - estou olhando para você File block por não reutilizar o bloco Button existente .

Basicamente, existem peculiaridades. Como um tema, você aprende a trabalhar com eles em mente, espera por uma correção a montante ou arrisca sua sanidade tentando encontrar soluções alternativas.

Estou hesitante em compartilhar trabalhos inacabados, mas também devo mostrar provas. Os interessados ​​podem conferir o repositório do GitHub na data deste artigo, pelo menos antes que eu faça algo muito louco com ele.

Alguns autores de temas podem olhar para o meu projeto e achar que é um exemplo muito simples. No entanto, eu poderia facilmente aplicar tudo sobre isso a um tema completo. Os padrões são os mesmos, independentemente do tamanho.

Talvez devêssemos começar a repensar o que é um tema . Com temas baseados em blocos sendo tão jovens, todos nós deveríamos estar fazendo um pouco de experimentação.

Uma oportunidade perdida

Vou ser um pouco técnico neste trecho porque é crucial para explicar uma oportunidade perdida para uma experiência de usuário completa. O editor do site está em um lugar onde é fácil de construir para usuários mais avançados. Os padrões ajudam a preencher a lacuna para aqueles menos técnicos, mas não são suficientes.

Pense nas principais seções de uma página da web. Peças como cabeçalho, rodapé, barra lateral, conteúdo e até subseções desses. Como usuário, como você substitui todo o design da área de conteúdo que já está na tela por um padrão de conteúdo diferente?

Você pode excluir o que está lá e inserir um novo padrão. No entanto, excluir e inserir seções de uma página é uma ação de alto risco.

Se a área que você deseja alterar for uma peça de modelo, você poderá substituir uma por outra. Isso supondo que o autor do tema tenha registrado algum para essa área. Esta é uma ação de baixo risco e um dos melhores recursos do editor do site.

Por exemplo, aqui estão os modelos de cabeçalho que o Twenty Twenty-Two registra conforme aparecem no item de menu da barra de ferramentas “Substituir”:

No entanto, esse não é todo o conjunto de padrões de cabeçalho do tema - ele tem 18 no total. Imagino que a maioria dos usuários finais nunca os descobrirá.

Uma das desvantagens de criar padrões destinados a peças de modelo específicas é que os usuários finais não têm como substituir ou transformar uma peça por atacado com um novo padrão.

Os autores de temas podem duplicar seus esforços copiando o código do padrão na parte do modelo, assumindo que não há PHP misturado. Ou podem criar essas partes e extrair o padrão associado através do bloco Pattern:

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

O problema com essa abordagem é que o editor do site não exibe o conteúdo do padrão no menu suspenso “Substituir” ( acabei de descobrir um bug? ):

A solução deve ser simples. Os padrões registrados para uma parte do modelo devem ser intercambiáveis ​​por meio da interface do usuário. Ou, as partes que usam o bloco Pattern devem ser exibidas corretamente na lista suspensa “Replace”.