Ao criar um tema personalizado ou trabalhar com um tema filho (child theme), talvez você precise remover ou ocultar determinados recursos de estilo, seja para um único bloco principal ou para uma variação completa do estilo do tema.
Fazer isso não é apenas uma questão de preferência. Muitas vezes, traz vantagens práticas, como melhor desempenho, design mais consistente e uma interface de usuário mais simples.
As abordagens adotadas para alcançar esses objetivos variam e dependem das suas necessidades e do seu nível de habilidade. Nos exemplos deste artigo, trabalharemos com um tema filho (child theme) do Twenty Twenty-Five (TT5), um tema moderno de blocos do WordPress.
O cancelamento de registro depende de como foi registrado
Para os nossos propósitos, quando nos referimos ao cancelamento do registro de uma variação de estilo de bloco ou tema, fazemos distinção entre remoção completa e parcial, e se a variação é totalmente removida ou apenas oculta na interface. Essas distinções são importantes.
Para entender como cancelar o registro de um bloco, você precisa saber como ele foi registrado. Por exemplo, é melhor cancelar o registro de blocos principais registrados com JavaScript nessa linguagem. Por outro lado, as variações de estilo de tema são registradas com PHP e, portanto, uma abordagem diferente pode ser necessária.
O cancelamento do registro de blocos personalizados está fora do escopo deste artigo, e sua abordagem depende de como esses blocos foram originalmente registrados.
O que é uma variação de estilo?
O WordPress faz distinção entre estilos de bloco e variações de estilo de tema. Os estilos de bloco são alternativas visuais para um bloco específico, como os estilos de preenchimento (fill) ou contorno (outline) de um bloco de botões. As variações de estilo de bloco são registradas no núcleo, theme.json, block.json (ou em um plugin).
As variações de estilo de tema, por outro lado, são alternativas visuais completas que incluem cores, tipografia e layouts definidos em um arquivo theme.json exclusivo. Elas permitem que os usuários alternem entre diferentes visuais (skins) de um site sem alterar o tema. O TT5 vem com oito variações de estilo, além do estilo padrão.
Dê o primeiro passo: carregue seus scripts
Como estamos trabalhando com um tema filho (child theme), você deve carregar os scripts corretamente.
Essa configuração ajuda você a começar, incluindo o carregamento do nosso arquivo personalizado unregister-blocks.js.
// Enqueue Parent and Child Styles
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style(
'parent-style',
get_template_directory_uri() . '/style.css'
);
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
['parent-style'],
wp_get_theme()->get('Version')
);
});
// Enqueue styles in the WordPress admin
add_action('admin_enqueue_scripts', function () {
wp_enqueue_style(
'child-admin-style',
get_stylesheet_uri(),
[],
wp_get_theme()->get('Version')
);
});
// Enqueue JavaScript for block editor
add_action('enqueue_block_editor_assets', function () {
wp_enqueue_script(
'unregister-core-blocks',
get_stylesheet_directory_uri() . '/js/unregister-blocks.js',
['wp-blocks', 'wp-dom-ready', 'wp-edit-post'],
null,
true
);
});Como você pode ver, temos um arquivo JavaScript em js/unregister-blocks.js, que inclui todos os nossos scripts para este artigo.
Não use get_template_directory_uri() para o arquivo JavaScript, pois ele aponta para o tema principal.
O tempo é tudo
Saber quando um hook é disparado é fundamental ao trabalhar com PHP no WordPress. É importante conhecer a sequência básica de carregamento, que começa em wp-settings.php:
- Constantes
- Globais
- Componentes principais
- Carregar plugins
- Carregar o tema
Descobrir o ponto certo em que uma função personalizada deve ser executada é uma das partes mais complicadas e frustrantes do desenvolvimento do WordPress.
Cancelando o registro de um estilo de bloco nativo
Vamos considerar uma situação em que você deseja remover o estilo de um bloco nativo. Neste caso, queremos remover o estilo outline do bloco de botão.
Como os estilos fill e outline do botão são registrados no arquivo theme.json do TT5, usamos JavaScript para realizar o processo:
wp.domReady(() => {
if (wp.blocks && wp.blocks.unregisterBlockStyle) {
wp.blocks.unregisterBlockStyle('core/button', 'outline');
}
});O resultado é a remoção do estilo de contorno na barra de ferramentas e na barra lateral.
Cancelando o registro de um bloco nativo
Suponha que você queira remover todos os estilos de um bloco. Uma abordagem mais racional é cancelar o registro do bloco (ou de vários blocos) em vez disso. Isso simplifica o Inserter ao remover blocos que você não quer que os usuários utilizem e melhora o desempenho.
Aqui, o bloco de Citação (Quote) é removido:
wp.domReady(() => {
wp.blocks.unregisterBlockType('core/quote');
});O que acontece se o script for executado depois que o bloco de Citação já tiver sido usado? O WordPress exibe a mensagem “Este bloco não está mais disponível” no Editor, mas o conteúdo ainda será renderizado no front-end. Os usuários podem editar manualmente ou converter para a visualização de HTML bruto, para a qual o bloco faz fallback.
Você pode deixar como está ou converter para HTML para manter o conteúdo e a formatação.
E se você quiser cancelar o registro de mais de um bloco? Neste exemplo, removemos os blocos de Citação (Quote) e Título (Heading) executando um loop foreach, que fornece uma maneira bastante eficiente de fazer isso:
wp.domReady(() => {
const blocksToRemove = [
'core/quote',
'core/heading',
];
blocksToRemove.forEach((blockName) => {
if (wp.blocks.getBlockType(blockName)) {
wp.blocks.unregisterBlockType(blockName);
}
});
});Esse script facilita a remoção de outros blocos, se necessário.
Cancelando o registro de uma variação de estilo de tema
A beleza das variações de estilo em temas de blocos é que elas não precisam ser registradas manualmente, como você talvez já tenha feito no passado com outras extensões do WordPress.
Em vez disso, elas são automaticamente reconhecidas pelo Core simplesmente ao colocar um arquivo theme.json formatado corretamente na raiz do tema filho ou no diretório /styles.
É fácil presumir que você precisa de uma função para cancelar o registro de variações de estilo, mas os temas de blocos funcionam de forma diferente.
Assim como acontece com estilos de blocos, não há uma interface padrão para remover variações de estilo indesejadas.
Vamos começar com os métodos mais simples e avançar a partir daí. O que torna as variações de estilo tão fáceis de “registrar” ou adicionar a um tema de blocos é exatamente o que torna muito difícil “cancelar seu registro”. Por isso, existem algumas abordagens.
Remoção de uma variação de estilo de tema
Há algumas maneiras de remover a variação do estilo Evening em um tema de bloco como o TT5.
Se você não estiver usando um tema filho (child theme), a opção mais direta é excluir o arquivo .json correspondente do tema principal (parent theme). Por exemplo, ao remover 01-evening.json do diretório /styles, você remove totalmente a variação Evening por completo.
No entanto, isso não é recomendado, pois o arquivo provavelmente retornará após a próxima atualização do tema.
Um método melhor e muito mais seguro é usar um tema filho (child theme) e substituir a variação de estilo. Você pode fazer isso criando um arquivo em branco no mesmo caminho com o mesmo nome de arquivo. Para substituir o 01-evening.json, adicione um arquivo vazio chamado 01-evening.json no diretório /styles do tema filho (child theme).
Essa abordagem não chega a “cancelar o registro” da variação; ela apenas a neutraliza. O WordPress ainda reconhece o arquivo, mas como ele não contém configurações, a variação fica invisível na interface e não funcional. Esse override só funciona porque temas filhos carregam depois dos temas pais, então é importante confirmar que seu tema filho (child theme) está configurado corretamente.
Ocultando uma variação com CSS
Outra solução alternativa é ocultar a variação de estilo da interface do usuário usando CSS. Isso não a remove da memória ou da API REST e não reduzirá o inchaço do front-end, mas impedirá que os usuários a selecionem no Site Editor.
Aqui está um exemplo para ocultar a variação Evening:
/* Hide specific global style variations in the Site Editor */
.edit-site-global-styles-variations_item[data-slug="morning"],
.edit-site-global-styles-variations_item[data-name="evening"],
.edit-site-global-styles-variations_item[title="Evening"],
.edit-site-global-styles-variations_item[aria-label*="Evening"] {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}Isso funciona no painel Editor > Estilos > Procurar estilos. Se um usuário já tiver ativado a variação Evening antes, ela continuará aplicada, mas ele não poderá mais selecioná-la ou alternar para ela novamente.
Ocultando uma variação com JavaScript
Você também pode usar JavaScript para ocultar a variação, injetada via PHP usando wp_add_inline_script. Isso é um pouco complicado, pois as variações de estilo são registradas no PHP, mas às vezes é a única maneira prática de manipular a interface do usuário de forma confiável.
Aqui está um exemplo funcional:
// Inject JS to hide specific style variations in the Site Editor UI
add_action('enqueue_block_editor_assets', function () {
wp_add_inline_script(
'unregister-core-blocks',
<< {
const interval = setInterval(() => {
document.querySelectorAll(
'[aria-label*="Noon"], [title*="Evening"], [data-name="noon"], [data-slug="evening"]'
).forEach(el => {
el.style.display = 'none';
});
}, 500);
// Stop the interval after 5 seconds
setTimeout(() => clearInterval(interval), 5000);
});
JS
);
});Esse script aguarda o carregamento do DOM e, em seguida, faz varreduras repetidas para ocultar a variação durante alguns segundos. É frágil (pois depende de tempo e de nomes de classes), mas funciona quando você precisa suprimir variações específicas sem tocar no sistema de arquivos.
Resumo
Manter seu site limpo e livre de elementos não utilizados melhora a experiência do usuário e, em muitos casos, o desempenho do site.
Os exemplos apresentados aqui mostram abordagens sólidas para cancelar o registro de variações de estilo. Também esperamos que tragam clareza sobre por que o cancelamento de registro pode ser um processo confuso.
Procurando uma hospedagem para WordPress rápida e confiável enquanto você cria e testa temas personalizados? A Kinsta oferece recursos amigáveis ao desenvolvedor, ambientes de teste e infraestrutura com desempenho otimizado para dar suporte ao seu fluxo de trabalho, desde o desenvolvimento local até a produção.
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.
