Inserindo Blocos via Código ou Shortcodes

Fala, dev! 👋

Hoje vamos explorar formas não convencionais, mas super úteis de inserir blocos Gutenberg via PHP, seja dentro de um template, via do_shortcode() ou até mesmo dinamicamente com render_block().

Isso é essencial quando você quer:

• Reutilizar blocos dentro de temas personalizados
• Gerar conteúdo dinâmico via backend
• Exibir blocos fora do editor visual (como no functions.php, single.php ou via um plugin)

💡 Três formas principais de inserir blocos via código

🔹 1. render_block(): bloco como array + HTML renderizado

$block_content = render_block([
    'blockName' => 'core/paragraph',
    'attrs' => [
        'content' => 'Esse conteúdo foi inserido via render_block()!'
    ],
    'innerHTML' => '<p>Esse conteúdo foi inserido via render_block()!</p>',
    'innerContent' => ['<p>Esse conteúdo foi inserido via render_block()!</p>']
]);

echo $block_content;

Ideal para inserir blocos programaticamente com controle total.

🔹 2. do_blocks() + string com conteúdo em bloco

$gutenberg_markup = '<!-- wp:core/heading {"level":3} --><h3>Esse bloco foi processado com do_blocks()</h3><!-- /wp:core/heading -->';

echo do_blocks($gutenberg_markup);

Essa função processa o conteúdo como se estivesse no editor. Funciona bem para strings armazenadas no banco de dados ou geradas por shortcode.

🔹 3. Criar shortcode que renderiza um bloco

add_shortcode('meu_bloco_dinamico', function () {
    return do_blocks('<!-- wp:core/paragraph --><p>Esse bloco veio de um shortcode!</p><!-- /wp:core/paragraph -->');
});

Agora você pode usar [meu_bloco_dinamico] em qualquer lugar, e o bloco aparecerá processado corretamente.

🧱 Exemplo com bloco customizado

Se você criou um bloco wp24h/alert-box, pode renderizá-lo assim:

echo render_block([
    'blockName' => 'wp24h/alert-box',
    'attrs' => [
        'type' => 'error',
    ],
    'innerHTML' => '<div class="alert-box alert-error">Erro renderizado via render_block</div>',
    'innerContent' => ['<div class="alert-box alert-error">Erro renderizado via render_block</div>']
]);

Você pode incluir lógica para renderizar atributos, tipo do alerta, etc.

⚠️ Cuidados ao usar blocos por código

• Alguns blocos não funcionam fora do contexto do editor (ex: InnerBlocks, alguns componentes JS).
• Evite duplicação de estilos: se o bloco exige CSS, certifique-se de que ele está sendo enfileirado com has_block() ou wp_enqueue_style().
• Use render_callback para dinamismo completo, especialmente em blocos criados para esse fim.

🧪 Resultado

Você poderá usar blocos do editor diretamente no frontend, por meio de templates, funções ou shortcodes — com controle total sobre o que, onde e como exibir.