WordPress Extremo: Gutenberg + React + Blocos Customizados
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,useStateeapiFetch - 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
| Elemento | Função |
|---|---|
apiFetch() | Chama a REST API nativa do WordPress |
useState() | Armazena os posts localmente |
useEffect() | Executa o carregamento assim que o bloco carrega |
InspectorControls | Adiciona painel lateral no editor |
RangeControl | Permite ao usuário escolher quantos posts exibir |
PostList (componente) | Separa a exibição da lógica do bloco |
📦 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
