Antes do Full Site Editing, criar um design system consistente no WordPress exigia malabarismos: CSS customizado no Customizer, variáveis CSS no functions.php, e torcer para que os editores de conteúdo não quebrassem o layout ao usar blocos com cores erradas. Desde o WordPress 5.9, o theme.json mudou esse jogo completamente — e na versão 6.5 ele se tornou maduro o suficiente para projetos de produção sérios.

O que é o Full Site Editing (FSE)

FSE é o nome do sistema que substituiu o antigo Customizer. Em vez de configurar aparência via campos de formulário PHP, você controla tudo por meio de dois mecanismos:

O resultado: um design system que funciona no editor visual E no frontend, com as mesmas variáveis CSS geradas automaticamente pelo WordPress.

theme.json: a fonte da verdade de design

Um theme.json bem estruturado define toda a identidade visual. Aqui está um exemplo real com escala de cores, tipografia fluida e escala de espaçamento:

{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 3,
  "settings": {
    "color": {
      "palette": [
        { "name": "Ink",       "slug": "ink",       "color": "#171717" },
        { "name": "Canvas",    "slug": "canvas",    "color": "#fafafa" },
        { "name": "Primary",   "slug": "primary",   "color": "#2563eb" },
        { "name": "Muted",     "slug": "muted",     "color": "#6b7280" }
      ],
      "custom": false
    },
    "typography": {
      "fluid": true,
      "fontSizes": [
        { "name": "Small",  "slug": "sm",  "size": "clamp(0.875rem, 0.8rem + 0.4vw, 1rem)" },
        { "name": "Base",   "slug": "base", "size": "clamp(1rem, 0.9rem + 0.5vw, 1.125rem)" },
        { "name": "Large",  "slug": "lg",  "size": "clamp(1.25rem, 1rem + 1vw, 1.5rem)" },
        { "name": "XLarge", "slug": "xl",  "size": "clamp(1.75rem, 1rem + 2.5vw, 2.5rem)" }
      ],
      "fontFamilies": [
        { "name": "Inter", "slug": "inter", "fontFamily": "Inter, system-ui, sans-serif" }
      ]
    },
    "spacing": {
      "spacingScale": {
        "steps": 7,
        "mediumStep": 1.5,
        "unit": "rem",
        "operator": "*",
        "increment": 1.5
      },
      "units": ["px", "%", "rem"]
    },
    "layout": {
      "contentSize": "720px",
      "wideSize": "1200px"
    }
  },
  "styles": {
    "color": { "background": "var(--wp--preset--color--canvas)", "text": "var(--wp--preset--color--ink)" },
    "typography": { "fontSize": "var(--wp--preset--font-size--base)", "fontFamily": "var(--wp--preset--font-family--inter)", "lineHeight": "1.7" }
  }
}

Cada cor definida no array palette vira automaticamente uma variável CSS do tipo var(--wp--preset--color--ink) — usável tanto nos blocos do editor quanto no seu CSS customizado.

Tipografia fluida: responsividade sem media queries

Com "fluid": true na tipografia, o WordPress gera tamanhos com clamp() automaticamente. O font-size cresce suavemente conforme a viewport aumenta — sem breakpoints, sem media queries manuais. O nome clamp(min, preferencial, max) define os limites: no mobile o texto fica no mínimo, no desktop no máximo, com transição linear.

Block Patterns: componentes reutilizáveis para a equipe

Block Patterns são composições de blocos que a equipe pode inserir com um clique — o equivalente funcional de um componente React, só que no editor visual. Você registra no PHP, e o padrão aparece na biblioteca de padrões do Gutenberg.

add_action('init', function () {
  register_block_pattern(
    'meutema/hero-cta',
    [
      'title'       => 'Hero com CTA duplo',
      'description' => 'Bloco hero com título, subtítulo e dois botões de ação',
      'categories'  => ['featured'],
      'content'     => '<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80"}}},"backgroundColor":"ink","textColor":"canvas"} -->
<div class="wp-block-group has-ink-background-color has-canvas-color">
  <!-- wp:heading {"level":1,"fontSize":"xl"} -->
  <h1 class="wp-block-heading has-xl-font-size">Título principal</h1>
  <!-- /wp:heading -->
  <!-- wp:buttons -->
  <div class="wp-block-buttons">
    <!-- wp:button {"backgroundColor":"primary"} -->
    <div class="wp-block-button"><a class="wp-block-button__link has-primary-background-color">CTA primário</a></div>
    <!-- /wp:button -->
  </div>
  <!-- /wp:buttons -->
</div>
<!-- /wp:group -->',
    ]
  );
});

Para organizar padrões em categorias personalizadas, registre a categoria antes dos padrões com register_block_pattern_category().

Global Styles API: overrides no runtime

O WordPress 6.5 introduziu a Global Styles API para PHP, que permite que plugins e temas filhem e modifiquem os estilos globais programaticamente — útil para temas multi-tenant onde cada cliente tem uma paleta:

add_filter('wp_theme_json_data_theme', function ($theme_json) {
  $new_data = [
    'version'  => 3,
    'settings' => [
      'color' => [
        'palette' => [
          [ 'name' => 'Brand', 'slug' => 'brand', 'color' => get_option('cliente_cor_primaria', '#2563eb') ]
        ]
      ]
    ]
  ];
  return $theme_json->update_with($new_data);
});

Por que FSE supera o desenvolvimento de tema clássico

Com temas clássicos, cada mudança visual exige um desenvolvedor. Com FSE + theme.json bem configurado, a equipe de conteúdo pode ajustar cor de fundo de uma seção, tamanho de fonte ou espaçamento diretamente no editor — dentro dos limites que o tema define. O design system não é violado porque o tema controla os tokens; o editor apenas os aplica.

Isso não significa que FSE resolve tudo. Layouts muito customizados (landing pages únicas, aplicações complexas) ainda precisam de templates PHP ou até React via Interactivity API. Mas para 80% dos projetos WordPress, um tema FSE bem construído entrega mais consistência visual com menos código do que qualquer tema clássico que você já escreveu.