Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

WordPress Extremo: Gutenberg + React + Blocos Customizados

Bloco de Posts com Filtro por Múltiplas Categorias

Filtrando Posts por Categoria no Editor do Bloco

Bloco Dinâmico com Renderização no Servidor

Conectando Blocos com a REST API do WordPress

Componentes Reutilizáveis e Atributos Compostos em Blocos Gutenberg

Ícones, Imagens e Classes Personalizadas no Gutenberg

Cor, Alinhamento e Estilo Dinâmico com Gutenberg + React

Estilizando Blocos Gutenberg com CSS e Classes Dinâmicas

Campos Dinâmicos e InspectorControls no Gutenberg: Deixe Seu Bloco Interativo

Criando Blocos Personalizados com Gutenberg e React

Salvando Dados Personalizados no Backend via REST API

Blocos Reutilizáveis com InnerBlocks no Gutenberg

Comunicação entre Blocos com Block Context API no WordPress

Como Criar Blocos Condicionais no Gutenberg com Atributos

Internationalização de Blocos Gutenberg (i18n)

Scripts e Estilos Condicionais: Carregando apenas quando necessário

Uso de Slots e Templates Personalizados

Inserindo Blocos via Código ou Shortcodes

Testes e Validação de Blocos com @wordpress/scripts

Distribuindo Seus Blocos: Plugins, Repositório e GitHub

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!