Salvando Dados Personalizados no Backend via REST API

Fala, pessoal! 👋
Hoje a coisa fica séria: vamos aprender como salvar dados personalizados de um bloco no backend via REST API — usando React no editor, uma rota customizada no plugin e mantendo tudo organizado na arquitetura que criamos.

Essa técnica é essencial para blocos interativos que vão além de apenas exibir texto ou imagens: agora seus blocos poderão armazenar e recuperar dados reais no banco de dados do WordPress.

Bora lá codar? 🚀

---

🧠 Por que usar a REST API em blocos?

Ao invés de armazenar tudo no HTML do post (via atributos), podemos separar a lógica de visualização e persistência de dados, ideal para:

• Formulários com lógica de envio.
• Campos sensíveis (ex: tokens, senhas, configurações).
• Integração com APIs externas.
• Blocos com atualizações em tempo real.

---

🧱 Etapas do Dia

✅ 1. Criar a estrutura do bloco custom-data

Crie a pasta blocks/custom-data/ com os seguintes arquivos:

block.json

{
  "apiVersion": 2,
  "name": "wp24h/custom-data",
  "title": "Custom Data Block",
  "category": "widgets",
  "icon": "admin-generic",
  "description": "Bloco com dados salvos via REST API.",
  "supports": {
    "html": false
  },
  "editorScript": "file:../../dist/custom-data.js"
}

edit.js

import { useBlockProps } from '@wordpress/block-editor';
import { TextControl, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';

export default function Edit() {
  const [texto, setTexto] = useState('');
  const [resposta, setResposta] = useState(null);

  const salvarDados = () => {
    apiFetch({
      path: '/wp24h/v1/custom-data',
      method: 'POST',
      data: { texto }
    }).then(res => setResposta(res?.message || 'Salvo!'));
  };

  return (
    <div {...useBlockProps()}>
      <TextControl
        label="Digite algo"
        value={texto}
        onChange={setTexto}
      />
      <Button variant="primary" onClick={salvarDados}>Salvar via REST</Button>
      {resposta && <p>{resposta}</p>}
    </div>
  );
}

save.js

export default function save() {
  return null; // renderização apenas no editor
}

✅ index.js (ESSENCIAL para build e registro)

import { registerBlockType } from '@wordpress/blocks';
import edit from './edit';
import save from './save';
import metadata from './block.json';

registerBlockType(metadata.name, {
  ...metadata,
  edit,
  save,
});

---

✅ 2. Atualizar o Webpack

No arquivo webpack.config.js, adicione a nova entrada:

entry: {
  'card': path.resolve(__dirname, 'blocks/card/index.js'),
  'hello': path.resolve(__dirname, 'blocks/hello/index.js'),
  'posts': path.resolve(__dirname, 'blocks/posts/index.js'),
  'custom-data': path.resolve(__dirname, 'blocks/custom-data/index.js') // 👈 Aqui
},

---

✅ 3. Criar a Rota da REST API

Na pasta src/Routes/, crie CustomDataRoute.php:

<?php

namespace WpArquiteturaExtrema\Routes;

class CustomDataRoute
{
    public function register()
    {
        register_rest_route('wp24h/v1', '/custom-data', [
            'methods' => 'POST',
            'callback' => [$this, 'handle'],
            'permission_callback' => '__return_true', // segurança simplificada
        ]);
    }

    public function handle($request)
    {
        $texto = sanitize_text_field($request->get_param('texto'));

        if (!$texto) {
            return new \WP_REST_Response(['message' => 'Texto vazio.'], 400);
        }

        // Simulando salvamento no banco
        update_option('wp24h_custom_data', $texto);

        return new \WP_REST_Response(['message' => 'Salvo com sucesso!'], 200);
    }
}

---

✅ 4. Registrar as rotas no Init.php

No seu src/Hooks/Init.php, adicione:

use WpArquiteturaExtrema\Routes\CustomDataRoute;

public function register()
{
    add_action('rest_api_init', function () {
        (new CustomDataRoute())->register();
    });

    // já existente
    add_action('init', [$this, 'register_blocks']);
}

public function register_blocks()
    {
        $blocks = ['card', 'hello', 'custom-data']; // 👈 adicione o bloco novo

        foreach ($blocks as $block) {
            $asset_path = __DIR__ . "/../../dist/{$block}.asset.php";
            if (!file_exists($asset_path)) continue;

            $asset = include $asset_path;

            wp_register_script(
                "wp24h-{$block}",
                plugins_url("dist/{$block}.js", dirname(__DIR__, 2)),
                $asset['dependencies'],
                $asset['version']
            );

            register_block_type(__DIR__ . "/../../blocks/{$block}", [
                'editor_script' => "wp24h-{$block}"
            ]);
        }
    }

---

✅ 5. Rodar o build

npm run build

---

💥 Resultado

Você terá um bloco onde:

• O usuário digita um texto no editor.
• Clica em “Salvar via REST”.
• O texto é enviado e salvo no banco via update_option.

Bloco funcional, dinâmico e com separação entre front e backend.

---

📌 Extras

Quer exibir os dados salvos no frontend?

Você pode criar um render_callback no PHP que lê get_option('wp24h_custom_data') e exibe esse conteúdo dinamicamente — ou até montar uma tela administrativa para isso.

---

🔗 Continuação da Série

• 👉 11/21 – Como Criar um Bloco com Filtro por Múltiplas Categorias
• 🔜 13/21 – Lidando com Formulários e Validação no Editor do Bloco