Blocos Gutenberg e full site editing: padrões, templates e theme.json
PT-PT

Blocos Gutenberg e full site editing: padrões, templates e theme.json

Última verificação: 1 de maio de 2026
18min de leitura
Notícias
500+ projetos WP
Desenvolvedor full-stack

#Porque e que os blocos mudaram tudo no WordPress

O WordPress serviu a web através de uma única caixa de texto enriquecido durante mais de quinze anos. Isso mudou em dezembro de 2018 quando a versão 5.0 foi lancada com o editor de blocos Gutenberg. Em vez de colar HTML em bruto ou lutar com shortcodes, cada elemento de conteúdo tornou-se um bloco independente: um paragrafo, uma imagem, uma galeria, um botao, uma tabela. Os blocos podem ser movidos, duplicados, agrupados e estilizados de forma independente.

Em 2026, o editor de blocos já não é opcional. Controla a edicao de publicações, a construcao de páginas e, com o full site editing, toda a camada de tema. Quer seja um proprietario de site que pública artigos ou um programador que entrega projetos para clientes, compreender blocos, padrões é o Site Editor é uma competencia essencial.

Este guia percorre cada camada do ecossistema de blocos, desde o painel de inserção até a construcao de um tema de blocos personalizado de raiz.

#Compreender o painel de inserção de blocos

O painel de inserção de blocos é a porta de entrada para cada elemento que pode colocar numa página. Abra-o clicando no botao azul + na barra de ferramentas superior esquerda ou escrevendo / num paragrafo vazio.

O painel de inserção agrupa blocos em categorias:

  • Texto - paragrafo, título, lista, citacao, código, pre-formatado, pullquote, verso
  • Media - imagem, galeria, audio, video, cover, ficheiro
  • Design - botoes, colunas, grupo, linha, pilha, separador, espacador
  • Widgets - shortcode, arquivos, categorias, publicações recentes, pesquisa, icones sociais
  • Tema - navegação, logotipo do site, título do site, query loop, parte de template, título da publicação, conteúdo da publicação
  • Incorporacoes - YouTube, Twitter, Spotify, Vimeo e dezenas mais via oEmbed

Cada bloco disponibiliza sua propria barra de ferramentas (formatacao inline, alinhamento, ligação) é um painel lateral com definições avançadas (ancora HTML, classes CSS adicionais, cor, tipografia). Dominar o painel de inserção significa que raramente precisa de um plugin de page builder para layouts padrão.

#Atalhos de teclado que poupam tempo

A edicao produtiva de blocos depende de atalhos:

  • / seguido do nome de um bloco insere-o instantaneamente
  • Ctrl+Shift+D (Cmd no macOS) duplica o bloco selecionado
  • Ctrl+Alt+T inseré um bloco antes do atual
  • Ctrl+Alt+Y inseré um bloco após o atual
  • Shift+Alt+Z remové o bloco selecionado
  • Ctrl+Shift+K remové uma ligação do texto selecionado

Combine estes com a pega de arrasto em cada bloco e pode reorganizar layouts complexos sem tocar no rato.

#Criar e gerir padrões sincronizados (blocos reutilizáveis)

O WordPress 6.3 renomeou “blocos reutilizáveis” para “padrões sincronizados”, mas o conceito continua a ser o mesmo: guarde um bloco ou grupo de blocos uma vez e insira-o em qualquer lugar do seu site. Quando edita uma instancia, todas as colocacoes são atualizadas.

#Como criar um padrão sincronizado

  1. Selecioné um ou mais blocos no editor.
  2. Abra a barra de ferramentas do bloco e clique no menu de três pontos.
  3. Escolha Criar padrão.
  4. De um nome é uma categoria ao padrão.
  5. Ative Sincronizado. (Deixar desativado cria um padrão normal, não sincronizado.)
  6. Clique em Criar.

O padrão aparece agora no painel de inserção no separador Padrões e dentro da categoria Sincronizado.

#Casos de uso práticos

  • Banners de call-to-action - um único grupo de blocos CTA utilizado em cada página de destino, atualizado uma vez quando a campanha muda.
  • Seccoes de testemunhos - um bloco de colunas com citacoes de clientes que permanece consistente nas páginas de serviços.
  • Avisos legais - texto juridico que deve permanecer identico em todo o site.
  • Formularios de inscricao na newsletter - um bloco de formulário sincronizado entre a barra lateral do blogue é o rodape.

