WordPress Extremo: Gutenberg + React + Blocos Customizados
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.phpou 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()ouwp_enqueue_style(). - Use
render_callbackpara 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.
