--- title: "Criar um bloco WordPress block editor em 5 passos" description: "Um bloco WordPress block editor é uma unidade de conteúdo registrada no editor Gutenberg que aparece no menu '+' como qualquer parágrafo ou imagem." url: https://full.services/bloco-wordpress-block-editor/ date: 2026-06-27 author: "Clayton Margiotti" --- # Criar um bloco WordPress block editor em 5 passos Criar um **bloco WordPress block editor** é registrar um componente próprio no Gutenberg via block.json, sem plugin pago. Segundo o [W3Techs](https://w3techs.com/technologies/details/cm-wordpress) (2026), o WordPress roda 41,5% dos sites da web. Um bloco nativo carrega só o CSS da página, contra 200 KB extras de um page builder. Use bloco para conteúdo recorrente; builder para layout visual. Um bloco WordPress block editor é uma unidade de conteúdo registrada no editor Gutenberg que aparece no menu "+" como qualquer parágrafo ou imagem. A diferença é que você define o comportamento, os campos editáveis e o HTML de saída. Isso resolve o problema de repetir a mesma estrutura (uma caixa de aviso, um card de produto, um CTA) em dezenas de posts. No suporte da FULL, a maioria dos tickets de Elementor que pedem "um componente reutilizável" se resolveria com um bloco nativo, mais leve. Este tutorial mostra o caminho completo, do scaffold ao registro, e quando vale mais usar o [Elementor para iniciantes](https://full.services/elementor-tutorial-iniciantes/). Veja também todos os [artigos de Elementor da FULL](https://full.services/elementor/). --- ## Primeiros passos: O que é um bloco WordPress block editor Um bloco WordPress block editor tem 41,5% do mercado de sites a seu favor (W3Techs, 2026): ele usa a API oficial do [Gutenberg](https://full.services/glossario/gutenberg/) e funciona em qualquer tema compatível, sem lock-in de builder. Na prática, é um par de arquivos: um `block.json` com os metadados e um `index.js` que define a edição e a saída no front-end. O WordPress 6.x lê esse par e injeta o bloco no menu de inserção, ao lado de parágrafo e imagem. A tabela abaixo separa os três tipos de componente que confundem quem começa. Cada um resolve um problema distinto, e escolher errado custa performance ou tempo de manutenção. Um [block pattern](https://full.services/glossario/block-pattern/) é só um arranjo salvo de blocos existentes, sem código. Um bloco dinâmico renderiza via PHP a cada carregamento. Um widget Elementor vive fora do Gutenberg.
Bloco WordPress block editor: tipos e quando usar cada um
Tipo Como funciona Quando usar
Bloco estático HTML salvo direto no post, sem PHP em runtime. Caixas de aviso, CTAs, cards fixos.
Bloco dinâmico Renderiza via render_callback no PHP a cada carga. Listas de posts, dados que mudam.
Block pattern Arranjo salvo de blocos nativos, zero código. Seções repetidas sem lógica nova.
Widget Elementor Componente do builder, fora do Gutenberg. Layout visual com drag-and-drop.
--- ## Por que criar um bloco nativo em vez de usar um page builder Um bloco nativo carrega em média 200 KB a menos de CSS e JavaScript que uma seção equivalente montada em page builder, porque só enfileira o que a página usa. Esse é o ganho técnico central: o Gutenberg trabalha com assets por bloco, então o navegador baixa o CSS do seu card apenas onde o card aparece. Um [page builder](https://full.services/glossario/page-builder/) tende a carregar a biblioteca inteira no site todo. A diferença aparece no Core Web Vitals. Em sites que chegam ao suporte da FULL com LCP acima de 4 segundos, boa parte do peso vem de bibliotecas de builder carregadas em páginas que nem usam o builder. Um bloco WordPress block editor evita isso por construção. Para comparar as duas abordagens em detalhe, o guia [Elementor vs Gutenberg](https://full.services/elementor-vs-gutenberg/) mostra os trade-offs de cada lado. A regra prática: componente de conteúdo que se repete vira bloco; página de campanha com visual elaborado fica no builder. --- ## Pré-requisitos: Ambiente e ferramentas para o bloco Antes de escrever a primeira linha de um bloco WordPress block editor, você precisa de quatro itens: Node.js 18 ou superior, npm, um WordPress 6.x local e um editor de código. O pacote `@wordpress/create-block` é a ferramenta oficial mantida pelo time do Gutenberg e gera todo o scaffold em um comando. Ele cria o `block.json`, o `index.js`, o `edit.js` e o `package.json` com as dependências corretas já apontadas. Quatro ferramentas resolvem 90% do fluxo. O `@wordpress/scripts` compila o JSX e o SCSS sem você configurar Webpack na mão. O `wp-env` sobe um WordPress descartável via Docker em segundos. O [functions.php](https://full.services/glossario/functions-php/) entra só se você optar pelo registro manual em vez do plugin gerado. E o LocalWP serve como alternativa visual ao `wp-env` para quem prefere interface. Com esse ambiente pronto, o scaffold abaixo leva menos de um minuto. Se você ainda monta layouts no builder, o tutorial de [CSS personalizado no Elementor](https://full.services/como-adicionar-css-personalizado-no-elementor-5-metodos-infaliveis/) cobre o outro caminho. --- ## Passo a passo: Criar e registrar o bloco O scaffold oficial gera um bloco WordPress block editor funcional em torno de 30 segundos e já o registra como plugin ativável. A partir dele, você edita os atributos, a interface de edição e a saída. Os cinco passos abaixo levam do comando inicial ao bloco visível no menu "+" do editor, com o `block.json` como fonte única de metadados (o padrão recomendado desde o WordPress 5.8). ### Passo 1: Gere o scaffold com create-block Rode `npx @wordpress/create-block meu-bloco` na pasta `wp-content/plugins`. O comando baixa o template oficial e cria uma pasta completa com `block.json`, código-fonte em `src/` e o arquivo PHP de registro. Em segundos você tem um plugin pronto para ativar no painel. ### Passo 2: Defina os atributos no block.json Abra o `block.json` e declare os campos editáveis no objeto `attributes`. Cada atributo tem um tipo (`string`, `boolean`, `number`) e uma origem. É aqui que você decide o que o editor poderá alterar: um título, uma cor, um link. O `block.json` é lido pelo WordPress e pelo bundler ao mesmo tempo. ### Passo 3: Construa a interface no edit.js No `edit.js`, use os componentes do pacote `@wordpress/block-editor`, como `RichText` e `InspectorControls`, para montar a edição. Esse arquivo controla o que o usuário vê dentro do editor. Mantenha-o próximo da saída real para evitar o erro de "block validation" que aparece quando o HTML salvo diverge do esperado. ### Passo 4: Compile com wp-scripts Execute `npm run build` para o `@wordpress/scripts` transpilar o JSX e gerar os arquivos finais em `build/`. Para desenvolver com recarga automática, use `npm start`. O bundler resolve as dependências do WordPress sem incluí-las no pacote, mantendo o arquivo final enxuto. ### Passo 5: Ative o plugin e teste no editor Ative o plugin no painel, abra um post novo e clique no "+". Seu bloco aparece na categoria definida no `block.json`. Insira-o, edite os campos e salve. Confirme que o HTML do front-end bate com a pré-visualização do editor para não disparar o aviso de bloco corrompido. --- ## Bloco estático versus dinâmico: A decisão que define a arquitetura A maioria dos casos de bloco WordPress block editor que um site precisa são estáticos, e essa escolha define se você escreve PHP ou não. Um bloco estático salva o HTML final no post: zero consulta ao banco em runtime, ideal para cards e avisos. Um bloco dinâmico usa um `render_callback` em PHP que monta o HTML em cada um dos carregamentos, somando 1 ou mais queries por visita. O erro comum é tornar tudo dinâmico "por garantia", o que adiciona consultas ao banco em cada visita. A regra: se o conteúdo é fixo no momento da edição, use estático. Se ele depende de dados externos ou que mudam, use dinâmico com cache. Para conteúdo que se repete sem lógica nova, um [bloco reutilizável](https://full.services/como-criar-blocos-conteudo-reutilizaveis-wordpress/) resolve sem código algum. Já blocos com campos complexos se beneficiam de [blocos customizados com ACF PRO](https://full.services/criar-blocos-customizados-no-gutenberg-com-acf-pro/), que dispensa escrever React. --- ## Erros comuns ao registrar um bloco WordPress block editor Três erros respondem pela maioria dos tickets de bloco que chegam ao suporte: caminho errado no `block.json`, ausência de `npm run build` e divergência entre `edit` e `save`. O primeiro acontece quando o campo `editorScript` aponta para um arquivo que o build não gerou; o WordPress simplesmente não mostra o bloco. O segundo é esquecer de compilar: você edita o `src/`, mas o `build/` continua antigo. O terceiro erro é o mais traiçoeiro. Quando o HTML que o `save.js` produz não bate com o que está salvo no banco, o Gutenberg exibe "Este bloco contém conteúdo inesperado". A causa quase sempre é mudar a estrutura do `save` depois de já ter salvo posts com a versão anterior. A correção é usar `block deprecation` para versionar a saída antiga. Quem prefere fugir desse risco pode montar o componente como um [block pattern](https://full.services/glossario/block-pattern/) ou usar campos via [ACF PRO](https://full.services/criar-blocos-customizados-no-gutenberg-com-acf-pro/), que renderiza por PHP e não sofre validação de HTML. --- ## Quando o Elementor PRO faz mais sentido que um bloco nativo Para uma landing page visual de prazo curto, o Elementor PRO entrega mais de 90 widgets prontos e arrastar-e-soltar, enquanto um bloco WordPress block editor exige escrever código do zero. É por isso que a maior parte das landing pages de cliente nasce no builder: o ganho de velocidade de produção supera o custo de peso. Para uma campanha pontual com visual elaborado, codar um bloco é desperdício de tempo. A linha divisória é clara. Componente de conteúdo recorrente, leve e versionável: um bloco WordPress block editor. Página de marketing com layout único e muitos elementos visuais: builder. O FULL plano PRO inclui o Elementor PRO e o ACF PRO no mesmo bundle, junto de outros 15 plugins premium, por R$849,90 ao ano, o que sai em torno de R$85 por site quando você gerencia uma carteira de 10 sites. Comprados avulsos, só esses dois plugins já passam disso. Confira os [planos da FULL](https://full.services/planos) para ver o que entra no PRO. A gente vê no suporte que muita agência paga caro por licenças separadas que o bundle já cobre. --- ## Performance: O impacto real do bloco no Core Web Vitals Sites que migram seções repetidas de page builder para um bloco WordPress block editor costumam reduzir o JavaScript enfileirado em uma fatia relevante, o que melhora diretamente o INP e o LCP. O mecanismo é o carregamento condicional de assets: o Gutenberg só enfileira o CSS e o JS de um bloco nas páginas onde ele aparece, enquanto o builder tende a carregar sua biblioteca completa em todo o site. Na base da FULL (150 mil sites conectados), a maior parte dos sites com nota baixa de performance carrega bibliotecas que a página atual nem usa. Trocar um card de builder por um bloco nativo não conserta tudo, mas remove peso morto de cada carregamento. Combine isso com um plugin de cache e a entrega melhora de forma composta. Para entender o conjunto da otimização, o guia [Domine o Elementor](https://full.services/guias/domine-o-elementor) reúne os tutoriais de quem usa as duas abordagens. O ponto: bloco nativo é a escolha de performance; builder é a escolha de velocidade de produção. --- ## Perguntas frequentes sobre bloco WordPress block editor
É possível criar um bloco WordPress block editor sem saber programar?