#Gerir padrões a partir da administração

Navegué até Aparência > Editor > Padrões (ou o ecrã independente de Padrões em /wp-admin/edit.php?post_type=wp_block) para ver, editar, duplicar, exportar ou eliminar os seus padrões. Também pode converter um padrão sincronizado num padrão regular (não sincronizado), abrindo-o e desativando o estado de sincronização.

#Padrões de blocos é o diretório de padrões

Enquanto os padrões sincronizados são os seus próprios componentes reutilizáveis, os padrões de blocos são layouts pre-concebidos que insere e personaliza livremente. O WordPress inclui padrões integrados (seccoes hero, grelhas de testemunhos, tabelas de preços, listas de funcionalidades), e milhares mais estao disponiveis no diretório oficial de padrões em wordpress.org/patterns.

#Utilizar padrões do diretório

  1. Abra o painel de inserção e clique no separador Padrões.
  2. Navegue pelas categorias ou pesquise por palavra-chave.
  3. Clique num padrão para o inserir no editor.
  4. Modifique texto, imagens, cores e espacamento para corresponder a sua marca.

Como os padrões se tornam copias independentes após a inserção, pode alterar cada detalhe sem afetar o original.

#Registar um padrão de bloco personalizado em PHP

Temas e plugins podem registar padrões programaticamente. Aqui está um exemplo mínimo em functions.php:

<?php
declare(strict_types=1);

add_action('init', function (): void {
    register_block_pattern(
        'wppoland/hero-with-cta',
        [
            'title'       => __('Hero com CTA', 'wppoland'),
            'description' => __('Uma secção hero de largura total com titulo, paragrafo e botao.', 'wppoland'),
            'categories'  => ['featured', 'banner'],
            'keywords'    => ['hero', 'cta', 'banner'],
            'content'     => '
                <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"minHeight":500,"align":"full"} -->
                <div class="wp-block-cover alignfull" style="min-height:500px">
                    <span class="wp-block-cover__background has-contrast-background-color"></span>
                    <div class="wp-block-cover__inner-container">
                        <!-- wp:heading {"textAlign":"center","level":1} -->
                        <h1 class="wp-block-heading has-text-align-center">O seu titulo aqui</h1>
                        <!-- /wp:heading -->
                        <!-- wp:paragraph {"align":"center"} -->
                        <p class="has-text-align-center">Texto de apoio que explica a proposta de valor.</p>
                        <!-- /wp:paragraph -->
                        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
                        <div class="wp-block-buttons">
                            <!-- wp:button -->
                            <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Começar</a></div>
                            <!-- /wp:button -->
                        </div>
                        <!-- /wp:buttons -->
                    </div>
                </div>
                <!-- /wp:cover -->
            ',
        ]
    );
});

A partir do WordPress 6.0 também pode colocar ficheiros de padrões num diretório patterns/ na raiz do tema. Cada ficheiro utiliza um comentario de cabecalho para metadados e devolve marcação de blocos, permitindo o registo automático sem register_block_pattern().

#Full site editing: como o Site Editor substitui o Customizer

Full site editing (FSE) é o termo geral para a utilização de blocos para controlar todas as partes do seu site - não apenas o conteúdo de publicações, mas também cabecalhos, rodapes, barras laterais, layouts de arquivo e páginas 404. Foi implementado progressivamente do WordPress 5.9 ao 6.5 e é agora a abordagem padrão para temas de blocos.

#O que o full site editing substitui

Fluxo de trabalho classicoEquivalente FSE
Paineis do CustomizerBarra lateral de Estilos Globais no Site Editor
Areas de widgetsPartes de template (cabecalho, rodape, barra lateral)
Ficheiros de template PHPTemplates de marcação de blocos HTML
Chamadas add_theme_support()Definições theme.json
Ecra de gestão de menusBloco de navegação

#Aceder ao Site Editor

