WordPress Extremo: Gutenberg + React + Blocos Customizados
Fala, dev! 👋
Hoje vamos subir mais um degrau na criação de blocos Gutenberg com React. Vamos explorar dois recursos poderosos para criar blocos complexos e reutilizáveis:
- Slots: permitem organizar conteúdo filho de maneira controlada.
- Templates personalizados: definem a estrutura inicial de InnerBlocks com blocos e atributos pré-configurados.
Esses recursos são muito úteis quando você precisa garantir uma estrutura específica para os blocos internos ou quer facilitar a criação de layouts padronizados.
🧠 Cenário prático: Bloco de Card com título, imagem e conteúdo
Vamos criar um bloco wp24h/card com três áreas distintas:
- Um título (
heading) - Uma imagem (
image) - Um conteúdo (
paragraph)
Essas áreas serão controladas com template e templateLock, garantindo que o usuário não quebre o layout principal.
🧱 Estrutura de arquivos
blocks/
└── cardnovo/
├── block.json
├── index.js
├── edit.js
├── save.js
└── style.css
📦 block.json
{
"apiVersion": 2,
"name": "wp24h/cardnovo",
"title": "Card Novo",
"category": "design",
"icon": "format-image",
"supports": {
"html": false
},
"editorScript": "file:../../dist/cardnovo.js",
"style": "file:./style.css",
"editorStyle": "file:./style.css"
}
✍️ edit.js com Template
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
const TEMPLATE = [
['core/heading', { placeholder: 'Título do card' }],
['core/image'],
['core/paragraph', { placeholder: 'Descrição do card...' }]
];
export default function Edit() {
return (
<div {...useBlockProps({ className: 'cardnovo' })}>
<InnerBlocks
template={TEMPLATE}
templateLock="all" // ou "insert" para permitir edição mas bloquear adição
/>
</div>
);
}
💾 save.js
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function save() {
return (
<div {...useBlockProps.save({ className: 'cardnovo' })}>
<InnerBlocks.Content />
</div>
);
}
🎨 style.css
.cardnovo {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
max-width: 480px;
}
.cardnovo h2 {
margin-top: 0;
}
.cardnovo img {
max-width: 100%;
height: auto;
border-radius: 6px;
}
📦 index.js
import './style.css';
import edit from './edit';
import save from './save';
import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
registerBlockType(metadata.name, {
...metadata,
edit,
save,
});
💡 Slots vs Template
| Recurso | Aplicação |
|---|---|
InnerBlocks com template | Define estrutura fixa ou orientada para os filhos |
templateLock | 'all', 'insert', 'false' para travar ou permitir ajustes |
| Slots avançados (React + contexto) | Exigem implementação manual com props, context ou composição de componentes (não padrão do core ainda) |
🧪 Resultado
Você terá um bloco de card padronizado, com três áreas definidas, protegidas contra alterações acidentais e que guiam o usuário a preencher corretamente.
