Os temas em bloco em arquivo theme.json oferecem muita flexibilidade, o que pode dar a impressão de que os temas filhos (child themes) se tornaram obsoletos. No entanto, eles ainda são fundamentais em muitos cenários.
Usar um tema filho (child theme) continua sendo a melhor escolha se você deseja controle real sobre o design do seu site sem modificar os arquivos principais do tema principal (parent theme).
Neste artigo, usaremos o tema Twenty Twenty-Five como base e mostraremos como criar um tema filho (child theme) de blocos com seus próprios style.css e functions.php. Você aprenderá a substituir estilos com segurança, definir estilos de bloco personalizados e até mesmo configurar suas próprias variações de estilo. Não se trata apenas de um truque de estilo, mas de uma etapa sólida para que você possa criar seu próprio tema de bloco completo no futuro.
Embora este exercício pareça simples, exploramos alguns pontos específicos que podem causar confusão. Vamos começar criando um tema filho (child theme) personalizado e depois implementando uma variação de estilo customizada.
Registrando um tema filho (child theme) de blocos
Registrar um tema filho (child theme) de blocos é muito mais simples do que registrar um clássico.
Tecnicamente, você não precisa registrá-lo manualmente. O registro acontece automaticamente quando a pasta do tema filho (child theme) tem o nome adequado e contém os arquivos theme.json e um arquivo style.css.
Então, por que o arquivo style.css ainda é necessário?
Como antes, ele inclui um cabeçalho obrigatório (mostrado abaixo) que contém metadados que o WordPress usa para identificar o tema, incluindo seu nome e o tema principal (parent theme) que ele estende. Embora os estilos e as configurações agora sejam tratados em theme.json, style.css ainda desempenha um papel fundamental para que o WordPress reconheça seu tema, mesmo que não contenha CSS.
/*
Theme Name: Twenty Twenty-Five Child
Description: Child theme for the Twenty Twenty-Five theme
Template: twentytwentyfive
*/Um arquivo functions.php não é necessário, a menos que você queira enfileirar scripts ou adicionar funcionalidades baseadas em PHP. Faremos isso mais adiante.
Se você não estiver familiarizado com o theme.json ou quiser se atualizar rapidamente, consulte nosso guia sobre Trabalhando com Propriedades e Pares de Valores-chave no theme.json.
Fazendo três alterações básicas em nosso tema filho (child theme)
Vamos começar atualizando as cores globais de fundo e texto, além de estilizar o bloco de Botão.
No arquivo theme.json do tema secundário (que serve como estilo padrão), definimos o seguinte:
{
"version": 3,
"settings": {
"color": {
"palette": [
{
"name": "Black",
"slug": "black",
"color": "#000000"
},
{
"name": "Yellow",
"slug": "yellow",
"color": "#FFFF00"
},
{
"name": "Purple",
"slug": "purple",
"color": "#800080"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--black)",
"text": "var(--wp--preset--color--yellow)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--purple)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--yellow)",
"width": "2px",
"style": "solid"
}
}
}
}
}Embora as cores de fundo e de texto se apliquem a todas as variações de estilo, a estilização do bloco de Botão se aplica apenas à variação padrão.
Substituição de variações de estilo
Para aplicar o mesmo estilo de botão em diferentes variações, é melhor você criar um arquivo .json que corresponda à convenção de nomenclatura de variação do tema principal (parent theme).
Por exemplo, para substituir a borda do botão na variação de estilo Evening (Noite), crie um arquivo chamado 01-evening.json no diretório raiz do tema filho (child theme) (ou dentro de uma subpasta /styles):
{
"version": 3,
"title": "Evening",
"styles": {
"blocks": {
"core/button": {
"border": {
"color": "var(--wp--preset--color--white)",
"width": "3px",
"style": "dashed"
}
}
}
}
}Aqui, usamos uma borda mais larga e tracejada para destacar o botão. Como esses estilos são mais específicos, eles substituem os estilos gerais de theme.json.
Criando uma variação de estilo personalizada
Vamos dar um passo adiante, criando uma variação de estilo totalmente nova chamada Kinsta. Essa variação herda as configurações globais do arquivo theme.json do tema filho (child theme) e aplica sua própria paleta de cores e estilo de botão personalizados:
Salve o seguinte arquivo como /styles/kinsta.json:
{
"version": 3,
"title": "Kinsta",
"settings": {
"color": {
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#261e1e"
},
{
"name": "Secondary",
"slug": "secondary",
"color": "#ff2900"
},
{
"name": "White",
"slug": "white",
"color": "#FFFFFF"
}
]
}
},
"styles": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--primary)"
},
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"color": "var(--wp--preset--color--white)",
"width": "4px",
"style": "dotted"
}
}
}
}
}Essa variação “Kinsta” nos dá uma aparência distinta, criada inteiramente dentro da estrutura do tema filho (child theme).
Como e por que carregar o style.css
Em um verdadeiro tema de blocos como o Twenty Twenty-Five, não é necessário carregar folhas de estilo manualmente via PHP, seja para o tema principal (parent theme) ou para o tema filho (child theme). O WordPress gera dinamicamente o CSS com base no theme.json.
No entanto, se você quiser escrever estilos personalizados no arquivo style.css, será necessário carregá-los manualmente.
// Frontend styles
add_action('wp_enqueue_scripts', function() {
// Enqueue parent theme stylesheet
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
// Enqueue child theme stylesheet
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array('parent-style')
);
});Esse código garante que tanto o style.css do tema principal (parent theme) quanto o do tema filho (child theme) sejam carregados no frontend.
Para confirmar se os estilos estão sendo enfileirados corretamente, tente adicionar o seguinte CSS ao arquivo style.css do seu tema filho (child theme):
body {
color: #ffff00;
background: #0000ff;
}Isso aplicará a todas as variações de estilo um fundo azul e texto amarelo, somente no frontend.
Um caso de uso simples para styles.css
Você pode estar se perguntando: por que usar CSS? O theme.json não deveria cuidar de tudo?
Não é bem assim.
Por exemplo, theme.json não oferece suporte a pseudoclasses como :hover. Para estilizar um efeito de foco em todos os botões, você pode usar este CSS:
.wp-block-button a:hover {
background: #ffffff;
color: #0000ff;
}Isso se aplica a todos os blocos de botões em todas as variações no frontend.
Suponha que você queira limitar esse efeito de foco a uma variação ou bloco específico. Nesse caso, você precisará usar métodos mais avançados, como classes de corpo condicionais, filtros de bloco ou CSS específico para o bloco.
Adicionando uma variação de estilo para um bloco
Agora, vamos ver como adicionar uma nova variação de estilo ao bloco de Botão usando PHP e CSS.
Se você estiver pensando em adicionar um array de variations ao theme.json, isso não funcionará para este caso. Embora o theme.json gerencie estilos globais e por bloco, as variações de estilo dos blocos, como estilos alternativos para botões, precisam ser registradas de outra forma.
Vamos criar uma nova variação de estilo chamada Alternative Outline, que aparecerá junto com os estilos padrão Fill e Outline na interface do editor e será renderizada corretamente no frontend.
Registre o estilo no PHP
Adicione o seguinte código ao arquivo functions.php do seu tema filho (child theme). Ele registra o estilo após o carregamento do núcleo, mas antes de qualquer página ser renderizada:
// Register "Alternative Outline" button style
add_action('init', function() {
register_block_style(
'core/button',
[
'name' => 'alternative-outline',
'label' => __('Alternative Outline', 'twenty-twenty-five-child'),
]
);
});Adicione estilos personalizados ao style.css
Agora, defina os estilos para essa variação, inclusive um estado :hover, no arquivo style.css do seu tema secundário:
.wp-block-button.is-style-alternative-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--yellow);
border: 2px dotted var(--wp--preset--color--yellow);
transition: all 0.7s ease-in-out;
}
.wp-block-button.is-style-alternative-outline .wp-block-button__link:hover {
background-color: var(--wp--preset--color--yellow);
color: var(--wp--preset--color--black);
}As variáveis color usadas aqui são definidas em sua paleta theme.json, garantindo a consistência em todo o site.
Criando variações de estilo de bloco com JSON
A partir do WordPress 6.6, você pode registrar variações de estilo de bloco central totalmente usando JSON, sem necessidade de PHP.
Aqui está um exemplo que adiciona uma nova variação chamada Purple Background ao bloco Group. Ela aparece na barra lateral do editor com uma visualização estilizada:
Crie um arquivo chamado block.json dentro da pasta /styles/purple-background/ do seu tema:
{
"version": 3,
"$schema": "https://schemas.wp.org/trunk/theme.json",
"title": "Purple Background",
"slug": "section-purple",
"blockTypes": ["core/group"],
"styles": {
"border": {
"radius": "20px"
},
"color": {
"background": "#800080",
"text": "#eeeeee"
},
"spacing": {
"padding": {
"top": "var(--wp--preset--spacing--50)",
"right": "var(--wp--preset--spacing--50)",
"bottom": "var(--wp--preset--spacing--50)",
"left": "var(--wp--preset--spacing--50)"
}
}
}
}A variação Purple Background aparece na barra lateral do editor, conforme mostrado na imagem abaixo:
Se você estiver trabalhando com várias variações de estilo, é uma boa prática colocá-las em uma subpasta /styles. Nesse caso, o caminho do arquivo é: /styles/purple-background/block.json.
Aqui estão algumas observações finais que você deve considerar sobre o método JSON:
- Essa abordagem não requer PHP e pode reduzir o peso da página porque o WordPress só carrega o CSS relevante quando necessário.
- Como estamos trabalhando com um tema filho (child theme) do Twenty Twenty-Five – que já usa
theme.jsone estilo dinâmico – não há necessidade de enfileirar estilos manualmente. - Alguns blocos talvez ainda não sejam compatíveis com todas as opções de estilo via JSON. Se a compatibilidade com versões anteriores for uma preocupação, você pode adicionar opcionalmente um fallback PHP usando
register_block_style().
Resumo
Os temas de blocos oferecem uma flexibilidade extraordinária, abrindo as portas para inúmeras possibilidades de desenvolvimento. Neste artigo, nosso objetivo foi apresentar a você o mundo da criação de temas filhos (child themes) para temas de blocos e, com sorte, inspirá-lo a dar vida às suas próprias ideias.
Também exploramos duas abordagens para adicionar variações personalizadas de estilo de bloco central: uma usando PHP e CSS e outra usando apenas JSON.
Como você deve imaginar, cada exemplo que abordamos pode seguir múltiplos caminhos. O WordPress é rico em opções, muitas vezes oferecendo diversas formas de resolver o mesmo problema.
Por exemplo, é possível criar um tema de blocos que usa o theme.json apenas para configurações, enquanto depende totalmente do style.css para a estilização, aproveitando as capacidades mais amplas do CSS. Ou, ainda, você pode carregar estilos condicionalmente, para serem aplicados apenas quando uma variação específica estiver em uso.
As possibilidades são infinitas!
Na Kinsta, oferecemos um conjunto completo de ferramentas de desenvolvimento, das mais básicas às mais avançadas, para acelerar, otimizar e aprimorar seu fluxo de trabalho com WordPress. Experimente a Kinsta gratuitamente por 30 dias.
Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.