Com um tema de blocos ativo, vá a Aparência > Editor. A interface abre-se numa pré-visualização visual. A partir da barra lateral esquerda pode navegar para:

  • Templates - index, single, página, arquivo, 404, pesquisa, inicio e quaisquer templates personalizados
  • Partes de template - cabecalho, rodape, barra lateral e partes personalizadas
  • Padrões - todos os padrões registados e criados pelo utilizador
  • Estilos - tipografia global, cores, espacamento e substituicoes de estilo por bloco
  • Navegação - gestão de menus com o bloco de navegação

Cada alteracao e pre-visualizada ao vivo e guardada na base de dados. Para programadores de temas, as alterações podem ser exportadas como ficheiros de tema para controlo de versões.

#Criar templates e partes de template personalizados

Os templates definem a estrutura de um tipo de página. As partes de template são fragmentos reutilizáveis (cabecalho, rodape) partilhados entre templates.

#Criar um template no Site Editor

  1. Abra Aparência > Editor > Templates.
  2. Clique em Adicionar novo template.
  3. Selecioné um tipo de template (página, publicação individual, categoria, autor, personalizado).
  4. Construa o layout usando blocos: adicioné uma parte de template de cabecalho no topo, um query loop para publicações, uma parte de template de rodape no fundo.
  5. Guarde.

#Formato de marcação de templates

Por baixo, cada template é um ficheiro HTML de marcação de blocos. Aqui está um templates/single.html simplificado:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-title {"level":1} /-->
    <!-- wp:post-featured-image /-->
    <!-- wp:post-content /-->
    <!-- wp:post-terms {"term":"category"} /-->
    <!-- wp:post-terms {"term":"post_tag"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

As partes de template ficam no diretório parts/. Um parts/header.html pode ter este aspeto:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation /-->
</header>
<!-- /wp:group -->

Esta estrutura elimina as tags de template PHP (get_header(), the_title(), the_content()) em favor de marcação de blocos declarativa. O resultado é um tema que designers e editores de conteúdo podem modificar diretamente no Site Editor.

#Fundamentos da configuração theme.json

O theme.json é o único ficheiro de configuração que controla o que o editor disponibiliza e como o front-end se apresenta. Fica na raiz do seu tema de blocos.

#Exemplo mínimo de theme.json

{
  "$schema": "https://schemas.wp.org/wp/6.7/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#1e40af", "name": "Primary" },
        { "slug": "secondary", "color": "#9333ea", "name": "Secondary" },
        { "slug": "base", "color": "#ffffff", "name": "Base" },
        { "slug": "contrast", "color": "#1a1a1a", "name": "Contrast" }
      ],
      "gradients": [],
      "defaultPalette": false,
      "defaultGradients": false
    },
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Inter, sans-serif",
          "slug": "body",
          "name": "Body"
        },
        {
          "fontFamily": "'Space Grotesk', sans-serif",
          "slug": "heading",
          "name": "Heading"
        }
      ],
      "fontSizes": [
        { "slug": "small", "size": "0.875rem", "name": "Small" },
        { "slug": "medium", "size": "1rem", "name": "Medium" },
        { "slug": "large", "size": "1.5rem", "name": "Large" },
        { "slug": "x-large", "size": "2.25rem", "name": "Extra Large" }
      ]
    },
    "spacing": {
      "units": ["rem", "vh", "vw", "%"],
      "spacingSizes": [
        { "slug": "10", "size": "0.5rem", "name": "Tiny" },
        { "slug": "20", "size": "1rem", "name": "Small" },
        { "slug": "30", "size": "1.5rem", "name": "Medium" },
        { "slug": "40", "size": "2.5rem", "name": "Large" },
        { "slug": "50", "size": "4rem", "name": "Extra Large" }
      ]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    },
    "appearanceTools": true
  },
  "styles": {
    "color": {
      "background": "var(--wp--preset--color--base)",
      "text": "var(--wp--preset--color--contrast)"
    },
    "typography": {
      "fontFamily": "var(--wp--preset--font-family--body)",
      "fontSize": "var(--wp--preset--font-size--medium)",
      "lineHeight": "1.6"
    },
    "elements": {
      "heading": {
        "typography": {
          "fontFamily": "var(--wp--preset--font-family--heading)",
          "fontWeight": "700"
        }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--primary)"
        }
      }
    },
    "blocks": {
      "core/button": {
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--base)"
        },
        "border": {
          "radius": "4px"
        }
      }
    }
  }
}

