Uso de Slots e Templates Personalizados

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

🧪 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.