WordPress Extremo: Gutenberg + React + Blocos Customizados
Fala, Dev WordPress! 👋
Aqui é o Asllan Maciel — e hoje a conversa é sobre uma das ferramentas mais poderosas (e menos exploradas) do desenvolvimento com Gutenberg: a Block Context API.
Se você já precisou criar um bloco pai que influencia o comportamento de blocos filhos, já percebeu que passar valores pode virar um emaranhado. A boa notícia? O Block Context resolve isso de forma elegante.
📦 O que é o Block Context?
É como o Context API do React, mas dentro do Gutenberg: um bloco pai fornece dados para seus filhos sem precisar passar explicitamente por atributos ou props.
🧠 Quando Usar?
Use o contexto de bloco quando:
- Um bloco filho precisa acessar um valor definido no bloco pai;
- Você quer reduzir repetição de props ou atributos;
- Precisa padronizar valores compartilhados, como temas de cores, configurações de layout ou visibilidade.
💡 Exemplo Prático: context-box + context-label
Vamos criar dois blocos:
wp24h/context-box: Define uma cor de fundo.wp24h/context-label: Lê e exibe essa cor via contexto.
🗂️ Estrutura de Pastas
blocks/
└── context-box/
├── block.json
├── index.js
├── edit.js
├── save.js
├── style.css
└── context-label/
├── block.json
├── index.js
├── edit.js
├── save.js
└── style.css
🔧 1. Bloco Pai: context-box
block.json
{
"apiVersion": 2,
"name": "wp24h/context-box",
"title": "Context Box",
"category": "layout",
"icon": "screenoptions",
"attributes": {
"backgroundColor": {
"type": "string",
"default": "#d9f7be"
}
},
"providesContext": {
"wp24h/bgColor": "backgroundColor"
},
"supports": {
"html": false
},
"editorScript": "file:../../dist/context-box.js"
}
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,
});
edit.js
import { useBlockProps, InspectorControls, InnerBlocks } from '@wordpress/block-editor';
import { PanelBody, ColorPalette } from '@wordpress/components';
export default function Edit({ attributes, setAttributes }) {
const { backgroundColor } = attributes;
const setColor = (color) => setAttributes({ backgroundColor: color });
return (
<>
<InspectorControls>
<PanelBody title="Cor de Fundo">
<ColorPalette
value={backgroundColor}
onChange={setColor}
/>
</PanelBody>
</InspectorControls>
<div {...useBlockProps({ style: { backgroundColor, padding: '20px' } })}>
<InnerBlocks allowedBlocks={['wp24h/context-label']} />
</div>
</>
);
}
save.js
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
export default function save({ attributes }) {
return (
<div {...useBlockProps.save({ style: { backgroundColor: attributes.backgroundColor, padding: '20px' } })}>
<InnerBlocks.Content />
</div>
);
}
style.css
.wp-block-wp24h-context-label {
font-size: 14px;
color: #333;
}
🧩 2. Bloco Filho: context-label
block.json
{
"apiVersion": 2,
"name": "wp24h/context-label",
"title": "Context Label",
"category": "layout",
"icon": "admin-customizer",
"usesContext": ["wp24h/bgColor"],
"editorScript": "file:../../../dist/context-label.js"
}
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,
});
edit.js
import { useBlockProps } from '@wordpress/block-editor';
export default function Edit({ context }) {
const bgColor = context['wp24h/bgColor'];
return (
<div {...useBlockProps()} style={{ border: '2px dashed #666', padding: '10px', margin: '10px 0' }}>
<p>Cor herdada: <strong>{bgColor}</strong></p>
</div>
);
}
save.js
import { useBlockProps } from '@wordpress/block-editor';
export default function save() {
return <div {...useBlockProps()}>Bloco filho</div>;
}
style.css
.wp-block-wp24h-context-label {
font-size: 14px;
color: #333;
}
⚙️ 3. Webpack
No webpack.config.js:
entry: {
'context-box': path.resolve(__dirname, 'blocks/context-box/index.js'),
'context-label': path.resolve(__dirname, 'blocks/context-box/context-label/index.js'),
// outros blocos...
},
⚙️ 4. Init
Temos agora que registrar nossos novos blocos, mas para isso, vamos precisar mexer um pouco no método register_blocks() para que:
🧼 Evite registros duplicados e mensagens de erro.
🔍 Varra todos os diretórios de blocos (incluindo blocos filhos);
🚫 Ignore blocos que já foram registrados manualmente (ex: wp24h/posts);
✅ Use block.json como fonte de verdade;
⚙️ Leia automaticamente os scripts gerados no dist/ (ex: dist/context-box.js e .asset.php);
public function register_blocks()
{
$base_path = __DIR__ . '/../../blocks/';
$dist_url = plugins_url('dist/', dirname(__DIR__, 2));
$dist_path = __DIR__ . '/../../dist/';
$excluir = ['wp24h/posts']; // blocos com render_callback registrados manualmente
$iterator = new \RecursiveIteratorIterator(
new \RecursiveDirectoryIterator($base_path),
\RecursiveIteratorIterator::SELF_FIRST
);
foreach ($iterator as $file) {
if ($file->getFilename() !== 'block.json') {
continue;
}
$block_dir = $file->getPath();
$block_json = json_decode(file_get_contents($file->getRealPath()), true);
// Verifica se o nome está definido e não é um dos blocos a serem ignorados
if (!isset($block_json['name'])) {
continue;
}
$block_name = $block_json['name'];
if (in_array($block_name, $excluir, true)) {
continue;
}
// Extrai o slug final (ex: 'context-box' de 'wp24h/context-box')
$slug = explode('/', $block_name)[1] ?? null;
if (!$slug) {
continue;
}
$asset_file = "{$dist_path}{$slug}.asset.php";
$script_url = "{$dist_url}{$slug}.js";
if (!file_exists($asset_file)) {
continue;
}
$asset = include $asset_file;
wp_register_script(
"wp24h-{$slug}",
$script_url,
$asset['dependencies'],
$asset['version']
);
register_block_type($block_dir, [
'editor_script' => "wp24h-{$slug}"
]);
}
}
✅ Resultado Final
- O bloco
context-boxdefine uma cor de fundo. - O bloco
context-label, posicionado dentro dele, lê essa cor via contexto e a exibe. - Nenhuma prop foi passada diretamente — tudo via contexto, limpo e reutilizável.
