React e WordPress

React WordPress é a biblioteca JavaScript que está em toda parte do CMS desde 2018: o editor Gutenberg é construído inteiro em React, blocos customizados são componentes React, plugins de admin modernos usam React, e arquiteturas headless conectam WordPress como backend a frontends React via REST ou GraphQL. Conhecer React virou competência essencial para quem desenvolve para WordPress profissional. Não dá para criar bloco Gutenberg, customizar wp-admin moderno ou trabalhar headless sem dominar a biblioteca.

O que é React

React é uma biblioteca JavaScript criada pelo Facebook em 2013 para construir interfaces de usuário baseadas em componentes. Cada componente é uma função (ou classe) que recebe propriedades (props) e estado interno (state) e retorna um pedaço de UI. A biblioteca cuida de re-renderizar de forma eficiente quando os dados mudam.

O modelo conceitual é declarativo. Em vez de você manipular o DOM diretamente (jQuery clássico), você descreve como a UI deve ser para um dado estado, e o React calcula a diferença e atualiza só o necessário. JSX (JavaScript XML) é a sintaxe que mistura HTML-like dentro de JavaScript, padrão na escrita de componentes.

React virou onipresente em frontend moderno. Facebook, Instagram, Netflix, Airbnb, Uber, Twitter, Discord, Atlassian rodam React em produção. Frameworks como Next.js, Remix e Gatsby são todos baseados em React. Comunidade gigantesca, biblioteca de pacotes massiva, ecossistema saudável.

Para WordPress, a Automattic apostou pesado em React. O editor Gutenberg foi reescrito do zero em React, posicionando o CMS para o futuro. A decisão polarizou a comunidade em 2018, mas hoje é vista como acerto: WordPress se modernizou tecnicamente sem perder retrocompatibilidade.

React no Gutenberg do WordPress

Gutenberg é o editor de blocos do WordPress, padrão desde a versão 5.0 (dezembro de 2018). Cada bloco (parágrafo, imagem, lista, botão, embed) é um componente React. O editor é uma aplicação React rodando dentro do wp-admin, salvando o resultado como HTML serializado no banco.

O pacote @wordpress/scripts (o build tool oficial) compila os blocos. Você escreve JSX, importa componentes do @wordpress/components (biblioteca de UI da Automattic), e o build gera bundles que o WordPress carrega. Hot reload em desenvolvimento, otimização em produção.

O editor expõe APIs React-friendly via @wordpress/block-editor. Hooks como useBlockProps, useInnerBlocksProps, useEntityProp facilitam criar blocos que se integram bem com o editor: estilos automáticos, suporte a alinhamento, gerenciamento de filhos. Quem já conhece React aprende rápido.

Full Site Editing (FSE) é a evolução natural. Em vez de o tema ser PHP rígido, o tema vira coleção de blocos editáveis. Header, footer, sidebar, single de post, archive: tudo construído com blocos React. O usuário edita o site inteiro via interface visual baseada em React. Combine com Gutenberg bem dominado para entender o ecossistema.

WordPress headless com React

WordPress headless é o modelo onde o WordPress fica só como backend (API + admin) e o frontend é construído numa stack separada, geralmente React. O site público nunca renderiza pelo PHP do WordPress: o React consome dados via REST API ou GraphQL e renderiza na sua própria stack, com performance e DX modernos.

Stack mais comum hoje é Next.js (React framework) + WordPress headless. Next.js WordPress roda em Vercel ou Netlify, consome /wp-json (REST) ou /graphql (via WPGraphQL plugin) e gera páginas estáticas ou SSR. Performance de single-page app com SEO de site estático.

Outras stacks viáveis: Gatsby (declínio nos últimos anos, mas ainda em uso), Remix (alternativa ao Next.js com filosofia diferente), Astro (ótimo para sites de conteúdo), e React puro com Vite para apps internos. A escolha depende de prioridades: SEO crítico, performance estática extrema, interatividade rica.

Cuidados de headless são reais. Plugins de tema (Elementor, Divi) deixam de ter sentido. Comentários, formulários e plugins frontend exigem reimplementação. SEO precisa ser cuidadoso para garantir SSG/SSR completos. Headless WordPress é decisão arquitetural, não escolha leve.

Trade-off entre maintenance e performance precisa ser pesado por projeto. Para sites de conteúdo com altíssimo tráfego e exigência de Core Web Vitals perfeito, headless compensa. Para sites institucionais de baixo a médio tráfego, monolito WordPress otimizado é mais simples e econômico.

Como criar blocos Gutenberg em React

O caminho oficial começa com @wordpress/create-block, scaffold da Automattic. Comando “npx @wordpress/create-block meu-bloco” gera plugin completo com estrutura de arquivos, build configurado, exemplo funcional. Em segundos você tem um bloco rodando localmente.

A estrutura básica tem dois arquivos React: edit.js (componente que renderiza o bloco no editor) e save.js (componente que serializa o bloco para o post). edit.js usa hooks do @wordpress/block-editor, save.js retorna HTML estático que será salvo no banco. Para blocos dinâmicos (renderizados pelo PHP no frontend), save.js retorna null e a renderização vira render_callback no PHP.

block.json é o arquivo de metadata que descreve o bloco: nome, título, ícone, categoria, atributos. Padrão moderno (Block API v3) declara tudo em JSON e o PHP registra automaticamente. Reduz boilerplate e centraliza configuração.

Para sliders, galerias, accordions, tabs, hero sections: cada um vira componente React reutilizável dentro de um bloco. @wordpress/components oferece InspectorControls (sidebar do editor com configurações), RichText (campo de texto editável), MediaUpload (seleção de mídia da biblioteca), entre dezenas de outros componentes prontos.

Para entender melhor o stack completo, vale ler também sobre REST API WordPress que alimenta blocos dinâmicos e arquiteturas headless. O WordPress moderno opera com PHP no backend e React no frontend de admin, mesmo em sites tradicionais.

Para projetos WordPress que precisam de blocos Gutenberg customizados, integrações React com REST API e arquiteturas headless em produção sem montar a infra de build, deploy e API tunada, a FULL Services entrega ambientes WordPress otimizados para uso headless e desenvolvimento React-friendly dentro dos planos da plataforma. É a forma de focar no código React enquanto a infra WordPress já vem com REST API e WPGraphQL pré-configurados, prontos para alimentar o frontend.