Uma introdução aos temas de bloco do WordPress

Os componentes que compõem um tema WordPress típico não mudaram muito ao longo dos anos. Tanto que o co-fundador do projeto, Matt Mullenweg, brincou que o tema Kubrick da velha escola (lançado em 2005) ainda funciona com versões modernas do sistema de gerenciamento de conteúdo.

Claro, os desenvolvedores de temas lançaram suas próprias adições. Vimos de tudo, desde interfaces de usuário de configurações complexas até construtores de páginas integrados. Mas em sua essência, os temas mantiveram uma estrutura consistente. Ou seja, até a introdução de temas de bloco.

Os temas de bloco estão definidos para se tornar o futuro do WordPress. Eles vão mudar a forma como construímos e mantemos sites. Além disso, eles são mais integrados ao editor de blocos Gutenberg do que seus equivalentes “clássicos”.

Quer saber o que é todo o alarido? Hoje, vamos falar sobre o básico dos temas de bloco do WordPress. Ao longo do caminho, exploraremos como eles se comparam e contrastam com os temas tradicionais. Vamos começar!

Por que bloquear temas?

Nos primeiros anos de sua existência, o editor de blocos tem sido principalmente um meio de estilizar e construir conteúdo. Quando combinado com um tema clássico, isso significa que páginas e postagens podem ser criadas de acordo com o desejo do seu coração.

Quando se trata de fazer alterações que afetam todo o tema, o WordPress Customizer continua sendo o recurso principal. Essa ferramenta fornece acesso às configurações de design e layout que foram disponibilizadas pelo autor do tema. Se não estiver no Personalizador, você provavelmente terá que se aprofundar no código.

No entanto, um dos principais princípios do editor de blocos foi criar uma interface mais unificada no painel do WordPress. Já vimos isso acontecer com a tela Widgets se movendo para uma interface do usuário baseada em blocos. O Customizador simplesmente não se encaixa nesse molde.

A introdução do Full Site Editing (FSE) é o próximo passo neste processo. Vai além de apenas estilizar nossas páginas e postagens. Agora, todos os aspectos do design de um tema (cabeçalho, rodapé, modelos de página, etc.) podem ser gerenciados diretamente no WordPress.

Os temas de bloco servem como porta de entrada para essa funcionalidade. Como tal, eles são construídos exclusivamente com blocos em mente.

O funcionamento interno de um tema de bloco do WordPress

Não há muitas semelhanças entre temas clássicos e de blocos. Mas ambos têm um conjunto de regras básicas que orientam sua composição. Se você baixar um tema de bloco e navegar em sua estrutura de arquivos, alguns contrastes importantes podem se destacar.

Arquivos de modelo são HTML, em vez de PHP

Em um tema clássico, você encontrará arquivos de modelo com nomes como index.php e header.php . Os temas de bloco acabam com o PHP e, em vez disso, carregam a extensão de arquivo .html .

Dentro, um arquivo de modelo contém uma combinação de HTML e marcação de bloco. Por exemplo, vamos dar uma olhada neste modelo da documentação oficial do WordPress:

 <!-- wp:site-title /--> <!-- wp:image {"sizeSlug":"large"} --> <figure class="wp-block-image size-large"> <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" /> </figure> <!-- /wp:image --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:post-title /--> <!-- wp:post-content /--> </div> <!-- /wp:group --> <!-- wp:group --> <div class="wp-block-group"> <!-- wp:heading --> <h2>Footer</h2> <!-- /wp:heading --> </div> <!-- /wp:group -->

A marcação de bloco se parece muito com comentários HTML. Mas inclui sintaxe para chamar blocos específicos no modelo. O site WordPress Full Site Editing tem uma referência útil que inclui marcação para cada bloco padrão.

E se esse tipo de código parece familiar, você pode ter visto algo semelhante dentro da visualização do editor de código do Gutenberg.

O uso de pastas

Temas clássicos são capazes de armazenar modelos dentro de pastas, mas não é uma necessidade. Temas de bloco requerem algumas subpastas:

/parts
Contém itens reutilizáveis, como cabeçalho, rodapé e barra lateral.

/templates
Abriga templates para vários tipos de conteúdo. Itens como páginas, arquivos de postagem e postagens singulares são exemplos comuns. Observe que sua convenção de nomenclatura segue a hierarquia de modelos do WordPress – outra semelhança com os temas clássicos.

Um dos efeitos colaterais positivos desse arranjo é que os temas serão mais bem organizados. Ter uma estrutura de pastas padronizada significa menos tempo gasto procurando um arquivo específico.

Estilo do Theme.json

O arquivo theme.json é usado para atribuir configurações padrão ao editor de blocos. Isso significa, entre outras coisas, que é possível definir paletas de cores, tipografia e espaçamento padrão. As configurações podem ser em todo o site ou aplicadas a blocos específicos.

Como o theme.json gerará automaticamente o CSS apropriado com base em sua configuração, talvez você não precise preencher tanto o arquivo style.css de um tema. Nesse cenário, a folha de estilo é usada para definir algumas noções básicas, enquanto todo o resto depende desse arquivo moderno.

Criando e editando modelos

O WordPress há muito fornece a capacidade de editar os arquivos de modelo de um tema diretamente no painel. Isso geralmente era desencorajado, pois mesmo um pequeno erro de codificação poderia tornar um site inacessível. Isso sem falar na possibilidade de as alterações serem sobrescritas quando um tema é atualizado (assim, parte do motivo do uso de um tema filho). Alguns desenvolvedores desativam o recurso completamente para evitar até mesmo uma chance remota de catástrofe.

Mas os temas de bloco são sobre edição no painel. Os modelos incluídos em um tema podem ser ajustados por meio do editor de blocos, e novos modelos personalizados também podem ser criados.

Como você pode esperar, o código é completamente opcional neste cenário. Tudo pode ser editado através do novo Editor do Site ( Aparência > Editor – WordPress 5.9 ou superior necessário ) que substitui o personalizador legado quando um tema de bloco é ativado. E, assim como as páginas ou postagens, o Editor do Site usa a interface do usuário do editor de blocos familiar.

E isso não é tudo. Quaisquer alterações que você fizer no WordPress podem ser exportadas. Isso permitiria que você usasse seu tema de bloco personalizado em vários sites.

Isso diminui a barreira de entrada para quem deseja personalizar ou até mesmo criar temas. Agora, um olhar básico para o design e um conhecimento prático dos blocos podem levar a um site personalizado.

Coisas para manter em mente

Antes de mergulhar e mudar todos os seus sites para usar temas de bloco, há algumas coisas que você deve saber.

Em primeiro lugar, os temas de bloco são uma tecnologia nascente . Nem todos os recursos foram finalizados e algumas práticas recomendadas precisam ser eliminadas. Além disso, estamos apenas começando a ver como esses temas funcionam em um ambiente de produção. Espere várias mudanças à medida que as coisas evoluem.

Se você cria sites para clientes e deseja manter alguma flexibilidade futura, os temas híbridos podem ser interessantes. Eles permitem o uso de recursos do FSE, mantendo a estrutura PHP de um tema clássico. Você pode até mesmo adaptar um tema existente para usar essa funcionalidade.

Finalmente, os temas de bloco não significam o fim dos temas clássicos – pelo menos não no futuro próximo. Com isso, a transição para essa nova forma de tematização não precisa ser imediata. Não há problema, por exemplo, em experimentar blocos em um ambiente local enquanto ainda conta com seus temas clássicos favoritos em produção.

Recursos do tema do bloco

Se você quiser saber mais sobre os temas de bloco do WordPress, existem alguns recursos excelentes disponíveis. Aqui estão alguns dos nossos favoritos:

• Documentação do tema do bloco por WordPress
• Tema Blockbase da Automattic
• Edição completa do site por Carolina Nymark
• O guia definitivo para modelos de bloco do WordPress em Gutenberg por Rich Tabor
• A revolução do tema de bloco do WordPress está ganhando impulso silenciosamente por Justin Tadlock
• Experimentos de tema do WordPress por WordPress