Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Bora! Chegamos ao Dia 9/14 da Trilha WordPress Extremo — e agora que já temos um bloco funcional e dinâmico, vamos deixá-lo mais profissional e estilizado, com CSS modular e atributos que influenciam o visual.

🧠 Dia 9 – Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Criar blocos funcionais é ótimo. Mas blocos profissionais também precisam ter design, responsividade e, de preferência, estilos que se adaptam aos atributos definidos.

Hoje vamos:

• Criar uma folha de estilos específica do bloco
• Usar className dinâmico baseado nos atributos
• Garantir que o bloco fique bonito no editor e no front

✅ O que você vai aprender hoje

• Como carregar CSS com block.json
• Como organizar os estilos em cada bloco
• Como aplicar classes dinamicamente com base em atributos
• Como estilizar de forma segura, isolada e profissional

📦 Estrutura do bloco hello atualizada

blocks/hello/
├── block.json
├── index.js
├── edit.js
├── save.js
├── style.css         ✅ Estilos para o frontend
├── editor.css        ✅ Estilos específicos para o editor Gutenberg
└── build/hello.js    ✅ Script compilado (via npm run build)

1️⃣ Criando os arquivos de estilo

📄 blocks/hello/style.css

.wp-block-wp24h-hello {
  padding: 1rem;
  background-color: #f0f4ff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
}

.wp-block-wp24h-hello.is-highlighted {
  background-color: #cce5ff;
  border-color: #66b0ff;
}

📄 blocks/hello/editor.css

.wp-block-wp24h-hello {
  outline: 1px dashed #aaa;
}

2️⃣ Referenciando os estilos no block.json

Atualize seu block.json:

{
  "apiVersion": 2,
  "name": "wp24h/hello",
  "title": "Bloco Hello WP24H",
  "category": "widgets",
  "icon": "smiley",
  "description": "Um bloco estilizado com atributos dinâmicos.",
  "editorScript": "file:./build/hello.js",
  "style": "file:./style.css",
  "editorStyle": "file:./editor.css",
  "attributes": {
    "mensagem": {
      "type": "string",
      "default": "Olá do WP24Horas!"
    },
    "destaque": {
      "type": "boolean",
      "default": false
    }
  }
}

3️⃣ Atualizando o bloco no editor (edit.js)

Vamos adicionar um ToggleControl para ativar ou desativar o destaque:

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

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

  const classes = [
    'wp-block-wp24h-hello',
    destaque ? 'is-highlighted' : ''
  ].join(' ').trim();

  return (
    <>
      <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 })}
          />
        </PanelBody>
      </InspectorControls>

      <div { ...useBlockProps({ className: classes }) }>
        <p>{ mensagem }</p>
      </div>
    </>
  );
}

4️⃣ Salvando com className dinâmico (save.js)

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

export default function save({ attributes }) {
  const { mensagem, destaque } = attributes;

  const classes = [
    'wp-block-wp24h-hello',
    destaque ? 'is-highlighted' : ''
  ].join(' ').trim();

  return (
    <div {...useBlockProps.save({ className: classes })}>
      <p>{ mensagem }</p>
    </div>
  );
}

5️⃣ Compilar

npm run build

6️⃣ Resultado

• No editor, o usuário pode escrever uma mensagem e ativar/desativar o destaque
• O estilo muda com base no atributo destaque
• No front, a estilização é mantida graças ao style.css

✅ Conclusão do Dia 9

Hoje você aprendeu a:

✔️ Estilizar blocos com CSS isolado
✔️ Aplicar classes baseadas em atributos
✔️ Organizar seu bloco de forma profissional e modular

💬 Curtiu o conteúdo?

Esse é o tipo de estrutura que ensino com profundidade nos cursos e mentorias.
Deixe seu comentário abaixo sobre o que achou!