Sim, em parte. Para blocos simples você não precisa de React: o plugin ACF PRO permite criar blocos com campos e renderização em PHP, sem JavaScript. O comando @WordPress/create-block também gera 90% do código pronto, deixando só os ajustes. Já um bloco com interface de edição rica exige noções de JSX. Para componentes sem lógica, um block pattern resolve com zero código.

Por que meu bloco WordPress block editor não aparece no menu?

Na maioria dos casos, o campo editorScript no block.json aponta para um arquivo que o npm run build não gerou, ou você esqueceu de compilar após editar o src. O WordPress lê o block.json no carregamento; se o caminho do script estiver quebrado, o bloco não é registrado e some do menu "+". Rode npm run build, confirme a pasta build e recarregue o painel.

Qual a diferença entre bloco estático e bloco dinâmico?

Um bloco WordPress block editor estático salva o HTML final dentro do conteúdo do post e não consome PHP no carregamento, ideal para cards e avisos fixos. O bloco dinâmico usa um render_callback em PHP que monta o HTML a cada visita, necessário quando o conteúdo muda, como uma lista dos últimos posts. A regra: conteúdo fixo na edição usa estático; dado que muda usa dinâmico com cache.

Vale mais a pena criar um bloco nativo ou usar o Elementor?

Depende do caso. Um bloco nativo carrega cerca de 200 KB a menos por página e é versionável, ideal para componentes de conteúdo que se repetem em muitos posts. O Elementor PRO entrega layout visual com arrastar-e-soltar, ideal para landing pages elaboradas com prazo curto. Componente recorrente e leve vira bloco; página de campanha visual fica no builder. Os dois convivem no mesmo site.

