Ícones, Imagens e Classes Personalizadas no Gutenberg

Bora, Asllan! Entramos agora no Dia 11 da Trilha WordPress Extremo, e o foco de hoje é deixar nosso bloco mais versátil, profissional e com componentes visuais reais, como ícones, imagens e suporte a classes personalizadas.

🧠 Dia 11 – Ícones, Imagens e Classes Personalizadas no Gutenberg

Chega de blocos com texto simples. Hoje vamos integrar elementos visuais como ícones SVG, imagens customizadas e até permitir que o usuário escolha classes CSS externas para estilização avançada.

✅ O que você vai aprender hoje

• Adicionar campos de imagem via MediaUpload
• Inserir ícones SVG diretamente no bloco
• Usar TextControl para classes CSS extras
• Deixar o bloco mais visual e aplicável em produção real

📦 Estrutura atual do bloco hello

/blocks/hello/
├── block.json
├── edit.js
├── save.js
├── index.js
├── style.css
├── editor.css
└── build/hello.js

🧩 1. Atualize os atributos no block.json

"attributes": {
  "mensagem": {
    "type": "string",
    "default": "Olá do WP24Horas!"
  },
  "destaque": {
    "type": "boolean",
    "default": false
  },
  "corTexto": {
    "type": "string",
    "default": "#333333"
  },
  "alinhamento": {
    "type": "string",
    "default": "left"
  },
  "imagem": {
    "type": "string",
    "default": ""
  },
  "classeExtra": {
    "type": "string",
    "default": ""
  }
}

🛠 2. Atualize o edit.js

import { __ } from '@wordpress/i18n';
import {
  useBlockProps,
  InspectorControls,
  MediaUpload,
  BlockControls,
  AlignmentToolbar
} from '@wordpress/block-editor';
import {
  PanelBody,
  TextControl,
  ToggleControl,
  ColorPalette,
  Button
} from '@wordpress/components';

const CORES = [
  { name: 'Azul', color: '#007cba' },
  { name: 'Verde', color: '#46b450' },
  { name: 'Cinza', color: '#555d66' },
  { name: 'Preto', color: '#000000' }
];

export default function Edit({ attributes, setAttributes }) {
  const { mensagem, destaque, corTexto, alinhamento, imagem, classeExtra } = attributes;

  const baseClasses = ['wp-block-wp24h-hello'];
  if (destaque) baseClasses.push('is-highlighted');
  if (classeExtra) baseClasses.push(classeExtra);

  const styles = {
    color: corTexto,
    textAlign: alinhamento
  };

  return (
    <>
      <BlockControls>
        <AlignmentToolbar
          value={alinhamento}
          onChange={(align) => setAttributes({ alinhamento: align })}
        />
      </BlockControls>

      <InspectorControls>
        <PanelBody title="Configurações">
          <TextControl
            label="Mensagem"
            value={mensagem}
            onChange={(value) => setAttributes({ mensagem: value })}
          />
          <ToggleControl
            label="Destaque"
            checked={destaque}
            onChange={(value) => setAttributes({ destaque: value })}
          />
          <p><strong>Cor do texto:</strong></p>
          <ColorPalette
            colors={CORES}
            value={corTexto}
            onChange={(value) => setAttributes({ corTexto: value })}
          />
          <TextControl
            label="Classe CSS extra"
            value={classeExtra}
            onChange={(value) => setAttributes({ classeExtra: value })}
          />
          <MediaUpload
            onSelect={(media) => setAttributes({ imagem: media.url })}
            type="image"
            render={({ open }) => (
              <Button onClick={open} variant="secondary">
                { imagem ? 'Trocar imagem' : 'Selecionar imagem' }
              </Button>
            )}
          />
        </PanelBody>
      </InspectorControls>

      <div {...useBlockProps({ className: baseClasses.join(' '), style: styles })}>
        { imagem && <img src={imagem} alt="Imagem personalizada" style={{ maxWidth: '100%' }} /> }
        <p>{ mensagem }</p>
        <span style={{ display: 'inline-block', marginTop: '10px' }}>
          {/* Ícone embutido como exemplo */}
          <svg width="24" height="24" viewBox="0 0 24 24" fill={corTexto}>
            <path d="M12 0L15.09 7.26L23 8.27L17 14.14L18.18 22.02L12 18.77L5.82 22.02L7 14.14L1 8.27L8.91 7.26L12 0Z"/>
          </svg>
        </span>
      </div>
    </>
  );
}

💾 3. Atualize o save.js

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

export default function save({ attributes }) {
  const { mensagem, destaque, corTexto, alinhamento, imagem, classeExtra } = attributes;

  const baseClasses = ['wp-block-wp24h-hello'];
  if (destaque) baseClasses.push('is-highlighted');
  if (classeExtra) baseClasses.push(classeExtra);

  const styles = {
    color: corTexto,
    textAlign: alinhamento
  };

  return (
    <div {...useBlockProps.save({ className: baseClasses.join(' '), style: styles })}>
      { imagem && <img src={imagem} alt="Imagem personalizada" style={{ maxWidth: '100%' }} /> }
      <p>{ mensagem }</p>
      <span style={{ display: 'inline-block', marginTop: '10px' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill={corTexto}>
          <path d="M12 0L15.09 7.26L23 8.27L17 14.14L18.18 22.02L12 18.77L5.82 22.02L7 14.14L1 8.27L8.91 7.26L12 0Z"/>
        </svg>
      </span>
    </div>
  );
}

✅ Resultado:

• Você pode:
  • Adicionar uma imagem via upload
  • Ver um ícone SVG embutido (editável via código)
  • Definir uma classe CSS customizada (pra aplicar estilos externos via tema)
• O bloco agora é mais flexível e visual

🔨 Compile:

npm run build

✅ Conclusão do Dia 11

Hoje você:

✔️ Aprendeu a usar MediaUpload para imagens
✔️ Incorporou ícones SVG diretamente no bloco
✔️ Deu liberdade total com classes CSS externas

💬 Curtiu o conteúdo?

Se quiser que seu plugin WordPress tenha esse nível de controle, interação e organização, bora conversar.

👉 Deixe seu comentário abaixo!