#Explicação das seccoes principais

  • version - utilize sempre 3 para WordPress 6.6 e posterior.
  • settings - define que controlos aparecem no editor: paletas de cores, familias de fontes, tamanhos de fonte, predefinições de espacamento, larguras de layout e interruptores de funcionalidades.
  • styles - aplica valores CSS predefinidos a raiz, elementos (títulos, ligacoes, botoes, legendas) e blocos individuais.
  • appearanceTools - um atalho que ativa controlos de borda, espacamento, tipografia e dimensões na barra lateral.

O motor converté o theme.json em propriedades CSS personalizadas (como --wp--preset--color--primary) que cascateiam por todo o site. Isto significa que um ficheiro governa os tokens de design tanto para o editor como para o front-end.

#Os melhores plugins de blocos para WordPress em 2026

O editor base cobre a maioria das necessidades, mas plugins de blocos de terceiros preenchem as lacunas com layouts avancados, controlos de design e blocos especializados.

#Spectra (anteriormente Ultimate Addons for Gutenberg)

Desenvolvido pela Brainstorm Force (a equipa por tras do plugin Starter Templates), o Spectra adiciona mais de 30 blocos: temporizadores de contagem decrescente, classificacoes por estrelas, listas de icones, listas de preços, modais, separadores é um bloco de formulários completo. Inclui um bloco de contentor com modos de layout flex e grid, tornando-o adequado para designs de página complexos sem um page builder tradicional. Os preços são definidos individualmente conforme o nível de funcionalidades.

#GenerateBlocks

Construído pela equipa GeneratePress, o GenerateBlocks adota uma abordagem mínima: quatro blocos principais (contentor, título, botões, imagem) que dependem de definições flexíveis em vez de dezenas de blocos de propósito único. O resultado é um output leve com CSS mínimo. Os utilizadores avançados apreciam a integração com query loop e o sistema de dados dinâmicos que puxa meta de publicações, campos personalizados e dados de taxonomia para layouts de blocos.

#Stackable

O Stackable oferece mais de 40 blocos com uma biblioteca de design visual de mais de 200 layouts pré-construídos. A sua funcionalidade distintiva é um sistema de design unificado onde tipografia global, paletas de cores e escalas de espaçamento se propagam automaticamente para cada bloco Stackable. A versão gratuita cobre a maioria dos casos de uso, enquanto o nível premium adiciona conteúdo dinâmico, exibição condicional e efeitos de movimento.

#Kadence Blocks

O Kadence Blocks fornece um sistema de layout de linhas/colunas, bloco de título avançado, caixas de informação, listas de ícones, índice de conteúdos e um bloco de formulário. A biblioteca de design inclui padrões de página completa e de secção. O Kadence combina especialmente bem com o tema Kadence, partilhando um sistema de tokens de design. Os preços do nível pro são definidos individualmente e variam com base no número de sites.

#Escolher o plugin certo

CritérioSpectraGenerateBlocksStackableKadence Blocks
Total de blocos30+4 (flexíveis)40+20+
Abordagem de designRica em funcionalidadesMinimalistaBaseada em bibliotecaEquilibrada
Impacto na performanceMédioBaixoMédioBaixo-Médio
Força da versão gratuitaForteForteForteForte
Melhor combinado comStarter TemplatesGeneratePressQualquer temaKadence Theme

Escolha GenerateBlocks para projetos críticos em performance, Spectra ou Stackable para páginas com design exigente e Kadence Blocks quando precisar de um construtor de formulários robusto ao lado de ferramentas de layout.

#Construir um tema de blocos simples de raiz

Combinando tudo o que foi abordado acima, segue-se um percurso passo a passo para criar um tema de blocos mínimo.

#Passo 1: estrutura de pastas

my-block-theme/
  style.css
  theme.json
  functions.php
  templates/
    index.html
    single.html
    page.html
    404.html
  parts/
    header.html
    footer.html
  patterns/
    hero-banner.php

#Passo 2: cabecalho style.css

