Campos Dinâmicos e InspectorControls no Gutenberg: Deixe Seu Bloco Interativo

E aí, dev! No Dia 7, criamos nosso primeiro bloco personalizado com Gutenberg + React.

Mas até agora, ele era fixo: um HTML estático.

Hoje, no Dia 8, vamos dar vida a ele:

✔️ Criando campos editáveis diretamente no editor
✔️ Salvando essas mudanças no conteúdo do post
✔️ E organizando tudo de forma limpa e clara no nosso plugin modular

🎯 O que vamos fazer:

• Adicionar um campo de texto dinâmico
• Exibir esse valor no editor e no frontend
• Usar o InspectorControls para editar o valor pela barra lateral

📦 Estrutura do nosso bloco hello:

Continuamos com:

/blocks/hello/
  ├── block.json
  ├── index.js
  ├── edit.js
  ├── save.js
  └── build/hello.js (compilado via webpack)

1️⃣ Definindo atributos no block.json

Vamos adicionar o campo mensagem:

"attributes": {
  "mensagem": {
    "type": "string",
    "default": "Olá do WP24Horas!"
  }
}

👉 Agora nosso bloco entende que ele terá um atributo chamado mensagem, que é uma string.

2️⃣ Editando o bloco no editor (edit.js)

Aqui vamos usar o hook useBlockProps(), InspectorControls, TextControl e setAttributes para atualizar o valor:

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export default function Edit({ attributes, setAttributes }) {
  const { mensagem } = attributes;

  return (
    <>
      <InspectorControls>
        <PanelBody title="Configurações">
          <TextControl
            label="Mensagem"
            value={mensagem}
            onChange={(value) => setAttributes({ mensagem: value })}
          />
        </PanelBody>
      </InspectorControls>

      <div {...useBlockProps()}>
        <p>{ mensagem }</p>
      </div>
    </>
  );
}

3️⃣ Salvando o conteúdo (save.js)

Aqui usamos attributes.mensagem:

import { useBlockProps } from '@wordpress/block-editor';

export default function save({ attributes }) {
  return (
    <div {...useBlockProps.save()}>
      <p>{ attributes.mensagem }</p>
    </div>
  );
}

4️⃣ Compilar com Webpack

npm run build

5️⃣ Atualizar no editor

• Acesse o editor de post/página
• Adicione o bloco “Bloco Hello WP24H”
• Edite a mensagem no painel lateral
• Salve e veja o conteúdo renderizado corretamente no front

💡 Bônus: Validação simples

Você pode usar default, type, source, selector e muito mais nos atributos.

Exemplo avançado:

"attributes": {
  "mensagem": {
    "type": "string",
    "source": "html",
    "selector": "p"
  }
}

Isso faz com que o Gutenberg salve o conteúdo do elemento <p> diretamente no atributo.

✅ Conclusão do Dia 8

Hoje você:

✔️ Entendeu como adicionar campos dinâmicos ao bloco
✔️ Aprendeu a usar attributes, setAttributes e InspectorControls
✔️ Viu como tudo se conecta no editor e no front

💬 Curtiu o conteúdo?

👉 Quer aprender a fundo como construir blocos avançados com campos personalizados, repetições e integração com metadados?

Comenta aqui suas dúvidas 👇