Salvando Dados Personalizados no Backend via REST API

WordPress Extremo: Gutenberg + React + Blocos Customizados

Bloco de Posts com Filtro por Múltiplas Categorias

Filtrando Posts por Categoria no Editor do Bloco

Bloco Dinâmico com Renderização no Servidor

Conectando Blocos com a REST API do WordPress

Componentes Reutilizáveis e Atributos Compostos em Blocos Gutenberg

Ícones, Imagens e Classes Personalizadas no Gutenberg

Cor, Alinhamento e Estilo Dinâmico com Gutenberg + React

Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

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

Criando Blocos Personalizados com Gutenberg e React

Salvando Dados Personalizados no Backend via REST API

Blocos Reutilizáveis com InnerBlocks no Gutenberg

Comunicação entre Blocos com Block Context API no WordPress

Como Criar Blocos Condicionais no Gutenberg com Atributos

Internationalização de Blocos Gutenberg (i18n)

Scripts e Estilos Condicionais: Carregando apenas quando necessário

Uso de Slots e Templates Personalizados

Inserindo Blocos via Código ou Shortcodes

Testes e Validação de Blocos com @wordpress/scripts

Distribuindo Seus Blocos: Plugins, Repositório e GitHub

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