/*
Theme Name: My Block Theme
Theme URI: https://wppoland.com
Author: wppoland.com
Author URI: https://wppoland.com
Description: Um tema de blocos mínimo para aprender full site editing.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

Não e necessário CSS adicional aqui. Toda a estilizacao flui através do theme.json e do sistema de estilos globais.

#Passo 3: theme.json

Utilize o exemplo da secção anterior. Ajusté a paleta de cores é a tipografia para corresponder a sua marca.

#Passo 4: templates

templates/index.html (o template de reserva):

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"queryId":1,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
            <!-- wp:post-date /-->
        <!-- /wp:post-template -->
        <!-- wp:query-págination -->
            <!-- wp:query-págination-previous /-->
            <!-- wp:query-págination-numbers /-->
            <!-- wp:query-págination-next /-->
        <!-- /wp:query-págination -->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

templates/404.html:

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:heading {"level":1} -->
    <h1 class="wp-block-heading">Página não encontrada</h1>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
    <p>A página que procura não existe. Tente pesquisar ou volté a página inicial.</p>
    <!-- /wp:paragraph -->
    <!-- wp:search {"label":"Pesquisar","buttonText":"Pesquisar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

#Passo 5: partes de template

parts/header.html:

<!-- wp:group {"tagName":"header","style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"constrained"}} -->
<header class="wp-block-group" style="padding-top:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20)">
    <!-- wp:group {"layout":{"type":"flex","justifyContent":"space-between"}} -->
    <div class="wp-block-group">
        <!-- wp:site-title /-->
        <!-- wp:navigation {"layout":{"type":"flex"}} /-->
    </div>
    <!-- /wp:group -->
</header>
<!-- /wp:group -->

parts/footer.html:

<!-- wp:group {"tagName":"footer","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"backgroundColor":"contrast","textColor":"base","layout":{"type":"constrained"}} -->
<footer class="wp-block-group has-base-color has-contrast-background-color has-text-color has-background" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
    <!-- wp:paragraph {"align":"center","fontSize":"small"} -->
    <p class="has-text-align-center has-small-font-size">Construido com WordPress e blocos.</p>
    <!-- /wp:paragraph -->
</footer>
<!-- /wp:group -->

#Passo 6: padrão registado automaticamente

patterns/hero-banner.php:

<?php
/**
 * Title: Banner hero
 * Slug: my-block-theme/hero-banner
 * Categories: featured, banner
 * Keywords: hero, cta, landing
 */
?>

<!-- wp:cover {"overlayColor":"primary","isUserOverlayColor":true,"minHeight":480,"align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:480px">
    <span class="wp-block-cover__background has-primary-background-color"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center","level":1,"textColor":"base"} -->
        <h1 class="wp-block-heading has-text-align-center has-base-color has-text-color">Bem-vindo ao My Block Theme</h1>
        <!-- /wp:heading -->
        <!-- wp:paragraph {"align":"center","textColor":"base"} -->
        <p class="has-text-align-center has-base-color has-text-color">Um tema WordPress leve, centrado em blocos.</p>
        <!-- /wp:paragraph -->
        <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
        <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"base","textColor":"primary"} -->
            <div class="wp-block-button"><a class="wp-block-button__link has-primary-color has-base-background-color has-text-color has-background wp-element-button">Saber mais</a></div>
            <!-- /wp:button -->
        </div>
        <!-- /wp:buttons -->
    </div>
</div>
<!-- /wp:cover -->

#Passo 7: functions.php (melhorias opcionais)

<?php
declare(strict_types=1);

add_action('after_setup_theme', function (): void {
    add_theme_support('wp-block-styles');
    add_theme_support('editor-styles');
    add_editor_style('style.css');
});

add_action('wp_enqueue_scripts', function (): void {
    wp_enqueue_style(
        'my-block-theme-style',
        get_stylesheet_uri(),
        [],
        wp_get_theme()->get('Version')
    );
});

Carregué a pasta para wp-content/themes/, ative-o é abra Aparência > Editor. Tem agora um tema de blocos totalmente funcional onde cada template, padrão e estilo e editavel a partir do navegador.

#Dicas avançadas para desenvolvimento centrado em blocos

#Bloquear blocos para evitar edições acidentais

Ao construir templates para clientes, bloqueie blocos para restringir a movimentacao e remocao:

<!-- wp:group {"lock":{"move":true,"remove":true}} -->
<div class="wp-block-group">
    <!-- wp:paragraph -->
    <p>Este bloco não pode ser movido ou eliminado por editores.</p>
    <!-- /wp:paragraph -->
