Conectando Blocos com a REST API do WordPress

Fala dev! No dia 13 da nossa trilha WordPress Extremo, a gente entra no mundo real: blocos que se conectam com dados vivos do WordPress — direto da REST API.

Vamos montar um bloco chamado posts, que traz os últimos posts publicados e exibe isso no editor de blocos, tudo dinamicamente.

✅ O que você vai aprender

• Como acessar a REST API do WordPress dentro de um bloco
• Como usar useEffect, useState e apiFetch
• Como separar a listagem em um componente próprio
• Como montar blocos que respondem a dados reais do site

📁 Estrutura do bloco

blocks/
└── posts/
    ├── block.json
    ├── index.js
    ├── edit.js
    ├── save.js
    └── components/
        └── PostList.js

📄 Arquivos completos

📌 block.json

{
  "apiVersion": 2,
  "name": "wp24h/posts",
  "title": "Lista de Posts WP24H",
  "category": "widgets",
  "icon": "list-view",
  "description": "Um bloco que exibe os últimos posts via REST API.",
  "editorScript": "file:../../dist/posts.js",
  "attributes": {
    "quantidade": {
      "type": "number",
      "default": 3
    }
  },
  "supports": {
    "html": false
  }
}

📌 index.js

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

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

📌 edit.js

import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import PostList from './components/PostList';

export default function Edit({ attributes, setAttributes }) {
  const { quantidade } = attributes;
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    apiFetch({ path: `/wp/v2/posts?per_page=${quantidade}` })
      .then((data) => setPosts(data));
  }, [quantidade]);

  return (
    <>
      <InspectorControls>
        <PanelBody title="Configurações">
          <RangeControl
            label="Quantidade de posts"
            min={1}
            max={10}
            value={quantidade}
            onChange={(val) => setAttributes({ quantidade: val })}
          />
        </PanelBody>
      </InspectorControls>

      <div {...useBlockProps()}>
        <PostList posts={posts} />
      </div>
    </>
  );
}

📌 save.js

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

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

📌 components/PostList.js

export default function PostList({ posts }) {
  if (!posts.length) return <p>Carregando posts...</p>;

  return (
    <ul className="wp24h-post-list">
      {posts.map(post => (
        <li key={post.id}>
          <strong>{post.title.rendered}</strong>
        </li>
      ))}
    </ul>
  );
}

🧠 Explicações rápidas

📦 Build com Webpack

Garanta que o webpack.config.js contenha a entrada posts:

entry: {
  'hello': path.resolve(__dirname, 'blocks/hello/index.js'),
  'card': path.resolve(__dirname, 'blocks/card/index.js'),
  'posts': path.resolve(__dirname, 'blocks/posts/index.js'),
}

Não esqueça do registro do bloco, no caso aqui ficou assim:

public function register_blocks()
    {
        $blocks = ['card', 'hello', 'posts']; //add posts

        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}"
            ]);
        }
    }

E rode:

npm run build

✅ O que conseguimos

✔️ Bloco dinâmico, conectado ao conteúdo real do site
✔️ Experiência moderna no editor
✔️ Pronto pra evoluir e ser reaproveitado com outros endpoints