Como Criar Blocos Condicionais no Gutenberg com Atributos

Fala, dev! 👋

Hoje vamos criar um tipo de bloco super útil: blocos condicionais, ou seja, blocos que mudam o que renderizam de acordo com os atributos definidos no editor.

Esse padrão é muito usado em blocos dinâmicos, especialmente quando queremos personalizar o conteúdo exibido com base em escolhas do usuário — como exibir ou ocultar partes do bloco, trocar estilos, ou até mostrar componentes diferentes.

💡 Exemplo prático: alert-box com variações por tipo

Vamos criar um bloco wp24h/alert-box com um seletor de tipo:

• info (azul)
• success (verde)
• warning (amarelo)
• error (vermelho)

E o conteúdo interno será inserido com InnerBlocks.

🧱 Estrutura de arquivos

blocks/
└── alert-box/
    ├── block.json
    ├── index.js
    ├── edit.js
    ├── save.js
    └── style.css

📦 block.json

{
  "apiVersion": 2,
  "name": "wp24h/alert-box",
  "title": "Caixa de Alerta",
  "category": "widgets",
  "icon": "warning",
  "attributes": {
    "type": {
      "type": "string",
      "default": "info"
    }
  },
  "supports": {
    "html": false
  },
  "editorScript": "wp24h-alert-box",
  "style": "wp24h-alert-box",
  "editorStyle": "wp24h-alert-box"
}

🧠 Lógica no editor – edit.js

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls, InnerBlocks } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';

const ALERT_TYPES = {
  info: 'Informação',
  success: 'Sucesso',
  warning: 'Aviso',
  error: 'Erro'
};

export default function Edit({ attributes, setAttributes }) {
  const { type } = attributes;

  const onChangeType = (value) => setAttributes({ type: value });

  const blockProps = useBlockProps({
    className: `alert-box alert-${type}`
  });

  return (
    <>
      <InspectorControls>
        <PanelBody title="Tipo de Alerta">
          <SelectControl
            label="Tipo"
            value={type}
            options={Object.entries(ALERT_TYPES).map(([value, label]) => ({ label, value }))}
            onChange={onChangeType}
          />
        </PanelBody>
      </InspectorControls>

      <div {...blockProps}>
        <InnerBlocks />
      </div>
    </>
  );
}

💾 save.js

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

export default function save({ attributes }) {
  const { type } = attributes;

  return (
    <div {...useBlockProps.save({ className: `alert-box alert-${type}` })}>
      <InnerBlocks.Content />
    </div>
  );
}

🎨 style.css

.alert-box {
  padding: 16px;
  border-radius: 6px;
  color: #fff;
  margin-bottom: 20px;
}

.alert-info {
  background-color: #2196f3;
}

.alert-success {
  background-color: #4caf50;
}

.alert-warning {
  background-color: #ff9800;
}

.alert-error {
  background-color: #f44336;
}

📦 index.js

import './style.css'; // Garante que o Webpack extraia o alert-box.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,
});

🔧 Webpack

Adicionando o nosso novo bloco, fica assim:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');
const path = require('path');

module.exports = {
  ...defaultConfig,
  entry: {
    'alert-box': path.resolve(__dirname, 'blocks/alert-box/index.js'),
    'context-box': path.resolve(__dirname, 'blocks/context-box/index.js'),
    'context-label': path.resolve(__dirname, 'blocks/context-box/context-label/index.js'),
    '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'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    clean: true
  }
};

🧩 Registro do bloco no PHP (Init.php)

Atualize o método register_blocks() para incluir também os estilos. Aqui ficou assim o trecho completo:

foreach ($iterator as $file) {
    if ($file->getFilename() !== 'block.json') {
        continue;
    }

    $block_dir  = $file->getPath();
    $block_json = json_decode(file_get_contents($file->getRealPath()), true);

    if (!isset($block_json['name'])) {
        continue;
    }

    $block_name = $block_json['name'];

    if (in_array($block_name, $excluir, true)) {
        continue;
    }

    $slug = explode('/', $block_name)[1] ?? null;

    if (!$slug) {
        continue;
    }

    $asset_file = "{$dist_path}{$slug}.asset.php";
    $script_url = "{$dist_url}{$slug}.js";
    $style_url  = "{$dist_url}{$slug}.css";
    $style_path = "{$dist_path}{$slug}.css";

    if (!file_exists($asset_file)) {
        continue;
    }

    $asset = include $asset_file;

    wp_register_script(
        "wp24h-{$slug}",
        $script_url,
        $asset['dependencies'],
        $asset['version']
    );

    if (file_exists($style_path)) {
        wp_register_style(
            "wp24h-{$slug}",
            $style_url,
            [],
            filemtime($style_path)
        );
    }

    register_block_type($block_dir, [
        'editor_script' => "wp24h-{$slug}",
        'style'         => file_exists($style_path) ? "wp24h-{$slug}" : null,
        'editor_style'  => file_exists($style_path) ? "wp24h-{$slug}" : null,
    ]);
}

✅ Com isso, o WordPress carrega os estilos nos dois contextos: editor e frontend.

🧪 Resultado

Você terá um bloco de alerta reutilizável que muda o visual de acordo com o tipo selecionado. Tudo isso sem duplicar HTML ou criar blocos separados — poder condicional com um único atributo.