</div>
<!-- /wp:group -->

O conteúdo dentro de blocos bloqueados permanece editavel, mas a integridade estrutural mantem-se intacta.

#Utilizar variações de blocos para consistencia

Registe variações de blocos para fornecer instancias pre-configuradas de blocos base. Por exemplo, uma variacao “membro da equipa” do bloco media-and-text:

<?php
add_action('enqueue_block_editor_assets', function (): void {
    wp_add_inline_script(
        'wp-blocks',
        "wp.blocks.registerBlockVariation('core/media-text', {
            name: 'team-member',
            title: 'Team Member',
            attributes: {
                mediaPosition: 'left',
                verticalAlignment: 'center',
            },
            scope: ['inserter'],
        });"
    );
});

As variações aparecem como blocos distintos no painel de inserção enquanto partilham o código do bloco pai.

#Tirar partido do pacote create-block

Para blocos personalizados além do que padrões e variações cobrem, útilizé a ferramenta oficial de scaffolding @wordpress/create-block:

npx @wordpress/create-block my-custom-block --variant dynamic

Isto gera um plugin com ferramentas de construcao (webpack, Babel, ESLint), uma função edit baseada em React é um render_callback PHP para renderizacao dinâmica do lado do servidor. E o caminho recomendado para qualquer bloco que precise de buscar dados, executar consultas ou exibir conteúdo dinâmico.

#Erros comuns e como evita-los

Misturar templates classicos e de blocos. Um tema é ou um tema de blocos ou um tema classico. Colocar index.php ao lado de templates/index.html cria comportamento de fallback imprevisivel. Comprometa-se com uma abordagem por tema.

Substituir theme.json com CSS inline. Estilos inline contornam a cascata de estilos globais e quebram os controlos de estilo do Site Editor. Utilize sempre predefinições theme.json e propriedades CSS personalizadas.

Ignorar o diretório patterns. Muitos programadores ainda registam padrões exclusivamente através de PHP. O diretório patterns/ com cabecalhos de ficheiro e mais simples, não requer registo de hooks e mantem a marcação de padrões separada da lógica.

Esquecer de testar com diferentes funções de utilizador. Editores e Autores veem uma versão filtrada do editor de blocos. A edicao de templates, estilos globais e certos blocos podem estar ocultos com base nas permissões. Verifique sempre a experiência de edicao para cada função que a utilizara.

Não exportar alterações do Site Editor. As modificacoes feitas no navegador são armazenadas na base de dados. Se reimplementar o tema sem exportar essas alterações para ficheiros, elas desaparecem. Utilize a função de exportação do Site Editor ou o comando WP-CLI wp theme export para sincronizar as alterações de volta para o controlo de versões.

#O futuro dos blocos no WordPress

O projeto Gutenberg está organizado em quatro fases: edição mais fácil (lançada), personalização (atual, FSE), colaboração (em progresso) e multilingue (planeada). A Fase 3, colaboração em tempo real, trará edição simultânea ao estilo do Google Docs para o editor de blocos. A Fase 4 pretende tornar o WordPress nativamente multilingue sem plugins.

Os temas de blocos já são o padrão para novas instalações WordPress. Os temas clássicos continuam a ser suportados, mas o desenvolvimento de novas APIs e ferramentas de design foca-se no paradigma de blocos. Investir em competências centradas em blocos agora posiciona sua equipa para cada lançamento importante do WordPress até 2028 e além.

#Como a wppoland.com aborda o desenvolvimento de blocos

Na wppoland.com, construimos cada projeto de cliente com arquitetura centrada em blocos. O nosso fluxo de trabalho comeca com tokens de design em theme.json, avanca para padrões de blocos personalizados para seccoes repetitivas e termina com templates bloqueados que dao liberdade aos editores de conteúdo sem risco estrutural.

Para projetos que necessitam de blocos além do que o core e plugins existentes oferecem, desenvolvemos blocos personalizados utilizando o conjunto de ferramentas @wordpress/create-block, com renderizacao do lado do servidor para conteúdo dinâmico e integração total com os estilos globais do Site Editor.

Se precisa de um tema de blocos personalizado, uma migração de um tema classico para full site editing ou desenvolvimento de blocos a medida para o seu fluxo de trabalho de conteúdo, contacte a equipa wppoland.com. Entregamos soluções de blocos adaptadas aos seus requisitos editoriais e empresariais, com preços definidos individualmente com base no ambito do projeto.