O block.json substitui o registro via functions.php?

Sim, na abordagem recomendada desde o WordPress 5.8. O block.json é a fonte única de metadados: o WordPress lê nome, categoria, atributos e caminhos de script direto dele, e basta chamar register_block_type apontando para a pasta. O registro manual atributo por atributo no functions.php ainda funciona, mas é mais frágil e duplica informação que o block.json já centraliza.

--- ## Próximos passos para dominar o block editor Criar um bloco WordPress block editor deixa de ser intimidante quando você separa as três decisões: estático ou dinâmico, código ou ACF PRO, bloco nativo ou builder. O scaffold oficial com @WordPress/create-block remove a parte chata da configuração, e o block.json centraliza tudo num arquivo só. Comece com um bloco estático simples, valide a saída no editor e evolua para dinâmico só quando o conteúdo exigir. Para continuar aprendendo, o [FULL Academy](https://full.services/academy/) reúne tutoriais, guias e reviews de WordPress em um só lugar, do Gutenberg ao Elementor. O objetivo é claro: páginas mais leves, conteúdo reutilizável e menos dependência de licenças caras.

Legenda: o bloco personalizado aparece na categoria definida no block.json, ao lado dos blocos nativos.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/bloco-wordpress-block-editor/#article", "headline": "Criar um bloco WordPress block editor em 5 passos", "description": "Um bloco WordPress block editor é uma unidade de conteúdo registrada no editor Gutenberg que aparece no menu "+" como qualquer parágrafo ou imagem.", "url": "https://full.services/bloco-wordpress-block-editor/", "datePublished": "2026-06-27T09:00:00-03:00", "dateModified": "2026-06-27T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "bloco wordpress block editor", "WordPress", "Web Development" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "WordPress", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" }, { "@type": "Thing", "name": "Web Development", "@id": "https://www.wikidata.org/wiki/Q386275", "sameAs": "https://www.wikidata.org/wiki/Q386275" } ], "mentions": [ { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/bloco-wordpress-block-editor/" }, "wordCount": 2513, "citation": [ { "@type": "CreativeWork", "name": "W3Techs", "url": "https://w3techs.com/technologies/details/cm-wordpress", "publisher": { "@type": "Organization", "name": "W3Techs" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/bloco-wordpress-block-editor/#faq", "isPartOf": { "@id": "https://full.services/bloco-wordpress-block-editor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/bloco-wordpress-block-editor/#faq-q1", "name": "É possível criar um bloco WordPress block editor sem saber programar?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, em parte. Para blocos simples você não precisa de React: o plugin ACF PRO permite criar blocos com campos e renderização em PHP, sem JavaScript. O comando @WordPress/create-block também gera 90% do código pronto, deixando só os ajustes. Já um bloco com interface de edição rica exige noções de JSX. Para componentes sem lógica, um block pattern resolve com zero código.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bloco-wordpress-block-editor/#faq-q2", "name": "Por que meu bloco WordPress block editor não aparece no menu?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Na maioria dos casos, o campo editorScript no block.json aponta para um arquivo que o npm run build não gerou, ou você esqueceu de compilar após editar o src. O WordPress lê o block.json no carregamento; se o caminho do script estiver quebrado, o bloco não é registrado e some do menu "+". Rode npm run build, confirme a pasta build e recarregue o painel.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bloco-wordpress-block-editor/#faq-q3", "name": "Qual a diferença entre bloco estático e bloco dinâmico?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Um bloco WordPress block editor estático salva o HTML final dentro do conteúdo do post e não consome PHP no carregamento, ideal para cards e avisos fixos. O bloco dinâmico usa um render_callback em PHP que monta o HTML a cada visita, necessário quando o conteúdo muda, como uma lista dos últimos posts. A regra: conteúdo fixo na edição usa estático; dado que muda usa dinâmico com cache.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bloco-wordpress-block-editor/#faq-q4", "name": "Vale mais a pena criar um bloco nativo ou usar o Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Depende do caso. Um bloco nativo carrega cerca de 200 KB a menos por página e é versionável, ideal para componentes de conteúdo que se repetem em muitos posts. O Elementor PRO entrega layout visual com arrastar-e-soltar, ideal para landing pages elaboradas com prazo curto. Componente recorrente e leve vira bloco; página de campanha visual fica no builder. Os dois convivem no mesmo site.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bloco-wordpress-block-editor/#faq-q5", "name": "O block.json substitui o registro via functions.php?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, na abordagem recomendada desde o WordPress 5.8. O block.json é a fonte única de metadados: o WordPress lê nome, categoria, atributos e caminhos de script direto dele, e basta chamar register_block_type apontando para a pasta. O registro manual atributo por atributo no functions.php ainda funciona, mas é mais frágil e duplica informação que o block.json já centraliza.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Elementor", "item": "https://full.services/elementor/" }, { "@type": "ListItem", "position": 3, "name": "Criar um bloco WordPress block editor em 5 passos", "item": "https://full.services/bloco-wordpress-block-editor/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Certificação válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/bloco-wordpress-block-editor/#howto", "isPartOf": { "@id": "https://full.services/bloco-wordpress-block-editor/#article" }, "name": "Passo a passo: bloco wordpress block editor", "description": "Guia passo a passo sobre bloco wordpress block editor para WordPress.", "url": "https://full.services/bloco-wordpress-block-editor/", "totalTime": "PT30M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Gere o scaffold com create-block", "text": "Rode `npx @wordpress/create-block meu-bloco` na pasta `wp-content/plugins`. O comando baixa o template oficial e cria uma pasta completa com `block.json`, código-fonte em `src/` e o arquivo PHP de registro. Em segundos você tem um plugin pronto para ativar no painel." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Defina os atributos no block.json", "text": "Abra o `block.json` e declare os campos editáveis no objeto `attributes`. Cada atributo tem um tipo (`string`, `boolean`, `number`) e uma origem. É aqui que você decide o que o editor poderá alterar: um título, uma cor, um link. O `block.json` é lido pelo WordPress e pelo bundler ao mesmo tempo." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Construa a interface no edit.js", "text": "No `edit.js`, use os componentes do pacote `@wordpress/block-editor`, como `RichText` e `InspectorControls`, para montar a edição. Esse arquivo controla o que o usuário vê dentro do editor. Mantenha-o próximo da saída real para evitar o erro de "block validation" que aparece quando o HTML salvo diverge do esperado." }, { "@type": "HowToStep", "position": 4, "name": "Passo 4: Compile com wp-scripts", "text": "Execute `npm run build` para o `@wordpress/scripts` transpilar o JSX e gerar os arquivos finais em `build/`. Para desenvolver com recarga automática, use `npm start`. O bundler resolve as dependências do WordPress sem incluí-las no pacote, mantendo o arquivo final enxuto." }, { "@type": "HowToStep", "position": 5, "name": "Passo 5: Ative o plugin e teste no editor", "text": "Ative o plugin no painel, abra um post novo e clique no "+". Seu bloco aparece na categoria definida no `block.json`. Insira-o, edite os campos e salve. Confirme que o HTML do front-end bate com a pré-visualização do editor para não disparar o aviso de bloco corrompido. --- A maioria dos casos de bloco WordPress block editor que um site precisa são estáticos, e essa escolha define se você escreve PHP ou não. Um bloco estático salva o HTML final no post: zero consulta ao banco em runtime, ideal para cards e avisos. Um bloco dinâmico usa um `render_callback` em PHP que monta o HTML em cada um dos carregamentos, somando 1 ou mais queries por visita. O erro comum é tornar tudo dinâmico "por garantia", o que adiciona consultas ao banco em cada visita. A regra: se o conteúdo é fixo no momento da edição, use estático. Se ele depende de dados externos ou que mudam, use dinâmico com cache. Para conteúdo que se repete sem lógica nova, um bloco reutilizável resolve sem código algum. Já blocos com campos complexos se beneficiam de