Blocos Reutilizáveis com InnerBlocks no Gutenberg

Fala, pessoal! 👋
Aqui é o Asllan Maciel e hoje vamos falar sobre um recurso poderosíssimo do Gutenberg: o InnerBlocks.

Se você já pensou em montar áreas customizadas dentro de um bloco, onde o usuário pode inserir outros blocos livremente (como se fosse uma seção do Elementor ou Bricks), essa é a peça que faltava.

Vamos criar um Container Personalizado onde será possível adicionar qualquer outro bloco dentro. Bloco de texto? Imagem? Vídeo? O que quiser!

Bora pro código? 🚀

🧠 O que são InnerBlocks?

O InnerBlocks é um componente especial do Gutenberg que permite definir áreas “editáveis” dentro de um bloco personalizado.

Ele serve para:

✅ Criar blocos “container” com conteúdo flexível
✅ Permitir composição de layouts complexos
✅ Dar liberdade ao usuário, mas com estrutura

📦 Estrutura de arquivos

No seu plugin, crie a pasta do bloco:

blocks/
└── container/
    ├── block.json
    ├── edit.js
    ├── index.js
    ├── save.js

📄 block.json

{
  "apiVersion": 2,
  "name": "wp24h/container",
  "title": "Container Personalizado",
  "category": "design",
  "icon": "columns",
  "description": "Um container que pode receber qualquer bloco dentro.",
  "supports": {
    "html": false
  },
  "editorScript": "file:../../dist/container.js"
}

✏️ edit.js

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

export default function Edit() {
  return (
    <div {...useBlockProps({ className: 'wp24h-container' })}>
      <InnerBlocks />
    </div>
  );
}

💾 save.js

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

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

📌 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
});

⚙️ Atualizando o webpack.config.js

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'),
  'container': path.resolve(__dirname, 'blocks/container/index.js'), // novo bloco
},

Não esqueça que precisamos atualizar o Init também:

public function register_blocks()
    {
        $blocks = ['card', 'hello', 'custom-data', 'container']; //Aqui

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

🧪 Testando

npm run build

E pronto! Agora você pode adicionar o bloco “Container Personalizado” no editor e dentro dele adicionar qualquer outro bloco Gutenberg.

🔁 Extensões possíveis

Você pode limitar os blocos permitidos no InnerBlocks:

<InnerBlocks allowedBlocks={['core/paragraph', 'core/image']} />

Ou criar layouts predefinidos com template:

<InnerBlocks
  template={[['core/paragraph', { placeholder: 'Escreva aqui...' }]]}
/>

✍️ Conclusão

Com InnerBlocks, você abre um novo mundo de possibilidades no Gutenberg: blocos reutilizáveis, seções personalizadas, composição visual e muito mais.

Quer criar um sistema de layouts flexíveis no seu plugin? Comece aqui.