Scripts e Estilos Condicionais: Carregando apenas quando necessário

Fala, dev! 👋

Você sabia que carregar todos os scripts e estilos de todos os blocos o tempo todo pode deixar seu site mais lento — especialmente se você estiver criando muitos blocos customizados?

Hoje vamos ver como carregar os scripts e estilos do seu bloco WordPress apenas quando ele estiver presente na página, com base no has_block() e também usando filtros no enqueue_block_assets.

🧠 Problema: Tudo é carregado, mesmo sem uso

Por padrão, ao registrar blocos com register_block_type(), os scripts e estilos são enfileirados sempre — mesmo que o bloco não apareça no post ou página atual.

Isso pode prejudicar o desempenho, especialmente em sites com muitos blocos, temas pesados e conteúdo dinâmico.

✅ Solução: Carregamento Condicional

Existem dois métodos principais para resolver isso:

🧩 1. Usar enqueue_block_assets com has_block()

add_action('enqueue_block_assets', function () {
    if (is_singular() && has_block('wp24h/alert-box')) {
        wp_enqueue_style('wp24h-alert-box');
    }
});

Isso carrega o estilo somente se o bloco estiver no conteúdo da página atual.

🧩 2. Usar render_callback e enfileirar scripts manualmente

Se seu bloco for dinâmico (com render_callback), você pode carregar os assets dentro da função de renderização:

register_block_type(__DIR__ . '/blocks/my-dynamic-block', [
    'render_callback' => function ($attributes, $content) {
        wp_enqueue_style('wp24h-my-dynamic-block');
        wp_enqueue_script('wp24h-my-dynamic-block');
        return "<div class=\"my-block\">{$content}</div>";
    }
]);

Ideal para blocos dinâmicos que precisam de lógica PHP no frontend.

🛠️ Exemplo completo com has_block()

Passo 1: block.json

{
  "apiVersion": 2,
  "name": "wp24h/alert-box",
  "title": "Caixa de Alerta",
  "editorScript": "wp24h-alert-box",
  "style": "wp24h-alert-box",
  "editorStyle": "wp24h-alert-box"
}

Passo 2: Registro no PHP (Init.php ou functions.php)

add_action('enqueue_block_assets', function () {
    if (is_singular() && has_block('wp24h/alert-box')) {
        wp_enqueue_style('wp24h-alert-box');
    }
});

O estilo não será carregado se o bloco não estiver presente no post. Simples, leve e eficaz.

💡 Dica: Evite carregar tudo no init

Não enfileire diretamente com wp_enqueue_style() na inicialização. Prefira registrar com wp_register_style() e só carregar quando for necessário com wp_enqueue_style().

🧪 Resultado

Você terá blocos muito mais leves no frontend, economizando banda, melhorando o tempo de carregamento e mantendo a performance do seu site WordPress sob controle.