Próximo passo

Transforme o artigo numa implementação real

Este bloco reforça a ligação interna e conduz o leitor para o passo seguinte mais útil dentro da arquitetura do site.

Quer implementar isto no seu site?

Se quer transformar o artigo em melhorias concretas, redesign ou num plano de implementação, posso fechar o escopo e executar.

Cluster relacionado

Explorar outros serviços WordPress e base de conhecimento

Reforce o seu negócio com suporte técnico profissional em áreas-chave do ecossistema WordPress.

Qual é a diferenca entre blocos reutilizáveis e padrões de blocos no WordPress? #
Os padrões sincronizados (anteriormente blocos reutilizáveis) são grupos de blocos guardados que permanecem ligados, de modo que a edicao de uma instancia atualiza todas as colocacoes. Os padrões de blocos são layouts pre-concebidos que se tornam copias independentes após a inserção, permitindo a personalização por instancia sem afetar outras utilizacoes.
Como ativo o full site editing no WordPress? #
O full site editing requer um tema de blocos (como o Twenty Twenty-Five) e WordPress 5.9 ou posterior. Assim que um tema de blocos estiver ativo, o Site Editor aparece em Aparência, substituindo o Customizer tradicional. Não e necessário nenhum plugin.
O que é o theme.json e porque e importante? #
O theme.json é um ficheiro de configuração na raiz de um tema de blocos que define estilos globais, paletas de cores, predefinições de tipografia, escalas de espacamento e predefinições de layout. Substitui a maioria das chamadas add_theme_support() e fornece uma fonte única de verdade para tokens de design.
Posso utilizar blocos Gutenberg com um tema classico? #
Sim. O editor de blocos funciona com qualquer tema para conteúdo de publicações e páginas. No entanto, funcionalidades de full site editing como edicao de templates e estilos globais requerem um tema de blocos. Temas hibridos podem optar por funcionalidades de blocos selecionadas enquanto mantem templates PHP classicos.
Quais são os melhores plugins de blocos gratuitos para expandir o Gutenberg? #
Os melhores plugins de blocos gratuitos incluem Spectra (anteriormente Ultimate Addons for Gutenberg), GenerateBlocks, Stackable e Kadence Blocks. Cada um adiciona blocos únicos, controlos de design e bibliotecas de padrões que expandem o editor base sem o substituir.

Precisa de FAQ adaptado ao setor e mercado? Criamos uma versão alinhada com os seus objetivos de negócio.

Fale connosco

Artigos Relacionados

Saiba quando uma reconstrução de website é necessária. 7 sinais técnicos e de negócio mensuráveis de que o seu site precisa de modernização em 2026.
wordpress

Quando reconstruir o seu website? 7 sinais de que precisa de modernização

Saiba quando uma reconstrução de website é necessária. 7 sinais técnicos e de negócio mensuráveis de que o seu site precisa de modernização em 2026.

WordPress 7.0 com AI Client vs Astro 6 após aquisição pela Cloudflare. Comparação de velocidade, custos, SEO e segurança. A minha perspetivá após 20 anos como programador WP - quando migrar e quando ficar.
wordpress

WordPress 7.0 vs Astro 6 após aquisição pela Cloudflare - quem vence em 2026?

WordPress 7.0 com AI Client vs Astro 6 após aquisição pela Cloudflare. Comparação de velocidade, custos, SEO e segurança. A minha perspetivá após 20 anos como programador WP - quando migrar e quando ficar.

Guia técnico de WordPress Multisite para implementações enterprise. Aprenda padrões de arquitetura, escalabilidade para 1000+ sites, hardening de segurança, mapeamento de domínios, gestão de utilizadores e otimização de custos para redes de franchising, universidades é organismos governamentais.
wordpress

WordPress Multisite para Enterprise: Arquitetura, Escalabilidade e Boas Práticas

Guia técnico de WordPress Multisite para implementações enterprise. Aprenda padrões de arquitetura, escalabilidade para 1000+ sites, hardening de segurança, mapeamento de domínios, gestão de utilizadores e otimização de custos para redes de franchising, universidades é organismos governamentais.